Breaking News
Loading...
Monday, April 11, 2016

Cara Membuat Popular Post Keren di Blog

11:32:00 AM

Cara Membuat Popular Post Keren di Blog. Mempercantik blog merupakan salah satu hal yang penting dalam suatu blog. Hal itu bertujuan agar para pengunjung merasa betah untuk berlama - lama di blog kita. Salah satunya dengan membuat Widget Popular Posts yang keren, menarik dan tentunya tidak memberatkan loading blog. Untuk membuat Popular Post sangat mudah, anda tinggal menambahkan kode CSS di dalam template blog.

Popular Post mempunyai fungsi sebagai navigasi menu untuk artikel - artikel yang banyak dilihat dan menjadi populer oleh para pengunjung blog. Selain itu juga berfungsi sebagai internal link untuk blog kita. Membuat internal link memang sangat di anjurkan oleh Google dan dapat membuat blog kita menjadi User Friendly.


Cara Membuat Popular Post Keren di Blog
Cara Membuat Popular Post Keren di Blog


Untuk langkah - langkah membuat Popular Post sebagai berikut :

  1. Masuk ke Blogger
  2. Pilih Layout
  3. Add Gadget dan pilih Popular Post ( Atur Popular Post agar menampilkan Judul Artikel saja )

Setting Popular Post
Setting Popular Post


Popular Post bawaan dari Blogger masih berbentuk sederhana dan kurang menarik .  Untuk membuat tampilan Popular Post di Blog menjadi keren dan menarik berikut beberapa Popular Post Keren yang  bisa dipasang di blog Sobat.

Untuk membuatnya kita tinggal tambahkan CSS di bawah ini pada Tamplate Blog dan simpan kode tersebut di ]]></b:skin> atau </style> lalu Simpan.

1. Popular Post Keren I

Post1

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}


2. Popular Post Keren II

Cara Membuat Popular Post Keren di Blog

//PopularPostKeren // Http://ardiands.com
===========================================//
#PopularPosts1 ul li a:hover{color:;text-decoration:none}#PopularPosts1 ul li a{-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;color:#333333;display:block;font-family:'Trebuchet MS',Helvetica,sans-serif;font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;letter-spacing:normal;line-height:18px;margin:0px40px0px0px;min-height:30px;orphans:2;padding:0px;text-align:-webkit-auto;text-decoration:none !important;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}#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,#PopularPosts1 ul li:first-child+li+li+li +li+li+li+li+li+li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li {background:#9932CC;width:90%}#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:#E6E6FA ;width:90%}#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+ li:after{content:"9"}#PopularPosts1 ul li:first-child+li+ li+li+li+li+li+li+li+li{background:#9932CC;width:90%}#PopularPosts1 ul li:first-child+li+li+li+ li+li+li+li+li+li:after{content:"10"}#PopularPosts1 ul li:first-child+li+li+li+li+li{background:#9932CC ;width:90%}#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:#E6E6FA;width:90%} #PopularPosts1 ul li:first-child+li+li+li+li+li+ li:after{content:"7"}#PopularPosts1 ul li:first-child+li+ li+li+li{background:#E6E6FA;width:90%}#PopularPosts1 ul li:first-child+li+li+li+ li:after{content:"5"}#PopularPosts1 ul li:first-child+li+ li+li{background:#9932CC;width:90%} #PopularPosts1 ul li:first-child+li+li+li:after{content:"4"} #PopularPosts1 ul li:first-child+li+li {background:#E6E6FA;width:90%} #PopularPosts1 ul li:first-child+li+li:after{content:"3"}#PopularPosts1 ul li:first-child+li{background:#9932CC;width:90%} #PopularPosts1 ul li:first-child+li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#E6E6FA;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:3px solid #FF8C00;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow:3px 3px 3px #000;padding:10px}



Itulah beberapa cara membuat Popular Post Keren di Blogspot. Teman - teman blogger bisa mengaplikasikan di blog  dan lihatlah hasilnya. Semoga dengan Popular Post ini dapat membuat blog teman - teman menjadi lebih menarik. Semoga bermanfaat dan selamat mencoba.

6 comments:

  1. Artikel yang bermanfaat..trimakasih gan atas script nya..langsung saya praktekin.

    Semoga ardiands blogs terus berkibar.

    ReplyDelete
    Replies
    1. :)) semoga bloger newbie juga semakin berkibar

      Delete
  2. Ijin sedot ilmunya mas ardiands.
    Widget nya bikin blog aku smakin mantap.
    Terimakasih

    ReplyDelete
  3. Ini blog yang aku cari..banyak ilmu yang aku dapat disini..
    Siap jadi member setia Ardiands Blogs

    ReplyDelete
    Replies
    1. Wah koq member.. :) jadi sobat Ardiands Blogs aja mas hendra.

      Delete

 
Toggle Footer