Sobat. Pada kesempatan lalu telah kita berikan tips membuat featured post dengan sangat mudah. tentu tidak perlu kita jelaskan panjang lebar lagi kegunaan featured post ini. Namun, perlu kita tekankan kembali, bahwa Featured post merupakan kotak halaman muka pada blog, yang isinya berupa posting terbaru, teratas dan terupdate.
Tujuannya tidak lain untuk mempermudah pembaca menerima informasi terupdate dari suatu blog, atau posting tervavorit di dalam blog itu, sesuai dengan kehendak admin.
Pada kesempatan ini, akan kita ulas cara membuat featured post ala Metro Ul Style. Agak berbeda dengan yang biasa, karena featured post kali ini disertai dengan gambar dan berisi lebih dari satu post populer. Jika ingin lebih jelas, silakan lihat live demonya.
Langkah Memasang Featured Post Metro Ul Style (Muncul di semua Page)
#featured-post a{color:#fff}
#featured-post ul{list-style:none;padding:0}
#featured-post ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#featured-post .item-content{background:transparent}
#featured-post .item-thumbnail{background:transparent}
#featured-post .item-content img{width:183px;height:183px}
#featured-post .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#featured-post ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#featured-post ul li:first-child img{height:250px!important;width:250px!important}
#featured-post ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#featured-post ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#featured-post ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url(‘https://lh6.googleusercontent.com/-XE052qluJF4/T5WdnWYnAmI/AAAAAAAAJTg/yzMM76rYjkI/s48/Arrow%2520Right.png’) 305px 7px no-repeat!important}
#featured-post ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}
<div id=”featured-post”><ul><li><div class=”item-content”><div class=”item-thumbnail”><a href=”#“><img src=”http://4.bp.blogspot.com/-jyTdPw4eyG0/U_Ip28AZPRI/AAAAAAAAACw/68dFiAv8hxk/s1600/Humas%2B-%2BPR.jpg” /> </a></div><div class=”item-title”><a href=”http://forumblogindo.blogspot.com/2015/04/cara-cepat-membuat-blog-terindeks.html“>Cara Cepat Indeks Blog ke Google dalam Satu Menit</a></div></div></li>
<li><div class=”item-content”><div class=”item-thumbnail”><a href=”#“><img src=”http://3.bp.blogspot.com/-L1UXT2oy0AU/U_Ipek170hI/AAAAAAAAACo/gjKXv1elT5k/s1600/Email%2Bsaat%2Bliburan%2Bdapat%2Bdihapus.jpg” /> </a></div><div class=”item-title”><a href=”http://forumblogindo.blogspot.com/search/label/Template%20SEO“>Template Super Responsive dan Super SEO</a></div></div></li>
<li><div class=”item-content”><div class=”item-thumbnail”><a href=”#“><img src=”http://2.bp.blogspot.com/-g7XD9vqj00Q/U_InczJ-zVI/AAAAAAAAACc/ApanvbXzgDY/s1600/media%2Bbaru.jpeg” /> </a></div><div class=”item-title”><a href=”http://forumblogindo.blogspot.com/2015/04/cara-membuat-blog-berkualitas-seo-dan.html“>Cara Membuat Blog Berkualitas dan Disukai Google</a></div></div></li>
<li><div class=”item-content”><div class=”item-thumbnail”><a href=”#“><img src=”http://4.bp.blogspot.com/-cW8Q5W5A58Y/U_InAb0mfuI/AAAAAAAAACU/1TMJpSRoZyA/s1600/jurnalistik%2B-%2Bjurnalisme.png” /> </a></div><div class=”item-title”><a href=”http://forumblogindo.blogspot.com/2015/04/cara-memilih-template-blogspot-yang.html“>Cara Memilih Template Blog yang Benar Disukai Google</a></div></div></li>
</ul></div>
10. Cek perubahan blog Sobat.
11. Alhamdulillah, sudah berhasil (sambil senyum Guys)
***.Note:
- Ganti warna merah dengan alamat URL link internal atau eksternal dari blog sobat (misalkan link Url Artikel populer sobat).
- Ganti tanda # dengan alamat URL gambar Sobat yang ingin tampilkan.
Langkah Memasang Featured Post Metro Ul Style (Muncul di Home Page)
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’HTML6′ 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 != ""’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:if>
</b:includable>
