Many bloggers have posted abundant articles might like to use scroll function on their blog widget area.
It is understandable since they sometimes want to display many information from their blog, but they want also to keep the the size between the posting and the widget area at the same height. Besides it is to make the look of their blog more organized and order.
Those want to try to put this scroll function on the widget area can try these steps.
Go to Template ----> Edit HTML
(On this post I take an example of adding scroll function on Recent Posts widget found on the sidebar area. You can tray implement this codes / add the scroll codes to other selected widget).
Find these codes:
See the example below:
Next, preview the template look.
When you have seen the scroll embedded as you wished, now you can end your editing by clicking save template. That's all!.
It is understandable since they sometimes want to display many information from their blog, but they want also to keep the the size between the posting and the widget area at the same height. Besides it is to make the look of their blog more organized and order.
Those want to try to put this scroll function on the widget area can try these steps.
Go to Template ----> Edit HTML
(On this post I take an example of adding scroll function on Recent Posts widget found on the sidebar area. You can tray implement this codes / add the scroll codes to other selected widget).
Find these codes:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
- Put these codes just after the <div class='widget-content'>
- Don't forget to add </div> after </div>
See the example below:
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>Note:
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'><div style='overflow:auto; width:97%; height:380px;'> <data:content/>
</div>
</div> <b:include name='quickedit'/>
</b:includable>
</b:widget>
- 97% is the width of the sidebar area. You can customize this by changing the number. (Usually maximum width is 100%)
- 380 px is the height of the the widget with scroll you want to add. Change this number as you want.
Next, preview the template look.
When you have seen the scroll embedded as you wished, now you can end your editing by clicking save template. That's all!.
0 komentar:
Posting Komentar