Open top menu
Tutorial # 35 - Numbered Comments on Threaded Comments for Blogger/Blogspot

This tutorial helps you to understand how to add numbered comments with comment bubbles on the threaded comments as shown in the picture below:

This will help you to specify any comment using its 'reference' number.

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger's search box. Type ]]></b:skin> inside the search box then hit Enter to find it.

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3: Just above ]]></b:skin>, add the following CSS code:

- If you want to have no bubble icon, remove lines # 12-18.

- To change the comment bubble, replace the URL with the URL address of your own icon. [URL address of bubble/icon will be made by inserting it somewhere in your blog and then right-click on it and click on "Copy image address". Then the address will be saved in your clipboard which can be used to replace the URL in line # 14 of the above CSS code. After doing so, you may remove the picture inserted.]

- To change the position of comments count, increase/decrease the values (10 & 3) from padding-left and padding-top in lines # 12 and 13 respectively

- To change the position of comments bubble/icon, change the values (7 & 10) from margin-top and margin-left in lines # 15 and 16 respectively.

- To change the font and color of the comments count, change the values in lines # 10, 11 and lines # 27, 28.

Step 4: Now Save the Template and you're finished!

Read more
Tutorial # 34 - How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

This tutorial will help you to enlarge the first letter of posts and comments which stretches down three or four lines with the text wrapped around. That letter is called as "Drop Cap" The drop cap letter can also use a different font and have a different color from the rest of the text. This style can be often seen in newspapers, and magazines.


For Posts

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:


Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type ]]></b:skin> inside the search box then hit Enter to find it.

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3: Just above ]]></b:skin>, add the following CSS code:

Font size and color can be edited by amending the lines # 5 and 6 respectively.

Step 4: Now search for this code: <data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below: <div class='capital'><data:post.body/></div>

Step 6. Save the changes by clicking on the Save template button

Note: If the above code is not working, add one of following codes from this example: <p class="capital"><data:post.body/></p> OR try this instead: <span class="capital"><data:post.body/></span>


For Comments

Step 1: Follow the above Step 1, 2 & 3 (if you have already added the CSS code, skip above Step 2 & 3)

Step 2: Then Search for this piece of code:<data:comment.body/>

Step 3: Add <p class="capital"> before and add </p> after the above searched code

Step 4: Save your Template
Read more
Tutorial # 33 - How to add Calender Dates Next to Blogger Posts

If you want to have a calendar style dates next to your Blogger posts, you need to look no further than this blog. In this tutorial, we'll learn how to create a calendar style for your Blogger posts date!


Step 1: Go to "Settings" > "Language and Formatting" - "Date Header Format" and change the date format as you can see in this example below (first add day, month and then year)

Step 2: Go to Template > click the "Edit HTML" button

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

Step 4. Type or paste the following line inside the search box and hit Enter to find it:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Step 5. In case you find it twice, replace it twice with this code:
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Step 6. Now type this tag inside the search box and hit Enter to find it:
</head>

Step 7: Just above the </head> tag, paste this code:


Before saving the Template, here we can make some changes:

- To change the calendar style, replace the url in line # 22 with yours;
- If the calendar doesn't appear as it should, change -108 line # 27 with 0;
- Lines # 38, 46, 53 where you can change the color of the dates

Step 8: Now Preview your Template and if everything looks ok, hit the Save Template button.
Read more
Tutorial # 32 - Add Social Media Icons to Blogger Header

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. The icons will rotate when you hover over them.

Step 1: Go to Blogger dashboard > Template > Edit HTML


Step 2
To expand the style, click on the small arrow on the left of <b:skin>...</b:skin>,


Then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag

And then add the following code just above it

Step 3: Now search for this line


Step 4: And just above it, add this code


Step 5: Following changes shall be made by you
- Change usernames at lines 4, 6, 8, 10 with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in the above mentioned lines with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want with a Link URL and Image URL:


Step 6: Finally, Save the Template to apply the changes.
Read more
Tutorial # 31 - Social Media Sharing Widget using AddThis

Without any doubt "Sharing is Caring", those who care and like you posts intent to share them to their social media profiles. This widget helps them to share your content and to make it available to other people. This in turn will promote your blog.


There are many ways to add the social media sharing widget in your blog. However we are using "AddThis" to add different types of social sharing widgets in your blog.

Step 1: Visit the https://www.addthis.com/get/sharing page & Click on "SIGN UP FOR ADDTHIS"

Step 2: Create an account in AddThis. You may also log in through Google, Facebook or Twitter accounts

Step 3: Click on "TOOLS"

Step 4: This will provide you with a number of different types of social sharing buttons. We're going to have Floating Sharing Sidebar

Step 5: You will have some settings regarding your social sharing buttons
Changing the settings doesn't affect the code given below. Before pressing the button "Activate" you need to copy the code and paste it just above <div class='post-footer'> in Template > Edit HTML.

If you want to edit or change the settings of the widget, you just need to your account and amend the setting without making any changes in your blog.

Related Tutoriols
Tutorial # :
Tutorial # :
Tutorial # :
Read more
Subscribe to: Posts (Atom)