52
Cara membuat Popular Post dengan Thumbnail Horizontal
Postingan kali ini masih berhubungan dengan beberapa posting sebelumnya. Yaitu masih seputar CSS dan Inspect Element.

Seperti diketahui bersama, dari bawaan blogger sendiri sudah tersedia widget Popular Post sendiri. Tapi kelemahannya, Widget tersebut sudah mempunyai pengaturan default dan hanya tersedia dalam bentuk vertikal, sehingga bentuk dari widget tersebut terlihat monoton dan agak membosankan jika dilihat. Dan yang pasti, jika kita ingin menampilkan Popular Post dengan Thumbnail yang maksimal, posisi yang cocok untuk tempat peletakannya hanya dibagian sidebar saja.

Oleh sebab itu maka saya coba sedikit melakukan uji coba agar widget popular post dengan Thumbnail tersebut bisa dipasang dibagian footer dan dengan posisi horizontal. Demonya ya bisa langsung dilihat di bagian footer blog ini.

Tapi itu juga masih banyak kekurangan. Soalnya untuk postingan yang tidak disertai gambar maka akan terlihat kosong. Ada yang bisa bantu gak ya??

Berikut ini adalah langkah-langkah Untuk Cara membuat Popular Post dengan Thumbnail Horizontal ini,

1. Login ke Dashboard blogger -> Design -> Edit Html. Atau Jika menggunakan fitur yang bahasa indonesia Beranda -> Rancangan -> Edit Html.
2. Cari kode ]]</b:skin>

Kemudian letakkan kode CSS berikut ini di atasnya.

#content-footer{
width:100%;
clear:both
}
#content-footer h2{
color: #333;
text-transform: none;
font-family:  Georgia;
font-size: 16px;
font-weight: 700;
margin-bottom: 0px;
padding: 5px 15px;
}

.bottom-content .PopularPosts ul {
padding: 0;
margin: 0px;
background: #FFF;
overflow:hidden;
}
.bottom-content .PopularPosts ul li {
width: 82px;
padding: 0; margin:0 7px 0;
border: none;
float: left;
list-style: none;
line-height: 1em;
}
.bottom-content .PopularPosts {
background: none!important;
}
.bottom-content .PopularPosts .item-thumbnail img {
width:82px;
height:105px;
padding:0;
}
.bottom-content .PopularPosts .item-title {
padding: 5px 0;
margin:0px 0 10px;
font:bold 11px Georgia;
border-bottom: 1px solid #861519;
clear:both; height: 37px;
overflow: hidden; text-align: center;
}
.bottom-content .PopularPosts .item-title a {
color:#25c;
}
.bottom-content .PopularPosts .item-snippet {
margin:10px 0;
color:#4f4f4f;
}
.bottom-content .section{
margin: 0 5px;
}

3. Berhubung pada template ini widget popular post saya pasang di atas footer maka yang selanjutnya adalah Cari Kode:

<div id='footer-wrapper'>

Atau sejenisnya, Kemudian letakkan kode berikut diatasnya.

<div id='content-footer'>
<b:section class='bottom-content' id='widget-footer'>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
</b:section>
</div>
Untuk pencarian id atau class dari suatu widget ini bisa dibaca dipostingan ini.

4. Save Template.

Jika tidak ada masalah, maka hasilnya kira-kira akan seperti widget popular post dibagian bawah blog ini.

Semoga Bermanfaat..!!

