Modifikasi Popular Post Hanya Thumbnails Sederhana

Modifikasi Popular Post Hanya Thumbnails Sederhana

Bola Hero Gawai

Modifikasi Popular Post Hanya Thumbnails Sederhana

Popular Post Hanya Thumbnails
Beberapa hari ini saya enggak update postingan di Kompi Ajaib ini dan juga belum bisa blogwalking ke blog-blog sahabat... Saya tengah mencoba membuat template khusus untuk game online. Pengerjaannya masih jauh dari sempurna...hehehehe maklum pembuatannya disela-sela waktu kerja....

Namun kali ini saya mencoba update postingan yaitu memodifikasi popular post hanya thumbnails saja. Modifikasi popular post ini cukup sederhana. Sebenarnya sudah banyak bertebaran tutorial seperti ini dengan modifikasi yang cukup keren, namun tidak ada salahnya juga untuk sharing hasil modifikasi sendiri.

Hasil modifikasinya akan tampil seperti gambar di atas dengan 3 gambar ke kanan dan 3 gambar ke bawah. Mungkin ini akan cocok untuk blog galeri atau blog game online seperti yang sedang saya kerjakan. Bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Tentunya Anda harus menambahkan widget popular post dulu. Masuk ke tata letak kemudian tambahkan gadget dan pilih popular post. Kemudian setting popular post-nya dengan pilihan hanya thumbnail dan atur jumlah post yang tampilnya ke angka 9 kemudian save gadgetnya.

2. Langkah Kedua

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#PopularPosts1 {width:100%;background:none;}
#PopularPosts1 .widget-content {margin: 0 !important;  }
#PopularPosts1 ul {margin: 0 !important;  padding: 0 !important;  }
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#PopularPosts1 ul li .item-title{display:none}
#PopularPosts1 li {float:left;list-style:none;}
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;width:90px;height:90px;border:none;transition:all 400ms ease-in-out;}
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

3. Langkah Ketiga

Silahkan "jump to widget" pilih popular post untuk menuju kode html popular post. Kemudian cari kode ini <!-- (3) Show only thumbnails --> dan geser ke bawah sedikit Anda akan menemukan kode seperti di bawah ini.

<div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>

Silahkan ganti dengan kode di bawah ini.

<div class='item-thumbnail'>
                  <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                    <img alt='thumbnails' expr:src='data:post.thumbnail' expr:title='data:post.title' height='90' width='90'/>
                  </a>
                </div>

Jika thumbnilnya kurang pas dengan lebar widget blog Anda silahkan tambahkan pada angka 90 (yang berwarna merah pada langkah ke-2 dan ke-3).

Selesai... 

Sebenarnya ini bisa dimodif lagi untuk gambarnya misalnya dengan efek memutar atau zoom, namun saya sendiri suka merasa pusing kalau lihat gambar perputar-putar hehehehe.... selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

60 Comments Add Comment

wah minimalis sekali ya kang...keren
BM dulu ah nanti kapan2 coba dipraktekkan, nuhun kang

Balas

mas kompi, itu ngga bentrok sama size/lebar dari sidebarnya ya?? kan biasanya kalo kode <b:includable...> *kode yang harus di hapus untuk valid HTML5 itu loh* dihapus maka, popular post yang begitu thumbnailnya ngaco semua(lompat ke sidebar yang lain.
terus ngatasinya gimana mas? :)

Balas

dulu saya juga pernah share yang model kayak gini, tapi kodinya byk banget sih, saya sendiri aja tidak berani pakai hehhe... simple yang mas :-bd mengapa tidak ditambahin sentuhan tooltip biar nambah keren mas?

oh ya, blog kompisive kok dihapus mas?

Balas

Iya ini minimalis sekali kang hehhee :D

Balas

Cukup aman mas, paling bagi yang pakai trik itu harus ditambahin lagi margin kanan sama bawahnya pada item thumbnailnya.

Balas

Biar konsen di Kompi Ajaib sis hehehehe :D paling nambahin blog game online saja...

Balas

mantap mas tutorialnya, ini yg ane cari2 dari kemaren, tapi rata-rata hasilnya tidak seperti yang saya harapkan :D

Balas

Keren kang he,, raos katengalina.
Nuju ngadamel template kanggo di share atanapi kanggo nyalira kang?

Balas

Hehehe dicoba aja mas :D

Balas

Kanggo nyalira sareng pami aya nu hoyongeun dishare ieu bocoranna kang http://gamercoolest.blogspot.com/ masih keneh seueur pidameleuna :D

Balas

