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 and How to Add Google Maps in Blogger
Till now, I don't know the real reason behind it.
Probably the reasons could be
Simple Notification Widget for Blogger
Have you been creating posts to notify all unimportant things about your blog ?
Yes, I have seen many people doing so. Creating single paragraph posts, making the blog look unimpressive.
Notification bar is one of the widely used technique to overcome this situation. The major advantage of notification bar is the space saved. Moreover, being placed above the header, it grabs everyone's attention.
Yes, I have seen many people doing so. Creating single paragraph posts, making the blog look unimpressive.
Notification bar is one of the widely used technique to overcome this situation. The major advantage of notification bar is the space saved. Moreover, being placed above the header, it grabs everyone's attention.
Simple Yet Stylish Share Buttons for Blogger
Recently one of our twitter follower asked us to create him a custom social sharing widget with some icons. The icons were of the WordPress plugin Simple Share Buttons.
While creating the widget for him, we decided to make the widget easily customizable, so that it will be easy for everyone to customize it with their own icons and effects.
How to Add Facebook Like Box to Blogger
Want to convert your visitors into Facebook fans ?
Even though Facebook like box pop-up and Facebook content locker can bring you some quick Facebook likes, adding a Facebook like box to the sidebar of your blogger blog is the most decent way to get some real Facebook likes without annoying your visitors.
- Number of people who like your Facebook page.
- A one click like button.
- Some of your Facebook fans(optional).
- Recent updates on your Facebook page(optional).
However if you want to add the Facebook like box to your blogger blog, follow the below steps.
Adding Facebook Like Box to Blogger
Step 1: Go to Facebook social plugins: like box page, fill the text areas with corresponding information. You can see the live preview at the bottom, it updates as you change a parameter.
Step 2: Click the Get Code button.
Step 3: On the pop-up, there will be four tabs. Click on the IFRAME tab.
Step 4: Copy the code.
Step 5: Go to your blogger dashboard, layout > Add a Gadget. Select HTML/JavaScript gadget.
Step 6: Paste the code on the text area and click save.
Step 7: Drag the widget to wherever you want the like box to appear.
We hope the tutorial helped you in adding Facebook like box to your blogger blog. If you have any queries regarding this, please leave a comment and we are always ready to help. If you wish to stay connected with us, you can catch us on Facebook at BloggerGarage
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.
- comment-header
- comment-content
- 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() {
$('.user.blog-author').closest('.comment-block').addClass('author-comment');
});
</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.
Tabbed Author Box Widget For Blogger
Author box widgets are usually used in multi-author blogs to let the visitors know about the author. In single author blogs, an about the author widget is placed in the sidebar for the same...
However, things seems changed now, using an author box widget has become a matter of style. They are now being used in both muti-author and single-author blogs.
The tabbed author box widget that we are giving you away is a clone of the fanciest author box widget for WordPress. If you're a WP user then you can buy it right from CodeCanyon for $10. Even though we said its a clone, adding and managing the widget is not that easy as this is not for WordPress. So, you have to do all things manually...
Adding the Tabbed Author Box Widget Below Every Posts
Step 1: Back up your blogger template [IMPORTANT]
Step 2: Go to your blogger dashboard > Template Edit HTML:
Step 3: Using Ctrl+F, search for </head> and copy-paste the below code above it.
<script type='text/javascript'>
jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});
</script>
Step 4: Now, search for ]]></b:skin> and paste the below code above it.
.ts-fab-wrapper{margin:0 0 2em;clear:both}
.ts-fab-wrapper a{text-decoration:none!important}
.ts-fab-wrapper img{border:none!important}
.ts-fab-list{overflow:hidden;padding:0 0 0 5px!important;margin:0!important}
.ts-fab-list li{display:block;float:left;list-style:none;margin:0 5px 0 0!important}
.ts-fab-list li a{display:block;line-height:16px;height:16px;padding:8px 12px;background-color:#e9e9e9;border:1px solid #e9e9e9;border-bottom:none!important;text-decoration:none;font-size:13px;color:#333;font-weight:bold;outline:0;text-shadow:none!important;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0}
.ts-fab-list li a:hover{color:#333}.ts-fab-list li.active a{background-color:#333;color:#fff;border-color:#333}
.ts-fab-list li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_qovkkhncixq6l_pL7L58EnLUoEBeHjPrIbaLK9yTADTYm9Bkn2foAb6HTjuTZgRtSgtmd57mbjh9gljUE0cgj4aDnPCBRrM0RZx7QBayA6iGbMtLup53-9-TKPfhYBikUMmwbiOYr6S/s320/fab_tab_icons.png')}
.ts-fab-list li.ts-fab-bio-link a{background-position:8px 8px;background-repeat:no-repeat;padding-left:27px}
.ts-fab-list li.ts-fab-bio-link.active a{background-position:-280px 8px;background-repeat:no-repeat;padding-left:27px}
.ts-fab-list li.ts-fab-twitter-link a{background-position:8px -42px;background-repeat:no-repeat;padding-left:35px}
.ts-fab-list li.ts-fab-twitter-link.active a{background-position:-270px -42px;background-repeat:no-repeat;padding-left:35px}
.ts-fab-list li.ts-fab-facebook-link a{background-position:8px -92px;background-repeat:no-repeat;padding-left:23px}
.ts-fab-list li.ts-fab-facebook-link.active a{background-position:-284px -92px;background-repeat:no-repeat;padding-left:23px}
.ts-fab-list li.ts-fab-googleplus-link a{background-position:8px -142px;background-repeat:no-repeat;padding-left:30px}
.ts-fab-list li.ts-fab-googleplus-link.active a{background-position:-276px -142px;background-repeat:no-repeat;padding-left:30px}
.ts-fab-list li.ts-fab-custom-link a,.ts-fab-list li.ts-fab-additional-link a{background-image:none!important}
.ts-fab-widget .ts-fab-list li a,.ts-fab-icons-only .ts-fab-list li a{text-indent:-9999em;padding:8px 12px!important}.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a{width:4px}
.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a{width:12px}.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a{width:8px}
.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a{width:0}
.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a{text-indent:0!important}
.ts-fab-tab{display:none;border:2px solid #333;padding:12px;background:#fff;min-height:64px}.ts-fab-tab:after{content:'';display:table;clear:both}
.ts-fab-tab:first-child{display:block}
.ts-fab-widget .ts-fab-tab{padding:8px}
.ts-fab-avatar{display:block;float:left;width:64px;height:64px}
.ts-fab-no-float .ts-fab-avatar{float:none;margin:0 0 12px}
.ts-fab-avatar img{display:block;border:none!important}
.ts-fab-text{margin-left:76px;line-height:1.5}
.ts-fab-no-float .ts-fab-text{margin-left:0}
.ts-fab-header{margin-bottom:10px}
.ts-fab-text h4{clear:none;font-size:18px;line-height:1!important;font-weight:bold;margin:0 0 .2em!important;line-height:1;padding:0}
.ts-fab-description{font-size:12px}
.ts-fab-follow{margin-top:10px}
.ts-fab-wrapper iframe{margin-bottom:0!important}
body.rtl .ts-fab-avatar{float:right}
body.rtl .ts-fab-text{margin-left:0;margin-right:76px}body.rtl .ts-fab-list{padding:0 5px 0 0!important}
body.rtl .ts-fab-list li{float:right;margin:0 0 0 5px!important}
.fb_iframe_widget>span,.fb_iframe_widget>span iframe{min-height:64px!important}
Step 5: Next search for <data:post.body/> and post the following code below it.
<b:if cond='data:blog.pageType == "item"'>
<style>
.ts-fab-avatar { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTBIOeMo-cJDa2Aivg9fz6-0c8VJOd-Mh0W0JmmnBj8oWtbQD5PNf5t8DMxsBiXHKgw2fSInBQ1IZAXK4OhuJG4i_nnS29dkMCffdzYvK7UXM_P21aYlQoLs0QRqrGkMHRmkAnm2GXAjX/s1600/Mathew+Stephen.jpg) no-repeat; height='64' width='64' }
</style>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below'>
<ul class='ts-fab-list'>
<li class='ts-fab-bio-link'><a href='#ts-fab-bio-below'>Bio</a></li>
<li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below'>Twitter</a></li>
<li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below'>Facebook</a></li>
<li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below'>Google+</a></li>
</ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below'>
<div class='ts-fab-avatar'>
</div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4>
<a href='http://www.bloggergarage.com/'>AUTHOR NAME</a></h4>
<div class='ts-fab-description'>
</div>
</div>
<!-- /.ts-fab-header -->
<div class='ts-fab-content'>
AUTHOR BIO</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below'>
<div class='ts-fab-avatar'>
</div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4>
<a href='http://twitter.com/bloggergarage'>AUTHOR NAME</a></h4>
</div>
<!-- /.ts-fab-header -->
<div class='ts-fab-content'>
<!-- Couldn't fetch latest tweet --></div>
<div class='ts-fab-follow'>
<a class='twitter-follow-button' data-lang='en_US' data-show-count='true' href='https://twitter.com/bloggergarage'>Follow @bloggergarage</a></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below'>
<div class='ts-fab-avatar'>
</div>
<div class='ts-fab-text'>
<div id='fb-root'>
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='ts-fab-header'>
<h4>
<a href='http://www.facebook.com/mattstephenktm'>AUTHOR NAME</a></h4>
</div>
<div class='fb-subscribe' data-href='http://www.facebook.com/mattstephenktm' data-layout='standard' data-show-faces='false' data-width='320'>
</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below'>
<div class='ts-fab-avatar'>
</div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4>
<a href='https://plus.google.com/107815365251270865200?rel=author'>+AUTHOR NAME</a></h4>
</div>
<!-- /.ts-fab-header -->
<g:plus height='69' href='https://plus.google.com/107815365251270865200' width='320'/>
</div>
</div>
</div>
</div>
</b:if>
Step 6: Now click the orange save button.
Coustomization:
- Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTBIOeMo-cJDa2Aivg9fz6-0c8VJOd-Mh0W0JmmnBj8oWtbQD5PNf5t8DMxsBiXHKgw2fSInBQ1IZAXK4OhuJG4i_nnS29dkMCffdzYvK7UXM_P21aYlQoLs0QRqrGkMHRmkAnm2GXAjX/s1600/Mathew+Stephen.jpg with URL of your own image of size 64*64.
- Replace http://twitter.com/bloggergarage with your own twitter profile link, http://www.facebook.com/mattstephenktm with your Facebook profile link and https://plus.google.com/107815365251270865200 with your Google+ profile link.
- Replace AUTHOR NAME with your name and AUTHOR BIO with your short bio.
That's it! Even though installing this widget in your blogger blog is a mess, you will be happier at the end seeing the widget in your blog. If anything goes wrong in the middle, restore the blogger template and try it again. If you still face any difficulty installing the widget on your blog, drop a comment below and we will be happy to help you out.
Adding a Cool Email Subscription Widget Below Every Posts in Blogger
After a long time, here we are back with a cool email subscription widget, which can be placed right below all your posts. As you all know, placing a email subscription widget below each and every posts of your blog can certainly increase your email subscribers. Moreover it gives your blog a classic look.
If you browse blogs regularly, then surely you may have seen a similar widget in WordPress blogs. Yes, this widget is inspired from a WordPress plugin. Whatever, as far as we know, no one has released a similar widget for blogger blogs. Anyway, the widget looks more attractive than our older version and has some social profile buttons below the form, which enables the users to follow you via social networking sites too...
Adding the Email Subscription Widget Below Every Posts
1) Go to your blogger dashboard > Template > Edit HTML
2) Using Ctrl+F, search for ]]></b:skin> and paste the below code above it.
#newsletter { background:#202020; padding:20px; margin-bottom:40px;}
#newsletter h3 {
margin:0 0 10px 0;
color:#fff;
font-size:28px;
font-weight:normal;
font-family: 'BitterRegular';
}
#newsletter h4 {
margin:0 0 10px 0;
color:#76b320;
font-size:16px;
font-weight:normal;
font-family: 'BitterRegular';
}
#newsletter input {
width:32%;
height:22px;
line-height:22px;
font-size:12px;
color:#a1a1a1;
border:none;
margin:0 5px 20px 0;
padding:5px 10px;
}
#newsletter input.sign {
color:#fff;
font-family: 'BitterRegular';
cursor:pointer;
height:26px;
width:70px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTVZIOhbDHAcrCOq9ow1dAfMZMyp_GSSM7rfsO_yV0ie6r_29f8WdgNA7u_wNp9IpfrYRDe2XfbTalb6lHNooKtYXZpZ1pphjP24-H5zOFgLbavE-Lea2bZspnhaX_L18fKFt2w5dDks7/s1600/signup-bg.png) left top no-repeat;
margin-left:5px;
}
#newsletter #lettersocial {
padding:15px 0 0 0;
border-top:1px dashed #fff;
}
#newsletter #lettersocial a {
font-size:13px;
color:#999999;
height:16px;
line-height:16px;
margin-right:15px;
}
#newsletter #lettersocial a img { vertical-align:middle;}
#newsletter #lettersocial a:hover { text-decoration:none;}
3) Now search for <data:post.body/> and paste the below code below it:
<b:if cond='data:blog.pageType == "item"'>
<div id="newsletter">
<h3>Enjoyed this post?</h3>
<h4>Be sure to subscribe to get regular updates delivered to your email inbox, for free...</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tweaks123', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="newslettername" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Name" />
<input class="email" id="newsletteremail" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" id="newsletteremail" type="text" value="Email" />
<input name="uri" type="hidden" value="tweaks123" /><input name="loc" type="hidden" value="en_US" /> <input class="submit sign" type="submit" value="Submit" /></form>
<div id="lettersocial">
<a href="http://feeds.feedburner.com/tweaks123" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzdkpdAIrXkI7fno110J5MhKXv-076qsaf0RTon90pfRZ2tSJZYU0jYldqTrI_Y4nfl6RMCDMI6P9jvJRzsXypEqE8cQ93IZ0A1jL1BvTFYd0ZKljuJnlX6ddfDCBZUdDW5IwUKFQWRWS/s1600/icon-rss.png" alt="" /> Subscribe</a>
<a class="twitter popup social-icons" href="https://twitter.com/#!/bloggergarage"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjve72pTAUYjedPAR2V_4lcnXHLv0fztI7SKnX9am-oCT3ST4nkbQsOvB1EOEY9-yCT1SlWnMyYTv6x5woH5V_avh3d-z8x1mxolPTElIFPYrln4EDSwScBhn3WCTHtsLt-qS6JHw16gg17/s1600/icon-twitter.png" alt="" /> Follow</a>
<a href="http://facebook.com/bloggergarage"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRty__itzqmbYveAyzdhm3vHqe2sp95rwAwpjmPsoES2-AfLV4tXMfgkGL_V3V40dWPevDTUz48ZdA-7pdDuEYa6vlua_6gqJote4LqFp-HwFGAxo-KhP4UdgrRf8Dn93eYYFQkPWOlivN/s1600/icon-facebook.jpg" alt="" /> Like</a>
<div class="clr"></div>
</div>
</div>
</b:if>
4) Click the orange 'Save' button.
Customization
- Replace #202020 with a suitable color code to change the background color.
- Replace tweaks123 with your feedburner Id.
- Replace the URLs of social networking sites with your own profile links.
That's all we have for you today. Now just move on to your blog and navigate to any of the posts and you can see the widget right below your post. And at last sorry for being inactive for several days, it was due to my exams and all. That's it, take care for now, will meet you tomorrow with our next post!
Subscribe to:
Posts (Atom)