Jan 30, 2014

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:



in the CSS script section just before :



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...


---

6 comments:

  1. Salam ukhwah, 1st time came here.. done follow this blog.... from : http://thescreammer.blogspot.com/

    ReplyDelete
    Replies
    1. MyCherita... salam ukhwah, rasa mcm pernah tengok nama ni tapi di mana ya?.... btw,, thanks for dropping by here :D

      Delete
  2. dah banyak tuto saya survey n try tapi stil x jadi. ade error lps paste coding n preview.nnti saya try ikut tuto ni.mana tau kot2 mnjadi. tapi kene buat masa otak tengah relax je

    ReplyDelete
    Replies
    1. hahaha.. kena try and error... sampai jadi.

      This one is a simple one... basic

      Delete
  3. bermanfaat sekali cik :) tapi apa harus melalui edit html? bisa tak jika melalui widget saja? hehe
    oh iya sudah saye follback :) terimakasi

    ReplyDelete
    Replies
    1. Hi Dyah!! nice to have u here... :D !!

      Through widget, you can have drop down... not scroll, I guess, depends on types of templates too I think.

      Well, u know better huhuhu :D

      Delete