advertisement

Modifikasi Desain Widget Populer Post di Sidebar Blog

By On Thursday, February 18th, 2016 Categories : Internet

PalingPopuler.Com mengabarkan tentang Modifikasi Desain Widget Populer Post di Sidebar Blog.

Modifikasi Desain Widget Populer Post di Sidebar Blog
Desain Widget Populer Post di Sidebar Blog – Jika sobat melihat artikel terpopuler di SL Style Magz template, pada bagian sidebar akan terlihat berbeda seperti biasanya. 
Model artikel terpopuler seperti itu memang menjadi salah satu hal menarik di template terkenalnya Mas Sugeng, yakni Evo template.

Artikel terpopuler seringkali dijadikan sebuah menu wajib ada pada sebuah blog. Kenapa demikian? Selain menjadi salah satu faktor penilaian indexing yang dilakukan Google, widget di sidebar ini menjadi salah satu hal yang bisa memudahkan pembaca ketika ingin mengetahui artikel terpopuler di blog sobat.

Baca juga cara kerja seach engine Google dalam melakukan rangking terhadap se

Cara Mudah Modifikasi Desain Widget Populer Post di Sidebar Blog

advertisement

Cara sederhana saja kok, cukup dengan menambahkan kode-kode di dalam template blog sobat, jadi dah.

1. Masuk akun blogger
2. Pilih template > mode HTML
3. Copas kode di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>

#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; text-align:left;}
#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:90%;margin:0 15px}
#PopularPosts1 li{ width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}
#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #777; height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}
#PopularPosts1 ul li:after{position: absolute;content: ”;left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #777;
/* background color of the right arrow*/}
#PopularPosts1 ul li a{color:#282b2b;text-decoration:none;font-size:14px;font-weight: 400;}
#PopularPosts1 ul li {position: relative;display: block;padding: .4em .1em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #fafafc;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}
#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */}
#PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}

4. Save template

Mudah kan? DEMO

advertisement

Baca juga Cara Modifikasi Judul (H2) Widget pada Sidebar dan Footer Blog

Demikian tips SEO design blog kali ini, khususnya Cara Modifikasi Desain Widget Populer Post di Sidebar Blog. Semoga bermanfaat. Salam.

Source:
http://blogromeltea.blogspot.co.id/2015/10/modifikasi-tampilan-widget-popular-post.html

", numPosts: 5, summaryLength: 140, titleLength: "auto", thumbnailSize: 60, noImage: "http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w60-h60-c/no-image.png", containerId: "related-post", newTabLink: false, moreText: "", widgetStyle: 2, callBack: function() {} };

Modifikasi Desain Widget Populer Post di Sidebar Blog
sumber : forumblogindo.com

Related Post :

Contoh Blog Tips SEO Desain Template SEO Friendly
Google
Cara Menghasilkan Uang Dari Blog Panduan Lengkap
Modifikasi Desain Widget Populer Post di Sidebar Blog | Admin | 4.5