Kamis, 25 Februari 2010

Add Border To Sidebar

Template maupun layout bawaan Blogger memang banyak yang menawarkan tampilan polos. Hanya kekayaan pilihan warna , sajian gambar di header yang berbeda, maupun latar (background) yang bergambar.

Beberapa pengguna blogger yang pada awalnya “terpaksa” untuk menggunakan pilihan yang ada, pada akhirnya banyak mencari cara untuk mengkustom tampilan agar bisa tampil beda.

Misalnya memberikan sentuhan border atau garis pemisah, agar tampilan blog yang polos bisa memiliki batas yang tegas antara bagian postingan dan sidebar.

Nah kali ini kita akan menggunakan metode CSS untuk mewujudkan keinginan ini. Setelah itu kita akan menentukan dibagian mana kode CSS tersebut hendak dipasang. Biasanya, untuk memudahkan pemberian batas ini, kita akan mencari nama class atau div sidebar. Dengan alasan hampir semua template atau layout bawaan blogger menyertakannya.

Pertama adalah mencari bagian yang menyebut Sidebar pada bagian CSS. Misalnya bagian ini dideklarasikan dengan nama #sidebar.

Di bagian ini kita terbiasa menemui bagian seperti width (untuk menyebut lebar kolom samping atau sidebar), float (untuk menyebut arah kolom sidebar pada keseluruhan tampilan), atau juga padding (baik right atau left untuk menyebut spasi pembatas).

Nah untuk menambahkan border dibagian sidebar, kita akan membutuhkan kode berikut untuk ditambahkan :

border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;

Keterangan :
- border-left-width: 1px; (untuk menyebut lebar pembatas dalam satuan pixel)
- border-left-style: solid; (solid adalah contoh tampilan pembatas, dalam hal ini solid disamakan dengan bentuk lurus tanpa potongan)
- border-left-color: #B5CF53; (kode hexa #B5CF53 untuk menyebut warna tertentu)

Jadi secara keseluruhan, bila kita memiliki kode kode CSS berikut di template/layout :

padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;

maka untuk memberi border, kita akan menuntaskannya menjadi :

padding-left: 5px;
padding-right: 5px;
font-size: 13px;
width:150px;
float:right;

border-left-width: 1px;
border-left-style: solid;
border-left-color: #B5CF53;


Tak lupa, kode tersebut bisa kita temukan pada bagian Edit HTML. Tuju bagian CSS untuk mencari nama Sidebar ya….

Oh ya, untuk style, selain solid kita juga bisa menggunakan nilai lain seperti : dotted (berbentuk bintik-bintik berupa kotak kecil), dashed (hampir sama dengan dotted hanya saja lebih renggang dan besar ukuran dotted-nya), double (berupa dua garus solid berjajar) dan lain-lain.

ReadMore...

Share

Kamis, 18 Februari 2010

Membuat Icon Pada Address Bar


Kita pasti sering melihat blog atau web yang memiliki Icon pada Address Bar-nya. Icon yang dimaksud adalah Favicon. Favicon biasanya digunakan untuk ciri khusus dari blog atau web pemiliknya. Karena ciri khusus inilah, Favicon ini berbeda-beda antara satu blog dengan blog lainnya, antara web dan web lainnya. Yang akan saya bahas adalah merubah Favicon khusus untuk pemilik Blogger Account. Walaupun tidak menutup kemungkinan bisa diterapkan pada web atau blog yang lainnya.


Kita ambil sebagai contoh Favicon Detiknews.com. Pada address bar atau pada tab diperlihatkan Favicon-nya adalah bulatan merah dengan teks 'd'. Pengguna Mozilla Firefox secara otomatis menampilakn Favicon, akan tetapi pengguna Internet Explorer akan menampilkan Favicon setelah Kita menambahkan blog atau web pada bookmark-nya.

Bisa kita lihat, Detikhot.com memiliki Favicon yang berbeda, begitu juga Kapanlagi.com dan Blogger.com. Tentunya kita juga ingin memiliki Favicon yang berbeda dengan blog atau web yang lainnya. Berikut saya sertakan web yang bisa Anda kunjungi untuk membuat Favicon:

* Favicon Gallery (By favicon.co.uk)
* 50 Remarkable Favicons (by Smashing Magazine)
* The Favicon Gallery
* MpP Favicon Gallery
* Favicon Gallery (By HTML Kit)
* Download Free Favicon Packs (from Clickfore.com)

Pada saat pembuatan posting ini, saya juga belum merubah Favicon http://annerobudiman.blogspot.com. Saya akan membuat Favicon sendiri menggunakan Adobe Photoshop.

Langkah merubah Favicon standard di blogger.com:

1. Buat Favicon menggunakan Adobe Photoshop dengan nama icongue.png. Untuk hasil yang lebih bagus, hilangkan background sehingga hanya bentuk icon saja yang dipakai.

2. Buat postingan baru dangan judul postingan bantu. Tambahkan gambar icongue.pngpada postingan bantu tersebut.






3. Ubah mode postingan menjadi Edit Html sehingga terlihat kode HTML. Copy URL gambar icongue.png ke Notepad.



4. Save Postingan Bantu tanpa harus di-Publish, postingan ini hanya sebagai alat bantu, mungkin akan dibutuhkan di lain waktu. Jadi... fungsinya postingan bantu ini adalah untuk menyimpan icongue.png ke sebuah alamat web. Apabila Anda telah memiliki tempat untuk upload, tidak perlu melakukan langkah 2 dan 3.

5. Klik Tab Layout pada blogger. Ubah mode ke Edit HTML kemudian cari tag html:
< / head >.



8. Langkah terakhir adalah Save Template.

9. Begini jadinya blog saya:



Kurang Bagus memang, Tapi Selamat Mencoba!
ReadMore...

Share