KUTIPAN TERBARU

Berbagi Ilmu, Cerita, Tips, Trik, Ebook, Informasi Menarik Untuk Anda,

CARA MODIFIKASI TAMPILAN WIDGET POPULAR POST RESPONSIVE BLOGSPOT

Oke guys terima kasih uda mau berkunjung ke blog ane KUTIPAN-TERBARU kali ini saya memberi sedikit tips untuk anda CARA MODIFIKASI TAMPILAN WIDGET POPULAR POST RESPONSIVE BLOGSPOT Jika anda adalah seorang Pemula blogger atau baru terjun keduai blogger dan khususnya yang menggunakan platform blogspot, saya akan menjelaskan sedikit tentang Modifikasi Popular Post tapi kutipan kali ini hanya bagi anda yang baru menekuni dunia blogging, inilah waktu yang tepat bagi anda untuk mengasah kemampuan untuk memodifikasi blogspot anda.


Pasti kawan-kawan pengen tau tentang Populer Post dan Apa fungsi dari widget Populer Posts ? Fungis Populer Posts adalah widget yang untuk menampilkan beberapa artikel yang paling sering di kunjungi oleh pengunjung yang masuk ke halaman blogspot Anda. Jika Anda termasuk seorang pemula dalam dunia blogging, Anda dapat mengikuti panduan ini untuk dapat memasang Gadget popular posts responsive ini.

Sebenarnya postingan ini juga sudah banyak sekali yang membaginya di halaman situs Online  tentang cara CARA MODIFIKASI TAMPILAN WIDGET POPULAR POST RESPONSIVE BLOGSPOT, hampir sama juga seperti widget yang akan saya bahas ini, namun hanya berbeda dari segi tampilan saja, tujuanya adalah untuk menampakkan blog anda sedikit mewah dengan tampilan blog orang lain.

ok guy tak perlu panjang lebar dalam menjelaskanya, mari kita amulai dengan mempraktekkannya, ikuti langkan ane dibawah ini dengan teliti, 

Langkah Pertama
1. Masuk ke Blogger Dasboard Anda.
2. Silahkan masuk ke halaman layout dengan cara memilih menu dropdown Layout.
3. Akan terlihat halaman Layout. klik pada Add a Gadget.
4. Gulir kebawah dan cari Gadget Popular Posts, setelah ketemu klik untuk membuka.
5. Maka akan terbuka tampilan pada gadget Popular Posts.



Langkah  Kedua

1. Login ke HalamanBlogger.

2. Pilih Pada Template.

3. Klik Pada Edit HTML.

4. Cari kode]] >< / b:skin >
( juka anda susah dalam mencari nya gunakan CTRL+F).

5. Lalu letakkan kode berikut ini tepat diatas ]]> < / b:skin > (jangan di letak dibawah ]] > < / b:skin >  karena akan lain hasilnya)

/* Custom CSS for Blogger Popular Post Widget */
.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;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:1%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:1%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:1%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:1%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:1%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:1%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:1%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:1%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:1%}

 oke guys, udah 

6. Jika semua sudah beres, klik Save untuk menyimpan gadget popular post tang  td kita buat.

oke guys, TAMPILAN WIDGET POPULAR POST RESPONSIVE sudah Berhasil kita buat tdi , mari kita lihat .Hasil dari Tampilan yang Berhasil saya Edit DISINI



Sekian dulu Postingan dari saya gan, semoga bermanfaat untuk kita semua :)



1 Komentar untuk "CARA MODIFIKASI TAMPILAN WIDGET POPULAR POST RESPONSIVE BLOGSPOT"

makasih mbak infonya
lamno-style.blogspot.com

 
Copyright © 2014 KUTIPAN TERBARU - All Rights Reserved
Template By. Catatan Info