Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Widget Artikel Populer Ketupat Style di Blog

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.

Widget Artikel Populer Ketupat Style di Blog

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.

Berlangganan artikel via email

16 Response to "Widget Artikel Populer Ketupat Style di Blog"

makasi sobat, atas share nya. sangat bermanfaat dan menambah pengetahuan tentang pernak pernik blog

Balas

izin sedot ilmuny sobat

Balas

Mantab sob versi ketupat nya! Saya boleh pesen widget batagor style gak kira-kira? Apa lumpia style gitu? Hehehe.. :D

Balas

ini pesenannya salah satu teman sob :) terimakasih kunjungannya sobat

Balas

silahkan sob, semoga bermanfaat

Balas

ini.. nii yang jadi inspirasi.. okee sobb di tunggu ya ntar mao bikin versi lontong style, gimana dari judulnya aja udah keren kan :D

Balas

wah mantap sudah dicoba hasilnya oke juga sobat
memang blog ini spesial tutorial yg perlu digunakan dan dipelajari dalam dunia bloger, syukur saya bisa menjumpai blog seperti ini, bisa banyak belajar
terima kasih banyak sobat

aku test di sini sobat, hasilnya keren banget
http://penyuluhp.blogspot.com/

Balas

Numpang praktek tutorialnya gan, sangat mantap dan oke banget

Balas

loadingnya berat gak tuh bang??????

Balas

Aku tuh malah kebayang klo widget nya berbentuk kerak telor.. asyik juga kayanya..

Balas

ringan bang, seperti saat bang berkunjung kesini dan apabila agan sudah melihat blog demo juga :)

Balas

terimakasih untuk kunjungannya om penyuluh perikanan dan bang KBM, silahkan jika ingin mencoba untuk mempraktekan. semoga bermanfaat :)

Balas

kalo boleh saya pesen, tolong bikinin dong mas spesial buat saya..

Balas

keren widgetnya ^_^

Balas

ane dapat inspirasi dari tutorial ini, sudah saya terapkan, makasih ya

Balas

unik nich mas..saya simpen dulu scritpnya sapa tahu nanti berminat. Thanks mas..teruslah berbagi.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Widget Artikel Populer Ketupat Style di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode