Home / Archived For December 2012

Monday, December 31, 2012

Mengetahui Kode HTML Yang Ada di Elemen Blog

Menyambung dengan artikel Mengedit Tampilan Widget Blogger Berbeda Beda yang sudah di posting beberapa hari yang lalu, kali ini saya akan mencoba menjelaskan poin yang belum jelas yaitu pada edit CSS bagian title widget, yang abu abu antara h2 dan h3. Nah, kali ini kita akan mencoba mengupas sebenarnya apakah abu abu lebih ke hitam atau lebih ke putih.

Mengetahui tag yang terdapat pada title widget sangatlah penting, kenapa?? Tentu saja dengan mengetahuinya, maka kita akan bisa mengkostumisasikannya sesuka hati. Tag benar, CSS benar :D. Cara di bawah ini akan sangat membantu, bukan hanya untuk title widget, juga bisa untuk elemen elemen lain pada blog sobat. Sebelumnya, untuk permulaan silahkan sobat membaca artikel ini.

Untuk menentukan tag yang tepat sebenarnya sangat mudah, sobat hanya memerlukan firebug atau developer ekstension. Cara ini saya khususkan untuk browser Google Chrome. Namun, jika ada yang ingin untuk browser lain, bisa komen di kotak komentar. Lagi mau lihat pasar dulu :D

Disini saya akan contohkan untuk melihat tag pada title widget. Pertama yang harus sobat lakukan, adalah membuka ini. Kemudian tekan CTR: + SHIFT + I. Setelah itu, akan muncul seperti ini.
Kemudian sobat arahkan kursor ke bagian bawah sebelah kiri. Sehingga hasilnya akan seperti ini.
Kemudian arahkan ke title widget hingga muncul seperti ini.
Kemudian lihat di bagian bawah layar, maka akan terlihat kode html kurang lebih seperti ini.
Maka, dengan begitu dapat disimpulkan bahwa title widget blog menggunakan kode H3. Dengan begitu maka konfigurasi CSSnya menjadi seperti ini
.sidebar h3 {
...................
}
Kemudian cari kode ini di CSS sobat, atau buat baru jika tidak ada. Dan konfigurasikan sesuka hati. Dan, selamat tahun baru 2013 besok :D

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 
Subscribe to: Posts (Atom)