Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger - Hallo sahabat segala mengenai video, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, Artikel CSS, Artikel Tutorial Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger
link : Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger

Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger

Popular post adalah widget pada blog yang menampilkan artikel yang paling banyak dibaca oleh pengunjung. Popular post warna-warni dipopularkan oleh template Evo Magz yang menggunakan popular post warna-warni. Warna-warni ini berarti memiliki banyak macam warna seperti pelangi. Selain memiliki style warna-warni popular post ini bisa menampilkan tumbnail dan juga cuplikan artikel. Bisa anda munculkan dengan mengaturnya ketika membuat popular post.

Popular post ini juga aktif bergerak dan berjalan sesuai dengan banyaknya views suatu post,semakin besar views post tersebut maka akan bergerak keatas. Anda juga bisa menampilkan gambar atau thumbnail di dalam popular post.

Popular post ini sangatlah menarik dan keren. Anda bisa mengganti warna di popular post ini menjadi warna yang anda sukai. Selain menarik perhatian pembaca tetapi juga menambah nilai estetika blog anda. Bagi anda yang ingin membuat widget popular post maka silakan ikuti langkah-langkah berikut.

Cara Membuat Widget Popular Post Warna-Warni

Langkah 1 (Buat Widget Popular Post)

Silakan masuk ke blogger,lalu klik Tata Letak → Tambahkan gadget → Entri Popular

Lalu klik simpan

Langkah 2 (Menambahkan style)

Silakan klik Template → Edit HTML ,lalu cari kode ]]></b:skin>

Langkah 3

Salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau </style>

#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}

Lalu klik Simpan

Sekarang buka blog anda dan lihat apakah popular post sudah muncul. Jika sudah saatnya kita berpisah. Cukup sekin tutorial yang bisa saya bagikan semoga bermanfaat.

Demikianlah Artikel Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger

Sekianlah artikel Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Popular Post [Warna-Warni] Bergerak Di Blogger dengan alamat link https://trik-video.blogspot.com/2017/03/cara-membuat-popular-post-warna-warni.html

Tweet