Hallo!
Kali ini gw mau bagiin tutorial cara untuk menambahkan slider (slide show) recent post yang terbilang keren untuk dipasang di blog. Contoh penggunaanya, kalian bisa lihat sendiri pada bagian home blog ini. Slider yang gw pasang itu, adalah slider yang kali ini bakalan gw bahas. Slider ini bukan gw pribadi yang buat, tapi gw temuin di salah satu blog orang lain. Bila kalian penasaran, kalian bisa kunjungi blog beliau, yakni Santos Blog atau bisa juga di Blog Orang IT.
Berikut ini sekilas tampilan slider recent post yang gw maksud;
Yakk, tampilan slidernya adalah seperti itu. Slider ini menurut gw langka dan ga mudah dicari buat saat artikel ini ditulis, entah kedepannya mungkin sudah banyak beredar. Langsung aja kita menuju ke tutorial membuat slider atau slide show yang terbilang keren menurut gw ini. Simak lebih lanjut artikel ini ya.
Membuat Slider Recent Post di Blog
Tujuan dari pemasangan slider recent post ini di suatu blog/web ialah untuk mempercantik suatu situs tersebut. Namun, lebih dari sekedar mempercantik, pemasangan slider ini juga bertujuan untuk menampilkan beberapa artikel atau postingan, baik yang terbaru, pilihan, ataupun berdasarkan label atau kategori yang dipilih. Tentunya dengan penerapan slider ini, maka akan sedikit membantu pembaca untuk melihat sekilas postingan yang ada pada blog kalian. Slider recent post biasanya sudah ada juga pada bawaan template suatu blog. Namun, memang ada juga template yang tidak menyertakan slider. Maka dari itu, kalian bisa memasangnya sendiri secara manual bilamana kalian menginginkan adanya slider ini.
Untuk membuat Slider ini, Copy-Paste kan kode script berikut ini;
<style>
#featuredpost {margin:15px auto;margin-top:0px;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative;border:1px solid #fff}
#slides ul{height:300px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:17px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:25px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:5px;margin:0;font-size:13px;font-family:'Oswald';
left:5px;padding:5px 5px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(0,0,0,0.3);text-align:left;text-transform:uppercase;margin-right:0px;}
#slides .label_text{font-size:12px;color:#fff;bottom:5px;z-index:3;left:5px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none;}.label_text{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4{font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:425px;margin-top:5px;}
#slides li:nth-child(1){width:100%;height:65%}
#slides li:nth-child(2){top:65%;height:35%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:65%;width:50%;height:35%}
#slides li:nth-child(4){display:none;}
#slides li:nth-child(5){display:none;}
}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:15px;line-height:20px;}}
</style>
<script>
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://lokal-tutorial.my.id/",
MaxPost:20,
idcontaint:"#featuredpost",
ImageSize:300,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>
*) NB :
- Gantilah tulisan yang gw beri tebal underline itu dengan link situs kalian.
- Untuk MaxPost:20, itu, adalah maksimal judul artikel yang akan muncul di slider. Kalian bisa ubah sesuka kalian.
- Untuk ImageSize:300, itu, adalah ukuran dari gambar atau thumbnail postingan atau artikel yang akan dimunculkan. Silakan kalian bisa ubah-ubah juga.
- Untuk interval:10000, itu, adalah angka dari kecepatan pergerakan slider. Kalian bisa ubah-ubah juga, bila menurut kalian terlalu lambat, maka kalian bisa mengurangi, misal menjadi 5000. Sebaliknya, bila kecepatan, maka kalian bisa menambahnya, misal 15000.dst..
- Untuk tagName:false, kalian bisa mengubahnya, bilamana kalian ingin yang ditampilkan dalam slider adalah postingan atau artikel yang berada dalam satu label (kategori) saja. Misalnya, kalian hanya ingin menggunakan artikel berketegori blog, maka kalian ubah tulisan false itu menjadi "blog" (ingat pakai tanda petik dua ya).
Berikut ini langkah-langkah untuk membuat slider recent post di blog kalian:
- Buka blogger
- Setelah masuk blogger, kalian pilih "Tata Letak"
- Kemudian, silakan kalian pilih, mau ditaruh dimana atau akan muncul dimana slider ini. Biasanya diletakkan di bawah header. Namun, tidak menutup kemungkinan bila ingin ditaruh di posisi lain. Silakan kalian Klik "+ Tambahkan Gadget"
- Pilih "HTML/JavaScript"
- Lalu, paste kan kode/script yang sudah kalian copy sebelumnya. Untuk bagian "Judul" bisa kalian kosongi saja.
- Setelah itu, klik simpan dan lihat hasilnya..
Baca juga:
Demikian cara untuk membuat slider (slide show) keren di blogger 2021. Bila ada pertanyaan silakan tanyakan pada kolom komentar. Semoga bermanfaat, sekian dan Terima kasih.
