Mozilla Firefox Latest Web Browser 2014 Download Free

Mozilla Firefox

Mozilla Firefox is a free and open-source web browser developed for Windows, OS X, and Linux, with a mobile version for Android, by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. Firefox uses the Gecko layout engine to render web pages, which implements current and anticipated web standards.As of July 2013, Firefox has between 16% and 21% of worldwide usage, making it the third most popular web browser, according to different sources. According to Mozilla, Firefox counts over 450 million users around the world. The browser has had particular success in Indonesia, Germany, and Poland, where it is the most popular browser with 57%, 45%, and 44% of the market share, respectively.

Mozilla Firefox

The Firefox project began as an experimental branch of the Mozilla project by Dave Hyatt, Joe Hewitt and Blake Ross. They believed the commercial requirements of Netscape's sponsorship and developer-driven feature creep compromised the utility of the Mozilla browser. To combat what they saw as the Mozilla Suite's software bloat, they created a stand-alone browser, with which they intended to replace the Mozilla Suite. On April 3, 2003, the Mozilla Organization announced that they planned to change their focus from the Mozilla Suite to Firefox and Thunderbird.

Mozilla Firefox

Phoenix 0.1 screenshot

The Firefox project has undergone several name changes. Originally titled Phoenix, it was renamed because of trademark problems with Phoenix Technologies. The replacement name, Firebird, provoked an intense response from the Firebird free database software project.In response, the Mozilla Foundation stated that the browser should always bear the name Mozilla Firebird to avoid confusion with the database software. After further pressure from the database server's development community, on February 9, 2004, Mozilla Firebird became Mozilla Firefox, often referred to as simply Firefox. Mozilla prefers that Firefox be abbreviated as Fx or fx, though it is often abbreviated as FF. The Firefox project went through many versions before version 1.0 was released on November 9, 2004.
 

Download

Las Vegas Technolofy Fair Showcases the Rise of Personal Technology 2014

Las Vegas Technolofy Fair Showcases the Rise of Personal Technology 2014

If some of the gadgets on show at Las Vegas technology extravaganza the Consumer Electronics Show (CES) live up to their developers' expectations, this could be how people live their lives in the not-too-distant future.

The world's biggest consumer technology companies are sharing the stage with a host of up-and-coming inventors in the glitzy Nevada casino town to spruik their newest gizmos and concepts.

With industry estimates putting the global market for technology at more than $1 trillion, the four-day geek fest sees device-makers come together to discuss their visions for the future, at the same time as battling to convince buyers to choose their particular version of it.

A lot of the attention-grabbing displays are products that continue the trend of extending digital networks into people's daily lives with wearable technology and smart devices around the home.

This has been largely driven by the increasing spread of smartphones and tablets, which are expected to amount to 43 per cent of technology spending in 2014.

This rise of so-called wearable technology, like 'smart' watches and glasses that can monitor fitness and activity while updating emails and social media accounts and taking photos, is allowing people to wear the world wide web on their sleeves and on their heads.

One company is even integrating wireless connectivity into baby clothes, with an internet-connected 'onesie' being paraded onstage.

Sliding Profile Social Media Widget For Blogger 2014

Sliding Profile Social Media Widget For Blogger 2014

In this post im  gonna explain how to add Css sliding social icons list  for blogger. By using Sliding Css Social Profile widget you can link your social media profile Facebook, Twitter and Rss Google plus,Rss and StumbleUpon Check the demo from below link.

 

Sliding Profile Social Media Widget For Blogger 2014

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style>
#socialmenu_btrix { 
  margin:0; 
  padding:0; 
  width: 30em; 
  height: 4.5em; 
  overflow:hidden; 
  } 
#socialmenu_btrix li { 
  display:inline; 
  list-style-type:none; 
  } 
#socialmenu_btrix li a { 
  display:block; 
  float:left; 
  text-decoration:none; 
  margin:0; 
  } 
#socialmenu_btrix li a img { 
  opacity:0.7; 
  margin:0.5em; 
  border:0; 
  float:left; 
  } 
#socialmenu_btrix li a span { 
  display:none; 
  } 
#socialmenu_btrix li a:hover { 
  background:transparent; 
  } 
#socialmenu_btrix li a:hover span { 
  width:7em; 
  color:#aaa; 
  display:block; 
  cursor:pointer; 
  float:left; 
  } 
