Stylish Featured Post Image for Blogger - Metro UI Style

BERIKUT ini cara membuat Stylish Featured Post Image (Conten Slide) for Blogger -- dikenal dengan Metro UI Featured Post Widget Style.

Featured Post berfungsi menampilkan posting (tulisan) yang "diunggulkan" di halaman depan (home, homepage, beranda). Anda bisa menggantinya, misalnya, setiap minggu. Ada empat posting yang bisa ditampilkan di Featured Post ini.

KP anjurkan memilihi Featured Post yang non-slider karena slider tidak user friendly juga tidak seo friendly. Jadi, pilih saja Featured Image Post yang statis seperti yang dipasang di Metro Simple Blogger Template. (Lihat DEMO)

Cara Memasang Stylish Featured Post Image for Blogger - Metro UI Style:

1. Di Blogger Dashboard, klik "Template" > "Edit HTML"

2.  Cari (Ctrl+F) kode

<b:section class='main' id='main' showaddelement='no'>

3. Ganti dengan kode   

<b:section class='main' id='main' showaddelement='yes'> 

 atau ubah "no" menjadi "yes".

4. Cari (Ctrl+F) kode ]]></b:skin>  dan Copy+Paste kode CSS berikut ini di atasnya:

#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}

5. Save Template!
6. Kembali ke Dashboard Blog
7. Klik "Layout" > klik "Add a Gadget" yang ada di atas kotak "Blog Post".

8. Pilih "HTML/Javascript", lalu Copy+Paste kode berikut ini:

<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="#">Komunikasi Humas - Dasar Keahlian Humas PR Instansi</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="#">Phasellus viverra nulla ut metus varius laoreet</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="#">Komunikasi Media - Komunikasi Melalui Media Massa</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="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></div></div></li>
</ul></div>

Catatan:
1. Ganti tanda pagar (#) dengan URL/Permalink Posting Anda.
2. Ganti URL Gambar yang diawali kode <img src dengan URL Image Anda.
3. Ganti juga judul posting dengan judul tulisan Anda.

TAHAP KEDUA
Setelah selesai, Featured Post Content/Image sudah muncul. Namun, ia akan muncul di setiap halaman bukan? Bagaimana agar hanya muncul di halaman depan (home) saja? Ini caranya:

1. Template > Edit HTML
2.  Cari kode  

<b:section class='main' id='main' showaddelement='yes'>.

Akan terlihat Widget Type HTML dengan ID HTML dengan nomor, misalnya HTML5.

3. Tambahkan Tag Kondisional agar Featured Post ini hanya muncul pada halaman depan. Tambahkan kode yang berwarna merah, posisinya persis 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>

4. Hapus kode  

<b:include name='quickedit'/> 

5. Save Template!

Demikian cara memasang Stylish Featured Post Image for Blogger - Metro UI Style di blog blogspot Anda. Good Luck! (www.komunikasipraktis.com).*

» Thanks for reading: Stylish Featured Post Image for Blogger - Metro UI Style