How To Blog

Friday, February 15, 2013

Social Media Sharing Widget For Bloggers By Mahable

Posted by Unknown at 6:12 PM

File Under : Blogger Widget, Sidebars, Social Media

sharing widget

Today i am sharing the most attracting and most used social Media Sharing widget. Yes i am talking about Mashable Social media sharing widget. This widget is previously shared by mybloggertricks and many other bloggers. It's look very nice on sidebar and attract most of your visitors. I am sharing this on the request of one of my valuable reader. It's very simple and i am using it on my blog also. I am sharing the same code with you. I hope all of you like this simple and attracting widget.
Let's see the code and procedure to add this in blogger template.

For the Demo you can see on Right side of this Blog.

Adding Mashable Sharing Widget

1) : Go to Blogger and select your blog.

2) : Go to Layout ==> Add a Gadget ==> HTML/Javascript.

3) : Now copy the code below and paste it in empty space of HTML/Javascript window.

.gplus-soc {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}

.twitter-box {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
     .pin-it {
        background: #EFFAFD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
     .pin-it span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 5px 70px 5px 90px;}

#mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}  
    #email-news-subscribe .email-box input.email:focus{color:#333}  
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}  
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWs0gHLjNJmr9GK6iS4kQ4T7xih_1K0PiQJt_v1BGuNfEW9Goa_NiH97SA0LCBxRnyuini5ICGlPSfdJvrhchNRlrbqGpyB_gdPiZeO7wcF4JL5VjdqtXDapbId0ircLuCs4jVfYe9YE/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter-box a, 
#other-social-bar .other-follow li.my-gplus-soc a{
    text-decoration:none;
    }

#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter-box a:hover, #other-social-bar .other-follow li.my-gplus-soc a:hover{
    text-decoration:underline;
    }

#other-social-bar .other-follow li.my-twitter-box {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HUj5OffkYobLhNCtRIHybS0icimZWWubiEzXRIMWk4a1J0sDvlVWTIGWXW_jmZGpV2_IiqavlRl869fxn1xnH7aewgLj-gRSf5ubjmvCdbfdyseUhFWk3MYX_Tv_C8NyrHjPiLrl-ro/s400/twitter-box%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}

#other-social-bar .other-follow li.facebook {
        background: url('http://www.chefhangout.com/chef/lib/images/facebook_icon.jpg') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}

#other-social-bar .other-follow li.my-gplus-soc {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3DknPVGa0fZOyBfzhx5TNakfOCXbJknDofJm3wy_m0OLaAfaXRc3lPzYgFESQuhKy2t_J-v8SN9kZamMow9I5qiv0uif-9LBsU_bQEDSjS9Qdx8qvFjBPTCEgU0fA_7uPzd922E6Y54/s400/gplus-soc-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

</style>

<!--[if IE]>

<![endif]-->

<div style="margin-bottom:10px;">
 <div id="HTB-MSB-bar" >

<g:plus href="https://plus.google.com/u/0/b/114713768214549309979/" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-box-like">
 <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2FYOUR FACEBOOK PAGE LINK&send=false&layout=standard&width=250&show_faces=false&action=like&colorscheme=light&font=tahoma&height=35&appId=487763874571866" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:35px;" allowtransparency="true"></iframe></div>
<div class="google-plus-box">
  <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium">
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="pin-it">
<span>Follow us on Pinterest!</span>
<a href="YOUR PINTERET LINK"><img src="http://passets-lt.pinterest.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a></div>
<div class="twitter-box">
  <iframe title="" style="width: 300px; height: 20px;" class="twitter-box-follow-button" src="http://platform.twitter-box.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter-box_tweet_button_0& lang=en&link_color=&screen_name=twitter-box USER NAME&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe">
  <div class="email-box">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('YOUR FEEDBURNER LINK', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="YOUR FEED NAME" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form>
</div>
</div>
<div id="other-social-bar">
 
 <ul class="other-follow">
<li class="my-gplus-soc"> <a rel="nofollow" title="Google+" rel="author" href=YOUR GOOGLE+ PAGE LINK target="_blank">Google Plus</a> </li>
<li class="my-rss"> <a rel="nofollow" title="RSS" href="FEEDBURNER LINK" target="_blank">RSS Feeds</a> </li>
<li class="my-twitter-box"> <a rel="nofollow" title="twitter-box" rel="author" href=YOUR twitter-box PROFILE LINK  target="_blank">twitter-box</a> </li>
</ul>
</div>
</div>
</div>

4) : Before saving the code make the necessary changes in the code so that it can work for you perfectly.

