Why and How to Add Google Maps in Blogger

I have been working with blogger for more than a year now. In this time period, I've visited thousands of blogs (that includes business blogs too) made with blogger. The most shocking thing is that I have never seen a blog with Google map embedded in it.

Till now, I don't know the real reason behind it.

Probably the reasons could be

• They don't know about Google maps (So sad)
• They think its hard to embed Google maps

Why You Should Add Google Maps?

Actually, It is one such thing that make things easier...

Replacing Blog Author Icon in Blogger Threaded Comments

After reading the title of this post you may have asked yourself, "What the hell is this blog author icon ?".

The answer is simple... It is the damn icon shown after the name on the comments by author in blogger threaded comments.

Yup, that boring pen icon...

How to Highlight Author’s Comments in Blogger

Imagine this...

You and I have same name (let it be Mathew Stephen) and I started commenting on your blog regularly creating an ambiguity about the author among your readers.

What will be your next step? Going to kill my comments from your blog?

You're going to kill my comments means you're going to stop me from visiting your blog. i.e you're going to lose a damn active visitor...

So what's the perfect solution?

Simple... you've to make your (author's) comment highlighted.

Understanding the Blogger Comment Block

Before you go further, it will be better If you could understand the comment block. By default, the blogger comment block is the portion excluding the avatar section of a comment. Primarily, it is divided into three sections.

1. comment-header
2. comment-content
3. comment-actions

The below image will give you a clear idea about the same.

This is how CSS classes are distributed in blogger comments. Also the comment block along with the avatar have  a class 'comment' assigned to it.

Adding a CSS Class to Author's Comments

Blogger by default generates a span tag with the class '.icon.blog-author' in the comment header (between name and date) for the author's comments. However, that is not enough to style the whole comment block. So, we are going to exploit that span tag by using JavaScript. Using JavaScript, the closest comment-block (CSS class) to the CSS class .icon.blog-author is fond out and a separate class author-comment is added to the same. Follow the below steps to add the JavaScript.

Step 1: Go to your blogger dashboard > Template > Edit HTML.

Step 2: Using Ctrl+F, search for </body> and paste the below code above it.

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.user.blog-author&#39;).closest(&#39;.comment-block&#39;).addClass(&#39;author-comment&#39;);
});
</script>

That's it, now a class author-comment is added to the comment-block of the author's comments. In the next part we are going to style the comment block of the author's comments by using CSS.

Highlighting Author's Comments (in Blogger)

Now, the author's comments have a CSS class author-comment assigned to it. Furthermore, it is super easy now to make it highlighted.

Here are some samples, so that it will be much more easy for you to decide and add the one you like the most.

1. Changing the Background Colour of Author's Comments

To change the background colour as it is seen in the picture, search for ]]></b:skin> in your blogger template and paste the below code above it.

.author-comment {
    background: #F0A2A2;
    padding: 10px;
}

2. Adding Border to Author's Comments

To get something like what is seen above, search for ]]></b:skin> in your blogger template and paste the below code above it.

.author-comment {
    border: 3px solid #e18728;
    padding: 10px;
}

Also make sure, you use a colour which best suits your blog's overall colour schema.

Now your visitors can easily distinguish your comments from other comments without losing any time. Hope you liked the exploit. If you faced any difficulty while adding the codes, please let us know it through the comment box below. We are always happy to help.

How to Hide a Specific Blogger Share Button

In our previous posts, we have showed you how to remove the official blogger share buttons as well as to hide the buttons from post pages alone. Today we are here with some other tweak on the official blogger share buttons. i.e. to hide a specific button from the blogger share buttons. Still hadn't understood what the hell am I talking about? Let me explain, as you all know, the official blogger share buttons consist of 5 separate buttons, the Facebook, twitter, email,  Google +1 and blogger button. What we are going to show is to hide Facebook button or any of the five buttons.

How to Hide Twitter/Google +1/Blogger/Email/Facebook Button?

Step 1: Go to your blogger dashboard, Template >> Edit HTML,

Step 2: Using Ctrl+F, search for <b:skin> and click on the corresponding line number.

Step 3: Using Ctrl+F, search for ]]></b:skin> and above that place any of the below codes according to your need.

To hide Facebook button,

.sb-facebook {
display: none !important;
}

To hide twitter button,

.sb-twitter {
display: none !important;
}

To hide email button,

