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><link href='http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>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/AVvXsEihlJA3hzhpbDfS6wkMtzIOpYNlIdNvyGANiyHs5rV8-DPF2oIuYIqyHPn7S0pwRHkR7xIo6VNWlWOA5PMyOWMPbHRCYGCCgvTOu7ztqWXu_Mle5k3-cn_MwK0UUfP46HJQl9NC1X8_-M0/h120/no-image.jpg",
pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDeXGQkBUhVHVE2EXNegYXypyaEb0vkynjwRpWDUNltvUI5VKDR0sKQmbTyQgU6rw5SMyyKhnGgWnvYjSVsdzGcfz4g3h_04shB3N1v17X27okpQ_T-jZM0ZcgWBzeix9Rae3j8-5ajY/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/AVvXsEgyUrkLgdfoa_t51wlDNXqQYDWLRrLwitvI2gxSNk7WR9wbmqJ4uK9iZZJCH68ACXRebot1t9PVnei7K6Dz0Z5NxSCV0tBHxfZIf2PqLEaNZPs4aSIG9dwcRtLXMOiWKpB7phhBRsHUHXWv/s1600/xclose.png'/></a></span>
<span><div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzAMfa8WSprVL4W4-Ju-QhukZwg-CQRRdExVjccU_MRizVRb6pRnE4dr69c0nIkPEggAdKVBOUTF4NOxa8p08LijFZyVlkWWuV0CbSmXbJWMBMMzzc81vDYucy4duUncRU_MQLbA5dGxxS/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
0 komentar:
Post a Comment