Stylish Featured Post Image for Blogger - Metro UI Style

Stylish Featured Post Image for Blogger
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".

tambahkan gadget

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

html javascript


<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).*

7 Comments

  1. min.. yang di popular post kok saya gak gak muncul angka nya ya? gimana cara munculinnya? makasih :)

    ReplyDelete
    Replies
    1. Cara Membuat Widget Popular Posts di blog dengan angka ada di sini:
      http://contohblognih.blogspot.com/2014/12/membuat-widget-popular-posts-keren-di.html

      Delete
  2. ini nih yang ane cari2 selama ini, mau laporan gan sukses terpasang, makasih

    ReplyDelete
  3. Min, ga bisa di copas codenya ya...

    ReplyDelete
  4. Min, sulit nyari kode yang mau di pasang kalo sesuai tutorial yang sudah ente sajikan..
    emang di prifat apa postingan'e?

    ReplyDelete
    Replies
    1. ente mau copas kode atau postingan? kode bisa dicopas, postingan tidak, yg penting 'kan kodenya

      Delete
  5. Lapor gan sukses besar ..Makasih ,,salam blogger

    ReplyDelete
Previous Post Next Post