Customized Recommendation Social Widget 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.

bloggertrix

• LIVE DEMO

1. Login to Blogger > Dashborad
2. Click on Drop Down Menu and select Layout
3. Add a HTML/JavaScript Gadget
4. Paste below code in it.

<style type="text/css">#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKXKaivmM3Hpx005GP681uGkNTxlMCCJoyjZEDEZCV4dOjCjlyTTyVNLW83DZ9X-Y6fA4Rxuq20tdNuR4rWI_-xD3mB89GNSPXZFWsOqrXW6TINP6-mRsbr97dwNjSB56bdz1QAJQQ7SE/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 id="socialslide" style="display: none;"><a href="javascript:void(0);" onclick="return closesocialslide();" style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;">(X)</a> <span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don&#39;t forget to join our community!</span>
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/freebloggerthemes&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" style="border:none; overflow:hidden; width:80px; height:21px;"></iframe></div>
<div style="float:left; margin:15px;"><a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="large" href="https://twitter.com/ClassyBlogger">Follow @BloggerTemplates</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">&nbsp;</div>

Replace All the red bolded lines with the required services.
Now save your HTML/Javascript'.You are done.

This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this Customized Recommendation Social Widget for Blogger then please share it and write comments as your feedback.

Sliding Css Social Profile Widget for Blogger

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.

bloggertrix

1. Login to Blogger → Dashborad
2. Click on Drop Down Menu and select Layout
3. Add a HTML/JavaScript Gadget
4. Paste below code in it.

<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/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnH27TflkKurKoiUR4c_-tix6_AHjN76efVHdS7ep_wTlfS8cgj8JKaQS8oi6S72ubFXPg1eBVVBAZOhYsbj_n3X-RMHn2e_VN7EPtwQHLtVrhUYfAtQL5YUBbdnPoAg3hpK5orBQE0M/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/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlk_1tcjV03iA4ySG1g_9q4FGkkZLhrL__T6GtnrYua_n9tfMM-lDGY-KSzYAHwDNL9LiyK_whcNBVSi7q7mPS4VvZeqP3_gavk-oaZDfx-dL7uqQp2QsjxhtzRf3sO9Tqyhoi1QCtI4k/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/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXxFdF3A5xoeA3mABGMZBcjumc5to60gF0Vlnhrg7S23rLMHxgTuxkKecIiNkeH_q7jv1DUYf94glPuX50CkxXWpzzitbL_oRa1jrVy9qCP7dTghG2YCvjoum5gQ_qtd1GUMz2TalszAg/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/AVvXsEjzIa3Pdwj9_4uKfxQrE6poNJjpCIVWIpco207Tzua6fBlgfNa5bkk_5crhEnwWz_FrssGDu5_o3XnNKjU8h74Ys7J31qJVFiIxsUO6ZM5AKZwKf0ncDvuBn2tk6WOW7EUFIM8nOCktfJg/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/Username">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFre7rIGDUPyEBf5upacMKAHv1dXFHEQs7TqhWmtbxq70qT7QhRTBIImMu3j02zA53hUnJDEMXLBALGEQ-3Kvh2StBYePNZg1ZxELxCf-ZzjaiDCkc5D9iyMQ40u1k-4z7o2s_SwYIHc/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 Username with your Feedburner ID 

Replace Username with your Facebook username

Replace Username with your Twitter Username

Replace Username with your Google plus ID

Replace Username with your StumbleUpon Username

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

TechCrunch Social Subscribe Widget For Blogger

This unique Social subscription widget is to maximize your website traffic in different ways.It helps you to increase your Facebook likes,Twitter followers,Google Plus+,Linkedin,Stumbleupon,YouTube Subscribers,Rss Count.This plugin can make your blog viral on different social networks.Your subscribers can even get an chance to interact with you on your various other communities and all these types of options are just simply in a single widget.This blogger widget offers every thing you need to enhance your site and increase followers and readers.It will take the place of any sociable plugins you will be currently using on your website.

• LIVE DEMO

Features Of New TechCrunch Social Subscribe Widget:
1.Facebook icon to boost your page likes.
2.Twitter icon to increase your followers.
3.Google Plus+ to increase your circle count.
4.Linkedin icon to increase your followers.
5.Stumbleupon Icon to increase your website stumbles.
6.YouTube Icon to increase your subscribers as well as videos count.
7.Rss icon for increasing your subscribers of your blog.
8.Sprite images so the widgets loads fast.
9.SEO optimized added "Nofollow" tags.

The main features are quite noticeable at first but there are some minor features which you won’t be able to notice.This widget will not decrease your speed of your site it will increase because the reason is this social icons are sprite images which are united by one image so it wont give request for 7 http request it will give only one.So this load pretty fast than any other social widget.