5) : Replace facebook, twitter, Google+ and Pinterest links with the links to your pages.

This is all for today. I hope you will like my this sharing and encourage me to share more in future. If you like this widget then subscribe to your blog posts and share it with your friends to. If you feel any problem at any step do mention in comments. Have a Nice Day.

Pure CSS Animated Social Media Sharing Widget For Bloggers

Posted by Unknown at 7:24 PM

File Under : Blogger Widget, Sidebars, Social Media

Do you have attracting and eye catching social media buttons on your blog ? Attracting social media buttons are great source for converting your visitors to your subscribers. After subscription these visitors are changed in to your loyal visitors. If you have thousands of fans and followers in social media than you will definitely get huge traffic from social media. In these days social media is one of the biggest referral traffic source for many blog and websites. If you already have huge traffic than you can increase your traffic through social media channels. By adding attracting social buttons on your blog will not force your visitors to like or follow but it will get attraction of your visitor. Today i came up with very beautiful and attracting social media buttons. You can view them in action in GIF image and you can also view demo of this by following below link.

Live Demo

How to Add Them In Blogger

It's very simple to add them in blogger. if you want to add it in sidebar or footer you just need to follow below steps.

1. Go to Blogger and Select your blog.

2. Go to Layout==> Select Add a Gadget==> HTML/Javascript.

3. A new box will be open showing empty space and title box.

4. Enter suitable title for this widget and paste the blow code in that empty box.

}
#htbssw a{text-decoration:none; font-family:trebuchet ms,sans-serif;
font-weight:bold;
border-radius:25px;
border-style:solid;
border-width:5px;

}
#htbssw li{position:relative; height:45px; cursor:pointer; padding: 0 !important;
border-bottom-style:solid;
font-weight:bold;
border-width:1px;
border-radius:25px;
margin-right:85px;
}
#htbssw .facebook, .googleplus, .pinterest, .rss, .twitter{
position:relative; z-index:5; 
display:block; 
float:none; 
margin:10px 0 0 1; 
width:210px; 
height:38px; 
border-radius:5px; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATvkcBt4zYJYkqaZ2Qf0pUihyZr9dqhOao4UGdlofU1LJu1ZuRneVUnOdFrXXvoLdQaI0yugMc9bvibm-Gw2n0t5maLOEAWxw-x_NSMqiKHlJY5b-GgD2i1ZDhF3vdENepkLIO0Jo/s158/howdoblog.com.png) no-repeat;  
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; 
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 color:#141414; text-align:left; 
text-indent:50px; 
text-shadow:#333 0 1px 0;
white-space:nowrap; 
 line-height:32px; 
-webkit-transition:width .35s ease-in-out,background-color .25s ease-in-out;
 -moz-transition:width .35s ease-in-out,background-color .25s ease-in-out; 
-ms-transition:width .35s ease-in-out,background-color .25s ease-in-out; 
-o-transition:width .35s ease-in-out,background-color .25s ease-in-out; 
transition:width .35s ease-in-out,background-color .25s ease-in-out; 
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#htbssw li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;
}
#htbssw .icon{overflow:hidden; color:#fafafa;
}
#htbssw .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;
border-radius:25px;
border-style:solid;
border-width:5px;
}
#htbssw .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#htbssw .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#htbssw .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#htbssw .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#htbssw li:hover .icon, 
.touch #htbssw li .icon{width:210px;}
.touch #htbssw li .facebook, #htbssw li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #htbssw li .twitter, #htbssw li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #htbssw li .googleplus, #htbssw li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #htbssw li .pinterest, #htbssw li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #htbssw li .rss, #htbssw li:hover .rss{background-color:rgba(255,102,0,1);}
/*Social Buttons Widget By howdoblog.com */
</style>