#socialmenu_btrix .h2 { 
  margin:0 5px; 
  padding:0; 
  color:#fc0; 
  font-variant:small-caps; 
  font-size:1em; 
  border:0; 
  }
  
  </style>
  <ul id="socialmenu_btrix"> 
  <li> 
    <a href="https://www.facebook.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8dN96VDb7dDoK2VrsATvfacNBgDDRZVp4P1PiI1KyWrOIOL_5giLxKYTsnNplP3frP5mwC4XZ3AfnVBgrE1xBQ3Foe37_5yR2JkJHAUiSnBGLuSdLbBt2o4XlMQuQy96prtcBjK-JJo/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" /> 
     <span><br /> 
      <b class="h2">Facebook</b><br /> 
      Add to facebook 
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="https://plus.google.com/107955298793879607964"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyB7awCzFxJvV85ONcv-XIwHjxoLyhUyTV-Bs5AIzkPavFyLabi3BFfMSSJzljem8r5c3-zlU5Gx0mVfyx_ssRWkX1B65uWb8pAVOAlsKE5xEkXYivcND0XitEXM6O3PRRCipUx78jHU/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" /> 
     <span> 
      <br /> 
      <b class="h2">Twitter</b><br /> 
      Add to twitter
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://feeds.feedburner.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMlSkq5f3Qoj_H9Coxs3vvXT8lxX8frXLowdhL4Lphq6obIkxswPb-4jwDMPypQsQxTTYXkbzoN7aE_NMvFXEvl2q_XqU0zSklOH1JmXK2-aSNbPJ4nDgkRFKi4SB_fQ4l4-37XYQoD4/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" /> 
     <span><br /> 
      <b class="h2">Rss Feed</b><br /> 
        Subscribe
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://stumbleupon.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAf2QodMGHWbwvcnw2yv3EuSvMIaHlV_yv3EJzVBg6xJfA2TE6fLnYMd8KGnE7Nq47rIdZZTehQCDHhT5tOHHduFVWEW1JJJc8WjSkLo0uqCWyotxnm6LytpgxyQJx95VAE_AAWOnN65c/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" /> 
     <span><br /> 
      <b class="h2">Stumbleupon </b><br /> 
      add to stumble
     </span> 
    </a> 
   </li> 
    <li> 
    <a href="https://twitter.com/Teck92"> 
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_ldmEPtu4pLlZUgsYmOnemLlFo15Xw5Dd9ClWbssEXmKY3yxu272HTfAN6E5079wBfxC4hyPezGESp-taXuH0Xs8krBAxcjsUXnNgNfCFPMYo32arF7JRnH-t1698ubeEifCDXDQj3w/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" /> 
     <span><br /> 
      <b class="h2">Twitter</b><br /> 
      add to twitter
     </span> 
    </a> 
   </li> 
  </ul> 

You have to change the counters manually, just change red color number according to profile.

Replace Teck92 with your Feedburner ID
Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace 107955298793879607964 with your Google plus ID
Replace Username with your StumbleUpon Username


5. Now save your HTML/Javascript'.You are done.

Social Media Popup Box For Blogger

Social Media Popup Box For Blogger

In this post im gonna explain how to add customized recommendation popup box for blogger. Actually this is just widget.You can add it to your blog easily. follow below steps.It includes Google plus, facebok and twitter counters.Go to below link for  demo.

Social Media Popup Box For Blogger

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6iPd8vA6ZstOM5TOyM7LM2VeyS-NgT25XriIbGdEPwtf8FIqn4Gz7Ec_4WDFsArvM_eJP30g9XRYuV0JYXWcb_Ez8jwweoax5bRgyg6ctOe2CCHyUYOu5xtu0tnngPq2ZwMewokFlcc/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTeck92&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/Teck92" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>

7. Now save your HTML/Javascript'.You are done.

Social Subscription Box For Blogger 2014

Social Subscription Box For Blogger 2014

In this tutorial im gonna explain how to add stylish Rss Subscription widget with social  media   profile icons. By using this Rss Feed Subscription widget you can link your social  media profile  Facebook, Twitter and Rss and subscribe field. It will help to get the new updates by emails.You can check it from below demo link.

How to add Rss Feed Subscription Box For Blogger

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.

