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.
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.
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
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
18 Komentar
Write Komentarhidup jadi lebih berwarna
Replyyoi full colour
Replymemang nggak ada habisnya kalau membicarakan tentang desain blog yamas.
Replylalu demo populer postnya mana nih mas?
apa seperti yg dipakai blog ini ya?
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 !
ReplySatu lagi, link SAGITA COM kok sekarang jadi gak ada ya di sidebar bloger partner, padahal link PATAH ONLINE tetep exis lo di SAGITA COM ?
iya mas, untuk demo bisa dilihat di blog ini mas, yang warna warni itu lho :D
Replyuntuk blogqoute gmna ya, aduh belum pernah saya coba sob, hihihihi........
Replyoh ya maaf sob sudah saya pasang lagi tuh. hihihi
wah keren mas ^^
Replyapa 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
coba di cek berat blognya mas, kalau 100kb lebih dikit c masih wajar :D
Replycontohnya kayak punya bang patah ?
Replymembuat loding berat gak bang ?
contohnya di blog ini bang, coba dulu aja bang, kyaknya g berat c mas,karena cuman nambah ccs aja mas
ReplyIya kak, itu lo kak, misale kita nulis code dalam postingan tampilan codenya jadi warna-warni, kalo gak salah namanya syntax highlighter, contohnya ini :
Replyhttp://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.
bagus tuh sob, tampilan jadi lebih rapih, dilihat juga makin kece tuh :D
ReplyWah mantap tuh desain blognya bisa di cobak
Replysaya mau coba ah mas. biar warna wani begituh
Replysudah saya pasang jadi bagus nih warna wani. hahaha ganti warnanya gimana
Replysilahkan mas, biar tambah seger blognya :D
Replydi child background color nya mas, itu kodenya di ganti aja
Replysilahkan mas, biar makin mantap :D
ReplyJadilah 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