Oprek Popular Post menggunakan CSS aja !

Cekidot MasGan!

Cekidot MasGan! - Tampilan yang menarik tapi blog tetap menunjukkan loading yang cepat adalah semua dambaan para blogger. Akan tetapi untuk mempercantik tampilan blog itu harus perlu banyak script-script yang rumit serta banyak. Seperti pada gadget Popular Post, kebanyakan para blogger menggunakan script yang inilah.. yang itulah sehingga membuat loading blognya menjadi lambat. Belum lagi tingkat kegagalan yang tinggi bisa membuat orang Newbie putus asa.  Sebenarnya mereka tidak sadar jika ada cara yang lebih mudah yaitu menggunakan CSS. Untuk bisa mengerti CSS cukup mudah, hanya dengan bisa sedikit bahasa inggris pasti langsung bisa.

Berikut ini contoh script CSS yang di gunakan untuk mengedit Popular Post anda. Sebelum itu anda harus menambah widget Popular Post bawaan dari Blogger.

#PopularPost1{blablablabla}

Script di atas merupakan bagian terluar dari widget PopularPost anda bisa dibilang kalau ini adalah bingkainya.

#PopularPost1 ul{blablablabla}

Yang ini adalah bingkai dari daftar postingan terpopuler anda. Jadi ini berada di dalam #PopularPost1. Bingung ? gini deh, widget popular post kalian itu punya 2 bingkai yang paling luar itu #PopularPost1 dan yang dalamnya itu #PopularPost1 ul. Jika #PopularPost1 ul ukurannya lebih besar dari #PopularPost1 maka akan muncul scroll jika overflow di set auto (overflow:auto)

#PopularPost1 li{blablablabla}

Yang ini merupakan sebuah daftar yang berisikan seperti gambar, alamat dan deskripsi (opsional).

#PopularPost1 li img{blablablabla}

Kalau yang ini sudah bisa ditebak yaitu untuk gambar thumbnailnya.

Jika sobat blogger pengen popular post yang seperti punya saya, silahkan masukkan kode di bawah.

---------------------------------------------------------------------------------------------------------------

#PopularPosts1{background:#FFF;}
#PopularPosts1 ul{margin-top:0}
#PopularPosts1 li{background:#FFF;font-size:auto;text-shadow:0 1px 1px rgba(0,0,0,0.3);padding:1px}
#PopularPosts1 li img{width:45px;height:40px;background:#fff;border:1px solid #e3e3e3;margin-bottom:-8px}

---------------------------------------------------------------------------------------------------------------

INGAT ! Letakkan di atas kode </Head>.

Selamat Mengoprek …. #KeepSmile

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 23:05 and have 0 comments