Saturday, December 29, 2012

Mengedit Tampilan Widget Blogger Berbeda Beda

Mengedit widget sekaligus pada blogspot mungkin bagi sobat masih terbilang mudah, namun bagaimana jika widget yang diedit berbeda satu sama lain. Tentu kedengarannya tidak terlalu mudah, kan? Nah, yang akan kita coba bahas kali ini adalah bagaimana caranya agar tampilan setiap widget bisa berbeda.

Memang ada manfaatnya..??

Pernahkah sobat melihat blog yang bergaya magazine atau yang lebih dikenal di kalangan blogger sebagai blogazine. Sedikit mengupas ampas terlebih dahulu, blogazine adalah gaya blog yang mengedepankan design atau keindahan setiap posting dan tentunya..berkualitas. Setiap posting atau artikel dibuat berbeda. Untuk apa?? itulah konsep blogazine. 

Masih belum ngerti nih..??

Pernahkah sobat membaca majalah..?? Setiap artikel yang ada pada majalah dibuat semenarik mungkin dengan gaya berbeda setiap artikelnya. Begitu juga dengan blogazine, blogger blogazine membuat artikelnya semenarik mungkin dengan gaya berbeda dari setiap artikel. Dengan ini, blog tidak terlihat monoton. Akibatnya, pembaca akan kembali lagi ke blog tersebut untuk melihat artikel kreatif selanjutnya. Pembaca dibuat kagum oleh empunya blog. Saya sendiri juga kagum terhadap beberapa blog bergaya blogazine, seperti salah satu artikel dari smashing magazine, sobat bisa lihat di sini.

Lalu, bagaimana caranya..??

Sebelumnya, sobat harus mengerti terlebih dahulu. Ini penting bagi pemula seperti saya. Setiap elemen harus ( lebih tepat sebaiknya ) mempunyai pengenal. Sama seperti kita di dunia nyata, seperti KTP atau Kartu Pelajar. Dengan pengenal itulah kita bisa mengenali yang mana A dan yang mana B. Sehingga, kita bisa memodifikasi ( dalam dunia nyata, kita misalkan memanggil ) salah satu elemen tanpa harus menganggu elemen yang lain. Kita bisa memodifikasi A tanpa menggangu B. Inilah hal yang sangat penting untuk kita ketahui. Walaupun diatas telah disebutkan bahwa setiap elemen seharusnya mempunyai pengenal, namun tak ditutup kemungkinan ada elemen yang tidak mempunyai pengenal. Istilahnya imigran gelap :D.

Tapi, tenang saja, setiap widget yang ada di blog berbasis blogspot secara otomatis telah terbentuk pengenalnya. Nah, pengenal itu sekarang yang akan kita manfaatkan. Sekarang tugas sobat adalah mengetahui pengenal tersebut. 
  1. Pertama, login ke blogger.com, lalu pilih tab template
  2. Kemudian, pilih edit html
Disini bagian pentingnya. Sobat harus bisa menemukan pengenal dari widget sobat. Biasanya akan seperti ini:
<b:widget id='Label1' locked='false' title='Kategori Blog' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Link Sobat' type='LinkList'/>
Kalau sobat kesulitan mencarinya, gunakan title widgetnya, misalnya seperti di atas, yaitu Kategori Blog dan Link Sobat. Gunakan CTRL + F untuk pencarian.

Setelah menemukan pengenalnya ( id atau class ) seperti diatas, contohnya Label1 dan LinkList1, maka sekarang kita tinggal mengedit CSSnya. Sebelumnya, catat dulu id yang ingin diubah, misalnya di sini saya simpulkan yaitu widget dengan title Kategori Blog dengan pengenal ( id ) Label1. Catatnya harus sama persis, hurufnya, besar kecilnya.

Kemudian kita harus mengedit CSSnya. Temukan kode ]]></b:skin>
 dengan menggunakan CTRL + F. Setelah itu, tepat di atasnya pastekan kode di bawah ini
#Label1
{
......
}
Sebelumnya, pastikan tulisan id nya sama persis, tidak ada huruf yang kebalik, besar kecil hurufnya harus sama. Gunakan tanda # untuk mengawali id.

Kemudian terserah sobat mau memodifikasi bagaimana.. Contohnya sebagai berikut..
#Label1
{
background : red ; /* ini untuk mengatur warna background (lebih jelas lihat di sini ) */
/* tambahkan kode yang sobat suka */
}
#Label1 h2 /* untuk title widget, h2 atau h3 tergantung dari template sobat, cara melihat bisa disini */
{
margin-left : 10px ; /* mengatur batas antara pinggir widget dengan title widget */
/* tambahkan kode yang sobat suka */
}

TIPS

  • Kalau widget tidak dipakai lagi, hapus kode CSSnya.

Yang lainnya bisa dikreasikan sendiri, tidak mungkin menyebutnya satu persatu..:D
Semoga tips kali ini bisa membantu sobat yang lagi gemar gemarnya edit template .. Have a nice day.. :D 

Baca Juga

Mengedit Tampilan Widget Blogger Berbeda Beda
4/ 5
Oleh
Tampilkan Komentar
Sembunyikan