<center>
<div align="center" id="Teck921-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px;">
<h3 id="Teck921-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teck92', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<a class="social-icons" href="https://facebook.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRT3yEz8G17FXDZGrvmHy5UMLnAc1AMAqsqA22Bwmj0UTj0PpZ0NlII6sZ97qH5fKkbcG28fN7SCqPUdj0zn4aSump_OCFf4QqZ0Tq959kUsq5R5zc1X7zKweJHki82UWWBMaPdQGTwXm/s1600/Teck92-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsV-oZwgC7CJu57sNaHUajzZbeCSWSJLtopwRvouYTR4Q5P2cJuIXlHXIC1T17nru5VEILXn4Cl8OZhMTHtxt1Ib4c5Z7gvgi1DIuN-Y0iaBU5oZDmjzTa4BAJ-TcSYxhbAabQbSvJqPLn/s1600/Teck92-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyGm26fri9QELLpkPTc3Y9pb5VsGr-fW3PNJeQeJiiKHtVwDNPahplwZJULGeYG66axoo8yjlMrAd6pBPnVil_4qBTWa4dSIFW9cBNTZdC2br9nr7VFcQhIX7KFA0sIlysn_XYjoKtbnHI/s1600/Teck92-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNG8ZkTOO0Tg37EfRuidSRZqa9x82q9GMQqaM93YXiUSNWzKZSPADA-PQWmDeILOnGSeKmFzgpL1ze1vKxLii9qmYSx14Om2eQk_cRkjXxyU11yLNoUsRYamhtNmx6z-Dp-6jZQZMHk13/s1600/Teck92-Rss.png" /></a>

<input class="email" id="Teck92_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="Teck92" /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>
<style>
a.social-icons {margin-right: 5px; height:40px;width:40px;}
a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); }
#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCRhWrukJ2C0iINWkio0VbqsLxk4Y4aJgLnpzHSamqFbXVem-5doVT81soou6mYHY9drczbAWqTbG5obASPhH-rJI5FwxUep0FNhg-8T7AE4ksKcZ87McXvXPmw5iXTJaQYlQRTe0_6yUn/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC8Ln-Usa8qBjV0-kkkrshw7kK2Wk2hXytP7UOfg3e2_4eVDx8_AwR6x0uc8qRQ0JylzwEBo09u4JE-_wt4Ng_obuDQmZQLmV_CGC7-gZWBAJM6lu_-Rl9Sg80khtwhlkbP34xgHEk9HBq/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYaPYAEvzcm2JwJaxa_ojkXtOtUbvTwCm1MWvn1oGlMUpc9SRZvQBP-gZhbOF-zJmivaJAvPQXpOEeLluMfoUPnQ2-pAJlfKcxZza5VtTqMKAHFrE-zdiZilNwiP2rquUcBI6em7ixgtsr/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>

You have to change the counters manually, just change red color number according to profile.

Replace Teck92 with your Feedburner ID
Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'. You are done.

RSS And Social Media Subscribe Widget 2014 For Blogger

RSS And Social Media Subscribe Widget 2014 For Blogger

In this tutorial im gonna explain how to add Social Media And Rss Subscribe Widget. By using this Social Media widget you  can link your social media profile Facebook, Twitter and  Rss and  subscribe field. It Social Media will help to get the new updates by emails. You  can check it from below  demo link .If you want to look at other rss feed subscription widget,click this link. If you have any questions regarding to this.Let me know. I will help you.






1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style>
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>

