Saturday, April 16, 2011

How to Add Scroll in Widget

Hi, bloggers! Now, I will share a new trick for you. That's How to Add Scroll in Widget. This trick is request from my friend.
"Anyone know, how to create a scroll box in link exchange widget. Please help...."
So, based on this request, I want to help him. Maybe, it will useful for you someday. In this post, I will take my Blogroll widget as an example. You can look it. OK, now if you want to try this trick, just follow the steps below.

*Firstly, you have to create a blogroll widget. How?
1. Go to Design --> Page Elements --> Add Gadget
2. Choose "Blog List"
3. Add some blog url in "Add to List"
4. Click SAVE [don't give the widget title first]

*Then, we will add the scroll
1. Go to Design --> Edit HTML
2. Check in the "Expand Widget Templates" box
3. Then, search with Ctrl + F
BlogList1
4. Then, look around at the bottom, there is
<div class='widget-content'>
5. Add this code, exact under the code above
<div style='overflow:auto; width:ancho; height:125px;'>
6. Then, scroll down untill you found
<b:include name='quickedit'/>
      </div>
    </div>
  </b:includable>
7. Add </div> under <b:include name='quickedit'/>, so the code will be like this
<b:include name='quickedit'/>
      </div>
    </div>
</div>
  </b:includable>
8. Then, click SAVE TEMPLATE

No comments:

Post a Comment