Membuat Feature Post Slide Seperti Seocips di Blog

Cara membuat slider featured post seperti Seocips di Blogger terbaru, memang sebelumnya saya ingin membagikan atau share tutorial ini, di karenakan jarangnya membuka template Seocips jadi saya lupa terus, jadi kali ini mumpung saya lagi inget, saya membagikan tutorial mmbuat feature post slider seperti Seocips.

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>

Related Post