Metro Style Social Subscription Widget For Blogger

After the launch Microsoft windows 8 (OS), metro style has became popular in web designing arena. Many WordPress themes, Blogger templates, menu bars, etc has been released based on this metro style. But what this metro style is? Actually metro is a design language from Microsoft, and Windows 8 start screen is designed based on that. Whatever, today what I have here for you is a metro style social subscription widget.

As its name is, the metro social subscription widget is inspired from the metro styled windows 8 start screen. The widget contains a Facebook, twitter, pinterest, LinkedIn, Google +, RSS and a YouTube button. The button zooms out when the mouse is hovered.

Screenshot:

Adding Metro Style Social Subscription Widget

Step 1: Go to your blogger dashboard, Layout >> Add a Gadget.

Step 2: From the list of gadgets, select HTML/JavaScript gadget and add the below code into it

<style>
.metro-social{width:285px} 
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} 
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} 
.metro-social .fb{background:url(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px} 
.metro-social .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px} 
.metro-social .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s50/google%252Bplus.png) no-repeat center center #da4a38;width:69px;height:70px} 
.metro-social .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px} 
.metro-social .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px} 
.metro-social .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px} 
.metro-social .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px} 
.metro-social li:hover .fb{background:url(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s200/facebook.png) no-repeat center center #1f69b3} 
.metro-social li:hover .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5} 
.metro-social li:hover .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s200/google%252Bplus.png) no-repeat center center #da4a38} 
.metro-social li:hover .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s45/pinterest.png) no-repeat center center #d73532} 
.metro-social li:hover .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s45/linkedin.png) no-repeat center center #0097bd} 
.metro-social li:hover .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s45/youtube.png) no-repeat center center #e64a41} 
.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s45/feed.png) no-repeat center center #e9a01c} 
</style>

<div class="metro-social"> 
<li><a class="fb" href="http://www.facebook.com/USERNAME"></a></li> 
<li><a class="tw" href="http://twitter.com/USERNAME"></a></li> 
<li><a class="gp" href="https://plus.google.com/USERNAME"></a></li> 
<li><a class="pi" href="http://pinterest.com/USERNAME"></a></li> 
<li><a class="in" href="https://www.linkedin.com/in/USERNAME"></a></li> 
<li><a class="yt" href="http://www.youtube.com/USERNAME"></a></li> 
<li><a class="fd" href="http://feeds.feedburner.com/USERNAME"></a></li> 
</div>  

Step 3: Replace USERNAME with your usernames.

Step 4: Click the orange save button.

If you have faced any problems while installing the widget on your blog, then please let me know it through the  comment box below. Before you go, make sure to check out our other posts on blogger widgets.

read more

Adding Print Button To Your Blogger Posts Using PrintFriendly

Everyone have their blog stuffed with social sharing buttons making it easy for the visitors to share the contents with their friends. Suppose you have a recipe/how-to blog and your visitor want to print the recipe to make that dish or want to print the how-to... Yes this is an era of social media but the situation mentioned above can happen and as a blogger you have to care all your readers. right?

Adding a print button to your blogger blog is not something that is very hard. PrintFirendly enables us to add a print button to blogger blogs within seconds. You can add a print button to your blogger blog by following the below steps.

Adding Print Button To Blogger:

Step 1: Move on to PrintFirendly.

Step 2: Under the "Choose Site Type" option, select "Blogger/Blogspot".

Step 3: Under the "Choose Button" option, Select the type of the button you want to show off.

Step 4: Now just simply scroll down and click the "Install Blogger Widget" button.

That's It! Now you have a cool print button below every posts of your blogger blog. If you have any doubts regarding this, please feel free to comment your doubt below!

read more

Optimizing Images in Blogger Using Alt Tag for SEO

It has been almost 4 months since I've started this blog. The most interesting fact is that even though my blog doesn't serve any kind of image resources, more than 30% traffic comes from image search. Yes, that's what google analytics says. Understood the importance of doing SEO for images? Now lets look into it...

What is Alt Tag?

Basically the crawlers/bots can't see the images as like a human can. They use the description of the image to find out what the image is about. As you know SEO is about spoon feeding and you have to feed the search engines with the description, and an Alt tag is used to feed the search engine with the description.

How to Add Alt Tag To Blogger Images?

Adding an Alt tag to an image on your blogger blog is basically simple as blogger offers us it by default. Just follow the below steps to add an Alt tag easily.

Step 1: Click on the image that you uploaded to your post editor.

Step 2: Click the properties button.