<ul id="htbssw">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>

5. Replace " # " with your links to facebook fanpage, twitter profile and pineterest account.

6. Save that window and save your new blog arrangements and click in view your blog.

7. You can change the location of these buttons on sidebar by just dragging your newly widget up or down in layout tab.

This is all for today. Hope you all will like my this work. If you want to share it on your blog for your readers than please add link back to us. This idea is originally brought by Modernizr but i have made some changes and now it is front of you. If you need any type of help in installing this widget in your blog you can just mention it in comments. Don't miss any tutorial from our side. Get subscribe to get daily updates from our blog. Have a Nice Day.

How To Add Top Commentator Widget In Blogger ?

Posted by Unknown at 12:30 AM

File Under : Comment Box, comments, Sidebars

Showing Top Commentator Widget on your blog/website make it attractive. It force other visitors to drop comment on your blog. High number of comments from visitors shows interest and popularity of particular post. Adding top commentator widget will attract new visitors to read topic and give suitable comment. Comments plays important role in any blog/website popularity. Positive and negative comments have their own aspects. Peoples mostly want to see positive comments. They also check response to every negative comment from your side. So keep very close attention to these comments. You may lose your loyal visitor or get new subscriber through your particular behavior to these comments.
So how to add top commentator widget in blogger blog. Here is very simple solution for you. Read below steps carefully.

Adding Top Commentator Widget

There are many ways to add top commentator widget but we are going for Disqus top commentator widget. For this you first need to install disqus comments box in your blog. After that you will add code and all will be clear.

1. Go to Disqus website.

2. Register your account and your blog.

3. Add Disqus comment box in your blog.

How To Install Disqus Comments System in Blogger ?

4. If you have already installed Disqus comments system you don't need to follow above steps. If you don't know how to install it then read read my above mentioned article.

5. After adding Disqus comments system you need to follow below steps.

6. Go to Layout ==>Add a Gadget ==> Select HTML/Javascript.

7. Paste the below code in that box.

8. Save it and reposition your new Gadget by moving it on sidebar.

9. Save the blog setting and view your newly added widget.

10. Change howdoblog.com with your blog/website name.

You can customize it :

Change total number of shown commenters : num_items=5 (Currently it is five)
Skip top commenters : hide_mods=1 (I skipped Yourself or any blog moderator as top commenter)

To see the demo scroll down this post and look at the end of sidebar.
This is all for today. If you face any problem in installing it you can mention it in comments. We will help you out. Get subscribed to get daily updates in your inbox. Have a Nice Day.

Amazing Social Media Widget for Bloggers

Posted by Unknown at 3:48 PM

File Under : Blogger Widget, Sidebars, Social Media

Due to increasing social media usage many large companies mainly focus on its social media network. If you have enough audience from social media you don't need SEO aur google web search results. So you have to build social media followers in order to gain maximum output. Now a days main traffic comes from social media. You need an aye catching widget that can build your audience on social media. So for this today i am sharing very beautiful and amazing social media widget with you. This widget is owned by us if any one want to share please mention link back to us. Icons we have taken are from Icon Archive . Now have a look.

See Step by step method to add it in your blog.

Adding Widget to BLogger

1. Go to Blogger and select your blog.

2. Go to Layout==> Add a Gadget==> HTML/Javascript.

3. Copy and paste below code in content area and give a suitable title for this widget.

<style>

/*social icon By howdoblog.com*/
#head-htb{width:230px ; }
#head-htb ul li {list-style :none; padding: 0 0 0 1px; float: left;}
#head-htb ul li a {text-indent: -9999px; font-size: 0; line-height: 0;

