Cara Memasang Featured Post Image slider - Post Image slider Simple Tutorial

Featured Post Image Slider atau bisa juga di sebut featured post otomatis di layar awal tampilan blog yang sering kita temukan pada setiap template berita. Untuk memberikan kemudahan bagi pengguna (pembaca blog) maka Post image slider otomatis ini, sangat berguna untuk memberikan ruang kecil tentang isi artikel anda.

Slider image otomatis di blog sebenarnya tidak terlalu penting juga karena jarang sekali dibuka oleh penggunjung original. Slide image post ini hanya untuk memperindah tampilan, tidak SEO dan user friendly namun tidak berisiko jika anda pasang. Dan hanya akan memberikan kenyamanan user bagi yang suka melihat dengan keindahan blog.

Featured Post Image Slider ini, adalah tampilan dari template N-light versi premium dari arlina design, untuk bisa melihat tampilan nya silahkan anda lihat demo nya pada tombol dibawah ini.

Untuk cara pemasangan slider image post ini, sobat hanya perlu menggikuti langkah yang saya berikan dibawah berikut.

Tutorial memasang Featured Post image slider otomatis di blogspot

Langkah pertama: Silahkan salin dulu kode CSS yang ada di bawah berikut.

/* Arlina Featured Post */
#featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px}
.featured-post a{font-size:1.2em;color:#fff;}
.featured-post a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-post a{margin:0;font-size:17px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.featured-post .secondary-post{background:#dadada;width:32%;margin:0 0 20px 0;transition:all .4s}
.featured-post .main-post{background:#dadada;width:65.9%;padding:0;transition:all .4s}
.featured-post .main-post:before,.featured-post .secondary-post:before{bottom:0;content:"";display:block;height:50%;width:100%;position:absolute;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%)}
.featured-post .main-post:after,.featured-post .secondary-post:after{content:'';background-color:rgba(0,0,0,0.2);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:1;opacity:0;visibility:hidden;transform:scale(0.8);transition:all 0.20s linear}
.featured-post .main-post:hover:after,.featured-post .secondary-post:hover:after{opacity:1;visibility:visible;transform:scale(1.0)}
.featured-post span{background:rgba(0,0,0,0.3);display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2}
.featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#34495e;}
.featured-post img{height:100%;transition:all .5s}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover;}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%;}
.featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;}
.featured-post header{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;}
.featured-post .secondary-post header{padding:10px}
.featured-post header h3{font-size:20px;}
.featured-post h4{font-size:13px;}
span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;}

Langkah kedua: Klik dashbor blog Tema - Edit HMTL. Cari kode ]]></b:skin> atau </style> dengan menekan tombol Ctrl+F. Lalu paste kode CSS yang sebelumnya sudah anda copy tadi di bagian atas kode ]]></b:skin> atau </style>

Langkah ketiga: Copy lagi kode Jquery yang ada di bawah berikut.

