Cara Modifikasi Widget POLULAR POST Keren


Salam Blogger, Kali ini BLOGGINGPASURUAN akan share lagi mengenai Cara Membuat Widget POLULAR POSTS Modifikasi Keren. Widget Popular Post memang disediakan ole Blogger, caranya kita masuk pada blogger dashboard >> layout >> add gadget, disini akan banyak pilihan gadget yang disediakan oleh Google termasuk salah satunya adalah widget popular posts.

Namun ada kalanya Sahabat blogger ingin memodifikasinya sendiri agar tampak lebih keren, hal itu sah sah saja agar blog sobat tampak lebih menarik.

Langsung saja kita menuju pada langkah langkah membuat Widget POPULAR POSTS Modifikasi.

1. Anda harus sudah memiliki Widget popular posts dari google ( atau sudah memasangnya  )
2. Jika belum memiliki silahkan dipasang ( caranya seperti yang saya tulis di atas “warna merah” )

Catatan : centang pada kotak snippet saja ! Karena Widget ini tidak menampilkan gambar jadi , Thumbnail tidak perlu di centang.

Cara Modifikasi Widget POLULAR POST Keren

3. Saya anggap Sobat Blogger sudah memiliki Widget Popular posts
4. Masuk ke Blogger Dashboard >> Template >> Edit HTML
5. Cari kode ]]></b:skin> gunakan Ctrl + F agar lebih mudah mencari kodenya
6. Kemudian letakkan kode CSS dibawah ini diatas kode ]]></b:skin>

POPULAR POSTS STYLE 1#

CCara Modifikasi Widget POLULAR POST Keren

Kode CSS style 1#
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* WARNA JUDUL POSTING*/
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;  
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* WARNA PADA ANGKA */
background: #FB8835; /* WARNA BACKGROUND PADA ANGKA */
border: .2em solid #fff; /* WARNA BORDER */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;  
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);  
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* WARNA JUDUL */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}


POPULAR POSTS STYLE 2#


Cara Modifikasi Widget POLULAR POST Keren

Kode CSS style 2#
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* WARNA JUDUL POSTING */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* WARNA BACKGROUND ANGKA */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* WARNA BACKGROUND PANAH KANAN*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;  
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* WARNA BACKGROUND MOUSE DIGULIRKAN */
}  
#PopularPosts1 ul li a:hover{
color:#444; /* WARNA LINK SAAT MOUSE DI GULIRKAN */
margin-left:3px;
}



POPULAR POSTS STYLE 3#

Cara Modifikasi Widget POLULAR POST Keren


Kode CSS style 3#
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}


POPULAR POSTS STYLE 4#

Cara Membuat Widget POLULAR POST Modifikasi Keren

Kode CSS style 3#
#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}


7. Save Template ( selesai )
CCS ini valid jadi tidak ada masalah dengan loading blog. Jika ada masalah atau hal yang tidak di mengerti mohon untuk meninggalkan pesan pada kotak komentar dibawah ini… Salam Blogger dan Terimah Kasih.


Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

4 comments

Write comments
October 5, 2014 at 3:16 AM delete

Muantapppppp..... pwoll :) thanks infonya

Reply
avatar
October 6, 2014 at 4:27 AM delete

sama sama :) ada masalah silahkan tinggalkan komentarnya, insyaAllah saya coba bantu :)

Reply
avatar
Anonymous
AUTHOR
October 11, 2014 at 7:17 PM delete

Ijin Praktek... Makasih Sob... :)

Reply
avatar
Bersatuterus
AUTHOR
September 29, 2016 at 11:05 PM delete

kalau ngasih informasi yang jelas dong,informasi yang anda berikan di artikel ini tidak ada yang jelas

Reply
avatar