Tutorial Cara Memasang Featured Post Slider Image Blogger

Namecheap.com
Tutorial Cara Memasang Featured Post Slider Image Blogger

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;}
Klik dashbor blog Tema - Edit HMTL. Cari kode ]]>
atau dengan menekan tombol Ctrl+F. Lalu paste kode CSS yang sebelumnya sudah anda copy tadi di bagian atas kode ]]></b:skin> atau </style>
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>
Buka lagi bagian Edit HMTL dan cari kode </head> menggunakan Ctrl+F. Apabila sudah ketemu, paste kode Jquery yang sudah anda copy tadi, tepat di bagian atas kode </head>
<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>
Lalu silahkan anda cari lagi kode <div id="content-wrapper"> dengan menggunakan CTRL+F. Apabila sudah ketemu, silahkan anda paste kode HMTL tadi tepat dibagian atas <div id="content-wrapper">
Simpan template dan selesai

Sumber...

Subscribe to receive free email updates:

0 Response to "Tutorial Cara Memasang Featured Post Slider Image Blogger"

Post a Comment