Cara Membuat Artikel Populer Blog Yang Cantik

Cara Membuat Artikel Populer Blog Yang Cantik - Selamat sore sahabat chinot yang selalu setia menemani chinot dalam blog ini, sekarang chinot akan mencoba memberikan tutorial blogspot Bagaimana Cara Membuat Artikel Populer Blog Yang Cantik, Artikel Populer atau lebih dikenal dengan Populer Post, merupakan widget yang harus dipasang di blog, karena dengan adanya widget Artikel Populer di Blog maka kita bisa mengetahui Artikel yang paling banyak dibaca pada blog milik kita. selain dari pada itu pengunjung blog juga akan lebih mudah menemukan Artikel yang paling banyak dicari pada blog milik kita. Sebenarnya Cara Membuat Artikel Populer Blog sudah dibahas oleh banyak blogger, tetapi chinot ingin berbagi kembali kepada sahabat chinot apabila Widget Populer Post sahabat igin dimodifikasi supaya tampil lebih menarik. hehe

Baiklah Widget Populer Post yang ingin chinot share menggunakan  kode css yang lumayan cukup ringan, apabila diterapkan pada template kita. Sebagai gambaran anda bisa melihat pada sisi kanan blog milik chinot, kira kira seperti itulah Cara Membuat Artikel Populer Blog Yang Cantik yang akan di share.

Langkah langkah Untuk Membuat Artikel Populer Blog Yang Cantik seperti punya blog chinot ini adalah :

• Login ke blogger
• Lalu Pilih Tata Letak
• Pilih Add Widget Baru
• Pilih "Entri Populer"
• Setting Entri dengan cara : Kosongkan tanda centang pada "Tubnail" dan "Cuplikan" lalu sesuaikan jumlah artikel yang akan ditampilkan
• Setelah itu save template

Langkah Selanjutnya untuk Mempercantik Tampilan dari Widget Populer Post, maka kita harus menambahkan kode script pada template kita, caranya sebagai berikut :

• Pilih Template
• Lalu Klick Edit HTML
• Cari Kode ]]></b:skin> pada template dan kalau sudah ketemu silahkan copy kode css dibawah ini tepat diatas kode ]]></b:skin> tadi.

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; 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:#DF01D7;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:#B041FF;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:#F52887;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:#7ee3c7;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:#f6993d;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:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

• Simpan template dan lihatlah hasilnya.

Nah sekarang sahabat chinot, sudah mempunyai tampilan Widget Populer Post yang Cantik. Gimana, mudah bukan Cara Membuat Artikel Populer Blog Yang Cantik, mudah mudahan artikel ini bisa bermanfaat untuk sahabat. sampai ketemu pada Tutorial berikutnya.

Cara Membuat Artikel Populer Blog Yang Cantik, Cara Memasang Artikel Populer Blog Yang Cantik, Cara Memasang Widget Artikel Populer Post Pada Blog.