07.01
Assamuallaikum Selamat Malam Kawan kawan Blogger
Beberapa hari yang lalu penulis melakukan blogwalking ke blog blog mastah mencari tips tutorial bagaimana " cara mudah membuat widget popular post warna warni diblog.
Setelah melakukan blogwalking mencari apa yang dibutuhkan akhirnya menemukan caranya, mengikuti dan akhirnya pun sukses mengaplikasikannya ke blog ini.
Disinipun penulis mencoba berbagi ke rekan rekan blogger yang membaca artikel ini dari cara saya mengikuti tutorialnya MASYADI yang menjadi Bacaan dan Rujukan Saya dalam hal seputar Blog dan bisa dibaca di www.contohblog.com
Bagaimana cara memodifikasi widget popular post menjadi warna warni ternyata sangatlah mudah, kenapa? Ternyata hanya menambahkan css diblog kita.
Dan kawan kawan bisa screenshot nya dibawah ini.
Beberapa hari yang lalu penulis melakukan blogwalking ke blog blog mastah mencari tips tutorial bagaimana " cara mudah membuat widget popular post warna warni diblog.
Setelah melakukan blogwalking mencari apa yang dibutuhkan akhirnya menemukan caranya, mengikuti dan akhirnya pun sukses mengaplikasikannya ke blog ini.
Disinipun penulis mencoba berbagi ke rekan rekan blogger yang membaca artikel ini dari cara saya mengikuti tutorialnya MASYADI yang menjadi Bacaan dan Rujukan Saya dalam hal seputar Blog dan bisa dibaca di www.contohblog.com
Bagaimana cara memodifikasi widget popular post menjadi warna warni ternyata sangatlah mudah, kenapa? Ternyata hanya menambahkan css diblog kita.
Dan kawan kawan bisa screenshot nya dibawah ini.
Mari membuat mudah memodifikasi widget popular post menjadi warna warni
Dan berikut caranya :
1. Pertama kawan blogger telah mempunyai widget popular post diblog
2. Masuk ke Akun Blog kawan kemudian Pilih editor template ( Edit HTML )
3. Tempatkan Kode CSS ini diatas Script kode ]]></b:skin> atau </style>
/*----- TAB POPULER -----*/ #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}
css diatas ane ambil dari masyadi blog
4. Terakhir simpan template dan cek hasilnya
Bagaimana kawan sudah termodifikasikah
Mudah bukan seperti Kang Masyadi Bilang dan saya pun bilang ternyata begitu mudah.
Tersenyumlah Kawan ✌
Tidak ada komentar
Posting Komentar