Tutorial: Cute Border Pada Widget [FULL]
Tuesday, July 10, 2012
Assalamualaikum semua...(^^,)V setelah membaham ikan bawal masak 3 rasa mak aku, aku terus ada idea untuk mencomelkan lagi blog ni...huhuhu....nak tengok?? zass!!
 |
| cute border macam Justin Bieber broke up with Selena ke?? |
Hahaha, punya takde kaitan langsung caption aku....=___=" Ok, kalau korang nampak pic atas ni, dia satu ada scroll, dan satu lagi takde scroll...alaaa kat blog aku ni ada gak...hihihi...besar pnuya....JOM aku tunjuk cara dia...
OK, mula2 aku ajar cara nak letak *full scroll bar pada semua type of widget termasuklah POPULAR POST...hehehe...Tapi kalau tak nak, boleh skip terus step ni ye =)
FULL SCROLL BAR TUTORIAL
1.Login ke Blogspot, klik design/ layout > Edit HTML >tick Expand Widget Template
2. Lepas itu, sila cari code di bawah.. gunakan Ctrl+F untuk memudahkan pencarian
2. Lepas itu, sila cari code di bawah.. gunakan Ctrl+F untuk memudahkan pencarian
]]></b:skin>
kalau tak jumpa cari kod ni plak:
]]></b:template-skin>
3. Copy code di bawah ni dan paste kan ATAS/BEFORE code di step 2 tadi:
#Label1{
height:180px;
overflow:auto;
}
4. Preview and save kalau takde erroR!!
*full scroll bar means dia scroll start dari tajuk sidebar skali...kalau scroll bar pada content sahaja, dia macam kat blog comel aku ni... =D mueheheh
Warne oren=widget id
Warna hijau=panjang korang nak
p/s: Tutor kat atas ni kalau korang nak FULL SCROLL BAR...kalau tak jadi tu mungkin sebab content pada widget dah cukup pendek...tak payah mengada nak letak scroll dah...
--------------------------------------------------------------------------------------
CUTE BORDER TUTORIAL
Contoh kat sini aku buat widget Popular Post
1.Login ke Blogspot, klik design/ layout > Edit HTML >tick Expand Widget Template
2. Copy dan paste kan code di bawah mengikut step berikutnya:
CODE UNTUK CUTE BORDER SAHAJA....
<div style='background: #FFFFFF repeat; repeat; padding: 5px; border:5px dotted #FCB9B7 ; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;"><center></center> CODE/AYAT YANG KORANG NAK </div>
#FFFFFF= BACKGROUND COLOR
5px=KETEBALAN BORDER
#FCB9B7=COLOR BORDER
CODE UNTUK SCROLL BAR SAHAJA
<div id='scroll' style='border: 1px solid rgb(255, 255, 255); overflow: auto; width: 220px; height: 250px; background-color: rgb(255, 255, 255);'> CODE/AYAT YANG KORANG NAK LETAK </div>
KALAU NAK DUA2 GABUNGKAN JE OK!! ;) JOM TENGOK CARA NAK LETAK CODE TU..
3. Cari Widget ID yang korang nak edit..[selalunya taip je title widget
dah jumpa...contoh aku punya Ramai Baca Ini]...gunakan Ctrl+F untuk
memudahkan pencarian
 |
| Yang ni code before ditambah.... |
 |
| Code Selepas ditambah...PASTE kat BAWAH code yang aku kotakkan merah kat pic sebelumnya...=) |
4. Scroll sampai jumpa code <b:include name='quickedit'/>
 |
| Scroll sampai jumpa code quickedit... |
5. dan letakkan kod </div> ini DIBAWAHNYA:
 |
| Code yang telah diedit |
p/s: Kalau korang tak gabung code, letak satu jela code </div> kat akhir dia....kalau korang gabung code...letak </div></div>....macam contoh aku bagi OK...
Owh dah nak maghrib...huhu, Kalau tak jadi bagitahu, kalau jadi pon bagitahu tau....=) SELAMAT MENCUBA!!
SUMBER: TEKNIK BUAT BLOG
2 comments
jom tgk koleksi baju raya di sini:
ReplyDeletehttp://norliza989.blogspot.com/2012/07/baju-kurung-moden-enigma-new-design.html
Pretty! This was a really wonderful article. Thank you
ReplyDeletefor providing these details.
Also visit my blog ; internethelper.org
Komen yang baik-baik ye ^^, kalau perlukan urgent respond, sila tinggalkan email anda