PANDUAN CARA MUDAH MENAMBAH WIDGET ENTRI POPULER/ POPULAR POST BERWARNA WARNI DAN BERGERAK BERGANTIAN
0
komentar
Assalamu'alaikum Wr. Wb.
Salam sejahtera untuk kita semua.
Selamat datang dan berkunjung di Blog Saya yang sederhana ini, Blogger Mania.
Pada kesempatan ini, Saya mempublikasikan posting tentang salah satu Tips Blogger Saya yaitu Panduan Cara Mudah Menambah Widget Entri Populer/ Popular Post Berwarna Warni dan Bergerak Bergantian. Kode Tips Blogger ini Saya dapatkan tidak sengaja dan kemudian Saya ambil dan Saya coba di Blog Saya dan hasilnya TOP MARKOTOP... Kode ini bersumber dari salah satu master blog yaitu Rivai Silaban. Untuk melihat hasilnya, sobat lihat pada Entri Populer di Blog ini yang terdapat di widget Kanan Bawah. Keren kan...??
Sebelum sobat membuat Widget berwarna ini, terlebih dahulu sobat buat Widget Popular Post. Untuk membuat Widget Popular Post tersebut beginilah caranya.
1. Pilih Menu "Tata Letak".
2. Klik "Tambahkan Gadget".
3. Cari "Entri Populer".
4. Atur Entri Populer tersebut sesuai dengan keinginan sobat.
Setelah sudah selesai pilih "Simpan".
Setelah sudah membuat Widget Entri Populer, sekarang ikuti langkah-langkah di bawah ini.
1. Pilih Menu "Tata Letak".
2. Klik "Tambahkan Gadget".
3. Cari "Entri Populer".
4. Atur Entri Populer tersebut sesuai dengan keinginan sobat.
Setelah sudah selesai pilih "Simpan".
Setelah sudah membuat Widget Entri Populer, sekarang ikuti langkah-langkah di bawah ini.
1. Masuk ke Menu "Template".
2. Pilih "Edit HTML".
3. Cari kode ]]></b:skin>. Cari dengan cara tekan CTRL + F dan Copas Kode di bawah ini tepat di atas kode tersebut.
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Keterangan :
Yang berwarna Biru itu adalah warna Background, silahkan ganti sesuai keinginan sobat.
4. "Simpan Template".
Selesai...
Silahkan lihat hasilnya...
Kalo belum muncul, coba sobat Refresh/Reload This Page halaman tersebut.
Demikianlah posting tentang Panduan Cara Mudah Menambah Widget Entri Populer/ Popular Post Berwarna Warni dan Bergerak Bergantian ini. Semoga bermanfaat dan bisa menambah ilmu pengetahuan sobat tentang Tips-tips Blogger.
Salam Blogger Mania...!!
Wassalamu'alaikum Wr. Wb.
Sumber kode: http://rivai-silaban.blogspot.com/2013/04/widget-popular-posts-dengan-multi-color.html
Terima kasih Bang Rivai Silaban... :)
Selesai...
Silahkan lihat hasilnya...
Kalo belum muncul, coba sobat Refresh/Reload This Page halaman tersebut.
Demikianlah posting tentang Panduan Cara Mudah Menambah Widget Entri Populer/ Popular Post Berwarna Warni dan Bergerak Bergantian ini. Semoga bermanfaat dan bisa menambah ilmu pengetahuan sobat tentang Tips-tips Blogger.
Salam Blogger Mania...!!
Wassalamu'alaikum Wr. Wb.
Sumber kode: http://rivai-silaban.blogspot.com/2013/04/widget-popular-posts-dengan-multi-color.html
Terima kasih Bang Rivai Silaban... :)
0 komentar:
Posting Komentar