.sb-email {
display: none !important;
}

To hide the blogger button,

.sb-blog {
display: none !important;
}

To hide the Google +1 button,

.post-share-buttons .dummy-container {
display: none !important;
}

Step 4: Click the save template button.

Now just move on to your blog and you can see blogger share buttons without a specific button which you have hid. If you have faced any difficulties while hiding any of the button, please let me know it through the comment box below.

How to Add a Link to Widget Titles in Blogger

It will be utterly useless, talking to you all about "What widget title is?". 99% of the blogger widgets comes with titles. Now, you will be thinking about the widgets without titles... Yes, there are widgets which don't have any titles. The '+1 Button' widget, 'Feed' widget are some among them. Whatever, lets come back to the topic, adding a link to the widget titles. If you have added the profile widget and want to add the link to your about page to its title or something like that. Through this post, we will show you how to add a link to the widget titles in blogger.

Adding a Link to Widget Titles in Blogger

 

As of WordPress, we don't have any plugins, which will do the work for us. We just have to add the links manually to the template. Even though, its not that hard to do and is simple. Follow the below steps and you are done.

Step 1: Go to your blogger dashboard >> Template >> Edit HTML.

Step 2: Check the 'Expand Widget Templates' check box on top left.

Step 3: Using Ctrl+F, Search for the widget title or widget ID of the widget for which you want to add a link to the title.

Now you can see something like what is shown below.

<b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:profileUrl != &quot;&quot;'>

Step 4: Now, replace <data:title/> with the below code.

<a href="URL"><data:title/></a>

Where URL is the link you want to add to.

Step 5: Click the orange save template button.

That's it! We hope this post had helped you in adding a link to the widget titles. Before you go, make sure to check out more of our blogger tutorials. If you faced any problems while adding the link, then do inform us it through the comment box below.

How to Find Blog ID, Widget ID, Section ID & Post ID in Blogger

What is an ID? Simply, it is the short from of identification. IDs are usually unique in nature and is used to identify specific elements. IDs are generally a collection of numbers and alphabets. In blogger, each and everything from a simple blog post to a blog has an unique ID. In this post, I will show you how to find out the IDs of your blogs, widgets, posts and sections.

What is Blog ID & Post ID?

Each and every posts of your blog have an unique ID and that is referred as post ID. Where as blog ID is the unique ID of your blog, each and every blogger blogs have a unique ID.

How to Find Blog ID & Post ID?

1) Go to your blogger dashboard, Posts >> Click on the Edit button below any of your post.

2) Carefully look into the URL, which will be something like http://www.blogger.com/blogger.g?blogID=2221137549901974272#editor/target=post;postID=3209053198020903311. Here, 3209053198020903311 is the post ID and 2221137549901974272 is the blog ID.

What is Section ID & Widget ID?

Most probably you will be familiar with the widgets, they are the elements which you add to you blog using Add a Gadget link in the layout. Some of the widgets are popular posts widget, search widget... Now, you will be asking what this section is? If you have played with blogger then you know that too. Simply you are adding the widgets to particular sections, some sections are header, sidebar, etc. If you still have any doubts, the below picture will clarify it.

How to Find Section ID & Widget ID?

1) Go to your blogger dashboard, layout >> click the 'Edit' button corresponding to a widget, and a window will popup.

2) Here too look in to the URL, which will be something like http://www.blogger.com/rearrange?blogID=2221137549901974272&action=editWidget&sectionId=sidebar-right-1&widgetType=null&widgetId=PopularPosts1. Here, the widget ID is PopularPosts1 and section ID is sidebar-right-1.

That's it! This is how we can understand the blog ID, Post IDs, Widget IDs and Section IDs of a blog. Hope this will help you a lot. If you have faced any difficulties amidst, please let me know it through the comment box!

Replace Blogger Newer, Older Posts & Home Links With Image

Have you ever thought of replacing the boring older post, newer post and home link shown below your posts? If you haven't, then start thinking of it from now. Those links even though placed at the bottom has a greater role to play. Making it even more beautiful and eye-catching can simply increase you some page views.

Even though it looks bit harder, its quiet easy and no knowledge is required to replace it with something you like. So lets look in to it...

Replacing Blogger Newer, Older Posts & Home Links

Go to your blogger dashboard >> Template >> Edit HTML

Check the "Expand Widget Templates" check box on the left top.

Replacing Older Posts Link

