Pages

May 24, 2020

HTML Sidebar Boxes

Posted by

The sidebar box I use most often is the HTML box, which allows both HTML and Javascript, as you can see:


The ability to use Javascript like this is one of the main reasons why I've always used Blogger instead of WordPress (the free WordPress.com blogs do not allow Javascript; I suspect that is also true of Edublogs, but I am not sure).

You can install as many of these HTML boxes as you want, pasting into the box whatever HTML, including Javascript, you want to use:


Here are just a few examples of the ways I use the HTML option at my various blogs:


Randomizing Javascripts

 In the sidebar of this blog, you'll see random mindset cats and random tarot cards, and those are just a few of the many randomizers I've created to use in my blogs.

I also share them with others! For example, if you want to use the mindset cats, you can get the javascript to copy-and-paste here: Random Mindset Cats. Here they are in action!


I use a free tool, RotateContent.com, to create the randomizers, and here's a presentation I made for Domains 2019 about that: Turn HTML Tables into Javascripts for Distributed Content Everywhere.

I also did a presentation on javascript randomizers for CanInnovate 2019: Javascript Magic in Canvas.

If you have questions about any of that, let me know. I'm always glad to preach the gospel of randomizing javascripts!


YouTube Playlists

 Even though they are tiny, you can embed YouTube playlists at width 200, height 125, and they will play in a sidebar.


That's my Maati Baani playlist, resized, which you can paste in a sidebar. For more about YouTube Playlists, see this earlier post: YouTube Videos and Playlists.


Google Slidedecks

 As my students create their projects, I create a slide in a slidedeck for each project, and then I can embed that slidedeck in the class announcements sidebar.


I embed the same slidedeck in the class projects webpage and in Canvas too. To embed a Google Slidedeck, just choose File: Publish to Web, and then select Embed, and customize the size (for a blog sidebar, 200 pixels is usually a good size):


I even added a randomizer to my Google Slides so that I can randomize the deck, putting different projects up at the top. I randomize the deck, and the new order appears everywhere the deck is embedded.


Twitter Widgets

 I have a dedicated class Twitter account, @OnlineMythIndia, which is separate from my own Twitter account, @OnlineCrsLady. The class Twitter feed is one of the most important parts of the class announcements blog because I can be adding new content all day so that there's always something new!

To embed a Twitter widget, just go to Publish.Twitter.com and paste in the address of the Twitter account, then choose Embedded Timeline, and then customize for width, height, etc.


You can embed ANY Twitter stream; it does not have to be your own. So, for example, you could embed your school's Twitter stream or the Twitter stream of your student newspaper, some other news source: any Twitter account you want!


Text-and-Image HTML

 In addition to the dynamic options above, I also sometimes create a static HTML box with just text and image. For example, the Suggestion Box box, with a link to the Google Form I use for (anonymous) suggestions.


The trick with doing text-and-image is that you do have to be able to host the image somewhere, displaying it by URL since the HTML box editor does not have all the editing options that the regular blog post editor does. For an example of combining a static image with a randomizing javascript, see this post: Yijing in the Sidebar! (You can use that same process to combine a static image with text, like in the example of the Suggestion Box.)


Okay, I think that's all I have to say about blogger sidebars, which means it is on to Posts and Pages.
Labels: ,