Slide Rekomendasi ini sedikit berbeda dengan Slide Rekomendasi yang sebelumnya saya bagikan, karena slide ini menggunakan fungsi slide auto image sesuai postingan terbaru. Jika blog Anda sudah mempunyai banyak artikel rasanya sangat tepat mengunakan slide rekomendasi ini, dan pasti slide ini sudah saya gabungkan tombol back to top sehingga jika blog Anda ada pasang back to top silakan dilepas.
01. Pertama-tama pastikan blog Anda sudah menggunakan Font Arimo, jika belum silakan pasang font bawah ini tepat diatas
<head>, namun jika sudah maka abaikan saja langkah ini.<link href='http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>02. Simpan CSS ini di atas
]]></b:skin>#leoslidecousele{background:#fff;transition:all .3s ease-in;width:420px;height:230px;position:fixed;overflow:hidden;right:-480px;z-index:999;text-align:left!important;letter-spacing:0;margin-right:25px;box-shadow: 0px 0px 10px 0px rgba(235,191,235,1);border-radius:3px;}
.leoslidecousele-title{background:#537BC9;color:#fff;border-bottom:5px solid #0B5257;display:block;height:30px;width:100%;font: 22px Roboto;text-transform:uppercase;padding:6px 30px 6px 0;}
.leoslidecousele-title span a{float:right;height:40px;width:25px;}
a#leoslidecousele-close, a#leoslidecousele-close {margin-right:26px;margin-top:-11px;}
.leoslidecousele-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.leoslidecousele-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.leoslidecousele-container{border:none;float:left;width:100%;height:auto;margin:3px}
.leoslidecousele-container > div{border:none;height:40px;margin:3px;padding:10px;}
.leoslidecousele-container > div > span {font-size:14px;}
.leoslidecousele-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
#featured-wrap{background:none;position:relative;height:175px;margin:0 auto;margin-top:-10px}
#featured{position:relative;width:100%;height:150px;overflow:hidden;top:0px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:200px;display:inline-block;float:left;height:150px;background:#fff;}
.thumb-featured{width:190px;height:100px;overflow:hidden;}
.thumb-featured img{display:block;width:190px;height:96px;}
.title-featured{text-align:left;position:relative;margin-top:-16px;padding:5px}
.title-featured h4{font:13px Arimo;max-height:45px;overflow:hidden}
.title-featured a {color:#333}
.title-featured a:hover {color:#591073}
.arrow{position:absolute;display:block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKy8l19JYV8nYh4TyyMgU6FmYQnuj4TDpHjHK9OB_QmQy8nUdlorGc-UG2lUlSYVaiOsAs1frzwapk5ijjuegGJ8M0XoA1wS1ewICogdU2ptSpdlOuwn5iElxiI9GH5Xry7EYtL3qUF_o/s1600/Prevnext.png)no-repeat;background-position:0 50%;width:20px;height:20px;top:160px;text-indent:-9999px;}
.arrow.back{background-position:0 50%;left:360px;}
.arrow.back:hover{opacity:.6;}
.arrow.forward{background-position:100% 50%;right:15px}
.arrow.forward:hover{opacity:.6;}
#BounceToTop{float:right;margin-top:4px;margin-right:-10px; cursor:pointer;display:none}
#BounceToTop:hover{opacity:.6;}03. Simpan Js bawah ini tepat diatas
</head><script type='text/javascript' src='http://yourjavascript.com/1252305641/leoslidebox.js'/>
<script type='text/javascript'>
//<![CDATA[
var numpostx = 20,
thumbSize = 300,
contjumlah = 0,
cmtext = "Comments",
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBM8TJVlGSz0tAgIrnyjv9KEy-GSepjzafeB0sCV77iSUaT7gv6_h9QeNZSJSLFqyuNtsaQ9uB2N8ATMrepgaLjaKC53PquuhRy2CsrGHg6Js28bpM8FgGZz_95gtU7mVReSqIX7BGyw/h120/no-image.jpg",
pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWx3Bmw1iEa12gXD7Omk3vt7k1M1y-DJwBwRHkbqHqqMwFvhhThbeNQgxhIbEb3au9R-9nDYlF8BY0KmkmGLbmQEQAdMR4L6qug2P64Kf61_d_uvpmzfpBxja3La4ZjdQorecWYrzhcN4/h120/no-avatar.jpg",
numcomment = 5,
thumbcsize = 140,
cmsumm = 100;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumb-featured"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"title="'+b+'" /></span></a></div><div class="title-featured"><h4><a href="'+k+'" title="'+b+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#featured").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},400,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#featured-wrap").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#featured-wrap").trigger("next")}},6000)}else{$("#featured").html("<span>No result!</span>")}},error:function(){$("#featured").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+m+'"><span><img src="'+a+'" title="'+g+'" alt="'+g+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'" title="'+g+'" class="tooltip">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>04. Langkah terakhir silakan cari
</body> dan pasang kode pemanggil ini tepat diatasnya.<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='leoslidecousele'>
<div class='leoslidecousele-title leoslidecousele-www'>
<span style='float:left;margin:3px 0 0 17px;'>Breaking News</span>
<span><a href='javascript:void(0);' id='leoslidecousele-close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpC4Cahsw5HEI-FHpi4Yc3A2UCyrJRCDNvUKlp2GuuTVPOE2vmtwmy6M9GTGhBLQLxyqQq-9CoFnJBffK572fGG6M4efYURVXcyFQHSO-2Lz6FDBD5wHwtHevZCLD6qwpoFAf_rFWpto4E/s1600/xclose.png'/></a></span>
<span><div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj82nC3GDCWSPu-bavCCZl4o0AydGhcTxV7nwstj2m_OYQ06M4NLvTZJHFZZaObFJcNNTqr9B4hiYJ_yNK1Mi0w4AI-X7LzinxFnZiTGRwFKq3M7NxxhPQYyUBfwEGOF3YQDtGIgaIIhGws/s1600/totop.png'/></div></span></div>
<div class='leoslidecousele-container'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'/>
</div>
</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
</div>
</div>
</b:if>Simpan dan lihat hasilnya, masih ada pertanyaan? Silakan tinggalkan komentar Anda dibawah ini.