How To Add This Widget Into Blogger?
Login to Blogger → Dashborad
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in it.

<style> */http://www.softechnogeek.com*/ .rr-mod.module-rightrail-social-widget{margin:0 0 10px 0 !important;}#rr-social-widget-chiclets div{width:32px;height:32px;display:inline-block;margin:0 4px 0 0;}#rr-social-widget-chiclets a{width:32px;height:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5BG43g1pwP5kRgg3ImY7ud-OiixvcH-glXFlNyDaH_Rk1Fkt2voVGJNFO31CdUWm35STiQwPYmrL7T8DC5fhNZ3NXSimXq5PFvqzwrTIV1_aWy6f6nE7Oqx607P5l3hCHO6mckV5OuqU/s1600/rr-social-icons.png) no-repeat;}@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:4/3), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5){#rr-social-widget-chiclets a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5BG43g1pwP5kRgg3ImY7ud-OiixvcH-glXFlNyDaH_Rk1Fkt2voVGJNFO31CdUWm35STiQwPYmrL7T8DC5fhNZ3NXSimXq5PFvqzwrTIV1_aWy6f6nE7Oqx607P5l3hCHO6mckV5OuqU/s1600/rr-social-icons.png);background-size:248px 32px;}}#rr-social-widget-chiclets-facebook a{background-position:0 0;}#rr-social-widget-chiclets-twitter a{background-position:-36px 0;}#rr-social-widget-chiclets-googleplus a{background-position:-72px 0;}#rr-social-widget-chiclets-linkedin a{background-position:-108px 0;}#rr-social-widget-chiclets-stumbleupon a{background-position:-144px 0;}#rr-social-widget-chiclets-youtube a{background-position:-180px 0;}#rr-social-widget-chiclets-rss a{background-position:-216px 0;} </style> <div class="rr-mod module-rightrail-social-widget" id="module-rightrail-social-widget"> <div class="configuration-neighbor"> <div id="rr-social-widget-chiclets"> <div id="rr-social-widget-chiclets-facebook"><a href="FACEBOOK URL" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_facebook';"></a></div> <div id="rr-social-widget-chiclets-twitter"><a href="TWITTER URL" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_twitter';"></a></div>
<div id="rr-social-widget-chiclets-googleplus"><a href="GOOGLE+ URL" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_googleplus';"></a></div>
<div id="rr-social-widget-chiclets-linkedin"><a href="LINKEDIN URL" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_linkedin';"></a></div>
<div id="rr-social-widget-chiclets-stumbleupon"><a href="STUMBLEUPON URL" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_stumbleupon';"></a></div>
<div id="rr-social-widget-chiclets-youtube"><a href="YouTube URL" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_youtube';"></a></div>
<div id="rr-social-widget-chiclets-rss"><a href="RSS URL" rel="nofollow" target="_blank" onclick="s_objectID='rr_sm_icons_rss';"></a></div>
</div> </div> </div>

Customization:

1.Replace FACEBOOK URL with your facebook page.
2.Replace TWITTER URL with your twitter link.
3.Replace GOOGLE+ URL with your google plus page.
4.Replace LINKEDIN URL with your linkedin page.
5.Replace STUMBLEUPON URLwith your stumbleupon page.
6.Replace YouTube URL with your youtube page.
7.Replace RSS URL with your rss link.

This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this  TechCrunch Social Subscribe Widget For Blogger then please share it and write comments as your feedback.

Smooth Sliding Social Media Widget For Blogger

To increase search engine visibility it is compulsory to use social media widget for blogger so here we have a window effect widget to add it to blogger. A social media widget plays an important role in increasing page views for your posts and also increases your followers if someone likes your posts and becomes a member of your blog. Such blogger widget gives chance to users to share your posts on the social media platform. Below is the step by step method to add this widget to blogger with the demo. bloggertrix

How to add window effect social media widget to blogger.

Login to Blogger → Dashborad

Click on Drop Down Menu and select Layout

Add a HTML/JavaScript Gadget

Paste below code in it.

<style>
.btrix-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px;
    padding: 12px;
}
.btrix-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.btrix-social-slide a {
    text-decoration: none !important;
   }
.btrix-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btrix-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.btrix-social-slide ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.rss p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
</style>
<div class="btrix-social-slide">
    <ul>
        <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/freebloggerthemes"><p>12K+</p>Facebook </a></li>
        <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/ClassyBloger"><p>5K+</p>Twitter</a></li>
        <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/u/4/+AnaLeighReal"><p>4K+&nbsp;</p>Google+</a></li>
        <li><a class="btrix-social-slidebox pinterest" href="https://www.pinterest.com/Micy3/"><p>2K+&nbsp;</p>Pinterest</a></li>
        <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/blogspot/CINHv"><p>11K+</p>RSS</a></li>
    </ul>