Poskan Komentar

  1. asik nih jadi rapih populer postnya thanks kang admin

    BalasHapus
  2. coba ah di tekapeh, kali aja blog ane tambah anggun :D

    BalasHapus
  3. langsung ke TKP az dah,,,ijin coba gan ,,, sukses az dah bwt anda

    BalasHapus
  4. waduh gan di tempat aq "div id="footer-wrapper"" g ada thu gimana ea?

    BalasHapus
  5. RIISCKY MIZA @ klo kode <div id='footer-wrapper'> tidak ketemu, coba cari kode <div id='footer'>

    BalasHapus
  6. thanks gan atas scripnya... langsung tak pasang

    BalasHapus
  7. kalo mau ditaruh di widget di bawah menu gimana? yang harus diubah apanya?

    BalasHapus
  8. Chazchizchez @ dengan cara di atas sebenarnya bisa di letakkan dimana saja.. namun setiap template pasti memiliki lebar dan style yang berbeda.. contoh di atas hanya sebuah skenario atau rujukan. Agar sesuai dengan suatu template, hampir bisa di pastikan kita pasti harus merubah lebar dari area.

    BalasHapus
  9. Mas ni lom bisa jalan, kira2 knp ya?

    BalasHapus
  10. waduh gan di tempat aq "div id="footer-wrapper"" g ada thu gimana ea?

    BalasHapus
  11. kunjungan nya bang
    biasa masih newbie promosi gitu
    di tunggu lho bang

    BalasHapus
  12. Wow keren.
    Thanks infonya ya :)

    BalasHapus
  13. Keren langsung aku pasang di blog baruku...

    BalasHapus
  14. Thanks Banget Infonya ya :)

    BalasHapus
  15. Halo...
    Lalu kalau mau memasang di bawah judul blog bagaimana?

    BalasHapus
  16. Terima Kasih Infonya,
    Kapan-Kapan Deh Ane Praktekin. :D

    BalasHapus
  17. Ikutan coba, tips yang baru dan masih anget ...

    BalasHapus
  18. Makasih gan tapi kok ngga' keluar paga blog aku ya...

    BalasHapus
  19. nice post gan.
    bisa di coba nih..

    BalasHapus
  20. bisa menambah ilmu blogging saya
    terima kasih

    BalasHapus
  21. blogwalking gan... pinginnya diterapin di blog sy ga. tapi kode "kedua" tidak ditemukan..

    BalasHapus
  22. infonya mantap gan,, thnks

    BalasHapus
  23. Gan, kalau kita mau letakkan di samping caranya gmn ya ? kok di blog ane ngak bisa. mohon pencerahannya

    BalasHapus
  24. klo di samping ato disidebar, bisa pakai yang da di postingan ini:
    http://realfa84.blogspot.com/2012/06/cara-membuat-popular-post-dengan.html

    BalasHapus
  25. ane coba ya gan...thanks
    http://jekisimpel.blogspot.com

    BalasHapus
  26. udah dicoba...keren bgt.....thx Sob.....

    BalasHapus
  27. keren ya.. tapi dah dicoba mentok ke id nya lum paham..

    BalasHapus
  28. infonya bermanfaat sekali ini, terima kasih ya. kunjungi ya > http://asikbelajar-tik.blogspot.com

    BalasHapus
  29. bagus postingnya...mas tolong di pos cara buat post populer seperti yang ada di bawah blog ini. terima kasih

    BalasHapus
  30. saya mw nanya ni ro...
    sy nubi soal blog,masih banyak bnget yang belum ngerti.salah satunya napa ya tiap sy mw edit html di design ( design - web ) kadang ada kod yang gak ada.contohnya ]] spt yang anda tutorkan,tp anehnya kadang tiba2 ada...,apa ada keslahan ato gmn...kl ada...salahnya di mana ya...
    terima kasih sebelumnya

    BalasHapus
  31. keren ini kalau popular postnya begitu

    BalasHapus
  32. Sangat membantu Bro postingannya

    BalasHapus
  33. mantap infonya

    BalasHapus
  34. keren gan... saya coba dulu semoga berhasil.

    BalasHapus
  35. Ane dah praktekin kang, mantab terima kasih ilmuya. tp belum secantik blog ini hehehe

    BalasHapus
  36. bermanfaat sob . thnks atas infonya

    BalasHapus
  37. Blogwalking .. nice post
    http://apl-apk.blogspot.com/

    BalasHapus
  38. kalau diletakan selain di footer bisa ya, misal di atas komentar

    BalasHapus
  39. gmn klo kode 'footer-wrapper' nya ga ada gan?

    BalasHapus
  40. kok gak ada footer-wrapper sob

    BalasHapus
  41. Kalau diatas postingan / header bgaimna caranya??

    BalasHapus

Mohon maaf bila admin tidak bisa langsung membalas atau pun langsung berkunjung kembali ke blog sahabat blogger yang telah berkunjung ke sini. Kalian bisa meninggalkan komentar yang layak dengan menggunakan Nama dan URL blog sobat. Saya mengaktifkan filter dan comment moderator full sehingga setiap komentar pasti saya baca dan jika memang itu saya rasa harus dijawab, pasti saya akan memenuhinya.

Hanya komentar yang memang saya anggap pantas yang akan diterbitkan. Sekalipun itu kritikan atau ejekan, jika memang itu layak untuk di bahas.

 
Top