<script>
//<![CDATA[
var _0x16a3=["\x3C","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x72\x61\x6E\x64\x6F\x6D","\x66\x6C\x6F\x6F\x72","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x74\x65\x72\x6D","\x63\x61\x74\x65\x67\x6F\x72\x79","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x69\x6E\x6B","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x72\x65\x6C","\x68\x72\x65\x66","\x72\x65\x70\x6C\x69\x65\x73","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x74\x79\x70\x65","\x20","\x63\x6F\x6E\x74\x65\x6E\x74","\x73\x75\x6D\x6D\x61\x72\x79","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x3C\x69\x6D\x67","\x73\x72\x63\x3D\x22","\x22","\x73\x75\x62\x73\x74\x72","\x4A\x61\x6E","\x46\x65\x62","\x4D\x61\x72","\x41\x70\x72","\x4D\x61\x79","\x4A\x75\x6E","\x4A\x75\x6C","\x41\x75\x67","\x53\x65\x70","\x4F\x63\x74","\x4E\x6F\x76","\x44\x65\x63","\x2D","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x69\x6E\x2D\x70\x6F\x73\x74\x20\x63\x6F\x6C\x2D\x70\x6F\x73\x74\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x6C\x75\x65\x22\x3E","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x33\x35\x30\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x36\x34\x30\x22\x20\x61\x6C\x74\x3D\x22\x22\x3E\x3C\x2F\x69\x6D\x67\x3E\x3C\x2F\x61\x3E\x3C\x68\x65\x61\x64\x65\x72\x3E\x3C\x68\x33\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x6E\x74\x72\x79\x2D\x74\x69\x74\x6C\x65\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x33\x3E\x3C\x2F\x68\x65\x61\x64\x65\x72\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x65\x63\x6F\x6E\x64\x61\x72\x79\x2D\x70\x6F\x73\x74\x20\x63\x6F\x6C\x2D\x70\x6F\x73\x74\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x72\x69\x67\x68\x74\x3A\x30\x22\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x6C\x75\x65\x22\x3E","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x68\x6F\x76\x65\x72\x5F\x70\x6C\x61\x79\x5F\x73\x6D\x61\x6C\x6C\x22\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x32\x30\x30\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x33\x32\x30\x22\x3E\x3C\x2F\x69\x6D\x67\x3E\x3C\x2F\x61\x3E\x3C\x68\x65\x61\x64\x65\x72\x3E\x3C\x68\x34\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x34\x3E\x3C\x2F\x68\x65\x61\x64\x65\x72\x3E\x3C\x2F\x64\x69\x76\x3E","\x68\x74\x74\x70\x3A\x2F\x2F\x73\x69\x74\x65\x73\x2E\x67\x6F\x6F\x67\x6C\x65\x2E\x63\x6F\x6D\x2F\x73\x69\x74\x65\x2F\x66\x64\x62\x6C\x6F\x67\x73\x69\x74\x65\x2F\x48\x6F\x6D\x65\x2F\x6E\x6F\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x2E\x67\x69\x66","\x33"];function removeHtmlTag(_0x98b3x2,_0x98b3x3){for(var _0x98b3x4=_0x98b3x2[_0x16a3[1]](_0x16a3[0]),_0x98b3x5=0;_0x98b3x5<_0x98b3x4 _0x98b3x3="0;_0x98b3x3<maxpost;_0x98b3x3++){var" _0x98b3x4="_0x98b3x4[_0x16a3[7]](_0x16a3[6]),_0x98b3x4=_0x98b3x4[_0x16a3[5]](0,_0x98b3x3-1)}function" _0x98b3x5="" _0x98b3x8="" _0x98b3xb="0;_0x98b3xb<_0x98b3x8[_0x16a3[16]][_0x16a3[2]];_0x98b3xb++){if(_0x16a3[20]==_0x98b3x8[_0x16a3[16]][_0x98b3xb][_0x16a3[18]]&&_0x16a3[21]==_0x98b3x8[_0x16a3[16]][_0x98b3xb][_0x16a3[22]]){_0x98b3x5=_0x98b3x8[_0x16a3[16]][_0x98b3xb][_0x16a3[15]][_0x16a3[1]](_0x16a3[23])[0];break}};if(_0x16a3[24]" _0x98b3xc="_0x16a3[6]}};postdate=_0x98b3x8[_0x16a3[26]][_0x16a3[14]],j" array="" if="" in="" j="showRandomImg?Math[_0x16a3[9]]((imgr[_0x16a3[2]]+1)*Math[_0x16a3[8]]()):0,img=" maxpost="numposts1:maxpost=_0x98b3x2[_0x16a3[11]][_0x16a3[10]][_0x16a3[2]];for(var" new="" numposts1="" return="" sliderposts="" var="" x16a3="" x98b3x2="" x98b3x4="" x98b3x5="" x98b3x7="" x98b3x8="_0x98b3x2[_0x16a3[11]][_0x16a3[10]][_0x98b3x3],_0x98b3x9=_0x98b3x8[_0x16a3[13]][0][_0x16a3[12]],_0x98b3xa=_0x98b3x8[_0x16a3[15]][_0x16a3[14]];if(_0x98b3x3==_0x98b3x2[_0x16a3[11]][_0x16a3[10]][_0x16a3[2]]){break};for(var">imgr[_0x16a3[2]]-1&&(j=0),img[_0x98b3x3]=imgr[j],s=_0x98b3xc,a=s[_0x16a3[4]](_0x16a3[27]),b=s[_0x16a3[4]](_0x16a3[28],a),c=s[_0x16a3[4]](_0x16a3[29],b+5),d=s[_0x16a3[30]](b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&_0x16a3[6]!=d&&(img[_0x98b3x3]=d);for(var _0x98b3xd=[1,2,3,4,5,6,7,8,9,10,11,12],_0x98b3xe=[_0x16a3[31],_0x16a3[32],_0x16a3[33],_0x16a3[34],_0x16a3[35],_0x16a3[36],_0x16a3[37],_0x16a3[38],_0x16a3[39],_0x16a3[40],_0x16a3[41],_0x16a3[42]],_0x98b3xf=(postdate[_0x16a3[1]](_0x16a3[43])[2][_0x16a3[5]](0,2),postdate[_0x16a3[1]](_0x16a3[43])[1]),_0x98b3x10=(postdate[_0x16a3[1]](_0x16a3[43])[0],0);_0x98b3x10<_0x98b3xd _0x98b3x11="_0x16a3[51]+_0x98b3x9+_0x16a3[52]+_0x98b3x7+_0x16a3[53]+img[_0x98b3x3]+_0x16a3[54]+_0x98b3x7+_0x16a3[55]+_0x98b3xa+_0x16a3[56];document[_0x16a3[50]](_0x98b3x11)};j++}}imgr=" array="" if="" imgr="" new="" parseint="" showrandomimg="!0,aBold=" summarypost="150,summaryTitle=50,numposts1=10,featured_numposts=_0x16a3[58]" var="" x16a3="" x98b3x10="" x98b3xd="" x98b3xf="_0x98b3xe[_0x98b3x10];break}};if(0==_0x98b3x3){var">
</script>

Langkah keempat: Buka lagi bagian Edit HMTL dan cari kode </head> menggunakan Ctrl+F. Apabila sudah ketemu, paste kode Jquery yang sudah anda copy tadi sebelumnya, tepat di bagian atas kode </head>.

Langkah kelima: Masih dalam tahap Edit HMTL, copy lagi kode HMTL yang saya berikan dibawah ini.

<div class="ct-wrapper" id="featured-posts-section">

<script type="text/javaScript">
document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>                                                                                                                                
<div>
<div>

Selanjutnya silahkan anda cari kode <div id="content-wrapper"> dengan menggunakan Ctrl+F. Jika sudah ketemu, silahkan anda paste kode HMTL tadi di bagian atas.

Langkah terakhir: Simpan template dan selesai

Sekarang Featured Post Image Slider Otomatis sudah terpasang di blog anda. untuk menyesuaikan ukuran template anda, silahkan Edit bagian kode CSS yang ada di bagian langkah pertama tadi.