</div>

Type your Facebook fan page name in place of YOURFANPAGE.
Type in your Twitter ID in place of YOURID.
Type in your Feed address ID in place of YOURFEED.
Type in your Google Plus ID in place of 100000000000001.
Type in your Pinterest address ID in place of YOURURL.

This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this Smooth Sliding Social Media Widget For Blogger then please share it and write comments as your feedback.

How to Add “lang” Attribute to a Blogger Template

Adding the "lang" attribute into the html tag specifies the default language of the website's content. Some common lang attributes are "en" for English, "ja" for Japanese, "es" for Spanish, "fr" for France and so on.

To specify your language, go to the "Edit HTML" page of your blog.

Your blog's XML code will start with something like this:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

Now add lang='en-US' code into the html tag like this:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

Final result will look like this:

Language Codes Table

af	Afrikaans	sq	Albanian
ar-sa	Arabic (Saudi Arabia)	ar-iq	Arabic (Iraq)
ar-eg	Arabic (Egypt)	ar-ly	Arabic (Libya)
ar-dz	Arabic (Algeria)	ar-ma	Arabic (Morocco)
ar-tn	Arabic (Tunisia)	ar-om	Arabic (Oman)
ar-ye	Arabic (Yemen)	ar-sy	Arabic (Syria)
ar-jo	Arabic (Jordan)	ar-lb	Arabic (Lebanon)
ar-kw	Arabic (Kuwait)	ar-ae	Arabic (U.A.E.)
ar-bh	Arabic (Bahrain)	ar-qa	Arabic (Qatar)
eu	Basque (Basque)	bg	Bulgarian
be	Belarusian	ca	Catalan
zh-tw	Chinese (Taiwan)	zh-cn	Chinese (PRC)
zh-hk	Chinese (Hong Kong SAR)	zh-sg	Chinese (Singapore)
hr	Croatian	cs	Czech
da	Danish	nl	Dutch (Standard)
nl-be	Dutch (Belgium)	en	English
en-us	English (United States)	en-gb	English (United Kingdom)
en-au	English (Australia)	en-ca	English (Canada)
en-nz	English (New Zealand)	en-ie	English (Ireland)
en-za	English (South Africa)	en-jm	English (Jamaica)
en	English (Caribbean)	en-bz	English (Belize)
en-tt	English (Trinidad)	et	Estonian
fo	Faeroese	fa	Farsi
fi	Finnish	fr	French (Standard)
fr-be	French (Belgium)	fr-ca	French (Canada)
fr-ch	French (Switzerland)	fr-lu	French (Luxembourg)
gd	Gaelic (Scotland)	ga	Irish
de	German (Standard)	de-ch	German (Switzerland)
de-at	German (Austria)	de-lu	German (Luxembourg)
de-li	German (Liechtenstein)	el	Greek
he	Hebrew	hi	Hindi
hu	Hungarian	is	Icelandic
id	Indonesian	it	Italian (Standard)
it-ch	Italian (Switzerland)	ja	Japanese
ko	Korean	ko	Korean (Johab)
lv	Latvian	lt	Lithuanian
mk	Macedonian (FYROM)	ms	Malaysian
mt	Maltese	no	Norwegian (Bokmal)
no	Norwegian (Nynorsk)	pl	Polish
pt-br	Portuguese (Brazil)	pt	Portuguese (Portugal)
rm	Rhaeto-Romanic	ro	Romanian
ro-mo	Romanian (Republic of Moldova)	ru	Russian
ru-mo	Russian (Republic of Moldova)	sz	Sami (Lappish)
sr	Serbian (Cyrillic)	sr	Serbian (Latin)
sk	Slovak	sl	Slovenian
sb	Sorbian	es	Spanish (Spain)
es-mx	Spanish (Mexico)	es-gt	Spanish (Guatemala)
es-cr	Spanish (Costa Rica)	es-pa	Spanish (Panama)
es-do	Spanish (Dominican Republic)	es-ve	Spanish (Venezuela)
es-co	Spanish (Colombia)	es-pe	Spanish (Peru)
es-ar	Spanish (Argentina)	es-ec	Spanish (Ecuador)
es-cl	Spanish (Chile)	es-uy	Spanish (Uruguay)
es-py	Spanish (Paraguay)	es-bo	Spanish (Bolivia)
es-sv	Spanish (El Salvador)	es-hn	Spanish (Honduras)
es-ni	Spanish (Nicaragua)	es-pr	Spanish (Puerto Rico)
sx	Sutu	sv	Swedish
sv-fi	Swedish (Finland)	th	Thai
ts	Tsonga	tn	Tswana
tr	Turkish	uk	Ukrainian
ur	Urdu	ve	Venda
vi	Vietnamese	xh	Xhosa
ji	Yiddish	zu	Zulu