overflow: hidden ; height: 64px; width: 64px ;border: 0px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZkw76jIqFmdYQ_rpuWJyQyuahld4WdeeJ_yOvMjOguaZaoUPdm94CdQY-SyqAB_UNdKN5ZbhJOig_8hMYlSBCQUnHKgrL3OXLVFID74K3YYETmYVchbrtvSskdEnAN_2Y-a3CHm3/s353/Social%2520Media%2520Widget.PNG)

no-repeat; display: block;}

#head-htb li#fb a {background-position: -210px 0px;margin:0px 0px;}
#head-htb li#fb a:hover {background-position: -210px 0px;margin:0px

0px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;  
}

#head-htb li#twit a {background-position: -290px 0px;margin:0px 0px 0px

7px;}
#head-htb li#twit a:hover {background-position: -290px 0px;margin:0px 0px

0px 7px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms;  
}

#head-htb li#g a {background-position: 0px 0px;margin:0px 0px 0px -8px;}
#head-htb li#g a:hover {background-position:0px 0px;margin:0px 0px 0px

-8px;
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration:950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms; 
}

#head-htb li#rss a {background-position: -68px 0px;margin:0px -3px;}
#head-htb li#rss a:hover {background-position: -68px 0px;margin:0px 0px

0px -3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 950ms; 
-webkit-transition-duration: 950ms;
-o-transition-duration: 950ms; 
}

/*Social Icons howdoblog.com */

</style>

<ul>
<li id="fb"><a href="YOUR FB URL">Facebook</a></li>
<li id="twit"><a href="YOUR TWT URL">Twitter</a></li>
<li id="g"><a href="YOUR GOOGLE+ URL">Google+</a></li>
<li id="rss"><a href="YOUR RSS URL">RSS

Feed</a> </li>
</ul>
</div>
<div align="left">
<font size="0.125">
<a href="http://www.howdoblog.com/2012/08/amazing-social-media-widget-for-bloggers.html">
[Grab This]</a></font>
</div>

4. Hit save and arrange position for this widget.

5. Replace these :

YOUR FB URL with link to your facebook fan page
YOUR G+ URL with link to your Google+ profile or blog fan page
YOUR TWT URL with your twitter account.
RSS FEED LINK with link to your feeds.

Live Demo

We will post new and beautiful widget in coming posts. Stay tuned to Grab first. You can also social icons that we use to create beautiful widget. Thanks for your kind support. Have a Nice Day.

Add New Beautiful Social Media Widget With Hover Effects In Blog

Posted by Unknown at 5:32 AM

File Under : Blogger Widget, Sidebars, Social Media

Today i am sharing with you very beautiful social media widget. I have designed it specially for you. It looks very awesome with hover and sliding effect. You know that social media is playing main role in driving traffic to your blog. You must have social media widget in your blog. It includes the latest social media icons like Facebook, Twitter, Pinterest, Linkdin, Youtube and Google+. If you want to add another icon, you can add it very easily. To know how to add this in your blog just follow these below steps. I will guide you through each step.
See Demo Version

Demo Version

New Social Media Widget for Bloggers

1. Go to Blogger account and open your desired blog.

2. Go to Layout==> Add a Gadget==> HTML/Javascript.

3. Give a suitable title and copy paste the below code in content box.

/*social icon By howdoblog.com*/
#head-soc{width:450px ; }
#head-soc ul li {list-style :none; padding: 0 0 0 1px; float: left;margin-left:2px;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9BREysWEX6qbRzj0S8c-JhCgYHjU2dYvsM99kYe70kn0EZxIT2ZYSiM9jarxfIbkasku2hIadbTN9hwmQ-8NqlQhV7YMdQYTnV6DataS41tHmJF8ZZraCDBiiwzWHsYuNkExJ7PmG/s1600/social+sharing.png) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;margin:0px 3px; }
#head-soc li#g a:hover {background-position: 0px -32px;margin:0px 3px; 
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#rss a {background-position: -32px 0px;margin:0px 3px;}
#head-soc li#rss a:hover {background-position: -32px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#fb a {background-position: -96px 0px;margin:0px 3px;}
#head-soc li#fb a:hover {background-position: -96px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#twit a {background-position: -128px 0px;margin:0px 3px;}
#head-soc li#twit a:hover {background-position: -128px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms;  
}

