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.

Artikel Terkait

  • CSS untuk komentar blogger facebook
    Membuat tampilan komentar blogger seperti facebook dengan css yang di buat CSS ini dipersembahkan oleh dte, memasangnya pun tidak rumit cukup mudah. css ini telah di edit oleh kang ismet dengan menghilangkan border/garis pinggir serta padding left dan right atau jara lebar dalam kanan dan kiri. Demo Cara Membuat Komentar Blogger S…
  • Floating Social Bookmark CSS
    Sekarang ini untuk membuat floating social Bookmark sudah sangat mudah, anda bisa mengikuti dua cara di bawah ini. Demo Cara 1: Script Floating Social Bookmark diletakkan di widget blog. Login ke blog Anda. Pilih Tata letak Pilih Add Gadget (saran: pilihlah gadget paling bawah) Pilih HTML/JavaScript. Copy dan Paste-kan script dibawah …
  • Edit CSS tanpa masuk ke dalam Edit HTML
    Setiap blogger memang selalu berhubungan dengan CSS terutama dalam gaya tampilan untuk template, terkadang dalam meng-edit CSS kita kerap melakukan hal yang terkadang membuang waktu dan kurang berguna yaitu membuka editor html dan menyimpan CSS secara berulang - ulang. hal ini kita lakukan bukan karena tanpa alasan, selain untuk menciptakan ta…
  • Thread komen blogger dengan commentDay
    gaya commentDay adalah gaya untuk standar Blogger Thread comment. Dengan gaya ini komentar default thread comment blogger lebih menjadi terlihat menarik. Gaya ini dirancang sesuai dengan gaya yang telah lama dicari yaitu: sederhana, jelas dan modern. Demo untuk memasang gaya thread komen ini, ikuti langkah berikut: Tambahkan kode be…
  • Menandai komentar admin dengan css
    Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya. blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang ber…
  • Costume halaman error 404
    404 Adalah Kode Halaman Error yang biasa muncul pada setiap halaman web/blog ketika seorang visitor (pengunjung) mengunjungi url yang tidak ada atau telah di hapus dari web/blog. Nah, kali ini saya ingin berbagi tutorial "Bagaimana Cara Membuat Halaman Error 404" untuk di pasang pada blog sobat dengan sedikit custom dan tambahan jquery. Untuk…

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...