Keren Trick nya mas Jadi kangen obrak abrik kode css ama script...tapi sayang koneksi betul betul gak bersahabat mau koment aja nunggu sampai 15 menit.. :(

Balas

Bagus juga hasil modifikasinya mas :D

Balas

Oh iya satu lagi, semangat buat templatenya mas :D

Balas

Hehehehe wah pak ketu udah nongol lagi nih hehehe :D udah beres turnamentnya mas? Kelihatanya seru-seru tuh pertandingannya...

Balas

Heheheh templatenya masih agak lamaan kayaknya soalnya ngerjainnya kalau ada waktu aja mas :D belum lagi validasi html5, css3, sama skor seo-nya hehehe :D

Balas

keren banget nih mas

Balas

Saya BM dulu kang, soalnya masih benerin beberapa item dari Template Kang Adhy.
Bisa bantu ngga kang ?

Balas

Lumayan lah mbak hehehee :D

Balas

Wah kern kang... sakitu seeur gambarna tapi fast loading!

Balas

boleh barangkali saya bisa jawab :D coba aja bikin topik di forum kompi ajaib mas :D

Balas

Muhun kang... kanggo blog game online pasti nampilkeun seueur gambar ambeh menarik... tapi kedah ringan...hadeueuhh eta nu lieurna hehhhehehe :D

Balas

Sudah saya pos kan kang
Terima kasih bantuannya ;)

Balas

wah boleh :D makasih kang :p

Balas

wah keren nih, sudah saya terapkan di blog. makasih mas Adhy

Balas

pantes baru muncul uodatenya.. sama kang, kalau bikin template, postingan tertinggal :)
kereeen lah :-bd

Balas

apa valid HTML kang kalau seperti ini?
<img alt='thumbnails' expr:src='data:post.thumbnail' expr:title='data:post.title' height='90' width='90'/>
bagaimana kalau tambah style?
<img alt='thumbnails' expr:src='data:post.thumbnail' expr:title='data:post.title' style='height=90px;width=90px'/>

Balas

euleuh ngabegeg :) script emotnya pake spasi kang sblom 'titikduaP'

Balas

Hehehehe jadi muter socana nya kang heheheh...ayeuna mah tos leres, hatur nuhun kang :-bd

Masih valid kang, tapi pakai style ge sapertosna mas sae wae kang (maksadna langkung sae :D )

Balas

Sama-sama ms :D

Balas

Keren bangeudddddd :P

Balas

Sederhana dan menusuk kang.. Keren dah..! :-d

Balas

bagus mas Andi bisa juga ditambahkan tootipnya untuk modifikasi lebih lanjut mas :)

Balas

Mau nanya ni kang, kalau saya pake popular post suka error di website link chkme :(
jadi ada tulisan fix this

Balas

Heheehe bangeeeuuddd :D

Balas

Heheehehe jadi korban penusukan ya mas :D

Balas

Ya mas bisa dimodif lebih lanjut :-bd

Balas

Itu dia, coba perhatikan pada kode terakhir di atas, saya menambahkan title tag pada linknya dan title / alt tag pada gambarnya agar tidak mengurangi skr seo blog. Sudah ada beberapa postingan di sini yang membahas popular post agar tidak mengurangi skor seo di Chkme. Coba saja di search... :)

Balas

baru pertama kali mampir, nyimak aja

Balas

Keren banget nih. Knapa kang adhy baru ngepost? Lagi malas y. hheheh! Nice y kang.

Balas

master valid wungkul euy! era ah, ngesot heula moal ngiluan

Balas

Kang? Comment Balik dong? Dan beri Saran pada Postingan ane yang " Cara Membuat Google Friend Connect Valid HTML5 " - ini linknya http://mafiasitez.blogspot.com/2013/10/cara-membuat-followers-google-valid.html

Balas

Mau bertanya Sob, apa kode CSS di atas tidak akan membuat loading blog ?

Balas

simple tapi menarik (y)
patut coba

Balas

gan saya mau nanya beberapa hari ini blog saya visitornya menurun 80% entah kenapa saya gk tau? agan tau gk kenapa ?

Balas

Hehehehe lagi bikin template game online mas :D

Balas

Siap mas heheheeh :D

Balas

Ini hanya menambahkan beberapa baris CSS, saya pikir tidak akan terlalu memberatkan loading. :D

Balas

Silahkan dicoba aja :D

Balas

Mungkin kena algoritma hummingbird Google mas... jadi menghilang di SERP... tapi mudah2 tidak....

Balas

Coba ada demonya :D
Pasti bisa dilihat hasilnya

Balas

thanks sharenya mas langsung di praktekkan..

Balas

sudah diikuti semua kok ndak ada perubahan ya punya saya???

Balas

Demonya langsung saya pakai mas :D

Balas

Silahkan sis :D

Balas

Sepertinya masih ada yang kelewat mungkin mas, coba lagi :D

Balas

makin kerin nih tampilan blog wallpaper ane. =D =D =D :-bd
hatur nuhun kang.

Balas

bagus tipsnya,lngung dicoba :)

Balas

makasih kang sangat membatu buat blog saya lebih rapi untuk di liat hehehehe

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×