سلايد شو جميل و تلقائي لمدونات بلوجر 2016
في هذه التدوينة سنطرح من خلالها إضافة رائعة وجد أساسية تقوم بعرض جميع المواضيع بطريقة جميلة وتتمثل أهميتها بكونها تعرض أهم المواضيع المميزة حسب التسمية و لاننسا شكلها الذي يعطي للمدونة رونقا وجمالا بحيث يعرض المقالات بوثيرة جد جدابة طريقة الإضافة سهلة نمر إليها
- لوحة التحكم//القالب//تحرير html
- إبحث عن ]]></b:skin> بستعمال ctrl+f وأضف هذا الكود فوق
.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; }
ثم إبحث عن </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/AVvXsEh-2vy7OI7vW91q6R8DZSCjdYXkQE62NyqMU28Rfo-yxh3TfRwyKxUrktfJLHyASKKzCJo_ysR8FPfoffrSL3WzY_0J7vump1ILi1uggXKujVWzbKaj5bU72kqj5esPO9KRIA-eLUqs9E4/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>
الكود الأخير عليك أن تضعه في المكان الذي يناسبك و أحسن مكان هو فوق المواضيع كما بالمعاينة لذا إن أردت وضعه هناك فابحث عن <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("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>"); </script> </div> <div class='descriptionslider'> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </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>
تعليقات: 0
إرسال تعليق