Featured Post Menarik dengan CSS dan jQuery

Desain yang menarik pada sebuah blog dapat membuat pembaca nyaman dalam menikmati bacaan yang anda sajikan. Banyak blogger menambahkan fitur-fitur bagi blog mereka. Fitur yang biasanya ada yaitu fitur featured post.
Nah kali ini saya akan membagikan featured post yang memiliki tampilan yang berbeda dari biasanya. Tampilan dari featured ini menggunakan CSS pseudo nth-child untuk mengatur lebar dari tiap tampilannya.
Featured post seperti sudah saya terapkan pada template MyTimeLine.

Konsep dari featured post ini seperti gambar barikut:

Bagi anda yang tertarik untuk memasang diblog anda bisa ikuti cara berikut ini:

Menampilkan Add a Gadget diatas Blog Post

 

 Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:

1. Pada dashbord pilih Template kemudian klik tombol Edit HTML
2. Kemudian cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini <b:section class='main' id='main' showaddelement='yes'>
   NB: Untuk mempermudah dalam pencarian tekan Ctrl+F pada keyboard lalu tulis <b:section class='main' id='main' showaddelement='no'>.
3. Klik Simpan

Menambahkan gadget HTML dan Script Featured Post

 

1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
2. Setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan
3. Kemudian Masukkan Kode berikut:

<style scoped="" type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://zakyesta.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

NB: Pada warna biru adalah kode untuk responsive. Kode
 itu jalan ketika tampilan layar kurang dari 600px. jika tidak ingin 
menyertakan fungsi responsive silahkan hapus kode warna biru.Pada kode warna kuning terang adalah link script jQuery library. Jika di template anda 
sudah ada silahkan hapus kode ini. Karena pemasangan lebih dari 1 jQuery
 Library dapat membuat error

 Klik Simpan

Membungkus Gadget HTML dengan Tag Kondisional

 

Jika tahap diatas sudah selesai sekarang tahap pembungkusan gadget dengan tag kondisional untuk mengatur dimana saja slideshow ini mau ditampilkan.
Misalnya gadget itu hanya ingin ditampilkan dihalaman depan/beranda cara sebagai berikut

1. Pada dashbord pilih Template kemudian klik tombol Edit HTML dan centang pada bagian Expand Widget Templates
2. Kemudian cari kode <b:section class='main' id='main' showaddelement='yes'>, karena sebelumnya telah ditambahkan HTML widget maka akan terlihat widget type HTML dengan id HTMLxx (xx: nomor widget HTML).
   Misalnya widget HTML dengan id HTML5 yang akan saya tambahkan tag kondisional hanya pada halaman depan/beranda
   Maka akan menjadi seperti ini:

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

klik simpan

 hasil percobaan diatas 

 sumber : mkr-site.com