Tips membuat border widget blog dengan mudah

Widget pada blog dipasang dengan tujuan yang berbeda-beda, ada widget untuk memberitahukan postingan-postingan blog sesuai dengan popularitas artikel (popular post), label, artikel terkait (related post), artikel terbaru (recent post), widget berlangganan (subscribe), widget untuk menampilkan iklan (Google Adsense maupun iklan lainnya), dan masih banyak lagi widget custom yang bisa kita pasang pada blog.

tips membuat border widget blog
Meskipun beberapa widget digunakan untuk mempercantik tampilan blog dan membuat blog lebih personal (berbeda dengan blog-blog lainnya) tetapi tetap harus memperhitungkan dengan matang antara kegunaan dari widget yang akan dipasang dengan kecepatan loading blog yang sudah pasti akan berkurang jika terlalu banyak widget yang digunakan.

Beberapa cara mempercantik blog sudah banyak dishare oleh sobat-sobat blogger diluar sana, bahkan mungkin yang akan saya share kali ini. Yaitu tentang cara atau tips membuat border widget dengan mudah. Saya katakan mudah karena sobat hanya tinggal mengkopi paste kode script yang ada untuk widget sobat. Contohnya dapat sobat lihat pada halaman beranda (homepage) blog kecil ini (lihat contoh gambar diatas).

Pada artikel-artikel sebelumnya saya pernah membagikan tutorial yang nyaris serupa dengan topik kita kali ini, sobat dapat melihat pada artikel mengenai cara membuat kotak script untuk artikel blog dan cara mempercantik tampilan iklan tautan.

Ada dua cara yang bisa sobat gunakan untuk melakukan pembingkaian pada widget blog blogger milik sobat, gunakan yang menurut sobat paling mudah. Cara pertama adalah memasang kode langsung di dalam widget blog dan cara kedua melalui pengeditan pada HTML template atau tema blog sobat.

Tanpa menunggu terlalu lama ya sob, kita cuss ke TKP (Topik Kita Pada kali ini) hehehe...

Edit Widget Blog

1. Buka Tata Letak pada menu halaman administrasi blogger sobat lalu pilih widget yang akan dibingkai (pastikan widget yang akan diberi border adalah widget HTML/JavaScript)

2. Klik Edit HTML widget (letaknya diantara Judul widget dan Konten widget)

3. Salin lalu tempelkan kode berikut ke dalam widget

<div style="border: 1px outset #0000FF; padding: 5px; width: auto;">
---Kode Widget Sobat disini---
</div>

Keterangan :
  • Kode widget adalah kode yang sudah terpasang sebelumnya di dalam widget 
  • 1px adalah ketebalan garis border yang digunakan, rubah sesuai keperluan
  • outset adalah bentuk garis bingkai / border, sobat bisa ganti dengan beberapa bentuk sesuai keinginan contohnya adalah inset, solid dan dotted.
  • #0000FF adalah warna garis border yang akan dipasang untuk widget


4. Klik Rich Text untuk melihat hasilnya, jika sudah sesuai keinginan jangan lupa klik Simpan.

Mudah bukan???!!!
Sekarang kita lanjut ke cara yang kedua ya sob... Hal ini harus dilakukan jika widget yang akan dipasang border bukan widget HTML/JavaScript

Edit HTML Template

1. Buka menu Tema lalu pilih Edit HTML pada halaman administrator blogger milik sobat

2. Cari kode ]]></b:skin> , agar lebih mudah gunakan Ctrl+F . Copas kode berikut ini tepat diatas kode ]]></b:skin> tadi.

#Label4 .widget-content{
height:auto;
width:auto;
padding:5px;
border:1px outset #0000FF;
}

Keterangan :

  • #Label4 adalah nama atau ID dari widget yang akan dibingkai
  • 1px adalah ketebalan garis border yang digunakan, rubah sesuai keperluan
    outset adalah bentuk garis bingkai / border, sobat bisa ganti dengan beberapa bentuk sesuai keinginan contohnya adalah inset, solid dan dotted.
    #0000FF adalah warna garis border yang akan dipasang untuk widget
3. Simpan Tema / Template

Bagaimana sob? tampilan widget menjadi sedikit berbeda kan? itulah tips membuat border widget blog yang dapat saya bagikan pada postingan kali ini, semoga bermanfaat, selamat berkreasi dan...
Salam Pintar...

Berlangganan update artikel terbaru via email:

0 Response to "Tips membuat border widget blog dengan mudah"

Post a Comment

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel