Modifikasi Widget Popular Post With Grid Layout

Viyan Pradita Sabtu, April 14, 2012 ,

Grid Layout For The Popular Posts Widget - Cara membuat atau memodifikasi widget popular post menjadi lebih keren bergaya grid layout, seperti yang kita tahu untuk tampilan widget bawaan blogger ini cukup menarik, tapi bisa kita modif lagi dengan gaya yang berbeda, dan lebih keren tampilannya. Pastinya diluar sana sudah banyak yang share tentang topik ini. Saya ulas lagi disini karena saya awalnya mendapat masalah dalam proses pemasangan kode scriptnya, jadi mungkin postingan saya ini bisa mempermudah sobat blogger yang mengalami masalah dalam menerapkan cara modifikasi popular post ini.
Biar makin jelas dan gamblang neh saya sediakan juga screenshotnya masbro :

Popularpost_kodeblogger
Modifikasi Widget Popular Post

Oke, langsung saja kita praktek masbro
1. Login blogger pastinya
2. Pergi ke munu Design > Page Element > Add a Gadget
3. Pilih Widget "Popular Post"
4. Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa sobat atur sendiri.

Setting Configure Popular Post
4. Lalu Save.
5. Lanjut ke Edit HTML, beri ceklist pada Expand Widget Templates. Jangan lupa juga BackUp template sobat (buat jaga-jaga kalo ada yang error).
6. Cari kode (CTRL+F) ]]></b:skin>
Dan tambahkan kode CSS berikut diatasnya:

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} 

7. Lanjut cari teks PopularPosts1 (CTRL + F) biar lebih cepat.
Ini kode script lengkapnya:

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

8. Gantilah kode script diatas dengan kode script berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

9. Terakhir Simpan dan lihat hasilnya.

Tambahan:
Untuk kode CSS bisa sobat kreasikan sendiri, sesuai dengan kreativitas sobat masing-masing.
Sekian dari saya untuk topik pembahasan Cara Modifikasi Widget Popular Post With Grid Layout. Semoga bermanfaat.

Article Information:
Description: Modifikasi Widget Popular Post With Grid Layout
Reviewer: Viyan Pradita - Itemreviewed: Modifikasi Widget Popular Post With Grid Layout Agar Tampilan Makin Keren - Rating: 4.5

Ditulis Oleh :

Artikel Modifikasi Widget Popular Post With Grid Layout ini dipublish pada hari: Sabtu, April 14, 2012. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

