Membuat Featured Post Slide Keren dan Work 100% di Blog

Seperti feature post pada umumnya, semua orang pasti ingin feature postnya memiliki disain yang unik dan jarang di pakai atau di gunakan oleg orang banyak, feature post ini menampilkan postingan perlabel bukan hanya perlabel feature post ini memiliki mix label, yakni nantinya postingan label Anda dapat berganti dengan sendirinya dengan cara refresh.

Membuat Feature Post Slider di Blogger

Langkah pertama :
Login ke Blogger > Tema > Edit HTML. Lalu Copy CSS dibawah ini tepat di bawah kode </style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<style  type='text/css'>
/*Featpost*/
#slide1-wrapper .widget > h4 { display:none; }
#slide1-wrapper{width:98%;background:#333;float:left;word-wrap:break-word;overflow:hidden;border:4px solid #ffcc00;border-radius:4px;}
.slide1 .widget{margin:0;padding:7px;}
.featuredpost { max-height:300px; position:relative; overflow:hidden; }
.featuredpost ul,.featuredpost li,.featuredpost ol { padding:0; margin:0; list-style:none; }
.featuredpost .featpost li { overflow:hidden; height:300px; position:relative; }
.featuredpost .featpost img { width:100%; height:100%; }
.featuredpost .labeltext { bottom:50px; position:absolute; margin-left:10px; max-width:80%; padding:10px; background-color: #333; color:#eee; border:2px solid #ffcc00; border-radius:4px;}
.featuredpost .labeltext strong { font-size:180%; font-weight:bold; }
.featuredpost .labeltext a { color:#ffcc00; text-decoration:none; }
.featuredpost .labeltext p { margin:5px 0 0; }
.featuredpost .flex-control-paging { position:absolute; bottom:10px; right:10px; }
.featuredpost .flex-control-paging li { float:left; margin:0 4px; }
.featuredpost .flex-control-paging a { display:block; background-color:#4178b5; text-indent:-9999px; width:15px; height:15px; cursor:pointer; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; }
.featuredpost .flex-control-paging a.flex-active { background-color:#ffcc00; }
.featuredpost .flex-direction-nav a { top:50%; position:absolute; width:30px; height:30px; margin-top:-15px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:#0b944b; text-indent:-9999px; display:none; }
.featuredpost .flex-direction-nav a.flex-next { right:10px; }
.featuredpost .flex-direction-nav a.flex-prev { left:10px; }
.featuredpost:hover .flex-direction-nav a { display:block; outline:0; }
.featuredpost .flex-direction-nav i { width:0; height:0; position:absolute; top:50%; left:50%; margin-top:-6px; border:6px solid transparent; }
.featuredpost .flex-direction-nav a.flex-next i { margin-left:-2px; border-left-color:#ffcc00; }
.featuredpost .flex-direction-nav a.flex-prev i { margin-left:-10px; border-right-color:#ffcc00; } 
</style>
<script src='https://cdn.rawgit.com/Brando07/share/master/flexslidexyz.js' type='text/javascript'/>

Langkah kedua :

Silakan Anda menuju Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu masukkan kode dibawah ini kedalam kotak tersebut

<div id="featpost"></div>

<script type='text/javascript'>

featuredPostSlide({

idcontaint:"#featpost",

MaxPost:6

});

</script>

Silakan Anda Save, silakan Anda lihat hasilnya. Jika mengalami error atau tidak munculnya feature post tersebut, silakan Anda berkomentar dibawah.

Jika Anda belum mempunyai slot widget, silakan Anda tambahkan kode berikut ini di atas <b:section class='main' id='main'> atau sejenisnya

<b:if cond='data:blog.pageType != &quot;item&quot;'> 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

      <div id='slide1-wrapper'>

<b:section class='slide1' id='slide1' preferred='yes'/>

</div>

<div class='clear'/>

</b:if></b:if>

Jika Anda ingin menjadikan Featured Post ini menjadi permanen, anda bisa meletakkan kode pada Langkah kedua di edit HTML dan letakkan kodenya diatas kode "Blog1"