<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teck92', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="Teck92" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/Teck92" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvxBMFbiU2PgTFovSZTOBZ_BE1Y9Tu7HlUNsq7eVzdLQUirEFpNVPJasfiJgv7SnxhEVK6v0EEMC7yKjexi0Trb4Hyu1DDxETNIKUNCJ__Gw-gSKx_b5LSymVaQf2ljd3aoTwBzQj4LnM/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/Teck92" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9k_nxOyULZIvnYDAkNASqZGsqae4ZV7wRPMVFOFrIw5C6HNpB2RU-YgObHSJsnb0SC4Lsj42euDFUdZ1yqVjcMdXwnYB1_1_TXc5VTu2ctg1BmUmtXplvKscexpWu_s9vbcBacCf9sX0/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWqqHuvUp15dso-pIxbPXhw1IFE1FSi7u4IetVNEBRn5ScDf9eYIm1A8Z0FCHWuqFkIQzrP0HTGWaJoNb1oCiswdakydqs1yXy72_7k6qmYabXRERp-WbrOVBCbMc53Q_e0Ru3e3zC5g/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/Teck92" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIsgcr0ndL8AXJLL3CRvX3YO7JLf5ptdlJ7AfOYIJRB6tmlQcEQ6IGHSk64goZE_ZNS3G23dsrC7nAwu7lwyaClCd6kwSznNmfLy_dSEkgMmwrM-XEgHHbVvRglOEpCZrRNMeUEzQfL4/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/Teck92" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKh2_VGw3vj943quQwoGAMcHzz-KuKkkwVdUDMQbnSyxsz1jgbqwbBZYFpR5LaGR8la0xOni6KZ5q3K_L7SRzrvO3IyyD3e2-eaj_Bx6za9WPxqZzhak_r3mADCaqnpU9PI4oo3iSZowY/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/Teck92"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/Teck92?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div>
</div>

Replace Teck92 with your Feedburner ID
Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace Teck92 with your Pinterest Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'.You are done.

Cool Rounded Social Share Buttons For Blogger Post 2014

Cool Rounded Social Share Buttons For Blogger Post 2014

This is a Below Post Social Sharing Widget. In this tutorial im gonna explain, how to add it to end of blogger post. It include nice title  hover effect too. By  using this social sharing widget, you can share your social networks with one click.It means, you can get some visitors to your blog if  someone do sharing. Im using Css3 and HTML, Just check out demo about this Social Sharing Widget .

How to add Social Sharing Widget For blogger

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F    ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag

ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_cGcq_C79_YnMJGOVqF815kl5B6kZWUK7gHz92ZEMxH-bjv-ULkStV0h-vYlxMOktiP20iV5Tu6u3Ll63YPKxZD9ufLw6HTXVxUcFW_zjAPus1fv-B4__RFOmtZAjy-t1r6zj2LQPRux/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ60bbHTpB02LUYM94P9Ba2xGYfey5iG2IHCUkYfxfacpuctT3LZ2iYroB-xGtKxp-Z0k5_bGZ4ThwjTU-crKyA6we8qzUDYJ6bSvKxr7qWVigaTy2Fvar4KcSEH5Le0aKuUDz5Tazg_zM/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcfMSsAcQMcvd4UEaEXApqbxddzvXdZzhelK8wveBZ0FQZM2j5qwrvCJaRb1nKKAJNAPdtTq21OWvPddNyJKZf9Pm3iTzlAy2c8h47OtDaA6XhPgWitWmSDp7D6dcPzfbV7hkk6z8ahf7X/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7JycFbvulzIzzPDs614o3If27C4kjsFyrhlbI8yWdNL0vPbn06KXYBJ9YLORON8XSeOSSUJL0qFmN7UqzZu6Oib9TXz2uPhirUT8EU7sfsc7WI6A_vKTm2DYmpSQolOIb4h-rQnTa_oB/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy63h5gek4p2aF4l67piqP5X25So3gdp4EfV0idQhYiy0S12gBe_h1iIBdZagIQWTKyKpQHK8rWUKhYpP_eL7kvOitbseSCIPXSoLY_08QGhME7uUatULtBIzxs9WvZQQwwTyBOV6AD-I7/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskL82tn-6eWtr9sKzNWJd0iytQL7dBMofDGBmhF5psncEm1vlasrZMlYDvf-2Qe9lccbXTGkkFwVyby0dKjkTaJXjudo-dFvNWHKz_AC6_EaYgT9G1iQqO_KJbcr7VQseXGXTamOw9Ifx/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWjtaxijc-WPUHAgTEj56zahsmDo_vmgVlc8otFbFIGjdvpthZZVxQ21DW1UX8l4vWo-S8mqtJ7J9fPwA9SD1INs8hClFjkDrssdJ16WwF7cid3tKX6djS0QNy1fg2GTr1d6uNulQtgDo/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}

6. Find this tag by using Ctrl+F    <data:post.body/>

7. Paste below code Before <data:post.body/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

8. Now save your template. You are done.

Flipboard Style Social Media Widget 2014 For Blogger

In this post im gonna explain how to awesome effect social media widget with light search box
for your blog.So, this include two gadget. social profiles icons and search box.You can link with
Facebook, Twitter, Google plus ,Pintrest and Rss Feed.you can take a look at in demo page.

How to addFlipboard Style Social Media Widget

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style type="text/css">
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; 
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial; 
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; 
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px; 
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; 
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbpZLWDzFzKOvSbxQ8Hg3W2cAiROAg0il1-YQuYbOPGJGaIg-7JCb55e8Y1nqBChMRxU-jeZ8KQoI9odKU1WzlDiHDul0QlHiwxJrpGBjs6DvRDZ2k0GljuLHTk8IzcyYTPZbzQNIWgLE5/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#btrix-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}

</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfco-57r55SDbVkqnUdkkw8LrHWjGlpBfxK5Gf-FzjOUAIHfS1BTMMkwkkBuKlyt5G0MyuxTVlyKZ4s4uyrmCyJbRqHNQ0LwgletHQ2bdAUrH8_Rap_vcqrUhHsR2OTvPfKakHP44fWfip/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXUvSHBFG7njUhTu7JMfY-LDHzZ6niv_YiJEF-fDatnm4aB4ofLD_4p3MFeL6u_Nv6btbR_a_AY2FXr_FWSObZ2D1OairHyybd5SDaCUlDviPtt8XOCUWPIu_GNBw8aDy4RMqtZRXvZB1G/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyharHPMZs2OzSzEDXep3rtuW6PA9B5LW8dpaEu67ZHxMFBbUV9OiBh_8ss9zuweEd3hBRkHnrRZ0Nczcm8ZPub3kup7s9jaJp6XchGYUVhzTFp8HrgpQZCVj3nxJ5ojRLZraFETJ1eFtC/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6alR73m8lqoJtauOG87MlImAGBgDtfy_YIUNNYG1GcV4b8Nw0vwkTSJJUULwItrmAWrT9K_sco0gx-wkd8VrTd_mUIYfGRtIKhCWT0tgCnrTpAqsn53sO9rinzHMN1iJaBGSxdnKk4dD/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP0AHkmxbAqYA59sxVPXQc7wsQc1zqS3005UxuOlIOnD2_sppaKW3mmKHrLkdFjnVtwKw_yUsujzJG-1nARLChnZBjpIhBUG7jf0GnFPUZ2IVcKrbH5UY3BWojFDRs75NvEzZdbytLPY2b/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="btrix-searchbox">
<form action="/search" id="btrix-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</div>

Replace Teck92 with your twitter profile
Replace Teck92 with your facebook profile
Replace Teck92 with your feedburner profile
Replace Teck92 with your pinterest  Username
Replace UserId with your Google Plus User Id

5. Now save your HTML/Javascript'. You are done.
If you have any problem about Flipboard Social Media Widget, Just leave a comment.

Color However Style Social Media Widget For Blog

Color However Style Social Media Widget For Blog

In this tutorial im gonna explain how to add Smooth Colorful social media widget for blogger. By  using Colorful social media widget  you can link your social media profile Facebook, Twitter StumbleUpon and linkedin IDs.Hope this smooth effect widget helps to increase followers. Check the demo from below link.

How to Add Colorful Hover Style Social Media Widget

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste  below code.

<style>
a.btrix1_twitter
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJw0VDaSovpcYx_2yNBNGF7N3tXuOvyXvVhk2GA85Ufo5sSPuT3bjcbfqlzj_d11h_QeLtjxbgwvCxwX4YgLk3gvWLJt-Y1eY-rDMqY3cDTUlaBP2B4fn9Y4En1xVCT-LtG-ds-r14oI/s1600/btrix_twitter.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
    border:0px;
    float:left;}
a.btrix1_facebook
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAONsgsEG00hyphenhyphenwRoyRDTXWubWadRLU6jEWcnTMsD0pb0hfcyCUCfDVerjtJll4QrU25B0w5_XojDVGlxQWYIrNC8x4woysonpA-g1WHlEgjWMisoq3Cbv8lX73iuEzUFU75dk6eVcG6pA/s1600/btrix_facebook.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;}
a.btrix1_linkedin
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijhPzov5I86CExH-exE7zeSrCdVeq-zjTELucvMytw3L60CM4okk9wZIMiFs22veTEL_c_Gdp4tMnPHT3UIkkoCCBjhmqJP_ZNzkGxkCUpD73v-Nl2IMPmrAmLp6lrLGkanBgLOxKxgTY/s1600/btrix_linkedin.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
a.btrix1_stumbleupon
{   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwSbwWv3-4n2q7AYFOHp0xOSdMDjvAKeler6vfYykr5kN5s2Jg8He-uZlTElRmDyc04XwMJXz0e3aVTy_GFnLhea8Fyyf0KaTqyHzzORHLtjFWljomSrXWfviRKhBUPCmr7DGdty8WFzY/s1600/btrix_stumbleupon.jpg);
    background-position:0 0px;
    width:255px;
    height:50px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
