Membuat Feature Post Slide Seperti Seocips di Blog

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Feature Post Slide Seperti Seocips di Blog, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Desain Blog, HTML, Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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>

Baca Juga

Demikianlah Artikel: Membuat Feature Post Slide Seperti Seocips di Blog

kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Feature Post Slide Seperti Seocips di Blog dengan alamat link https://blog-kita-semuaa.blogspot.com/2017/04/membuat-feature-post-slide-seperti.html

Share :