Cara Membuat Featured Post Metro Ul Terbaru dengan Mudah di Blog

Home » Tips Blog » Tips SEO » Cara Membuat Featured Post Metro Ul Style di blogspot - Edukatif TIPS BLOG TIPS SEO Cara Membuat Featured Post Metro Ul Style di blogspot - Edukatif

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.

:: Live demo

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/AVvXsEhplvdRB0YHbChndrUJS4DLJcbl9BDgqNSZTgc5QD9qAzlOFW59fVmECZSr87EHcm5tU5Wm-MCxvFD-4XV79Jt2t-e2K17Am-4f934ppg4qceoMQmGw45btvCuXrYTyKHgEq0OlwfaISvU/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/AVvXsEgFyQMyliuGEb_itvcZHKyTVKDyzMCerfeC3qG9ZRp35oVXcd8kpnY1gBLLpykWq-bRFB9B1cpfOOOHgG3CTuj3QO_rlxjwOaxGE6lfarevSGI2ye6qRF0xvrdPQGlc2cub4nzsx4q9tKo/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/AVvXsEinTJgVViOlQTiEKbDHY_KkX-3pATKfMVC2OQNHHoEO6vXJL3iqMAq2MCzeS1e6NaRxvABXFB6sdID4D25doMzysirluvSK3wE8jMgEFUa8qSFxcvy2zSGcL_hKj0MsO2rprUAlSx9mGXw/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/AVvXsEixxQSiHijSejo3_M1evU204hoc0qE1Amb9QCI65uLTC3KVceHfoL6hzUg_cwYDgQNvslEGa-oV0eTWwBlX9BrJ3GhKlQfyoul7IuV5J-8-YKKMdXs-zUNPJ7_Sx8fhj5X106RKSA44f5I/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/AVvXsEg8BlQqZjbjQrDJduLIAFAmgaGTJ9izv946U1rTHZbt46TjmRLXrK1OiZKVzyfLDA_e4xhK9KP_xoN9vBcaquznb0G5srQc3xAap-dYEoXVMqxZW6EPqRUeODWPGN0HfI_aRLlTXJPODnw/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:

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 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'>

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

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.

Happy blogging.

(http://sahilluqman.blogspot.com/).*

Sumber:

http://forumblogindo.blogspot.com/2015/04/cara-membuat-featured-post-metro-ul.html