CSS untuk widget Popular Post blogger/blogspot

CSS untuk widget Popular Post blogger/blogspot

CSS

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/AVvXsEgp4y4E3tRvfi9lV4PXf-pLmukkc00KhWgE13iUkLawTM65uHW3fBoZe7mybzc7GewMyAauWFUtEmZ3n2wpMxbZORoEmkerJHyaIcTttUuqwD0pBiicOyIHwxq0sNoK9yfAebMp09fbMo8/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/AVvXsEgzvlazCaBC6AKv5-FMvXO_o_M3bcqYSef1bgpQ12tW08nE5vbBoE8gy2OyxD52GjQAOhMrzt6xO1g5ZE2u7bTYe166yRQz-q_19m1VTtwmQSY04mo5AoF5IkB5aXbnNBrhSrdRezXBai4/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.

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...