Step 3: Type the description of your image in the text area below 'alt text':

Step 4: Now click the OK button.

Note:

• Try to keep your description short and smart.
• Avoid using special characters like #, $, %...

Even though alt tag plays the main role behind the SERP ranking of images, the other factors like texts around the image, name of the image file, title...etc has an impact on the ranking of images. So if you can optimize all these things then for sure you can simply snatch a position on the first page itself.

That's it! If this post was really helpful for you then please Add Tweak Your Blog to your Technorati favorites.

read more

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.

read more

Socialize It | Floating Social Sharing Bar for Blogger

Social media is becoming more and more important after each and every day. Now the experts says that social media plays a major role in SEO too...strange right? But its a fact, in simple words, the number of peoples who likes/shares your article will be counted in your ranking. So its your responsibility to make it easy for your readers to share your content.

I have seen some prominent blogs using social sharing buttons at the top of the post as well as at the bottom of the post. Yes their strategy is absolutely right and that will give them some extra likes/shares. But using it at top and bottom is bit nasty, there is where this widget will come handy. This widget which is placed just below the post title will floats along with the screen while the visitors scrolls down. Which makes it easier for the visitors to share the posts whenever they like while reading the post. The widget is created by Ways2Blogging and we just modified it to what you can see in the demo.

Features:

• Floats along with the screen so there is more chance for a like.
• The widget comes with Facebook like button, tweet button and a +1 button.
• Built using modest jQuery in order to load more faster.
• Floats till the comment section of the blog.
• An additional comment button which directs the visitor to the comment box.

How to Add Floating Social Sharing Bar To Your Blog?

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

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

Step 3: Using Ctrl+F, search for </head> and paste the below code above it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
    .horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle;  font-size: 14px;}
    .horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px;  height: 25px; }
    .horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
    .horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
    .horizontalsocial .sharerbubble{background: url(http://2.bp.blogspot.com/-Zenaemr3nKw/USzIGk9FTTI/AAAAAAAAB6A/1_wR3MU5Wms/s1600/Commentz.png) no-repeat;  height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
    .horizontalsocial .sharerbubble a{color: #2d2520;  padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
    .horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

/*]]>*/
</script>
</b:if>

Step 4: Now using Ctrl+F, search for <data:post.body/> and add the below code above it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='w2bSocialFloat' id='w2bSocialFloat'>
<table class='w2bSocialFloat' width='100%'>
    <tr>
<td><div class='sharertitle'>Socialize It &#8594;</div>
</td>
        <td>
            <div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
        </td>

        <td>
        <div class='fb-like'>    <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
        </td>
       
        <td>
        <div class='sharergplus'>    <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
        </td>
       
        <td>
<div class='sharerbubble'><span class='thecomments'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
</b:if>
</span></div>
</td>
    </tr>
</table>
</div></div>
</b:if>

Step 5: Click the orange save button!

That's it! Now you have a cool social sharing bar on your blog! Feel free to share your views through the comment box below!

read more

Adding Author Bio Below Every Post in Blogger

Adding an "author bio" box below every posts is something essential if your blog is a multiple author blog or if you allow guest posts on your blog. Where as in single author blogs author bio is a matter of style. Anyway, adding an author bio below your blog posts will definitely make your blog look more professional as well as it will surely help you establish your authority. But blogger is not giving us an author bio widget by default. No need get upset... We can easily add an author bio widget to our blogger blog by simply adding some codes in to our template.

How To Add Author Bio Widget Below Every Blog Posts

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

Step 2: Using CTRL+F search for ]]></b:skin>

Step 3: Just above it paste the following code:

.tyb-ab img {
margin:0;
border:0;
}
.tyb-ab-about {
font-size:12px;
margin:0 auto;
padding:3px;
width:580px;
background:#edf6ff;
border:#9ecfff dotted 1px;
min-height:130px;
}
.tyb-ab {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.tyb-ab-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:12px arial,sans-serif;
text-align:justify;
margin:0;
padding:0;
}

Step 4: Now click the orange 'Save template' button

Step 5: Now once again move on to your blogger dashboard > Settings > Post and comments:

Step 6: Under the posts menu click the "Add" button corresponding to "Post Template":

Step 7: Paste the below code on to the text box and click the orange "Save Settings" Button.

Post contents...
<div class="tyb-ab-about">
  <div class="tyb-ab"><img src="AUTHOR-IMAGE-LINK" width="80" height="70" /> AUTHOR-NAME </div>
  <div class="tyb-ab-text">
    <p><strong>About the Guest Author:</strong>
      <br />DESCRIPTION-ABOUT-AUTHOR </p>
  </div>
</div>

Note:

1. Replace AUTHOR-IMAGE-LINK with the link of the image of the author.
2. Replace AUTHOR-NAME with your name.
3. Replace DESCRIPTION-ABOUT-AUTHOR with something about you.

After you add this, some additional texts will start appearing on the compose, whenever you want to publish a guest post you can edit the texts from there to that of the guest authors info.

That's it! Now you have a author bio on your blog! Feel free to share your views through the comment box below!

read more

Customize Popular Post Widget In Blogger - Style 1

99 of the 100 blogger bloggers are familiar with the blogger's official popular post widget. The widget enables you to show the most viewed posts on your blog. Placing a popular post widget somewhere on your blog helps your visitors to find out the best posts on your blog. On the other hand helps you to decrease bounce rate of your blog. But the default style of the popular post widget is bit boring and wont catch the attention of the visitors that much. However we can simply customize the popular post by adding some CSS codes directly to our template. So lets start customizing the popular post widget.

Screen Shot:

Adding Popular Post Widget To Your Blogger Blog:

1. Go to your blogger dashboard > Layout.

2. Click 'Add a Gadget' and select the 'Popular Post' widget within the list:

3. Now make the selections like what is shown below.

4. Now click the orange save button.

Customizing Blogger's Official Popular Post Widget:

1. Once again move on to Blogger > Template > Edit HTML:

2. Using CTRL+F search for ]]></b:skin>