#head-soc li#li a {background-position: -160px 0px;margin:0px 3px;}
#head-soc li#li a:hover {background-position: -160px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms;  
}

#head-soc li#youtube a {background-position: -192px 0px;margin:0px 3px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#sub a {background-position: -64px 0px;margin:0px 3px;}
#head-soc li#sub a:hover {background-position: -64px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms;  
}
/*Social Icons by howdoblog.com */

<div id='head-soc'>
<ul>
<li id='g'><a href='https://plus.google.com/106519586692847321676 '>Google+</a></li>
<li id='rss'><a href='http://feeds.feedburner.com/blogspot/xAgsz?format=xml'>RSS Feed</a> </li>
<li id='sub'><a href='http://pinterest.com/howdoblog'>Subscribe</a></li>
<li id='fb'><a href='http://facebook.com/howdoblog'>Facebook</a></li>
<li id='twit'><a href='http://twitter.com/howdoblog'>Twitter</a></li>
<li id='li'><a href='http://www.linkedin.com/in/safeerahmed80'>LinkedIn</a></li>
<li id='youtube'><a href='http://www.youtube.com/5398131'>YouTube</a></li>
</ul>
</div>

4. Replace these by your accounts.

https://plus.google.com/106519586692847321676 with your Google+ account.
http://feeds.feedburner.com/blogspot/xAgsz?format=xml with your feeds link.
http://pinterest.com/howdoblog with your pinterest account.
http://facebook.com/howdoblog with your facebook account.
http://twitter.com/howdoblog with your twitter account.
http://www.linkedin.com/in/safeerahmed80 with your linkedin account.
http://www.youtube.com/5398131 with your youtube account

4. Click on save and view your blog.

5. Fix the position of widget by placing it on appropriate position.

6. Now you have this beautiful sharing widget on your blog.

This was short tutorial on how to add social media widget in your blog. I hope you all will like this widget. Give me feedbacks and enjoy this widget. Have a Nice Day.

Add Vertical Navigation Menu In Blog with Hover Stretching Effects

Posted by Unknown at 12:00 AM

File Under : Blogger Widget, Navigation Menus, Sidebars

In previous Article I told you about Vertical Navigation Menu with hover fader and animated effects. In this Article i will tell you about another type of navigation menu having different colors and stretching effects. Its look very beautiful when you slide your mouse pointer on them. Add this into your blog i will ensure you it will give a very good impression to your visitors. This vertical menu is also designed by Uize and i make possible to add it in blogger blogs. Now we are going to add it in blogger blogs.

Series on Navigation Menus

Add Vertical Navigation Menu In Blog with Hover Stretching Effects (Current)

Vertical Navigation Menu With Hover Fader and Animated Effects (Published)

Animated-Colored CSS Navigation Menu Buttons For Bloggers (Published)

Let's see how to add this.

Adding Vertical Navigation Menu with Hover and Stretching Effects

1. Go to your Blogger account. Backup your template.

2. Go to Templates==> Edit HTML==> Proceed.

3. Search for below code by pressing Ctrl+F.

4. Copy below code and paste it just above ]]>.

5. Click on save template.

6. Now go to Layout==> Add a Gadget==> HTML/Javascript and copy paste the below code.

Uize.module ({
  required:[
    'UizeDotCom.Page.Example.library',
    'UizeDotCom.Page.Example',

// these curve modules are only needed for the additional effects previews
    'Uize.Curve',
    'Uize.Curve.Rubber',
    'Uize.Curve.Mod'
  ],
  builder:function () {
    (window.page = UizeDotCom.Page.Example ({evaluator:function (code) {eval (code)}})).wireUi ();
  }
});

