Cara Membuat Widget Artikel Populer Unik Diblog

Widget popular post atau yang biasa disebut artikel populer yang berbentuk seperti ketupat ini sangat sederhana dan simpel. Tidak seperti kebanyakan widget artikel populer lainya yang menggunakan bermacam model, misalnya seperti menggunakan mode slider dan yang lainnya. Entah yang dimaksud dari salah satu sahabat saya yang bertanya untuk membuat widget artikel populer adalah model seperti yang ada pada gambar diatas atau bukan. Semisal yang dimaksud bukan seperti itu, maka ini hanya gambaran dari kode CSS untuk membuatnya apabila masih ingin dilanjutkan untuk di modifikasi kembali atau mungkin ingin mencoba dari style widget artikel popuper yang lainnya.

1. Login ke akun blogger.
2. Klik Tata Letak, lalu pada widget artikel populer yang aslinya atau masih standard default blogger ubahlah pengaturannya menjadi seperti pada gambar dibawah kemudian klik Save.

1. Login ke akun blogger.
2. Klik Tata Letak, lalu pada widget artikel populer yang aslinya atau masih standard default blogger ubahlah pengaturannya menjadi seperti pada gambar dibawah kemudian klik Save.
3. Selanjutnya klik Template > Edit HTML > Lanjutkan > CentangExpands Widget Template.
4. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
5. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

        .PopularPosts .item-title{display:yes}
        .PopularPosts ul li {
        background: -moz-linear-gradient(top, #fff 1%, #00ff00 50%);
        border-radius:30px 0px 30px 0px;
        float: left;list-style: none outside none;margin: 0px !important;padding: 1px !important;
        border: 2px solid #ccc;
        overflow: hidden;
        box-shadow: 1px 1px 6px 1px #3d85c6;
            font-style: normal;
            width: 100%;
            height: 30px;
        border-radius: 30px 0px 30px 0px;
        }
        .PopularPosts ul li:hover{
        background: -moz-linear-gradient(top, #FFFFFF 1%, #ff0000 50%);
        overflow: hidden;
            color: #414141;
            width: 100%;
            height:30px;
        border: 2px solid #7f7fff;
        box-shadow: 1px 1px 6px 1px #3d85c6;
        }

        .PopularPosts ul li img {
        padding:1px;
        margin:1px;
        border-radius:25px 0px 25px 0px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        border: 1px solid #7f7fff;
        height: 25px;width:60px;
        overflow: hidden;
        }

        .PopularPosts ul li img:hover {
        border:1px solid #ffffff;
        border-radius:25px 0px 25px 0px;
        background: -moz-linear-gradient(top, #FFFFFF 1%, #1c1c1c 50%);
        box-shadow: 0px 0px 10px #ffffff;
        }
        .PopularPosts ul li:hover{
        background: -moz-linear-gradient(top, #FFFFFF 1%, #ff0000 50%);
        overflow: hidden;
            color: #414141;
            width: 100%;
            height:30px;
        border: 2px solid #7f7fff;
        box-shadow: 1px 1px 6px 1px #3d85c6;
        }
        .PopularPosts ul li img {
        padding:1px;
        margin:1px;
        border-radius:25px 0px 25px 0px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        border: 1px solid #7f7fff;
        height: 25px;width:60px;
        overflow: hidden;
        }

        .PopularPosts ul li img:hover {
        border:1px solid #ffffff;
        border-radius:25px 0px 25px 0px;
        background: -moz-linear-gradient(top, #FFFFFF 1%, #1c1c1c 50%);
        box-shadow: 0px 0px 10px #ffffff;
        }
        .PopularPosts ul li img {
        padding:1px;
        margin:1px;
        border-radius:25px 0px 25px 0px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        border: 1px solid #7f7fff;
        height: 25px;width:60px;
        overflow: hidden;
        }
        .PopularPosts ul li img:hover {
        border:1px solid #ffffff;
        border-radius:25px 0px 25px 0px;
        background: -moz-linear-gradient(top, #FFFFFF 1%, #1c1c1c 50%);
        box-shadow: 0px 0px 10px #ffffff;
        }
        .PopularPosts ul li img:hover {
        border:1px solid #ffffff;
        border-radius:25px 0px 25px 0px;
        background: -moz-linear-gradient(top, #FFFFFF 1%, #1c1c1c 50%);
        box-shadow: 0px 0px 10px #ffffff;
        }
Bisa juga dengan menggunakan cara alternatif, yaitu setelah langkah kedua pada point diatas langsung saja klik Tambah Widget > HTML/Javascriptlalu taruh kode pada blockquote tersebut kedalam kolom HTML/Javascript, lalu Save dan lihat hasilnya.
Bisa juga dengan menggunakan cara alternatif, yaitu setelah langkah kedua pada point diatas langsung saja klik Tambah Widget > HTML/Javascriptlalu taruh kode pada blockquote tersebut kedalam kolom HTML/Javascript, lalu Save dan lihat hasilnya.
Sekian semoga bermanfaat :)

Berikut  Cara Membuat Artikel Populer Unik Diblog:

<style type="text/css">

6. Simpan Template.