3. Just above it paste the following code:

.popular-posts ul li{
position: relative;
float: left;
margin: 1em 0;
width: 100%;
height: 100%;
background: #f5f5f5;
border: 1px solid #eee;
border-right: none;
border-radius: 1em 0 0 1em;
-webkit-border-radius: 1em 0 0 1em;
-moz-border-radius: 1em 0 0 1em;
box-shadow: inset 1px 1px 0 #fff;
-webkit-box-shadow: inset 1px 1px 0 #fff;
-moz-box-shadow: inset 1px 1px 0 #fff;
}

.popular-posts ul li:before {
position: absolute;
top: -0.5em;
left: -1em;
padding: 0.25em 0.6em;
background: #1f8bb0;
color: #fff;
font-weight: bold;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
opacity: 0.7;
filter: alpha(opacity=70);
}

.popular-posts .item-thumbnail {
float: left;
position: relative;
height: 75px;
width: 75px;
margin: 0 0.5em;
padding: 0.5em;
border-right: 1px solid #e0e0e0;
box-shadow: inset -1px 0 0 #fff;
-webkit-box-shadow: inset -1px 0 0 #fff;
-moz-box-shadow: inset -1px 0 0 #fff;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:before{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:before{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:before{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li:before{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:before{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li:before{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li:before{content:"4"}
#PopularPosts1 ul li:first-child + li + li:before{content:"3"}
#PopularPosts1 ul li:first-child + li:before{content:"2"}
#PopularPosts1 ul li:first-child:before{content:"1"}

4.  Now just click the orange 'Save template' button

That's it! Now you have a cool popular widget on your blog! Feel free to share your views through the comment box below!

By the way as the title shows, this is 'style 1' and more styles are on the way... if you wish to stay connected with us, then please subscribe to our updates by registering your mail id here.

read more

Adding CSS Morph Effect To Images On Mouse Hover

Images are one among the best ways to make a blog more attractive. In addition if you have an awesome hover effect added to your image then it will be more impressive. In our previous tutorials we have already discussed about rotate effect and zoom effect. Today we are here with another awesome hover effect, i.e. CSS Morph Effect. After you add morph effect to an image, while the mouse hovers over that image it starts rotating and it morphs into a circle as it rotates. The effect is purely a CSS effect and jQuery is never used. Now let's move on to the demo. Just hover your mouse over the below image to see the demo.

Demo

Adding CSS Morph Effect To Images

1) Go To Your Blogger Dashboard Click > Template > Edit HTML > Proceed:

2) Using Ctrl+F Search For ]]></b:skin> and just below it paste the following Code:

.TYBmorph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.TYBmorph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

3) Click on "Save template" button!

4) Now when you want to apply rotate effect for an image use the below code

<a class="TYBMorph" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

Note:

1) Replace "IMAGE-URL" with the URL of the image!

That's it! Now enjoy the morph effect for the images on your blog! Feel free to share your opinions through the comment box below!

read more