Cara Memasang Featured Post Slider Image Blogger - Featured post image slider yang berada di bagian laman awal beranda blog, sebenarnya tidak terlalu penting untuk di terapkan pada blog anda, namun jika anda menyukai dengan tampilan tersebut silahkan anda ikuti tutorial yang akan saya bagikan di bawah ini.
Langkah pertama yang perlu anda lakukan adalah menyalin kode CSS yang ada di kotak bagian bawah ini.
/* 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;}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><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>
Simpan template dan selesai