In my professional life I sometimes play with HTML and CSS coding when developing e-learning packages, which got me thinking about how to expand and collapse text on my blog. After a bit of experimentation, I finally worked out how:
EXTRA INFO to read (or not)
I can put text or materials lists in here and it won't clutter up my blog post...
EXTRA IMAGES to look at (or not)
How to do it:
1> Enable JavaScript/jQuery in the blog template - Some custom templates already have it built in; if not, the code needs to be added. Basically, this says to Blogger, "Hey, I want to be able to expand and collapse some bits of my blog."
2> Add CSS script to the blog template - This defines the look and feel of the hidden containers. I can change the default colours, backgrounds, fonts etc in the style sheet.
3> Add HTML code to the individual posts - This defines which parts of the post I want to expand or collapse.
2> Add CSS script to the blog template - This defines the look and feel of the hidden containers. I can change the default colours, backgrounds, fonts etc in the style sheet.
3> Add HTML code to the individual posts - This defines which parts of the post I want to expand or collapse.
I did a bit of research to fine tune what I came up with; a quick internet search will ALWAYS return quite a few hits! For me, the most helpful post was THIS ONE. I edited the CSS to suit my own style, but the other codes were all ready to go with no modification.
Obviously, if I change my blog template in the future, I will need to repeat these steps to ensure the new template still does everything I want it to.
Thank you for visiting my blog!
Cool!
ReplyDelete