Monday, April 22, 2013

Cara Membuat Widget Artikel Populer Unik Diblog (eghooy main blog)

Rate this posting:
{[['']]}


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  Cara Membuat Artikel Populer Unik Diblog:

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.

Sekian semoga bermanfaat :)

Description: Cara Membuat Widget Artikel Populer Unik Diblog (eghooy main blog) Rating: 5 Reviewer: Ega Bagus Permadi ItemReviewed: Cara Membuat Widget Artikel Populer Unik Diblog (eghooy main blog)
Kamu sedang membaca artikel tentang Cara Membuat Widget Artikel Populer Unik Diblog (eghooy main blog) Silahkan baca artikel Eghooy Main Blog Tentang Yang lainnya. Kamu boleh menyebar Luaskan atau MengCopy-Paste Artikel ini, Tapi jangan lupa untuk meletakkan Link Cara Membuat Widget Artikel Populer Unik Diblog (eghooy main blog) Sebagai sumbernya


Artikel Terkait:

Reactions:

0 comments:

Post a Comment

Berkomentarlah Yang Bijak salam Eghooy Main Blog