</script>

<div style="width:700px; margin:auto;">
    <div class="menus">
      <div class="menu">
        <a href="URL of Page" class="menuLink" style="background:#A4059F;"><div class="highlight">
</div>
About Us</a>
        <a href="URL of Page" class="menuLink" style="background:#05A487;"><div class="highlight">
</div>
Products</a>
        <a href="URL of Page" class="menuLink" style="background:#eb3;"><div class="highlight">
</div>
Services</a>
        <a href="URL of Page" class="menuLink" style="background:#9c7;"><div class="highlight">
</div>
Technology</a>
        <a href="URL of Page" class="menuLink" style="background:#f96;"><div class="highlight">
</div>
Solutions</a>
        <a href="URL of Page" class="menuLink" style="background:#c6f;"><div class="highlight">
</div>
My Account</a>
        <a href="URL of Page" class="menuLink" style="background:#86f;"><div class="highlight">
</div>
Store Locator</a>
        <a href="URL of Page" class="menuLink" style="background:#f4c;"><div class="highlight">
</div>
Investors</a>
        <a href="URL of Page" class="menuLink" style="background:#f88;"><div class="highlight">
</div>
Support</a>
        <a href="URL of Page" class="menuLink" style="background:#79f;"><div class="highlight">
</div>
Contact Us</a>
      </div>
<script type="text/javascript">
        window.$page_menuHoverFader = {
          widgetClass:'Uize.Widget.HoverFader',
          nodes:{className:/\bmenuLink\b/},
          defaultStyle:{width:150,letterSpacing:2,borderRightColor:'0'},
          hoverStyle:{width:240,letterSpacing:9,borderRightColor:'f'}
};
      </script></div>
</div>

7. Replace "URL of Page" with your URL and also you can change the name by replacing each of them.

8. You can also change color of each button by replacing style="background:#xxx;" this number. Colors are in HEX.

Visit Custom Color Code Generator to select your favourite color.

Demo Version

This is all for today. I hope you will like this Navigation Menu and give me feedback on my work. Get subscribe to remain update. Have a Nice Day.

How to Add Email Subscription Box With Social Media Icons In Blogger?

Posted by Unknown at 12:00 AM

File Under : Blogger Widget, Sidebars, Social Media

This is second post of my series on social media sharing widgets. Today i am sharing with you very beautiful widget with Email subscription form and social media buttons. This include your RSS feeds, Your facebook page and twitter account. You can add it anywhere in your blog but it looks very beautiful below each post. So i will tell you how to add it below every post. This is outlook of this widget. Hope you all will like it.

Series on Social Media Sharing

Add New Social Media Sharing Widget With Hover Effect
(Published)

How to Add Email Subscription Box With Social Media Icons In Blogger?(Current)

Round Social Sharing Widget With Animated And Hover Effect (Published)

Let's see how to add this.

Adding Social media widget Below posts

1. Go to blogger and select your blog. Backup your template.

2. Go to Templates==> Edit HTML==> Proceed.

3. Search for below code by pressing Ctrl+F.

4. Copy and paste the below code just below line.

