Mempercantik Tampilan Judul Widget dengan Fancy Ribbon

Mungkin anda bosan dengan desain widget yang serba monoton. Hari ini kita akan belajar bersama memodifikasi judul widget menjadi lebih menarik. Yang sudah jago dengan photoshop maupun corel sudah mengetahuinya. Namanya fancy ribbon, tampilannya mirip seperti pita.

Untuk  mengganti background pada judul widget sebenarnya mudah tinggal menambahkan background url gambar yang cocok sudah bisa, namun hal ini justru akan menambah beban loading blog kita. Maka dari itu untuk tetap menjaga kecepatan loading blog kita solusi yang paling tepat yaitu menggunakan CSS3. Tertarik untuk belajar membuatnya ? mari kita mulai!

Cara Membuat Backgound Ribbon di Blogger

Untuk membuat latar belakang pita untuk setiap widget, pertama kita perlu tahu nilai ID widget. Untuk mengetahui Id widget bisa dengan cara berikut :

Cara mencari ID widget

1. Login ke dashboard > pilih tampilan (layout)
2. Edit widget yang akan kita rubah background judulnya.
3. Perhatikan url yang ada pada widget. cari tulisan widgetId. Kalau kurang jelas lihat gambar berikut. Id widget yaitu url yang saya block

4. Copy widget Idnya taruh di notepad/ dimanapun terserah agan
5. Selesai. Kita lanjut ketahap selanjutnya.

Design judul ribbon dengan widget

1. Pilih bagian template
2. Jangan lupa backup templatenya terlebih dahulu.
3. Klik edit HTML
4. Cari ]]></b:skin> atau </style>
5.Letakkan CSS berikut diatasnya.

#HTML4 h2 {
  position:relative;
  padding:10px 0 15px !important;
  margin:0 0 10px 27px !important;
  color:#ffffff;
  background-color:#282C2F;
  box-shadow:0 2px 4px rgb(136,136,136);
  border-top:3px solid #000000;
  background-image:none !important;
  height:auto !important;
  width:338px;
}

#HTML4 h2:before {
  content:' ';
  position:absolute;
  width:30px;
  height:0;
  left:-30px;
  top:16px;
  border-width:20px 10px;
  border-style:solid;
  border-color:#282C2F #282C2F #282C2F transparent;
}

#HTML4 h2:after {
  content:' ';
  position:absolute;
  width:30px;
  height:0;
  right:-30px;
  top:16px;
  border-width:20px 10px;
  border-style:solid;
  border-color:#282C2F transparent #282C2F #282C2F;
}

#HTML4 h2 span:before {
  content:' ';
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:100%;
  border-width:5px 10px;
  border-style:solid;
  border-color:#353A3D #353A3D transparent transparent;
  z-index:99999;
}

#HTML4 h2 span:after {
  content:' ';
  position:absolute;
  width:0;
  height:0;
  right:0;
  top:100%;
  border-width:5px 10px;
  border-style:solid;
  border-color:#353A3D transparent transparent #353A3D;
  z-index:99999;
}

Untuk costumisasinya

[+] Untuk mengganti warna huruf siakan ganti #ffffff

[+] Kalau mau mengganti backgroundnya silakan agan ganti #282C2F dengan warna yang agan kehendaki.

[+] Untuk menghulangkan border pada bagian atas silakan cari #000000 agan juga bisa mengeditnya menjadi warna yang berbeda.

[+] Sesuaikan lebar widgetnya dengan mengedit code berikut 338px

Untuk selanjutnya saya serahkan kepada agan sesuaikan warna dengan mengedit code yang sudah saya beri warna.

7. Sekarang kita menuju html widgetnya. Sesuai dengan CSS diatas berarti kita harus mencari widged Id HTML4. Untuk mudahnya silakan agan tekan tombol lompat te widget kemudian pilih HTML4

8. Cari code berikut dalam html widgetnya.

<h2 class='title'><data:title/></h2>

9. Ganti html tersebut dengan yang ini :

<h2 class='title'><span><data:title/></span></h2>

Jika sudah kita tinggal menyimpannya, lihat apa yang terjadi :D. Jika dirasa belum cocok silakan agan edit pada CSSnya. Cukup mudah kan gan, mungkin cuup sekian share artikel cara memercantik judul widget dengan fancy ribbon. Semoga bermanfaat :)