This is it. You are done. If you liked this article “How to Add “lang” Attribute to a Blogger Template” then please share it and write comments as your feedback.

How to Add One Time Facebook Pop Up Like Box For Blogger

Widgets are playing very good role in both wordpress and blogger blogs. Here is another stylish facebook like box, this widget is design in three awesome style and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect that i included. The method is very easy, you need to follow method step by step.

How To Add The Widget To Your Blog/Site

First thing is to add the java script code in template.

1. Login to Blogger → Dashborad

2. Click on Drop Down Menu and select Layout

3. Add a HTML/JavaScript Gadget

4. Paste below code in it.

<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4zWL5tmqrY7RiZ8tDNtOLDEfT8oGqRqRIhM7rfwrvANVIKtUAmwMUsYWC2xT1X7AhT2dagszKsceNxpFGHSuV-ZjrxDlrNg85fEd0zYKjURQbXWVG5Ex-70Y3mE1w8phNWxyqGt_ZnMj/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9K8GYYE9UHccU_vGuiO-2NCleLJkfDpSyVaAlwu6ZpIpmdcqo8ZufjeyZEOxfIK6p7VQRFIDfgD54A6tbHaEdi7JgX9U0qf183q0W9VTRl-hqgQbTmrVVb96SPlxDvR3Yt-gZXRgjk38I/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4zWL5tmqrY7RiZ8tDNtOLDEfT8oGqRqRIhM7rfwrvANVIKtUAmwMUsYWC2xT1X7AhT2dagszKsceNxpFGHSuV-ZjrxDlrNg85fEd0zYKjURQbXWVG5Ex-70Y3mE1w8phNWxyqGt_ZnMj/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4zWL5tmqrY7RiZ8tDNtOLDEfT8oGqRqRIhM7rfwrvANVIKtUAmwMUsYWC2xT1X7AhT2dagszKsceNxpFGHSuV-ZjrxDlrNg85fEd0zYKjURQbXWVG5Ex-70Y3mE1w8phNWxyqGt_ZnMj/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9K8GYYE9UHccU_vGuiO-2NCleLJkfDpSyVaAlwu6ZpIpmdcqo8ZufjeyZEOxfIK6p7VQRFIDfgD54A6tbHaEdi7JgX9U0qf183q0W9VTRl-hqgQbTmrVVb96SPlxDvR3Yt-gZXRgjk38I/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4zWL5tmqrY7RiZ8tDNtOLDEfT8oGqRqRIhM7rfwrvANVIKtUAmwMUsYWC2xT1X7AhT2dagszKsceNxpFGHSuV-ZjrxDlrNg85fEd0zYKjURQbXWVG5Ex-70Y3mE1w8phNWxyqGt_ZnMj/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4zWL5tmqrY7RiZ8tDNtOLDEfT8oGqRqRIhM7rfwrvANVIKtUAmwMUsYWC2xT1X7AhT2dagszKsceNxpFGHSuV-ZjrxDlrNg85fEd0zYKjURQbXWVG5Ex-70Y3mE1w8phNWxyqGt_ZnMj/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4zWL5tmqrY7RiZ8tDNtOLDEfT8oGqRqRIhM7rfwrvANVIKtUAmwMUsYWC2xT1X7AhT2dagszKsceNxpFGHSuV-ZjrxDlrNg85fEd0zYKjURQbXWVG5Ex-70Y3mE1w8phNWxyqGt_ZnMj/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguavstslMrcyYqz3Ql_5JqeRP8H4MJYtCY76_AiQ6eukml-verB4QkraAEXwX_wOYbxMPwp8lh9xK596vu4OM85p0oWAjthmCdzAYzx6rZ_XHeZrDKm6VK8NHVBp53Y8XhTfanBv_xvl5D/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9JpUNyX-7aAZ0wtIDzjfvtQ4cpp23yKvMzDOWG3FlqIr0kvgquJmQOnPNa60kHwQwFVtteWP8VOcxOCUKDSK1qkgewNU7mVmHqYYS4gnVHjxV6aciYDx5eHw4QjRXmAeT0hgMYPOYITUa/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4zWL5tmqrY7RiZ8tDNtOLDEfT8oGqRqRIhM7rfwrvANVIKtUAmwMUsYWC2xT1X7AhT2dagszKsceNxpFGHSuV-ZjrxDlrNg85fEd0zYKjURQbXWVG5Ex-70Y3mE1w8phNWxyqGt_ZnMj/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ffreebloggerthemes&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://blogger-templatees.blogspot.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

After adding the code Replace the freebloggerthemes with your specified facebook URL and click save.

Note - If you already have jQuery script in your template remove the line in red. 

This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this One Time Facebook Pop Up Like Box For Blogger then please share it and write comments as your feedback.