52 komentar
Terjun Ke Kolom Komentar

  1. wahh ijin coba sobat...oww iya soat q mau nanya gimana caranya buat widget yg 3 kolom itu pinda h ke bawah sob...karna template kita sama2 dri blogger tune up sobat

    BalasHapus
  2. @Metal-xp
    Silahkan Sob...
    Wah keren blognya sob, itu coding ndiri atau gmn sob.
    Widget 3kolom yang mana ya, yang Widget Tab Menu Scrol atau yg mana??

    BalasHapus
  3. oww makasih sobat....coding yang mn sob...yg kolom 3 tab di samping....kan posisinya di atas ga bisa dipindahkan dibawah sobat.....jadi mo nanya gimana caranya sobat mindahin ke bawah...napa baru muncul sobat.....

    BalasHapus
  4. @Metal-xp
    Coding template sendiri atau gmn sob, bisa persis ma tune up :D

    Coba liahat disini:
    http://kode-blogger.blogspot.com/2011/06/jquery-tab-view-scroll-show-hide-widget.html
    Itukah yg sobat maksud ??

    BalasHapus
  5. kwkwkw hasil cloning nih dari tune up sebelumnya.........hmmm mmg itu sob tapi di cloning ini 3 tab nya dah ga bisa digeser atau dipindahkan ke bawah mirip punya Viyan gtu sobat.....yg di atas ad popular post dan dibawahnya ad 3 tab.......gtu sob...

    BalasHapus
  6. @Metal-xp
    mantep sob :D
    Hayah, bisa cloning masa hal kek gitu gak bisa sob??:P
    Coba di pindah manual aja dari kode HTMLnya sob.
    Kalo bingung, hapus, dan coba dibuat dari awal lagi sob... :D

    BalasHapus
  7. Hmmmmm dicoba aja sobat kalau gtu..mksih infonya......oww iya sob posting dlu sob cara buat komntar model punya sobat viyan ini...hehehehhehe :)

    BalasHapus
  8. wahhhh berubah ni tampilan black ke abu2...oww iya viya mau tx lagi nih...apanya dirubah untuk memperlebar halaman kyk punya sobat

    BalasHapus
  9. keren pooollll maz. ohw ya mau tya maz, gmna cra bikin widget home,blog,about dst sprti pd blognya maz. trmksih.....

    BalasHapus
  10. @Metal:
    Hehehe itu template dunludan yah,baru tw ane sob, ternyata ada yg bagi2 template blog orang tnpa ijin, pakek nama kode-blogger pula, padahal tampilan punya blogger TuneUp :))

    Tinggal di setting di main-wrapper dan sidebarnya.

    BalasHapus
  11. @Asikan Ahmad:
    Lihat caranya disini mas:
    http://kode-blogger.blogspot.com/2011/06/cara-membuat-kwick-menu-navigasi-di.html

    BalasHapus
  12. Nah tutorial ini saya baru yakin..... yang lain pada asal asalah...... setelah puyeng baru kelihatan trik yang bagus disini. coba dehhh ane sudah buktikan dan bagus... gak setengah2 sharenya

    BalasHapus
    Balasan
    1. Sebenarnya caranya sama semua sob, cuman mungkin cara penyampainnya yg kadang gak jelas. hehee

      Hapus
  13. ia nihh yang laen pada amburadul asal copas aja..... semanagat dari Blog Download

    BalasHapus
    Balasan
    1. kalau amburadul, coba di passin aja css sama tamplate yg kita pakai sob, coz masing2 template pasti berbeda.

      Hapus
  14. saya terapkan di blog saya gan, bagus eui

    BalasHapus
  15. mantap.. makasih banyak tutorialnya, buat blog ane yg punya theme sesuai dengan popular post buatan agan ;)

    BalasHapus
  16. thnks gan atas ilmunya,,,alnya ane berhasil mempraktekkannya,,,moga sukses selalu,,salam persahabatan

    BalasHapus
  17. wah dah ganti template lagi nih...napa viyan....??

    BalasHapus
    Balasan
    1. Gpp sob, pingin ganti suasana aja :D

      Hapus
  18. ijin coba mas, hehehe kerene puool, thank's :)

    BalasHapus
  19. Keren gan widgetnya,, udah ane coba n sukses.. kalo gini kan blog ane kliatan idup dikit.. :D

    BalasHapus
  20. Salam kenal sobat.. iya nieh.. aku ngambil tutorialnya dari blog abang ini,, habisnya muwantab2 sih tutuornya,... keren2 juga.. emmmh,, ngomong2 kok g update2 sob blog nya??? di tunggu nieh bang.. hehehe :)

    BalasHapus
    Balasan
    1. Iya silahkan mas, yang penting kasih juga sumber reverensinya mas, tq... :D

      Hapus
  21. kok saya dah coba kyk punya sobat..ehhhh kok 3 baris yang di atas ga rata kyk punya sobat

    BalasHapus
    Balasan
    1. Karna masing-masing template itu berbeda jadi disini saya kasih kode CSS standart Sob.
      Selebihnya bisa Sobat kerasikan sendiri sesuai dengan tampilan template sobat.
      Tinggal dirubah kode CSS'nya saja sob.

      Hapus
  22. pengggeeeeenn!!makasih yaaa..

    BalasHapus
  23. wah keren uii.. bisa di coba nih...


    http://astadesain.blogspot.com

    BalasHapus
  24. udah berhasil gan..
    keren

    coba deh lihat hasilnya di blog ane

    BalasHapus
  25. tq gan infonya,sangat bermanfaat

    BalasHapus
  26. thanks ya gan..triknya bermanfaat banget ya walaupun sempet kagak berhasil

    BalasHapus
  27. mas, untuk gambarnya bisa, tapi kog masih daftar . . . mohon bantuannya,,,masih newbie,,untuk efeknya bisa langsung ke TKP kalo nggak fham maksudke, hehehehe
    http://el-abad.blogspot.com

    BalasHapus
    Balasan
    1. Cari kode pada langkah no7 dan ganti kode ts dengan langkah no8.

      Hapus
  28. kok gambar tidak muncul mas? haduh gimana ya, tolong dong infonya maklum newbie aku. makasih sebelumnya.

    BalasHapus
    Balasan
    1. Itu udah jadi mas, coba koreksi lagi untuk postingan yg muncul. Di postingannya memang gak ada gambarnya tuh.
      Kalau di postingan sobat tidak ada gambarnya yg keluar ya gambar seperti itu mas.

      Hapus
  29. permisi numpang coba hehehe,.. mau tanya nich,... aq dah buat tp,.. kotak-kotaknya tampilannya ngak lurus,.. tampilannya arah kbwa,. itu gmna ya??? apkah mank seperti itu atau gmna mhon penjelasanya,... heh salam knal,..,.. :)

    BalasHapus
  30. Berhasil, Gan. Tipsnya udah saya coba di blog saya. Haturnuhun.

    BalasHapus
  31. @artman echoel
    Tinggal diedit dibagian CSS'na mas..
    Sip, salam kenal juga mas :)

    BalasHapus
  32. mas, numpang tanya d blog saya kok tampilannya vertikal ya?
    gmn biar bisa d buat persegi seperti pd screenshot d atas?

    BalasHapus
  33. terima kasih sob..
    berhasil..

    visit back yah..

    BalasHapus
  34. thanks tutorialnya sob, work 100%

    BalasHapus
  35. Terima kasih untuk artikel ini ya bos
    www.7liveasia.com

    BalasHapus
  36. sipz
    idcheat.com
    duniagame.info

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers