Cara Membuat Featured Post Metro Ul Style di blogspot - Edukatif

Pentingnya Blog Edukatif

Sobat. JIKA memperhatikan tampilan blog FBI (Forum Blogger Indonesia) ini, akan terlihat "Featured Post" yang sangat menarik, karena menggunakan gaya Metro Ul Style. Namun yang paling penting tidak sekedar tampilan yang elok nan rapih, namun juga harus bersifat edukatif, informatif dan user friendly (memudahkan pembaca setia). 

Hal itu memang menjadi acuan utama blog ini. Seperti saran dari para master blogger tentang salah satu parameter utama blog berkualitas adalah memberikan informasi yang edukatif dan informatif.

Sobat Forum Blogger Indo tidak usah khawatir. Dalam kesempatan ini akan saya bagi tips cara memasang featured post gaya Metro Ul Style. Tidak susah kok, yang penting mau berusaha dan berdo'a.

Langkah Memasang Featured Post Metro Ul Style (Muncul di semua Page)

1. Berdo'a

2. Masuk akun blogger > Template > Edit Html

3. Cari kode [CTRL+F] <b:section class='main' id='main' showaddelement='no'>

4. Ganti kode 'no' menjadi 'yes'. Jadinya seperti ini:

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

5. Cari kode ]]></b:Skin>

6. Copy kode di bawah ini dan letakkan tepat di atas kode ]]></b:Skin>

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWn7C1fNi5xY4JNWuf_Ol02n4vclS6CAFLzzMlvMqnUWFd4BdUYUsmRfE3xJcey6nGWQ8j8WCkS8Io3CCIw-IKV0sNcg1Oyy8QBGjZGl17GasXYhDD8wXTYUlvUQ8_Pv6o_TcoMKIJJ3A/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}

7. Save Template

8. Buka Dashboard blog > tata letak (layout) > add widget > HTML Java Script

9. Copas kode di bawah ini ke dalam widget baru tadi (pada langkah ke-8) > Save

<div id="featured-post"><ul><li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zWdwFT8wlIxMq97ng9DaCmBWMopyxUS7i8LdCP3qmgFnpve8C0d7Woj_y6xSM38jmcqlsXzu8gNXyT9VgKaVFPVldMdC3TU5bL_BtXUdBHui5AgjqSlKycAb-VRpkRdgokHk1D_BtOc/s1600/Humas+-+PR.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPL1k04bczKOv3GFQmhztYFSJfnMXkdDoWagt7Yie2d7dxWAc2BGjXXw1KvQGY99K4v45NZ-vFP_pev8QBRpK7r0sAeZcEKbPpOI6Rj26RZgXDIZl3LDLPcKBkiuzEeWNEjRTZUulPT4/s1600/Email+saat+liburan+dapat+dihapus.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIvHrEWF-HZcT1afUer44nS0n3leAXeGFY3iPs9GyyGOisVqKsQ84r_WEE3FF8rbojMkO0uDk4sxADxvznxVGluFZFR3GuvXPIaNKeIdzGyeIqN60PqhJ_JMFWTxLK59f05wF9RFnYSk/s1600/media+baru.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVaf6vSeXljo3CARnMELOVWgwv2u5YfdNnzWlUq9OspYrQLM3f9ASYNowjuLO4b-vuY2zE4dXCA4OSprn-BMC9clRkCUTvRv2f1PGln9ZqecU8uhUhLHzmpCYUNxgdlnylpRP6rzJ-aQc/s1600/jurnalistik+-+jurnalisme.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:

1. Ganti warna merah dengan alamat URL link internal atau eksternal dari blog sobat (misalkan link Url Artikel populer sobat).
2. Ganti tanda # dengan alamat URL gambar Sobat yang ingin tampilkan.

Langkah di atas menjadikan menu Featured Post akan terlihat di setiap page/halaman ketika dibuka. Jika menginginkan hanya muncul di halaman homepages saja, silakan lakukan modifikasi tambahan di bawah ini:

Langkah Memasang Featured Post Metro Ul Style (Muncul di Home Page)

1. Baca do'a

2. Masuk akun blogger > Template > Edit Html

3. Cari kode [CTRL+F] <b:section class='main' id='main' showaddelement='yes'>

4. Bagi pengguna Template Pro Adsence V1, tampilan lengkapnya akan seperti di bawah ini:

<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 != &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>

5. Tambahkan kode yang berwarna merah persis seperti format kode di atas

6. Save template

7. Lihat perubahan blog Sobat.

8. Alhamdulillah

Demikian tips membuat blog semakin edukatif dan informatif serta user friendly. Semoga menjadi berkualitas blog Sobat. Jika ada yang belum faham, silakan berdiskusi dengan Ane di forum blogger ini. Salam blogger.

(http://forumblogindo.blogspot.com/)

Sumber:

http://www.komunikasipraktis.com/2014/11/stylish-featured-post-image-for-blogger.html