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:

4 Responses to "Tips membuat border widget blog dengan mudah"

  1. Anda Bingung Ingin Mencari Bandar Terpercaya & Proses Dana Serba Cepat Dengan Nominal Berapa Pun Pasti Di Bayar, Nih, Kami Referensikan Agen BOLAVITA Serba Cepat & Melayani Dengan Sopan Santun Dan Baik, Agen BOLAVITA Juga Menyediakan Banyak Game Online Yang Dapat Menghibur Anda Dengan Nominal deposit hanya 50ribu Dapat Bermain Semua Game'a, Adalagi Nih gan, bolavita Memberikan Bonus New Member 10%, Bonus Setiap Deposit 5%, Cashback 10% Dan Berbagai Bonus Lain'a lho gan. Bolavita Juga Menyediakan Game SABUNG AYAM Online Bertaji Dengan Pertandingan LIVE lho gan Di tarung jago | BBM: BOLAVITA | WA: +628122222995 | Line: cs_bolavita | Pendaftaran GRATIS gan

    ReplyDelete
  2. ayo bergabung dengan kami agen terpercaya
    proses depo wd secepat kilat
    byk promo2 menarik tanpa ribet

    BBM: BOLAVITA ^^
    line : cs_bolavita
    whatup : +62812-2222-995

    ReplyDelete
  3. Anda Binggung Mencari Game Online Wm Casino Terpercaya, Nah, Kami Disini Sebagai CS Bolavita BErnama Cika, Ingin Mereferensikan Anda Bergabung BErsama Bolavita, Karena bolavita.fun Akan Memberikan Bonus & Berapa Pun Di Bayar Oleh Bolavita, Jangan Lupa Hadir & Berkunjung DI Bolavita >> BBM: BOLAVITA >> Wa: +628122222995 >> Terima Kasih Gan Sudah Memberikan Waktu'a (^_^)

    ReplyDelete

  4. Apakah Anda Seorang Pemain Terbaik Sabung Ayam Di Kota Anda ??.. Jika Yes.. Anda Dapat klik di >> video sabung ayam >> Untuk Melihat Ayam Kesukaan Anda Dan meraihlah Keberuntungan Agan Bersama kami. Sangat Mudah, Cukup Anda Kunjungi Atau Klik di Website yang kami berikan gan ^^ >> BBM: BOLAVITA >> Wa: +628122222995 Pasti aman dan Terpercaya gan... ^+_+^

    ReplyDelete

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