Widget Popular Post Warna-Warni

8/27/2015
Widget Popular Post Warna-Warni

Widget Popular Post Warna-Warni - Ok, di postingan ke dua hari ini dan kebetulan ini adalah artikel ke-100 Arlina Design akan berbagi sebuah widget popular post yang dibuat sedemikian rupa sehingga bentuknya jadi agak sedikit nyentrik berbeda dengan tampilan widget pada umumnya.

Tentunya sobat sudah tahu fungsi dari widget ini yaitu menampilkan postingan yang paling banyak dilihat oleh pengunjung berdasarkan waktu bisa setiap minggu, bulan, atau sepanjang waktu.

Langsung saja, berikut cara penerapannya :.

Catatan : Jika di template sudah terpasang CSS popular post, ada baiknya dihapus terlebih dahulu agar tidak terjadi kesalahan nantinya.

Setelan widget Popular Post sesuaikan dengan screenshot di bawah ini :

Setelan widget popular post

1. Buka Blogger > Template > Edit HTML > Kemudian tambahkan kode di bawah ini tepat di atas ]]></b:skin> atau </style>

/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Hapus kode yang ditandai jika memilih widget tanpa tambahan warna-warni.

2. Selanjutnya tambahkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

3. Selesai, simpan template dan lihat hasilnya.



Cukup sekian, terima kasih dan semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

46 comments

wah, keren banget kak :D
oh ya, seriuskha itu blog everglow pake calender kak ??

Balas

Trims, iya itu kalender, kalender biasa ga bisa diedit tambah notice dsb. Cm pajangan :)

Balas

keren mbk.. tapi saya coba gambar postnya hanya nampil kecil, ngaak penuh seperti demo :)

Balas

oh ya mbk.. kebetulan hari ini blog saya juga postingannya mencapai 100 artikel. hehe
Mbk bagi tutorial tampilan postingan lama seperti blog demo....

Balas

Kode jquery-nya tambahkan dl

Balas

Bisa barengan gt hehe... Tampilan demo yang mana, template bukan? Itu pakai yang Simple, template standar blogger

Balas

iya bisa barengan... :) iya seperti yang template yang di demo mbk.. nggak perlu loading page lagi kalau mau lihat postingan lama... bisa buat tutorialny mbk :)

Balas

walaaahhhh keren bener... tapi izin hapus pelanginya.. :v soalnya Pelangi itu melambangkan (G*y) :v tapi keren lah. cakep.. (y)

Balas

Walah ketinggalan pertamax.. Keren pisan (y) , sist mau tanya kalau pasang iklan dengan metode search query blog bisa nggak? Jadi url blog saya dimasukin ke search query GSE blog Arlina ini

Balas

keren keren, tapi ini bikin blog berat gak sis?

Balas

Keren...mantap....top....dan teman-teman...

Balas

Infinite scroll kl ga salah, itu hanya bisa dipasang di template tanpa automatic read more. Kl mau silakan copas di blog demo semua kode di bawah // Ajax Navigation

Balas

Hehe, ok silakan kreasikan kembali

Balas

Boleh, balas lewat inbox aja ya

Balas

Trims, ga terlalu berat ko

Balas

iya mbak.. terimakasih,,,, hehe template karya mbak arlina keren2..

Balas

thank you bro ;) 8-)

Balas

saya mau pasang di vienna lite 2 mbak

Balas

Wah, keren banget nih ntar tak coba di sang seo responsive gue ah..

Balas

Hehehe, dari dulu waktu kenal blog pengen banget punya kalender kaya punya wordpress, tapi ya gitu lah, ga mudeng, hahahah. . .

Balas

keren banget deh yang ini mah :) thanks banget buat Arlina yang bikin dunia blogging makin seru dan nikmat ;)

Balas

Simple and elegant. ;)

Balas

wah, keren banget nih mbak ...

Balas

Please make possible the way in which common posts + Aaltsneiv + comments and there is this wonderful Thank Entries

Balas

This is the standard popular post

Balas

Trims, silakan dicoba

Balas

Sama2 mas, ikut meramaikan saja :)

Balas

Keren - keren... izin pasang ahh .. thanks atas artikel nya

Balas

Kelihatan lebih modern , dan cocok untuk blog pribadi dengan niche kehidupan pribadi

Balas

RNA Mark popular post + labels + the latest comments in one box in Alsydbar as in this blog and thank you

Balas

Am a lover of your blog but i do find it really hard to read because i can't read your language, i do copy your post to google translate before i understand, so please enable a google translate widget on your blog.

Number two am using one of your template REVOLTIFY on my blog, www.vicdayo.com i want to buy the theme because of the footer link and am having problem showing ads inside post the custom html/javascript widget you place there for showing ads inside post didn't work for me. and please i want the premium REVOLTIFY template i will be purchasing to come with discuss comment system only and sharing box that shows the number of shares.

i should have contact you privately but your contact form on the contact us page dosn't seems working.

i will be looking forward to hear from you soon (victemidayo[@]gmail.com)

Ogundipe Vicdayo
www.vicdayo.com
Victemidayo[@]gmail.com

Balas

Maksudnya nambahin jquery-nya gimna mba?
saya pake template vienna lite 2

Balas

Hehe, betul mas

Balas

You can simply right click and translate the page, I'm using chrome

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.