<b:if cond='data:blog.pageType == "item"'> 
<div id="doulike-outer">
<div id="doulike">
<span style="font-style: italic; font-size: 30px; font-family: Droid Serif, serif; verdana;  color:#008E00;">Do you Like this Article?</span><table width="100%">
<tbody>
<tr>
<td align='left'>
<p style='color:#666; font-family: Droid Serif, serif; verdana;  margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/xagsz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='blogspot/xagsz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='bttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='btbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/blogspot/xagsz' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnXvq4uxBuMIGl5guIravDBkzlE0YRc4gYLEH6-ftu7afS5RVErVgA5dW9OWiveihMI2gs8hrQACsVATSrnZZqLkE9EeO2DbvOlZWbCtRu5zTzV70VdDPncrafm7h6YjqYmAWFWmrlq04w/s40/w2bRSS+.png'/></a>
<a href='http://twitter.com/howdoblog' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim1jTSuH1riltSZlKPqeNbzteVA6Y9l5bcvgb9BXzfrF1At5MJdiNX0QbG6o4ABaT5N3Hg4Psq7_LW5ICGvziq4KXLIRCa4CjHmxB7y-pgjAU_Kkk9tXVnmyKSMv21ZW-aFqHR096Y-CT9/s40/w2bTwitter.png'/></a>
<a href='https://www.facebook.com/howdoblog' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTqKt89FEKu3EZBDL5ggcSndyvr_30iwSUwRRFclCiqjfwzXBse0ZIePhsn7T6oxweFSj1DFs1qBoZqwcl3gvO47KrH-vBNY9OU_yCiE_OHfBzif-p4_8EuLjaetpkxPpF_4vGdBQy2e5/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

5. You have to replace these things.

Add New Social Media Sharing Widget With Hover Effect

Posted by Unknown at 12:00 AM

File Under : Blogger Widget, Sidebars, Social Media

Most o of the bloggers get maximum of their traffic from social media. Social media is the best place where you get popularity and people share your post if they like. So if you are best in social media you just need little bit of SEO to take your blog to highest place. In short we can say that social media is the place where you become a celebraity without any extra efforts. Today i am sharing with you a very beautiful social media widget with hover effect. I have series on this topic, so this is first post of this series.

Let's see how to add this.

Series on Social Media Sharing

Add New Social Media Sharing Widget With Hover Effect
(Current)

How to Add Email Subscription Box With Social Media Icons In Blogger?(Published)

Round Social Sharing Widget With Animated And Hover Effect (Published)

Adding Social Media Widget in Blogger

1. Go to blogger and select your blog. Backup your template.

2. Go to Templates==> Edit HTML==> Proceed .

3. Search for below code by pressing Ctrl+F .

4. Copy and paste the below code and paste it just above this line and click on save template.