Using Ctrl+F, Search for <data:olderPageTitle/> and replace it with the below code.

<img src="Image URL"/>

Replacing Newer Posts Link

Using Ctrl+F, Search for <data:newerPageTitle/> and replace it with the below code.

 <img src="Image URL"/>

Replacing Home Link

Using Ctrl+F, Search for <data:homeMsg/> and replace it with the below code.

 <img src="Image URL"/>

Now click the orange save button.

Coustomization

• Replace Image URL with corresponding image URLs.

That's it! You have successfully replaced the boring older posts, newer posts, home links. If you have faced some errors the please let me know it through the comment box below!

How to Remove Blogger Share Buttons

Actually the default blogger share buttons are small and cool. Just because AddThis and ShareThis are giving more options which includes tracking of the number of likes, shares, etc, most the blogger users are replacing the blogger share buttons with the advanced AddThis/ShareThis buttons.

If you wish to remove the official blogger share buttons so as to replace it with AddThis/ShareThis buttons then it is simple. Blogger allows us to remove the share buttons with a single click. But if you are using a custom blogger template then sometimes it wont be removed by using the default method. In that case you have to manually remove the code from the template. Below i will show you both the ways to remove the blogger share buttons.

Method 1: Default Method

Step 1: Go to your blogger dashboard >> Layout:

Step 2: Click the 'Edit' option on the Blog Posts section

Step 3: Uncheck the check box corresponding to 'Show Share Buttons'.

Step 4: Click the orange save button.

Method 2: Removing Manually

 Step 1: Go to your blogger dashboard >> Template >> Edit HTML:

Step 2: Check the 'Expand Widget Template' check box at top left.

Step 3: Using Ctrl+F search for the below code and remove it:

<b:include data='post' name='shareButtons'/>

Step 4: Click the orange 'Save template' button.

That's it! You have successfully removed the official blogger share buttons. Still if you are facing any troubles while removing the official blogger share buttons then please share it with us through the comment box below! On the go if you liked our blog then please subscribe to us by registering your mail ID here.

How to Hide Blogger Share Buttons From Post Pages

In this post i will show you how to hide the official blogger share buttons from the post pages. Yes you may have seen this in some of the major blogger blogs. If you have activated the read more hack then placing a lengthy social sharing widget below your posts on the homepage is not that good. As the official blogger share buttons are small and flexible placing it only at the homepage is a good idea.

This is done with the help of some conditional statements and no complex codes which can lower the blogs loading speed is never used. Hiding the social share buttons is simple and can be done by adding some codes directly to your blogger template. Follow the below steps in order to hide the official blogger share buttons from the post pages.

Hiding Blogger Share Buttons From Post Pages

Step 1: Go to your blogger dashboard >> Template >> Edit HTML:

Step 2: Check the 'Expand Widget Template' check box at top left.

Step 3: Using Ctrl+F search for the below code:

<b:include data='post' name='shareButtons'/>

Step 4: Replace the above code with the code below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>

Step 5: Click the orange 'Save template' button.

Now reload your blog and you can see the official share buttons glowing there... After that navigate to one of your post page and the share buttons won't be there... Happy? Then please do follow us on twitter at @BloggerGarage

How to Move Your Blog from Tumblr to Blogger

Tumblr, having over 95.7 Million blogs (as of Feb 2013) is one among the best micro-blogging platform and there is no doubt about that. Even though tumblr is one among the best, like everything tumblr too have some limitations. Lack of a built-in commenting system and limited design control  are some of them. Whatever if you wish to move your blog from tumblr to blogger due any reason, we have the solution right here. In this post we will show you how to move your blog from tumbler to blogger easily without losing your pictures.

Moving Your Blog from Tumblr to Blogger

Step 1: Go to Tumblr2Wordpress.benapps.net and follow the instructions carefully to export your tumbler posts and comments.

Step 2: Download the XML file which contains the content of your tumblr.

Step 3: Now just navigate to wordpress2blogger.appspot.com and upload the previously downloaded file and click the convert button.

Step 4: Download the converted XML file.

Step 5: Go to your blogger dashboard > Settings > Other > Import blog.

Step 6: Now select the XML file from your computer, fill the captcha and click the orange Import Blog button.

That's it! You have successfully moved your tumblr blog to blogger.Now just enjoy blogger and on the go check out some of our Blogger Tips and Blogger Gadgets.