Tutorial Untuk Mempelbagaikan Blogger Widget/Gadget Pada Blog

Salam blogger semua,

Apakah korang sekarang ni sedang cool? Boleh kita belajar sesuatu yang baru? Mungkin bagi sesetengah orang dah biasa, tapi bagi saya entri ini sesuatu yang special sebab ia agak unik sedikit. Sebabnya, kita boleh mempelbagaikan gadget kita di blog mengikut citarasa kita. Wokeh tak? Cute tak? Jom kita lihat!

► Setiap gadget seperti (Labels, Archive, Links, Followers) boleh ada bentuknya sendiri (color, jenis tulisan, borders, images....dsb!)

► ingat ya WIDGET dan GADGET adalah benda yang sama, don't confuse!!

Ok, ini bendanya yang saya nak buat entri kali ini,

Untuk menjadikan setiap widget berbeza antara satu sama lain, tak susah. Ada beberapa step yang ringkas yang perlu dibuat:

► Pilih widget yang mahu diubahsuai, dan kenalpasti ia dlm bentuk kod HTML di blog

► add/tambah sedikit CSS style di dalam kod supaya dapat membentuk widget yang kita mahu

► sabar sikit...(hehe)

Pilih dan Kenalpasti

Setiap widget dalam Blogger Layout ada ID yang unik. ID ini akan digunakan untuk menambah gaya pada widget kita. So, kita kena gali sampai ke dalam kod Blogger HTML, dan cari ID' yang berkaitan. Jom kita mula!.

Pada Dashboard, cari:

LAYOUT ► EDIT HTML ► dan cari hingga ke bawah. Kerana saya nak pilih Sidebar widgets (gadgets) untuk diubaisuai, saya akan cari dalam sidebar-wrapper. Pada template saya, kodnya kelihatan sepeti ini:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>

<b:widget id='Image1' locked='false' title='My Picture' type='Image'/>

<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>

</b:section>

</div>

Ok. Korang boleh lihat ID untuk widget saya:

Label widget ID ► Label1

Links widget ID ► LinkList1

Picture widget ID ► Image1

Archive widget ID ► BlogArchive2

Kalau korang ada banyak widget, mungkin susah nak teka ID nya. Kalau begitu, korang kena ingat kedudukan gadget/widget korang pada muka depan blog (Home/Frontpage). Kalau widget Labels pada kedudukan pertama, ia akan berada dalam kedudukan pertama juga di dalam kod HTML di blogger. Jadi, step pertama dah siap. Mari tengok seterusnya.

Bina gaya dan Ubahsuai Gadget

Okey, yang ini best sikit! Untuk mencipta gaya pada widget, kita kena tahu sikit2 pasal CSS. Tapi jangan panik, kita boleh dapat dengan mudah. Dalam step yang lepas, kita dah belajar untuk kenalpasti ID untuk widget kita. Sekarang, inilah masanya kita nak gunakan. Mari kita mulakan dengan ubahsuai Link List widget.

Daripada Blogger Dashboard, kita pergi ke:

LAYOUT ► EDIT HTML ► dan cari bahagian ini (guna CTRL + F, and type </head>):

]]></b:skin>

</head>

DIATAS bahagian tersebut, letakkan CSS style untuk ubahsuai Link List Widget (gadget), jadi, keseluruhan kod akan jadi seperti berikut:

#LinkList1 {

background:#FFF4BF;

padding-left:15px;

font:14px Arial;

border-bottom:2px solid #FFE25F;

}

#LinkList1 h2 {

background: url(http://i40.tinypic.com/wummhj.jpg) no-repeat bottom left;

height:35px;

padding-top:10px;

font-size:0px;

}

#LinkList1 a:link {

color:#5F5F5F;

text-decoration:none;

}

#LinkList1 a:visited {

color:#5F5F5F;

text-decoration:none;

}

#LinkList1 a:hover {

color:$titlecolor;

text-decoration:underline;

}

]]></b:skin>

</head>

Penerangan:

Pada bahagian berwarna biru adalah style/gaya untuk widget box tertentu (dlm kes ini ialah Link List). Kita boleh tukar background, font style, position, colors, dan juga borders pada widget.

Pada bahagian hijau hanyalah menerangkan tentang HEADING widget. Dalam contoh diatas, kita boleh letakkan imej/gambar berbanding ayat biasa, dan dengan "font-size:0px" heading yang asal tersembunyi.. Cantik kan? Dengan cara ini. kita boleh membuat heading yang berbeza-beza untuk setiap gadget/widget pada Blogger Template !

Pada warna brown, saya jelaskan tentang bagaimana nak buat warna2 cool pada LINK dan HOVER. Jadi dengan cara ini korang tentu faham macam mana nak buat LINK dan HOVER yang berlainan pada setiap widget.

Berikut lain2 contoh kod yang boleh korang gunakan dan ubahsuai:-

#Label1 {

background: #DFF7FF;

padding-left:15px;

font:14px Arial;

border-bottom:2px solid #45B7DF;

}

#Label1 h2 {

background: url(http://i40.tinypic.com/12644z4.jpg) no-repeat bottom left;

height:35px;

padding-top:10px;

margin-bottom:5px;

font-size:0px;

}

#LinkList1 {

background:#FFF4BF;

padding-left:15px;

font:14px Arial;

border-bottom:2px solid #FFE25F;

}

#LinkList1 h2 {

background: url(http://i40.tinypic.com/wummhj.jpg) no-repeat bottom left;

height:35px;

padding-top:10px;

font-size:0px;

}

#LinkList1 a:link {

color:#5F5F5F;

text-decoration:none;

}

#LinkList1 a:visited {

color:#5F5F5F;

text-decoration:none;

}

#LinkList1 a:hover {

color:$titlecolor;

text-decoration:underline;

}

#Image1 {

background:#FFDFFE;

padding-left:15px;

font:14px Arial;

border-bottom:2px solid #FFAFFD;

}

#Image1 h2 {

background: url(http://i44.tinypic.com/qywqog.jpg) no-repeat bottom left;

height:35px;

padding-top:10px;

font-size:0px;

}

#Image1 img {

border-width:0px;

padding-left:25px;

}

]]></b:skin>

</head>

Okey, ini hanyalah beberapa contoh. Dengan asas yang ada, korang boleh membuatnya ikut kreativiti masing2. Apa yang penting kenalpasti WIDGET dan kod STYLE pada kod Blogger.

Dengan Sedikit kesabaran korang pasti berjaya.

Smile!

aynora nur