Cara Membuat Widget Popular Post Dengan Efek Gradient

Cara Membuat Widget Popular Post Dengan Efek Gradient
Cara Membuat Widget Popular Post Dengan Efek Gradient - Banyak sekali modifikasi widget popular post yang dibuat oleh para Blogger tentunya untuk mempercantik tampilan blog agar lebih keren lagi, hampir seluruh blog menggunakan sebuah widget popular post namun entah apa tujuan dari dipasangnya widget popular post didalam blog tersebut, tapi yang pasti fungsinya untuk memberitahukan kepada visitor bahwa artikel tersebut yang sedang populer dalam blog itu.

Pada kesempatan kali ini blog Ficri Pebriyana akan membagikan sebuah tutorial cara membuat widget popular post dengan efek gradient. Sebenarnya widget popular post ini bukanlah suatu efek gradient, namun bisa saja kita menggunakan berbagai macam warna-warni untuk menghiasi widget popular post tersebut, disebut dengan efek gradient ya karena warnanya menyerupai gradient dari hitam ke putih atau bisa juga dari biru tua sampai ke biru muda dengan kombinasi warna yang menyerupai efek gradient.

Membuat widget popular post dengan efek gradient ini menggunakan sebuah kode css yang dimana kode css ini sudah valid CSS3, jadi Anda semua tidak perlu khawatir akan terjadi error saat validasi css3 pada blog Anda. Langsung saja bagi Anda yang ingin memodifikasi tampilan widget popular post silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Tata Letak => Tambahkan Gadget => Entri Populer
Thumbnail Gambar dan Cuplikan saya sarankan untuk tidak di centang
3. Klik Simpan
4. Lalu klik Template => Edit HTML
5. Cari kode ]]></b:skin>
6. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>
/* Popular Post */
.PopularPosts .widget-content ul{margin-top:-5px;margin-bottom:-1px;padding-right:20px!important;list-style-type:none}
.PopularPosts .widget-content ul li{position:relative;padding:10px!important}
.PopularPosts .widget-content ul li:first-child{background:#555;width:100%}
.PopularPosts .widget-content ul li:first-child:after{content:&quot;01&quot;;background:#f88c00}
.PopularPosts .widget-content ul li:first-child+li{background:#666;width:100%}
.PopularPosts .widget-content ul li:first-child+li:after{content:&#39;02&#39;}
.PopularPosts .widget-content ul li:first-child+li+li{background:#777;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li:after{content:&#39;03&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li{background:#888;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li:after{content:&#39;04&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li{background:#999;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li:after{content:&#39;05&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li{background:#aaa;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after{content:&#39;06&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li{background:#bbb;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after{content:&#39;07&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li{background:#c1c1c1;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after{content:&#39;08&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li{background:#ccc;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after{content:&#39;09&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li{background:#ddd;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{content:&#39;10&#39;}
.PopularPosts .widget-content ul li:first-child:after,.PopularPosts .widget-content ul li:first-child+li:after,.PopularPosts .widget-content ul li:first-child+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{position:absolute;bottom:1px;right:1px;background:#444;padding:6px 5px;width:20px;line-height:1em;text-align:center;color:#eee;font-size:13px!important}
.PopularPosts .widget-content{padding-right:10px}

7. Klik Simpan Template

Catatan :
- Anda bisa mengganti angka 01 sampai 10.
- Anda bisa mengganti warna disini Kode Warna HTML.
- Usahakan sesuaikan tampilan popular post dengan blog Anda.

Sekian artikel mengenai Cara Membuat Widget Popular Post Dengan Efek Gradient. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

12 Komentar untuk "Cara Membuat Widget Popular Post Dengan Efek Gradient"

  1. keren gan. izin save tutorialnya kali aja nanti mau coba

    BalasHapus
  2. Bang, aku cobak di blog tampilan simple, kenapa ngga ada ya kode ]]> nya di html template?

    BalasHapus
    Balasan
    1. coba dibagian css simpan seperti ini...


      <style type='text/css'>
      /* Popular Post */
      .PopularPosts .widget-content ul{margin-top:-5px;margin-bottom:-1px;padding-right:20px!important;list-style-type:none}
      .PopularPosts .widget-content ul li{position:relative;padding:10px!important}
      .PopularPosts .widget-content ul li:first-child{background:#555;width:100%}
      .PopularPosts .widget-content ul li:first-child:after{content:&quot;01&quot;;background:#f88c00}
      .PopularPosts .widget-content ul li:first-child+li{background:#666;width:100%}
      .PopularPosts .widget-content ul li:first-child+li:after{content:&#39;02&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li{background:#777;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li:after{content:&#39;03&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li+li{background:#888;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li+li:after{content:&#39;04&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li{background:#999;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li:after{content:&#39;05&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li{background:#aaa;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after{content:&#39;06&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li{background:#bbb;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after{content:&#39;07&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li{background:#c1c1c1;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after{content:&#39;08&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li{background:#ccc;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after{content:&#39;09&#39;}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li{background:#ddd;width:100%}
      .PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{content:&#39;10&#39;}
      .PopularPosts .widget-content ul li:first-child:after,.PopularPosts .widget-content ul li:first-child+li:after,.PopularPosts .widget-content ul li:first-child+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{position:absolute;bottom:1px;right:1px;background:#444;padding:6px 5px;width:20px;line-height:1em;text-align:center;color:#eee;font-size:13px!important}
      .PopularPosts .widget-content{padding-right:10px}
      </style>

      Hapus
    2. lah bos dia nanya nya apa, sibos jawabnya apa, kasian banget tuh orang, hahaha...

      Hapus
    3. kode ]]></b:skin>
      memang ada yang tidak di gunakan di setiap template, fungsinya supaya loading tidak lama, makanya kode itu di hapus lalu css dimasukan ke kode <style type='text/css'> KODE CSS </style>

      Hapus
  3. selamat malam gan
    saya menyimak aja dulu gan trik nya ne pi trik nya bagus

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. keeren ,cantik widgetnya boleh di coba tuhh,hehe

    BalasHapus
  6. Makasih gan atas tipsnya salam kenal dan dinanti kunjungan baliknya

    BalasHapus
  7. thanks for sharing

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting