4 Widget Popular Post yang keren

Salah satu widget yang lazim dipasang pada sebuah blog adalah widget Popular Post. Ini merupakan widget yang berfungsi untuk mempromosikan artikel-artikel kita kepada pengunjung (selain arsip dan lainnya). Disini saya akan berikan tutorial membuat 4 Widget Popular Post yang keren kepada sobat-sobat sekalian. Sobat bisa pilih salah satu untuk diterapkan pada blog kesayangan sobat.

Setiap blogger menginginkan tampilan blognya tampak berbeda, unik, bagus dan bisa mewakili gaya mereka masing-masing. Semoga di antara keempat pilihan Widget yang akan dijelaskan di bawah ada yang dapat sobat gunakan untuk mempercantik blog sobat.

Cara menerapkannya tak sulit kok sob, seperti tutorial-tutorial sebelumnya. Sobat hanya perlu memasukkan deretan script ke dalam template blog sobat. Bagi yang belum tahu bisa membaca postingan tentang cara memasang widget Sosmed mengambang, atau bisa juga melihat artikel tentang cara menampilkan widget di halaman tertentu sehingga sobat bisa mengatur tampilan blog lebih baik lagi.

Sebelum menggunakan script yang akan saya catatkan di bawah, sobat harus terlebih dahulu memasang Widget Popular Post melalui menu Tata Letak pada halaman administrasi blog. Jika sudah ada widgetnya, kita lanjut ke proses modifikasi.

Ini adalah gambar tampilan-tampilan gaya widget popular post yang akan sobat pilih. Mau dicoba satu persatu juga boleh...


http://kendhou.blogspot.co.id/2015/12/cara-membuat-widget-keren.html

Cara memodifikasi tampilan widget ini adalah :

  • Buka menu Template > Edit HTML
  • Cari kode ]]></b:skin> , agar lebih cepat gunakan ctrl + F
  • Masukkan script diatas kode b:skin tadi, susunan script berdasarkan urutan pada gambar diatas. gunakan salah satu saja ya sob, kalau kurang cocok ganti dengan script yang lainnya.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

2

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

3

 #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; /* Color of the widget's title */
}
#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; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-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; /* font size of post titles */
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;
}

4

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

Jika sudah dimasukkan scriptnya ke dalam template blog sobat, klik Simpan Template kemudian periksa tampilan blog sobat. Mudah bukan? Dan sekarang tampilan widget sobat pun sudah sangat berbeda dari widget bawaan blogger yang masih standar dan pastinya membuat cantik halaman blog sobat.

Semoga tutorial sederhana tentang pembuatan 4 widget popular post yang keren dapat memberikan manfaat bagi sobat-sobat sekalian. Jangan lupa untuk membagikan hal-hal yang bermanfaat ke sesama ya sob.
Salam Pintar...

Berlangganan update artikel terbaru via email:

3 Responses to "4 Widget Popular Post yang keren"

  1. 100%TERPERCAYA TOKO ONLINE RESMI BUKAN PENIPUAN DI DELIMA PONSEL 100% KAMI JAMIN UANGX KAMI KEMBALIKAN APA BILA BARANGX TIDAK SAMPAI DALAN JANGKA 2 HARI ATAU KUNJUNGI WEBSITE RESMI KAMI DI http://delima-ponsel.blogspot.com
    PONSEL:HUB/SMS:0852-4004-4475 PIN BB:5B3C6CE6
    Ready Stock ! Apple iphone 5 32GB Rp.3.000.000,-
    Ready Stock ! Apple iPhone 5S 32GB Rp.4.000.000,-
    Ready Stock ! Apple iPhone 6 plus 32gb Rp.5.500.000,-
    Ready Stock ! Samsung Galaxy S5 Rp.2.500.000
    Ready Stock ! Samsung Galaxy S6 32GB Putih Rp.3.700.000
    Ready Stock ! Samsung Galaxy S4 I9500 Putih Rp.2.200.000
    Ready Stock ! Samsung Galaxy Note 3 PUTIH Rp.3.000.000
    Ready Stock ! Samsung Galaxy Note 4 SM-N910H Gold Rp.3.500.000,-
    Ready Stock ! Samsung Galaxy A3 A300H 16GB Rp.2.000.000
    Ready Stock ! Samsung Galaxy A5 A500F Silver Rp. 2.500.000,-
    Ready Stock ! Samsung Galaxy E5 E500H Putih Rp.1.700.000
    Ready Stock ! Samsung Galaxy E7 E700H Putih Rp. 1.900.000,-
    Ready Stock ! Apple iPhone 4 16GB - Black Rp.1.800.000,-
    Ready Stock ! Apple iPhone 4S 16GB (dari Telkomsel) Rp.2.200.000,-
    Ready Stock ! Samsung Galaxy Grand Prime SM-530H Rp.1.200.000
    Ready Stock ! Asus Zenfone 2 ZE551ML RAM 4GB-64GB Rp.2.700.000,

    ReplyDelete
  2. Boss mau tanya kok mobil aku rino 115 ps gak mau naik gas nya walau udah di gas.?

    ReplyDelete
    Replies
    1. Bisa saja karena stanggas (drive sub assy) yang rusak, biasanya antara as dan tuas lepas sambungannya. Bisa disambung lagi menggunakan tehnik las, tetapi akan lebih baik lagi jika diganti stanggasnya.
      Lalu bisa juga karena supply bahan bakar yang tidak lancar, coba periksa semua jalur minyak dari tangki hingga PI.

      Delete

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel