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.

Facebook-Tool Favoring the Advertisers

Posted by Guest Author at 12:30 AM

File Under : facebook, Social Media

Facebook is the one who started asking “what’s on your mind?”, and that is why it knows very well that what’s on their mind and their choices. Likes and the clicks made by the users have got a new meaning now.
Recently, social networking sites have started to favor the advertisers with the information on users ‘likes’. And so is Facebook.
The latest reports made by Sydney Morning Herald show that Facebook has opened its doors only for the "priority" marketers. Only priority marketers will be enabled to use internal tool that shows them which other pages their own fans like. In short, advertisers will know all the ins and outs of their fans, including their favorite TV shows, their favorite band, or which brand they buy.

Only for privileged advertisers

It is for sure Facebook hasn’t provided this tool just for charitable purposes; undoubtedly this is a new business link. This news was found by AdWeek which said that Facebook's extra special business partners were getting access to the tool for now.
According to Facebook this tool will abet musketeers to come up with better campaigns, Facebook also offers accumulated insights to priority clients that help them understand trends about their fan bases; and company shoot its target resting their gun on a spokeswoman’s shoulders.
Facebook will definitely give its master key in anyone’s hand, following the most important business rule. Limitation lines have been built. The tool keeps the marketers away from any data about their competitors' fan bases, but has published the facility to gather data collectively.

Chances for favorable amendments

Presently Facebook is playing cards to welcome the marketers to access this facility. But not to forget the word priority still acquires a necessary space.
Facebook has already hand-full tools for enhancing the experience of their advertisers, and this new allowance will just boost up more openings for the Facebook-Ad-Market.
Probably now Facebook will open its doors for all the advertisers as it has undoubtedly added a big name and would surely welcome this new business prospect. The greatest part of this tool is that, once it starts operating the market, advertisers will be aware of which TV show to promote or which songs will be suitable for commercials.

Concluding note

But there still lies a question that if this tool will be available for all the clients, Facebook is quiet on this matter. But if this will happen then Facebook will derive another source of revenue generation.

About Author

Sara Bruce is an SEO analyst and an avid blogger. If you come across any negative reviews about your Business/Services do visit our pages on 'Remove negative reviews' & 'Remove rip-off report' to get rid of it.

How To Disable Facebook Timeline? Revert Back To Old Facebook

Posted by Unknown at 6:21 PM

File Under : News, Social Media

Are you tired of new facebook timeline? Do you want old facebook back? If you want to do so, and have not found any method to revert new timeline than you are at the right place now. I have solution for this. There method avaliable for long time but most of the facebook users don't know. Today i have decided to write on it. This is basically Add-on which is available for Firefox,chrome,internet explorer and safari browser. Now read and follow the below steps. You will be amazed to see your old facebook.

Discover this Add-on

1 : Go to this Site : TimeLineRemove

2 : Scroll down and select your browser. (Currently not avaliable for opera and Netscape browsers).

Firefox Users

1 : Click on firefox Icon.

2 : New dropdown will appear. Click on Allow.

3 : It will take some seconds to download this Add-on .

4 : After downloading it will ask you to install this just click on Install and restart your firefox browser.

5 : Login to facebook account and see the results. I am adding my profile view before and after you can see it below. Click on Image to enlarge the view.

Disable Addon

Go to Tools >> Add-ons >> Extensions >> and select TimeLineRemove and click on disable icon.

Google Chrome Users

1 : Click on Google Chrome Icon.

2 : Click on Add.

3 : After adding you will see icon on top right side of browser. Click on that icon it will show status of timeline.

Disable Add-on

If you want to see again your timeline anytime just select same icon and click on green correct option. It will change to cross showing this Add-on is disabled now.

There is no other offical method to remove facebook timeline. You have to wait for new facbook design for profiles. If you don't line facebook timeline you can use old version by following this method.

Say thanks to founder of this add-on. If you face any problem during installation or uninstallation of this add-on you can mention it in comments. I will be glad to help you out. Get subscribe to remain updated.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.

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.

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.