CSS untuk widget Popular Post blogger/blogspot

CSS untuk widget Popular Post blogger/blogspot

Dalam posting ini saya sajikan tujuh gaya untuk posting populer widget di blogger. Pertama, Anda perlu menambahkan widget populer posting di blog. Untuk itu, Pergi ke Tata Letak> Tambah Gedget, lalu pilih populer Post widget. Kemudian hapus centang thumbnail/gambar dan tampilkan cuplikan. Jika Anda sudah memiliki posting widget populer hanya perlu hapus centang thumbnail gambar dan potongan cuplikan saja.

Selanjutnya, Buka Template> Edit HTML> Cari dengan nama yang diberikan untuk widget Popular post anda. Contoh terlihat seperti ini,

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> 
<b:includable id='main'>   
<b:if cond='data:title'><h2><data:title/></h2></b:if> 
        
.....kode widget......

</b:includable> 
</b:widget>

Lalu sisipkan kode <div class='widget-content popular-posts'> di bawah kode tag

<b:if cond='data:title'><h2><data:title/></h2></b:if> 

dan beri tag penutup </div> di atas kode </b:includable>

Lihat contoh di bawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> 
<b:includable id='main'>    
<b:if cond='data:title'><h2><data:title/></h2></b:if>          
<div class='widget-content popular-posts'>     
        
.....kode widget......

</div> 
</b:includable> 
</b:widget> 

Langkah ini adalah untuk ketika Anda menerapkan gaya ini ke widget maka ini akan berlaku untuk header widget juga.

Selanjutnya, cari kode di bawah ini

]]> </ b: skin>

dan salin kode css style yang anda inginkan di atasnya.

CSS Popular Post 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; 
}

CSS Popular Post 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; 
}

CSS Popular Post 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; 
}

CSS Popular Post 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; 
} 

CSS Popular Post 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; 
} 

CSS Popular Post 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; 
}

CSS Popular Post 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/AVvXsEiXVhO1NJfWiiyMj9P2C18T3ZTsy03-2Yt1_shpvQa3JfiBMjOiUi51falZkRdmCUf8o1CWXS4fqbx4s9eYiFidLX6uSo1ZoAsd35OxoTl-WUm0q0DoJu4ToLGceeTdMAbJMy4gdgdud-c/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/AVvXsEhMQhZ4dZNOSFBix-TI1c7rKIjwJ4dL8XZ1LPJht_Q9Kv0NfTFhXb3kL2g3ll8V_L80PPGY-Gnq9o3Ob3tT6wFx5y4HsrMf7DSdHly3jUm0LsDDwgcYTdFJk2WVBt4u_kaEz8mGoWbcV4o/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; 
} 

Semoga berguna... jangan lupa komentarnya.

CSS untuk widget Popular Post blogger/blogspot


CSS untuk widget Popular Post blogger/blogspot

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Hatsaka. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Hatsaka dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Columbia Mary pada tanggal Saturday, July 20, 2013