Cara membuat Popular Posts Keren full colour

Patah Online - Halloo...bagaimana kabarnya nih, semoga selalu baik-baik saja ya. Kali ini saya akan membahas bagaimana merubah tampilan blog anda menjadi lebih keren, dengan mengedit tampilan widget popular posts di blog anda menjadi full colour.

Widget popular posts untuk kebanyakan blogger merupakan widget wajib yang harus di pasang di blog, widget popular posts itu sendiri memiliki fungsi untuk menampilkan artikel apa yang sering dilihat di blog itu. Tentunya ini juga bisa menjadi bahan rujukan bagi pengelola blog untuk membuat artikel yang diminati atau disukai oleh pembacanya.
popular-post-warna-warni

Berikut langkah-langkah cara pemasangan widget popular posts keren full colour di blog
1. Masuk ke akun blogger , template, edit html
2. Cari kode  ]]></b:skin> (tekan CTRL + F untuk pencarian cepat)
3. Kemudian tambahkan script di bawah ini, tepat di atasnya lalu save

/*Custom Popular Post*/ .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num} .PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative} .PopularPosts ul li a{color:#fff!important} .PopularPosts ul li a:hover{color:#2c3e50!important} .PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none} .PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important} /* Pengaturan Warna */ .PopularPosts ul li:nth-child(1){background-color:#f1c40f;} .PopularPosts ul li:nth-child(2){background-color:#f39c12;} .PopularPosts ul li:nth-child(3){background-color:#2ecc71;} .PopularPosts ul li:nth-child(4){background-color:#27ae60;} .PopularPosts ul li:nth-child(5){background-color:#e67e22;} .PopularPosts ul li:nth-child(6){background-color:#d35400;} .PopularPosts ul li:nth-child(7){background-color:#3498db;} .PopularPosts ul li:nth-child(8){background-color:#2980b9;} .PopularPosts ul li:nth-child(9){background-color:#ea6153;} .PopularPosts ul li:nth-child(10){background-color:#c0392b;} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

4. Berikutnya masuk ke tata letak/ layout, tambah gadget / add gadget lalu pilih popular posts. lalu klik save.

popular-posts
Selesai lalu lihat hasilnya, widget popular posts anda akan berubah menjadi full colour. Cukup sekian tips blogger tutorial blog dari saya, semoga bisa bermanfaat. Sampai jumpa lagi di postingan saya selanjutnya. Bye :D


Previous
Next Post »

18 Komentar

Write Komentar
yanto cungkup
AUTHOR
September 25, 2015 at 12:03 AM delete

memang nggak ada habisnya kalau membicarakan tentang desain blog yamas.
lalu demo populer postnya mana nih mas?
apa seperti yg dipakai blog ini ya?

Reply
avatar
SAGITA COM
AUTHOR
September 25, 2015 at 6:57 AM delete

Mantab ni kak, oh iya kalau untuk bikin blockquote full color gimana caranya, aku udah tanya ama mbah google hasile kurang pas ama template blog aku, terlalu banyak code script-nya, pinginnya cuma pakek css dan sedikit script gitu loh !

Satu lagi, link SAGITA COM kok sekarang jadi gak ada ya di sidebar bloger partner, padahal link PATAH ONLINE tetep exis lo di SAGITA COM ?

Reply
avatar
Patah Online
AUTHOR
September 25, 2015 at 7:35 AM delete

iya mas, untuk demo bisa dilihat di blog ini mas, yang warna warni itu lho :D

Reply
avatar
Patah Online
AUTHOR
September 25, 2015 at 7:40 AM delete

untuk blogqoute gmna ya, aduh belum pernah saya coba sob, hihihihi........
oh ya maaf sob sudah saya pasang lagi tuh. hihihi

Reply
avatar
September 25, 2015 at 9:10 AM delete

wah keren mas ^^
apa bisa memberatkan loading mas?saya juga sebenarnya pengen desain blog, tapi btuh waktu lama buat otak-atiknya, malesin dan terakhir loading blog saya sudah lambat kalo ditambahin yang lain takut makin lambat mas.hehe

Reply
avatar
Patah Online
AUTHOR
September 25, 2015 at 1:06 PM delete

coba di cek berat blognya mas, kalau 100kb lebih dikit c masih wajar :D

Reply
avatar
September 25, 2015 at 4:15 PM delete

contohnya kayak punya bang patah ?
membuat loding berat gak bang ?

Reply
avatar
Patah Online
AUTHOR
September 25, 2015 at 4:23 PM delete

contohnya di blog ini bang, coba dulu aja bang, kyaknya g berat c mas,karena cuman nambah ccs aja mas

Reply
avatar
SAGITA COM
AUTHOR
September 25, 2015 at 5:22 PM delete

Iya kak, itu lo kak, misale kita nulis code dalam postingan tampilan codenya jadi warna-warni, kalo gak salah namanya syntax highlighter, contohnya ini :

http://1.bp.blogspot.com/-F4qDUbkL8vM/VLxujZDiF9I/AAAAAAAABm4/KtOTDFU5l7g/s1600/Cara%2BMudah%2BMemasang%2BPrism%2BSyntax%2BHighlighter%2Bdi%2BBlog.png

Sayangnya diblog ini replase image pada komentar di disable, jadi cuma bisa nyebutin link gambarnya saja, andai saja di enable, pasti bisa langsung tampil deh gambarnya.

Reply
avatar
Patah Online
AUTHOR
September 25, 2015 at 10:34 PM delete

bagus tuh sob, tampilan jadi lebih rapih, dilihat juga makin kece tuh :D

Reply
avatar
Nurul Hidayat
AUTHOR
September 27, 2015 at 8:03 PM delete

Wah mantap tuh desain blognya bisa di cobak

Reply
avatar
Abdul Rozak
AUTHOR
September 28, 2015 at 10:33 AM delete

saya mau coba ah mas. biar warna wani begituh

Reply
avatar
Abdul Rozak
AUTHOR
September 28, 2015 at 10:35 AM delete

sudah saya pasang jadi bagus nih warna wani. hahaha ganti warnanya gimana

Reply
avatar
Patah Online
AUTHOR
September 28, 2015 at 2:57 PM delete

silahkan mas, biar tambah seger blognya :D

Reply
avatar
Patah Online
AUTHOR
September 28, 2015 at 2:59 PM delete

di child background color nya mas, itu kodenya di ganti aja

Reply
avatar
Patah Online
AUTHOR
September 28, 2015 at 3:00 PM delete

silahkan mas, biar makin mantap :D

Reply
avatar

Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon