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.

Animated-Colored CSS Navigation Menu Buttons For Bloggers

Posted by Unknown at 12:30 AM

File Under : Blogger Widget, Navigation Menus

CSS menu buttons are the most widely used buttons on web. You will see CSS buttons on every second site. The reason behind the popularity of these buttons is the simplicity of these buttons. Very easy to use and looks awesome on any website/blog. You can add hundred of new things manually in your buttons. Very easy to customize. Any one who now the basic knowledge can develop these buttons. Today we are sharing with you very beautiful and most used CSS buttons. Hope you will like these buttons. Let's see how to add these buttons.

Series on Navigation Menus

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

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

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

Adding CSS Navigation Menu Buttons

1. Go to blogger and open your dashboard.

(Backup your template before making any changes)

2. Now go to Templates==> Edit HTML==> Proceed .

3. Now search

4. Paste the below CSS code link file after .

5. Now click on save template.

6. Now go to Layout==> Add a Gadget==> HTML/Javascript .

7. Paste the below code in empty box and save it.

8. Here is demo for you.

Live Demo

Replace # and first link with URL of your pages.

Currently these colors are present in this collection.

red, orange, woody, pink, graphite, turqoise, emerald, grass, blue, royalblue, brown, darkbrown, mint, grape, magenta, purple, darkgrey, silver, golden, black, white, cyan.

This is very easy method to add buttons in your post,in sidebar or you can use it for navigation menus. Previously we have shared two types of navigation menus and we have mention there that we will share 3rd type of navigation menu with you soon. we will keep sharing that type of buttons and menus with you in future. Keep visiting our blog and subscribe to get latest updates.

Want To Add More Colors

If you want to add more colors to these buttons you can manually add by yourself. You just need to download buttons.css file and to add the code of that color. If you can't do it by yourself you can ask me. I will do it for you. This is all for today. you can ask us for help. Have a Nice day.

How To Install Disqus Comments System in Blogger ?

Posted by Unknown at 12:30 AM

File Under : Blogger Widget, Comment Box

Disqus comments system is very popular on web. They are providing excellent services and free of cost for commenters and also for website owners. They have designed very beautifully and you can comment using facebook, twitter, Google+ and Disqus ID. They have stars which shows reputation of any user. You will feel very comfortable after installing this widget. It is available for most of the blogging platforms used online. Method is very simple for everyone. In this section i will guide you about how to install it in blogger. This will be step by step guide for you.

Adding Disqus Comments System

First you need to create account on Disqus. After that you will be able to install this comment system on your blog/website. Follow these steps

1. Go to Disqus website. Click on signup

2. You will see this type of window. Fill it up and click on continue.

3. You will be redirected to main page.

4. Click on setting than Install and select your blogging platform.

5. Here i am selecting blogger as my platform.

6. Select first option as shown below.

7. Now you have to select your blog and click on Add Widget.

8. After completing this save blog setting and view any of your post. You will see Disqus comment box present below each post.

You have option to import old blogger comments on your new disqus comments system. For that you have to follow the instruction mention in disqus help section. This will normally take 24 to 48 hours for complete importing of your old comments.
This comments system is very unique. You can like or dislike any comment. Your this action will be recorded and spammer get lower reputation. It's thread like comments. You can reply to everyone individually. You will be shown as moderator. You can add your information in Disqus profile and also avatar. Commenters can aslo add image of their choice in comments. All of this data is hosted on Disqus server. There is no load on your side.
That's all about the new and emerging comments system on web. If you face any problem at any stem do mention in comments. Get subscribe to get daily updates in your inbox. Have a Nice Day.

Update:

To enable disqus comments system for mobile in blogger you need to add few line codes.

1. Go to Layout==> Edit HTML==> Proceed
2. Press Ctrl+F and search for "Disqus"
3. Add below code as shown in image.
mobile='yes' after locked='false'

4. Now save the template.
5. Thanks for Michael Hazell help in comments.

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.

Round Social Sharing Widget With Animated And Hover Effect

Posted by Unknown at 8:25 AM

File Under : Blogger Widget, Social Media

Social Media Sharing is one of the best way to get maximum traffic. You need to have an eye catching social media sharing buttons for your blog. Today i am presenting you very beautiful widget for your blog. This will surely increase your social media sharing and you will see better result after adding this. This is basically by shareaholic and we are thankful to them that they have give us this amazing sharing widget. It includes twitter, facebook, pinterest, google+, tumbir and email option. So you can say that every thing is included.

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?(Published)

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

Now we will see how to add this in blogger blog. Here is simple procedure for you. Just follow the steps.

Adding Social Media Sharing Button

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

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

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

4.Paste the below code just before

<div class="shr_ss shr_publisher">

</div>


<script type="text/javascript">
  var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
  </script>
 

<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

5. Save your template and view your blog. You will see very fantastic widget added on bottom of your web-page.

That's all for today. We will share other Social Media Sharing buttons in future posts. To remain update subscribe to your mail box. If you like share it with others and mention it in comments. 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.