Cara Membuat Background Efek pada Widget di Blog

Cara Membuat Background Efek pada Widget di Blog -  Widget atau gadget adalah serangkaian kode portabel yang dapat di-instal dan di-eksekusi dalam HTML terpisah di setiap halaman web atau blog yang berbasis oleh pengguna akhir tanpa membutuhkan tambahan kompilasi.[ wikipedia.org ]
Widget atau gadget merupakan penghias pada blog dengan memiliki berbagi fungsi, diantaranya untuk menmpikan entri ppopuler post, recent post, label dan sebagainya.

Widget atau gadget dapat juga dibuat dengan Background Efek, untuk membuat Background Efek pada widget diperlukan beberapa perubahan pada CSS Template, berikut saya akan menguraikan beberapa teknik Membuat Background Efek pada Widget :

 1. Color Background Style
Pemberian warna pada background dengan menggunakan background:#kodewarna

Kode CSS sebelum penambahan

#sidebar-wrapper {
  width:28%;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
}

Kode warna sesudah penambahan

#sidebar-wrapper {
  width:28%;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
  background: #005483;}

Perhatikan pada kode yang saya beri warna merah itu merupakan penambahan warna background pada widget, untuk mengetahui kode warna anda bisa mendapatkannya bisa menggunakan menu pada tools blog ini atau pada layanan Online dan dalam penambahan warna jangan lupa untuk menambahkan tanda pagar (#) sebelum kode.

2. Image Backgrount style
Ini merupakan salah satu tehnik penembahan warna pada widget dengan gambar

sebelum penambahan

#sidebar-wrapper {
  width:28%;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
}

Sesudah penambahan

#sidebar-wrapper {
  width:28%;
  float:right;
  word-wrap:break-word;
  overflow:hidden;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx31WZdc1MJJFhnkRPSPsy1qUGlgTxbTwX2DB-zwy7EfpPEH6zN6tRzWaJl9bQXI6HSQz51MUNPWGtyCGvXvjAdsZlLGkq06480HvzmMihdbbie2jozUDTid9y_EfG_aCcgs8AZFHbtAo/s1600/background.png")repeat-y;
}

Penjelasan :
background:url ("URL Image")
Repeat adalah diisi ke sebelah mana gambar akan diulang, Untuk ke atas, gunakan repeat-y , untuk ke samping gunakan repeat-x dan jika tidak ingin diulangm gunakan no-repeat.

3. Hover Image Background Style
 Hover style digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:

Kode CSS untuk main widget

.main .widget {
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

 Kode CSS untuk sidebar

.sidebar .widget-content {
  padding:3%;
}

Untuk pemberian efek cukup mudah, anda tinggal menambahkan hover pada akhir kata widget. Anda bisa ganti kode diatas dengan kode dibawah ini atau anda juga bisa menambahkan kode dibawah ini dibawah kode diatas.

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

#main .widget:hover {
background:#EFEFEF;
}

Demikian Cara Membuat Background Efek pada Widget di Blog, semoga bermanfaat!

Share this post