cara membuat artikel warna-warni di samping
9:06:00 AM
assalamu alaikum sobat2...
saya akan memcoba bangaimn cara Memasang Rainbow Popular Post di blogger:
tepatnya pada gambar di bawah ini
Baik sobat langsung saja inilah Cara Memasang Rainbow
Popular Post di blogger :
1. Login ke
dashboard blogger anda.
2. Pilih
menu Template > Edit HTML.
3. Cari kode ]]></b:skin> pada
template.
4. Copy
script dibawah ini dan paste tepat diatas kode ]]></b:skin> tadi.
/* Rainbow Popular Post Style Start */
#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: 12px; 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 +li +li{background:#d1ffff;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 + li +
li +li{background:#c7f25f;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 {background:#f59095;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{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
+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{background:#ff00ff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li +
li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li +
li{background:#5faff2;width:90%}
#PopularPosts1 ul li:first-child + li + li +
li:after{content:"4"}
#PopularPosts1 ul li:first-child + li +
li{background:#a9ed04;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ffde4c;
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:3px
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}
/* Rainbow
Popular Post Style End */
5. Save /
Simpan template anda.
6. Kemudian
untuk setting pada gadget Popular Post sobat harus mengaturnya seperti gambar
dibawah ini. Hilangkan semua tanda centang (checklist) pada tulisan Tampilan.
Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setenagh-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe. ...Read More