.btrix11social a:hover
{
    background-position:0 -51px;
}
.btrix11social
{
    width:255px;
}
</style>

<br />
<div class="textwidget">
<div class="btrix11social">
<a class="btrix1_linkedin" href="http://in.linkedin.com/Username" target="_blank">linkedin</a>
<a class="btrix1_stumbleupon" href="http://www.stumbleupon.com/Teck92" target="_blank">stumbleupon</a>
<a class="btrix1_twitter" href="http://twitter.com/Teck92" target="_blank">twitter</a>
<a class="btrix1_facebook" href="http://www.facebook.com/Teck92" target="_blank">facebook</a>
</div>
</div>

Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace Username with your stumble username
Replace Username with your Feedburner ID

5. Now save your HTML/Javascript'. You are done.

Social Subscription Widget 2014 For Blog

In this post im gonna explain how to add Rss feed subscribe box for  blogger with social icons.hope

you will like it. By using this users can subscribe your blog. So, it will  help to get the new updates

by emails. Im using CSS and HTML for this widget.You can check it from below demo link.

 

 

 

Add Blue Color Social Subscription Widget

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis76BKqSEDu7JzHJqvarjvHXneKUzDisNK4WWcTpg2fjwNs46viQ9Kze2BymPD4Cz9r4kQPyhFjZ3QHkPMDGNY7xALv0-Thrcfn7-EsXGIYLo6BY5hxSoaJJTjqR9SWTFR7PQ8qaDiARI/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRY4kbnc0zmZ2I0BajCTjeh_wmh7J48xABqgmCtCSuDagKac6iQzIYSAfRU1V2soSqt-ybOxF-Kc4e1kYm2dNSVq-f7WoTZwjM09Ybeh5PtYiFiir9l5oM7vwHVRugGG_ra3iJBd48mU/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRT3yEz8G17FXDZGrvmHy5UMLnAc1AMAqsqA22Bwmj0UTj0PpZ0NlII6sZ97qH5fKkbcG28fN7SCqPUdj0zn4aSump_OCFf4QqZ0Tq959kUsq5R5zc1X7zKweJHki82UWWBMaPdQGTwXm/s1600/Teck92-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsV-oZwgC7CJu57sNaHUajzZbeCSWSJLtopwRvouYTR4Q5P2cJuIXlHXIC1T17nru5VEILXn4Cl8OZhMTHtxt1Ib4c5Z7gvgi1DIuN-Y0iaBU5oZDmjzTa4BAJ-TcSYxhbAabQbSvJqPLn/s1600/Teck92-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyGm26fri9QELLpkPTc3Y9pb5VsGr-fW3PNJeQeJiiKHtVwDNPahplwZJULGeYG66axoo8yjlMrAd6pBPnVil_4qBTWa4dSIFW9cBNTZdC2br9nr7VFcQhIX7KFA0sIlysn_XYjoKtbnHI/s1600/Teck92-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNG8ZkTOO0Tg37EfRuidSRZqa9x82q9GMQqaM93YXiUSNWzKZSPADA-PQWmDeILOnGSeKmFzgpL1ze1vKxLii9qmYSx14Om2eQk_cRkjXxyU11yLNoUsRYamhtNmx6z-Dp-6jZQZMHk13/s1600/Teck92-Rss.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=Teck92" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teck92', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Teck92" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

* Replace Teck92 with your facebook username
* Replace Teck92  with your  twitter Username
* Replace UserId with Googleplus
* Replace Teck92 with feedburner username
* Replace Teck92 with your Feedburner ID

5. Now save your HTML/Javascript'.You are done.
Hope this Blue Color Social Subscription Widget helps to make your blog attractive.