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

  • Membuat thumbnail hanya tampil di homepage
    Untuk sahabat yang belum tahu bagaimana menerapkan trik dan cara ini mungkin sering punya pertanyaan, kok bisa ya ketika di halaman beranda/depan/homepage blog image/gambarnya muncul tetapi ketika di halaman posting kok hilang...?, mungkin ini bukan bahasan baru lagi, hanya saja saya menulis ini untuk sobat yang ingin tahu trik dan caranya. ji…
  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • Modifikasi widget link list dengan css di blogger
    Selamat pagi sobat blogger semua, kembali muncul share tentang css ni buat widget link list blogger agar tampil lebih menarik sekalian juga bernomor seperti widget popular post. widget link list di gunakan untuk menempatkan beberapa link yang di anggap penting atau untuk mengarahkan pengunjung blog pada sebuah halaman. bisa juga untuk memajang…
  • Membuat posting di homepage warna warni
    salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasika…
  • CSS widget label cloud blogger
    Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css. untuk menerapakannya ikuti langkah di bawah ini: 1. Masuk Dasboard Blogger 2. Pilih Template 3. Kemudain Pilih Edit HTML 4. Salin CSS be…
  • Judul posting responsive
    Mungkin ada dari sobat sekalian yang mencoba mengatur tampilan posting di homepage agar terlihat rapi saat responsive berjalan, dengan mengakali membuat judul posting sependek mungkin walau pun judul posting tersebut memang sedikit panjang sehingga nantinya judul tidak terlihat bertumpuk dan tidak rapi untuk template yang tidak menerapkan line-hei…

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