Widget Artikel Populer Ketupat Style di Blog

Widget Artikel Populer Ketupat Style di Blog – 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.

Berikut penyajiaanya untuk cara membuat Widget Artikel Populer Ketupat Style di Blog:

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 > Centang Expands Widget Template.
4. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
5. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

<style type="text/css">
        .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;
        }

6. Simpan Template.

Bisa juga dengan menggunakan cara alternatif, yaitu setelah langkah kedua pada point diatas langsung saja klik Tambah Widget > HTML/Javascript lalu taruh kode pada blockquote tersebut kedalam kolom HTML/Javascript, lalu Save dan lihat hasilnya.

Tambahan:
Apabila ingin memasang widget artikel populer seperti yang ada pada:

Maka kode CSS yang harus dipasang adalah copy kode dibawah ini, kemudian lakukan langkah yang sama seperti pada langkah diatas.

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

Semoga artikel ini dapat menjawab pertanyaan dari sahabat saya yang bertanya tentang cara Widget Artikel Populer Ketupat Style di Blog. Sekian dan semoga bermanfaat.