How to Change Your Blog Archive into Scrollable Blog Archive (Blogger Widget)
How to Change Your Blog Archive into Scrollable Blog Archive (Blogger Widget)
Good Day Bloggers, Today I will share to you “How to Change Your Blog Archive into Scrollable Blog Archive (Blogger Widget)”. You can customize your own blog archive by inserting the code below, this is helpful for those who don’t have enough space in their blog sidebar or even on blog footer, and you can change their size (height and width) without losing any blog archive. See the image demo for the screenshot.
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<div class='widget-content'>
<div style='overflow: auto; margin: 0px auto; padding: 5px; height: 300px;width: 100%;text-align: left;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
Now, let's go follow the instructions below.
Tutorial:
1. Go to Blogger.com
2. Login to your account.
3. From your Blogger dashboard you will see a dropdown menu.
4. Choose Template and click Edit HTML.
5. Then Proceed
6. Check Expand Widget Templates you will see it at upper left.
7. Press CTRL + F and search this <div id=’ArchiveList’> tag.
8. You will see this, see the code below.
<div class='widget-content'>
<div id='ArchiveList'><div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
9. Replace with the code below.
<div class='widget-content'>
<div style='overflow: auto; margin: 0px auto; padding: 5px; height: 300px;width: 100%;text-align: left;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
10. Hit Save Template and view your blog.
Congratuations!
Post a Comment