01 May 2013

Cara Membuat Blog Dengan Popular Posts Aneka Warna

membuat widget,
DINAMIKA | Membuat Blog Dengan Widget Popular Posts Aneka Warna - Buat blogger pemula yang ingin mempercantik dan menambah konten menarik di blog dapat membuat widget Popular Posts beraneka warna.

Cara membuat blog lebih menarik dapat dilakukan dengan banyak cara, diantaranya dengan menambah beberapa widget. Tujuannya adalah selain mempercantik desain juga dapat meningkatkan daya tarik bagi orang yang berkunjung ke blog. Salah satu widget yang dapat ditampilkan di blog adalah widget Popular Posts, yang berisi posting artikel-artikel top yang paling sering dibaca orang. Widget Popular Posts dapat pula ditampilkan dengan banyak gaya atau style, salah satunya dengan efek pelangi atau dikenal dengan Rainbow Popular Posts yang menampilkan banyak warna. 

Membuat widget Rainbow Popular Posts yaitu sebagai berikut :
1. Masuk ke dashboard, lalu klik design. Setelah itu pada menu layout, klik add widget Popular Post, atur sedemikian rupa terserah mau ditaruh di sidebar mana. Lebih baik diberikan thumbnail dan tidak diberikan tulisan (bisa diatur menurut selera).

2. Kemudian catat widgetid nya, disini widget ID saya adalah PopularPosts1. Jika sudah, masuklah ke menu template > Edit HTML > cari kode ]]></b:skin>

3. Letakkan kode dibawah ini, tepat diatas kode ]]></b:skin> 

/* Rainbow Popular Post Style Start */

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}

/* Rainbow Popular Post Style End */ 

4. Klik Pratinjau terlebih dahulu, jika sudah tidak terjadi error pada widget maupun template, silahkan klik simpan untuk menyimpan perubahannya.

Semoga widget popular posts ini bisa menambah warna di blog Anda, sehingga tidak terlalu monoton yang pada akhirnya lebih cepat membuat para pembaca merasa bosan. Bila ingin mengeksplorasi lagi mengenai widget popular posts, silahkan baca Cara Membuat Blog Menarik Dengan Popular Posts Unik dan Cara Membuat Blog Menarik Dengan Popular Posts Animasi 3 Dimensi.


(sumber: http://ravictory.blogspot.com/2013/04/cara-membuat-widget-popular-posts-warna.html )
Like This Article:
Share This Article : Facebook Twitter Google+

Artikel Terkait:

No comments:

Post a Comment

TATA CARA BERKOMENTAR :
-------------------------------------
* Silahkan berkomentar dengan sopan, komentar dapat berupa kritik, saran dan masukan, dan menggunakan tata bahasa baku tanpa menyingkat tulisan.
** Tidak menggunakan kata atau kalimat yang mengandung sex dan SARA.
*** Tidak menggunakan link aktif/hidup dan spamming, dan untuk indentitas komentator sebaiknya menggunakan name/URL atau OpenID, bukan anonymous.

Terima Kasih karena telah berkunjung dan berkomentar di halaman ini.
Silahkan ketik komentar anda di comment box >>>

Mau? Rahasia sukses tanpa MODAL.. 0% RESIKO.. 100% GRATIS.. 1000% PROFIT.. Join now!! IndoBOclub <<<||>>> Terima Kasih Telah Berkunjung Ke Blog DINAMIKA