Manage To Create Scroll For Blog Archive

Alas! Finally I manage to create scroll for my blog ARCHIVE box! What a relief... With the new CSS/HTML coding for blogspot, which I had never got any idea at all on how it works, compared to the old one, when I last learn a little bit about CSS coding in 2008, I tried here and there, using my Dreamweaver, finally I manage to understand a tiny bit of it. Now, I feel a little bit comfortable but there are a lot and a lot more to learn... Sigh!!!

And to my surprise, it was actually not that hard to create scroll for the Archive list (which took me nearly a week to discover hohohho).

So, what I did was, I wrote a simple instruction like this:

#BlogArchive1 .widget-content{height:200px; width:auto;overflow:auto;}

in the CSS script section just before :

]]></b:skin>

STEP BY STEP

Blogger Dashboard

Edit HTML Page

HTML Code

1. Go to Blogger Dashboard. 
2. On the left side, look in the list for 'Template' towards the end of the list. Click on 'Template'
3. Just slightly to the right, you will see the small image of your blog and below the image there is a 'Edit HTML' button. WARNING : Before you click the 'Edit HTML' button, it is advisable to BACKUP your blog's current Template first. Click the 'Backup /Restore' button at the top right corner of the Dashboard (just below your Blogger profile picture). Then SAVE your Template on your hard-disk by clicking 'Download Full Template' button.
4. You should now come to 'Edit HTML of your Template' page. Click your cursor any where in the HTML script box and Press 'Ctrl' + 'F' to open the Search Bar on the Top Right Corner of the box. 
5. In the Search Bar, write  ]]></b:skin> and press enter. You will see the  ]]></b:skin> script HIGHLIGHTED in YELLOW.
6. Just BEFORE (OR ABOVE) the script or line, insert the CODE to create Scroll Archive above. You might want to Copy and Paste it.
7. The lines will look like the "HTML Code" image above.
8. Now, to see if it works, click 'Preview Template'. If it works or you can see your Blog Archive box have a scroll bar, then SAVE the template by  clicking 'Save Template'. Now click View Blog. If it DOES NOT WORK. (No scroll bar on your Blog Archive box, OR you cannot PREVIEW the changes - my advise is NOT TO USE THIS CODE*. So Click 'Revert Changes' and exit without saving the changes.
9. Finished!

* The code might not work if the template has other codings related to it.


Ok... that's all for today's entry





p/s: Try to GODEK something else next... huhuhu...


---