Keuntungan terbesar dari widget ini adalah bahwa kita tidak perlu menginstal Javascript apapun yang berat karena kita menggunakan widget yang tersimpan pada server Blogger dan kita hanya akan mengubah tampilan untuk membuatnya menyatu sempurna dengan blog Anda.
Saya harap Anda akan mendapatkan tutorial yang cukup menarik kali ini
karena saya akan memberikan trik sederhana tentang cara membuat widget
popular post menjadi sangat menarik. Jadi mari kita mainkan!
Menambahkan Widget Popular Post ke Blog
- Login dulu ke Blogger > Layout
- Klik Add a gadget dan pilih gadget "Popular Post" dari daftar yang disediakan blogger
- Setinglah seperti gambar di bawah ini! (Ubahlah Most viewed menjadi 'All time', hilangkan centang pada 'image thumbnail' dan 'snippet')
- Simpan widget Anda
- Sekarang masuklah ke Template
- Backup dulu template Anda jika perlu
- Klik Edit HTML
- Carilah kode ini
]]></b:skin>
- Kemudian letakkan kode berikut ini di atasnya
Style 1
.popular-posts {
background-color:#efefef;
border-radious:5px;
-webkit-box-shadow: 0px 3px 5px 1px
#dadada;
box-shadow: 0px 3px 5px 1px
#dadada;
padding:10px 10px 10px
15px;
font-family:Georgia, "Times
New Roman", Times, serif;
}
.popular-posts h2 {
font-family:Tahoma,
Geneva, sans-serif;
height:25px;
margin-top:0px;
margin-left:20px;
margin-bottom:15px;
font-size:14px;
color:#000;
}
.popular-posts ul li {
list-style:disc;
margin-bottom:5px;
}
.popular-posts ul li a {
color:#000;
}
.popular-posts ul li a:hover {
color:blue;
text-decoration:underline;
}
Style 2
.popular-posts {
background-color:#fff;
border-radious:5px;
-webkit-box-shadow: 0px 3px 5px 1px
#dadada;
box-shadow: 0px 3px 5px 1px
#dadada;
}
.popular-posts h2 {
font-family:Tahoma,
Geneva, sans-serif;
margin-top:1px;
height:25px;
margin-bottom:10px;
font-size:14px;
color:#f4f4f4;
background-color:#5a77a0;
height:25px;
border-bottom:#163b70 solid
1px;
border-top-left-radius:5px;
border-top-right-radius:5px;
padding:8px 0 0 20px;
}
.popular-posts ul {
margin:10px 10px 15px
10px;
font-family:Georgia, "Times
New Roman", Times, serif;
}
.popular-posts ul li {
margin-bottom:5px;
vertical-align:middle;
list-style:square;
}
.popular-posts ul li a {
color:#000;
}
.popular-posts ul li a:hover {
color:blue;
text-decoration:underline;
}
Style 3
.popular-posts {
background-color:#fff;
border-radious:5px;
-webkit-box-shadow: 0px 3px 5px 1px
#dadada;
box-shadow: 0px 3px 5px 1px
#dadada;
padding:0px;
}
.popular-posts h2 {
font-family:Tahoma,
Geneva, sans-serif;
margin-top:1px;
height:25px;
margin-bottom:10px;
font-size:14px;
color:#f4f4f4;
background-color:#5a77a0;
height:25px;
border-bottom:#163b70 solid
1px;
border-top-left-radius:5px;
border-top-right-radius:5px;
padding:8px 0 0 20px;
}
.popular-posts ul {
margin:10px 0 15px 0px;
font-family:Georgia, "Times
New Roman", Times, serif;
list-style-type: none;
}
.popular-posts ul li {
padding-left:28px !important;
margin-bottom:5px;
margin-left:-15px;
}
.popular-posts ul li:nth-child(odd) {
background-color:#f4f4f4;
}
.popular-posts ul li a {
color:#000;
}
.popular-posts ul li a:hover {
color:blue;
text-decoration:underline;
}
Style 4
.popular-posts {
padding:0px;
}
.popular-posts h2 {
font-family:Tahoma,
Geneva, sans-serif;
color:#000;
margin-top:1px;
height:25px;
margin-bottom:10px;
font-size:14px;
height:25px;
padding-top:8px;
text-align:center;
}
.popular-posts ul {
margin:10px 0 15px 0px;
font-family:Georgia, "Times
New Roman", Times, serif;
list-style-type: none;
}
.popular-posts ul li {
padding-left:20px !important;
margin-bottom:5px;
margin-left:-15px;
border:#dfdfdf solid
1px;
border-radius:5px;
}
.popular-posts ul li:hover {
background-color:#f4f4f4;
}
.popular-posts ul li a {
color:#000;
text-decoration:none;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Style 5
.popular-posts {
padding:0px;
}
.popular-posts h2 {
font-family:Tahoma,
Geneva, sans-serif;
color:#000;
margin-top:1px;
height:25px;
margin-bottom:10px;
font-size:14px;
height:25px;
padding-top:8px;
padding-left:28px;
}
.popular-posts ul {
margin:10px 0 15px 0px;
font-family:Georgia, "Times
New Roman", Times, serif;
list-style-type: none;
}
.popular-posts ul li {
padding-left:20px !important;
margin-bottom:10px;
margin-left:-15px;
border:#dfdfdf solid
1px;
background-color:#f4f4f4;
-webkit-box-shadow: 0px 3px 5px 1px
#dadada;
box-shadow: 0px 3px 5px 1px
#dadada;
list-style:none;
}
.popular-posts ul li:hover {
-webkit-box-shadow: 0px 0px 0px 0px
#dadada;
box-shadow: 0px 0px 0px 0px
#dadada;
}
.popular-posts ul li a {
color:#000;
text-decoration:none;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Style 6
.popular-posts {
padding:0px;
}
.popular-posts h2 {
font-family:Tahoma,
Geneva, sans-serif;
color:#000;
margin-top:1px;
height:25px;
margin-bottom:10px;
font-size:14px;
height:25px;
padding-top:8px;
padding-left:28px;
}
.popular-posts ul {
margin:10px 0 15px 0px;
font-family:Georgia, "Times
New Roman", Times, serif;
list-style-type: none;
}
.popular-posts ul li {
margin-bottom:10px;
margin-left:-15px;
list-style:disc;
border-bottom:#dedede solid
1px;
}
.popular-posts ul li:hover {
list-style:circle;
}
.popular-posts ul li a {
color:blue;
text-decoration:none;
}
.popular-posts ul li a:hover {
text-decoration:underline;
color:orange;
}
Style 7
.popular-posts {
padding:0px;
}
.popular-posts h2 {
font-family:Tahoma,
Geneva, sans-serif;
color:#000;
margin-top:1px;
height:25px;
margin-bottom:10px;
font-size:14px;
height:25px;
padding-top:8px;
padding-left:28px;
}
.popular-posts ul {
margin:10px 0 15px 0px;
font-family:Georgia, "Times
New Roman", Times, serif;
list-style-type: none;
}
.popular-posts ul li {
padding-top:15px !important;
padding-bottom:15px !important;
padding-left:30px !important;
margin-left:-15px;
background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXtJqgtLO3ia5hFoBThOT6bw4AD4AosqoqWXG2DDm_8Mwp6bsltUSmat6MgFJvll7qpZMHA1JCpRE0znZm0TUKDA0FJrJgbM5xEjtqcHvenT0e0b0h58sqlN8L75PBm9DAkP3guKJdhMo/h120/asterisk_orange.png)
no-repeat 0 10px;
border-bottom:#999 dotted 2px;
}
.popular-posts ul li:hover {
background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilOwNzlrS4BWvQ1xY5HP68nfJBoMiDe6Pz3UcVqT19rImwaMRxFrqUlO5LDtqxvcfXNbTdQKNGGKcx5fA6WM4fCJFsQXbxnkZDgKyBiF6hyphenhyphenBJj3jMz1chE0B1HMW0xVfUjtva6dathOPE/h120/asterisk_yellow.png)
no-repeat 0 10px;
background-color:#f9f9f9;
}
.popular-posts ul li a {
color:#000;
text-decoration:none;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Sekian Tutorial Kali Ini Semoga Dapat Membantu Anda Semua. Terimakasih..!
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot
Sobat sedang membaca artikel tentang Cara Dan Kumpulan Style Untuk Mengubah Tampilan Popular Post Di Blogger Terbaru (Nuryadi Blog's). Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