/*----howdoblog.com widget start----*/
.htb-soc-ico{overflow:hidden}
.htb-soc-ico .alignleft,.htb-soc-ico .alignright{margin:0;padding:0}
.htb-soc-ico ul li{background:none!important;border:none!important;float:left;list-style-type:none!important;margin:0 5px 0px!important;padding:0!important}
.htb-soc-ico ul li a,.htb-soc-ico ul li a:hover{background:#B5CDED url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKrXJmcki2jTpJPT8X6slz-82YNmn36N7smseFPXi0F0ClFTx00FXOyeXQCRlzSBVSmyZIBbHGUSL-wKkRpH94jSTIn2lkD6L3R7I4q59b5fBZ7BPpb3BRBuu57PwjOrCKCrK-h6y_k1t0/s1600/sprite_48x48.png) no-repeat;-moz-border-radius: 100px -webkit-border-radius: 100px;border-radius:3px;display:block;height:48px;overflow:hidden;text-indent:-999px;width:48px}
.htb-soc-ico ul li a:hover{background-color:#31BFF3}
.htb-soc-ico ul li.social-facebook a,.htb-soc-ico ul li.social-facebook a:hover{background-position:-96px 0}
.htb-soc-ico ul li.social-gplus a,.htb-soc-ico ul li.social-gplus a:hover{background-position:-144px 0}
.htb-soc-ico ul li.social-pinterest a,.htb-soc-ico ul li.social-pinterest a:hover{background-position:-240px 0}
.htb-soc-ico ul li.social-rss a,.htb-soc-ico ul li.social-rss a:hover{background-position:-288px 0}
.htb-soc-ico ul li.social-twitter a,.htb-soc-ico ul li.social-twitter a:hover{background-position:-384px 0}
 /*----howdoblog.com widget end----*/

5. Now go to Layout==> Add a Gadget==> HTML/Javascript and paste the below code.

6. Replace these things...

Replace "http://www.facebook.com/howdoblog" with your facebook page.
Replace "https://plus.google.com/u/0/106519586692847321676" with your Google account.
Replace "http://www.pinterest.com/howdoblog" with your pinterest account.
Replace "http://feeds.feedburner.com/blogspot/xAgsz" with your RSS feeds.
Re[lace "http://twitter.com/howdoblog" with your twitter account.

Demo Version

That's all for today. I hope you will like this article. If you face any problem do mention in comments. Will come up with next posting of this series. Have a Nice Day.

Add Social Media Sharing Widget in Your Blog

Posted by Unknown at 9:54 PM

File Under : Blogger Widget, Sidebars, tools

Today i am sharing very beautiful and simple to use Social Media Sharing Widget for you. You know that this is era of social media. Everywhere there is social media present. Every site, Every person, Every Organization, Every Country and even every political party has its own social media team. For bloggers this tool is very important. It brings maximum traffic to your blog from social media. This widget have facebook, twitter, Google+ and feedburner links. Through this tool people share your articles and blogs. So you must have this on your blog. The installation of this widget is very simple. Let's see how to add it.

Simple and Beautiful Social Media Sharing Installation Procedure

1. Enter your facebook page URL by removing my own.

2. Enter Google+ profile page link by replacing. (You can also add your Google+ page URL here)..

3. Enter your link to twitter account.

4. Now finally enter your feeds URL in last blank.

5. Click on Generate and after this click on Add to Blogger.

6. New window will open and you will just need to select your blog and click on add to blogger.

This is a simple widget. Its very easy to install. You don't need to edit your HTML. I hope you will like this widget. To remain updated please subscribe to your email feeds.

Banner Ads Widget For Blogger Blogs

Posted by Unknown at 9:54 PM

File Under : Blogger Widget, Sidebars

When you want to earn from your Blog you need first to add image banner on your site. This image banner help others to see at which place you want to show ads. Their size and location is very important (I will write detailed article on it). Today i will tell you how to add banner image add and their background links in blogs.

Follow these Steps

Adding Banner Ads Widget

(1):- Go to blogger site. Open Blog in which you want to add banner ads.

(2):-Go to Layout and click on Add a Gadget.

(3):- New window will open and you will see empty space in it.

(4):- Copy below code and Paste it in empty space(You don't need to add any title ).

(5):- Replace "Advertiser URL" with the link of ads page or website you have given.

(6):- Replace "Image URL" with the image Link and that image will be visible on your website.

(7):- This is typical setting for 125x125 image ads. You can change it as you need by Just Replacing (width="125" )(height="125") red colored Values.

(8):- Click on save and view your newly added sidebar banner ads.

Demo View: Click Here

That's all for today. Hope you will like this article. If you face any problem do mention in comments.Have a nice day.(If you like don't forget to subscribe).

Back to Top Button For Bloggers

Posted by Unknown at 12:38 AM

File Under : Blogger Widget, Sidebars

Sometimes your sidebar/Post goes to long and it is very annoying for visitor to scroll up manually. For the ease of your visitors you can add this small button on extreme bottom right of your blog. Its very simple to add this. You can choose custom images for this button. Let's see how to add this button.

Add Back to Top Button

Procedure:-

(1):-Go to blogger and signin to your account. Select your desire blog.

(2):-Go to Template and click on Edit HTML and proceed to your HTML code view.

procedure to add Back to Top Button For Bloggers

(3):-Now search for this by pressing Ctrl+F .

(4):-Now copy the below code and paste it just above this code.

(5):-Now search for this code.

(6):-Copy the below code and paste it before this code.

(7):-Now replace URL of Image with your desired image.

(8):-Now find this below code.

(9):-Copy and paste the below just before the above code.

Some back to top Images Links. Copy any of the url and replace it with URL of Image.

Now click on save template and view your blog to see effect. Its very simple. Hope you have liked my this tutorial. Get subscribed to get daily updates right in your inbox.That's all for today.Have a Nice Day.