expr:class='"loading" + data:blog.mobileClass'>

Wednesday, January 30, 2013

Simple steps for making a scroll bar for widget

Salam semua.. Erm semenjak blog saya bertukar wajah ni, ramai pula yang bertanya tentang tutorial nak buat apa yang saya buat.:) Contohnya scrollbar untuk widget di sidebar blog anda macam saya punya..


Setiap widget yang berbentuk list sebegini memang saya dah kemaskan gunakan scrollbar. So takdelah dia bersepah-sepah atau berterabur. Jadi, kali ni saya baik hati [baiklah sangat :p] nak share dengan anda camne nak jadikan widget kita scroll bar macam tu.:)

Actually saya ambil daripada blog teknikbuatblog.blogspot.com. Mudah je! Saya buat-buat terus jadi. Thanks kat blog tersebut sebagai credit. Nak tahu camne caranya?? Jom tengok kaedahnya!


1st : Go to Design or Template > Choose Edit HTML > Click on Expand Widget Templates (Example: In red box)

2nd : Press Ctrl + F and type the title of one of your widget. For example : Bloglisted! 


3rd : Then you will find the code like this : <b:widget id='Bloglisted1' locked='false' title='Bloglisted!' type='BlogArchive'>

4th : After code either <div class='widget-content'> or some blog will have this code <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>,  copy and paste code below:

<div style='width: 190px; background: url(&quot;http://1.bp.blogspot.com/_yqzcBmyK-mo/TRhyUKzsdgI/AAAAAAAABPM/nP0Nyko2M8Q/s1600/black.png&quot;) repeat scroll 0% 0% transparent; overflow: auto; height: 100px; border: 1px solid rgb(206, 206, 246); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 20px; margin: 3px 0pt 0pt;'>

5th : Then, scroll down and you will find this code : <b:include name='quickedit'/>

6th : Next, put  </div> after that code. 

7th : Then click Save Template.

Notes: You can change the blue code with another image url to change the background of your widget. You also can adjust the size of widget by adjusting the width and height of green code. If you want to change another widget to become a scroll bar just repeat the same steps. Very easy!=)


Sumber : SINI


Cik Misya : Ilmu semakin dikongsi semakin bertambah.

4 comments :

вʋввℓɛ ρσρƨ said... Reply To This Comment

hana pun dah masukkan kamu dlm bloglist hana ;) thanks okay ;)

Nao Mei said... Reply To This Comment

tutorial yang menarik...

Kesuma Angsana said... Reply To This Comment

tq sagt2 berguna ni untuk KA

cik amal said... Reply To This Comment

dah buat lama,... tapi kalau yg scrol tu bewarna kan lagi cantik kan ? t amal tak tahu gak nak wt camne...huhu

Related Posts Plugin for WordPress, Blogger...