سلايد شو تلقائي الإصدار 2

نواصل مع الإصدار الثاني من السلايدرات مع هذا السلايدر الجميل والبسيط سيجعل موقعك ينبض بالحياة 😁 يتميز بمرونته وتناسقه مع أي قالب وكذلك جلبه للمواضيع تلقائيا محدودة في 5 مشاركات، هناك من لم يعجبه سلايدر Nivo بسبب عرضه للمواضيع بحسب التسمية لذا هذا السلايدر سيفي بالغرض ويلبي المطلوب.
لا حاجة لأن أطول عليكم سأدع السلايدر يتكلم بدلا عني بالمعاينة

معاينة

1. شرح طريقة التركيب 1. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع كود الشكل المختار فوقه

.coolslider-ar1web-wrapper { width: auto; float:right; position: relative; padding-right: 2%; padding-top: 10px; } 
.coolslider-ar1web { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .ar1web_img { position: absolute; top: 0; left: 0; } .ar1web_img img { float: left; width: 20%; height: 350px; } .paging-ar1web { background: none; position: absolute; bottom: 15px; left: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging-ar1web a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging-ar1web a.active { background: #0099CC; border: 1px solid #0099CC; } .paging-ar1web a:hover { } .cooltitlear1web { width:70%; display: none; position: absolute; bottom: 20px; right: 20px; z-index: 101; background: #383637; padding: 10px 15px;     direction: rtl;} .cooltitlear1web a { color: #0099CC; text-transform: uppercase; font-weight: bold; font-size: 15px; } .cooltitlear1web a:hover { color:#eee } .cooltitlear1web p { color: #fff; }

 
.coolslider-ar1web-wrapper { width: auto; float:right; position: relative; padding-right: 2%; padding-top: 10px; } 
.coolslider-ar1web { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .ar1web_img { position: absolute; top: 0; left: 0; } .ar1web_img img { float: left; width: 20%; height: 350px; } .paging-ar1web { background: none; position: absolute; top: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging-ar1web a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging-ar1web a.active { background: #0099CC; border: 1px solid #0099CC; } .paging-ar1web a:hover { } .cooltitlear1web { width:100%; display: none; position: absolute; bottom: 0; z-index: 101; background: #383637; padding: 10px 15px; direction: rtl;} .cooltitlear1web a { color: #0099CC; text-transform: uppercase; font-weight: bold; font-size: 15px; } .cooltitlear1web a:hover { color:#eee } .cooltitlear1web p { color: #fff; }

2. ابحث عن </head> وضع قبله الكود التالي

<script src='//cdn.rawgit.com/iHussam/ar1web/master/cool-slider.js'/>
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIJndBUEkkOub9dk2Oqqy2OhAxNzzX69WVIbfcZ15ujU2Go-_fH68mlwp2jGyxEn6Sdpvon81W5NuCZliOOWERXCcPU0ai_InTxxmZsGQBSQQ6cJ6jcNGugvl7R7GjqJYJQDJ1gW0B4Q/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;
function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s =  s.join("");s = s.substring(0,chop-1);return s;}
function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }}
for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="cooltitlear1web"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}}
function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href;  break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
//]]></script>

3. يتمثل الكود التالي في وضعه بالمكان المناسب لك وأفضل مكانه له هو فوق المواضيع كما بالمعاينة لذا إن أردت وضعه هناك فابحث عن <b:section class='main' id='main' showaddelement='no'> بعدها ضع الكود فوقه إن وجدت فوقه كود مثلا : <div id='main-wrapper'> فضع الكود فوقه

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='coolslider-ar1web'>
   <div class='ar1web_img'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
   </div>
   <div class='descriptionslider'>
<script>         
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
   </div>
   <div class='paging-ar1web'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

سلايد شو تلقائي الإصدار 2

معلومات عن التدوينة

احدث التعليقات

الاكثر زيارة

الصفحات

متابعينا الاوفياء