Tips - Blogger - Useful tips for organize and write post on Blogger

Introduction:
As I got more involved writing posts frequently, the need of advance features to facilitate it grew which basic blogger hasn't come up with yet. To name such features could be putting a table, inserting programming code etc. Target of this post is to list down such finding/techniques which are used somewhere in my blogs or about to or considering to use. Expect this as working in progress and growing numbers of items over the period.

Features:

1. How to put various type of programming code blocks in a post.
Found this beautiful link which can convert most of the well known programming language code to a formatted one which can be directly used in the Blogger post.

2. Add a JavaScript block on a blog.

Steps to follow:
1. Go to 'https://www.blogger.com/' and login
2. Click on 'More Options' dropdown icon left to 'View blog' button and select 'Layout'
3. Click on 'Add a Gadget' link at right side of the page that will show a popup
4. Click on 'HTML/JavaScript' link
5. On next page, provide a title and write your code in content. I have added a small code snippet to try it out to comply with seeing is believing term.

Script snippet

(generated using Feature-01 - JavaScript option)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script language="javascript" type="text/javascript"> var showCon = false; function showHideContent(content) { var element = document.getElementById(content); if (showCon == true) { showCon = false; btn.value = "Show"; element.style.display = "none"; } else { showCon = true; btn.value = "Hide"; element.style.display = "block"; } }  </script> <div id="showBtn"> <input type="button" value="Show" id="btn" onclick="return showHideContent('content')" /> </div> <div id="content" style="display:none"> <a href="#" onClick="alert('Congratulation!!!! We did it.');">Show a popup</a> </div>

3. Add a JavaScript block on a post.

Steps to follow:
1. Copy above code snippet
2. Go to Post Edit screen
3. Click on 'HTML' button at top left blogger menu next to Compose button. 
4. Paste the code block (better to put at the beginning or at the end)
5. Save/Update the post and view

4. How to add a table in a post.


Table snippet

(generated using Feature-01 - HTML option)

1 2 3 4 5 6 7 10 11 12 13 14

<table border="1"> <tr> <th>Column 1</th><th>Column 2</th> </tr> <tr> <td>Cell 1:1</td><td>Cell 1:2</td> </tr> <tr> <td>Cell 2:1</td><td>Cell 2:2</td> </tr> <tr> <td>Cell 3:1</td><td>Cell 3:2</td> </tr> </table>

Steps to follow:
1. Copy above code snippet
2. Go to Post Edit screen
3. Click on 'HTML' button at top left blogger menu next to Compose button. 
4. Paste the code block
5. Save/Update the post and view

5. How to make a section collapsible.

Script snippet

1 2 3 4 5 6 7 8 9 10 11 12 13

<script language="javascript" type="text/javascript"> function showHideADiv(element){ if(element == null) return; var div = document.getElementById(element); var display = div.style.display; if(display == "block") div.style.display = "none"; else div.style.display = "block"; } </script>

1. Copy snippet-01 which is a javascript and follow feature-03 mentioned above. This JavaScript show or hide a element passed to the function as name.
2. Put a DIV around the section needs to be collapsible. '<div id="aID" style="display:block">'. Need to make sure ID value is unique across the section. I used DIV to define a section, any other HTML element can be used as long as ID and style values are provided. Valid values are 'display:block' and 'display:none'.
3. Use an anchor element to generate show/hide action like '<a href="javascript:void(0);" onClick="showHideADiv('aID')"></a>'.
4. Feature 4 & 5 above used exact same technique 



Resources:
1. http://hilite.me/