Open top menu
Tutorial # 45 - How to Create a Sitemap or Table of Contents in Blogger

Sitemap makes the readers easy to find content that they are searching for. While the blog archive and labels have all the information about the published post, these do not appear on a single page completely, so searching for more posts is not always an easy job.

Quite fortunately, this tutorial will help you to add a table of contents or sitemap on Blogger showing the index of all posts separated by categories that have been published. It will also show the latest posts with a text saying "New!".

Step 1: Go to Pages > click the New Page button

Step 2: Click on the HTML tab and paste the following code inside it:

Step 3: Customization
- Replace http://earningviablog.blogspot.com in line # 11 with the address of your blog.
- To change the color and font size of categories title, replace the values in line # 2.
- To change the color of the links, replace the value in line # 3.

Step 4: Click Options on the right sidebar and select Don't allow (hide existing) for the reader's comments

Step 5: Finally, click the Publish button and View the page


Read more
Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot

In the previous tutorial, Tutorial # 43 - Simple Recent Posts Widget for Blogger/Blogspot, we have learnt to create a Recent Posts Widget. In this post, you will see a different way of displaying the Recent Posts on Blogger - this is specially for those who want to show the post thumbnails as well.

Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript

Step 2: Paste the code from one of the options below in the empty box of HTML/JavaScript:


Step 3: Customization
- Replace YOUR-BLOG in line # 3 with the URL of your site/blog (ex: http://earningviablog.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of the URL.
- To disable the scroll bar, remove the number 500 in line # 4.
- By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 in line # 4 with the number of posts that you want to appear
- If you want only the posts titles, change true to none and "0" from padding-top:0px with 10 in lines # 10 and 9 respectively.

Step 4: Save your widget. And you're done!


Read more
Tutorial # 43 - Simple Recent Posts Widget for Blogger/Blogspot

Blogger itself contain many widgets related to "posts" like "Popular Posts" but unfortunately there is absence of a Recent Posts widget. If still you want such a widget, this tutorial will guide you to create your own.

This Recent Post widget has two variations, you can have it with both the title and snippets of post, or with post titles only. To make it fit your own design, you will need to modify the CSS style in order to make the following changes:-
- Display post titles only
- Change the number of posts
- Change the number of characters of the post snippet/excerpt
- Change the link or background color, the size and color of text/links.
- Show/hide the post dates

However there is the absence of thumbnails of the posts. If you want such thumbnails as well, see our next tutorial, Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot

Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript

Step 2: Paste the code from one of the options below in the empty box of HTML/JavaScript:

Option 1: Recent Posts Widget with Snippets:


Option 2: Recent Posts Widget Showing Post Titles Only:


Step 3: Customization:
- Change 5 (option 1 in line # 5) and 10 (option 2 in line # 3) with the number of posts that you want to display.
- Change false to true in line # 3 if you want the posts dates to appear
- Change 100 (option 1 in line # 5) if you want more characters to be displayed.
- To change the color and font size of the links, modify the values in line # 11 in option 1 and in line # 7 in option 2 (links) and line # 11 and in line # 7 in option 2 (font-size) respectively
- To change the style of posts summary, modify the values in green (color) and orange (font size)
- Replace the http://blog-address.com text with your URL

Step 4. Save your widget. And that's it! Enjoy!

Read more
Tutorial # 42 - Google Translate Widget with Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language. This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese.

Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3: Paste the code below in the empty box:

Step 4: Now click on Save

Read more
Tutorial # 41 - How to Remove "Showing Posts With Label" in Blogger

As a default, whenever we click on a label link the "Showing posts with label" message appears above the posts as shown below.
For many of us, it is quite annoying and useless. If this is the case with you, you may remove it just by following the steps below.

Step 1: Go to Dashboard > Template, Click on "Edit HTML"


Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste <b:includable id='status-message'> inside the search box and hit Enter to find it


Step 3: After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Step 4: Replace the code with the one given below


<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 5: Save the template. Now view your blog and click on some label....there should be no box anymore.


Read more