Hello, my friends, is a slideshow of the most important additions are looking for many people because they add a distinctive
But some codes contain many difficult for some to deal with them and put them into the mold
Today I present to you the most beautiful and easier template can be mounted to your blog
A copy of the slideshow

How To Add Featured Posts Slider Widget For Blogger

Written explanation 

 1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it. 

<center>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://newth3.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
    font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.abt-sidebar-slider {
    height: 500px;
    width: 100%;
}
ul.abt-sidebar-slider li {
    display: none;
    float: left;
    height: 24.5%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.abt-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.abt-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
    border: 4px solid #2E8DCE;
    border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
    color: white;
    font-family: Oswald;
    font-size: 25px;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
    display: none;
}
.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #535353 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #535353;
    margin-left: -3px;
}
.date {
    background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
    bottom: 93px;
    padding: 8px;
    position: relative;
    right: 6px;
}
#headerbox {
    background: #8FB93D;
    font-family: Oswald;
    padding: 4px;
}
</style>
</center>

4) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it URL HERE with your  URL. 

 5) Save your Widget. 

Read more…

Today's topic is important for each user blog. added months where "Posts common," which is one of the latest additions and beautiful; But today is a form new and wonderful as you see in the picture

Posts common is that you view the most important topics in the blog where  visits to these pages, This is extremely useful for bringing visitors where his best displays threads in blog.

How To Add Round Shape Popular Posts Widget for Blogger

Written explanation
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box) 

]]></b:skin>

3) Now Paste the Code Shown Below just Before it.

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}
.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}
#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>⋯</b:widget>

5) You may/may not expand this code. All you have to do is replace the whole code with the code given below.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

6) Now save your template.

Read more…

 

 

Give you some amazing techniques that will you like colored buttons and add some dynamic buttons on the bubble shape using CSS Animations template blogger, was designed by animated buttons Tutorial Zine. Featuring bubble CSS buttons when the mouse hovers over it issued vibrating bubbles and makes this effect is more than wonderful, is available in four colors and three sizes of threads so you can add any button of any size only by just changing the name of the category of a button.

How To Add Stylish CSS Buttons For Blogger

Written explanation
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

]]></b:skin>

3) Now Paste the Code Shown Below just Before it.

a.button-facebook,a.button-googleplus,a.button-linkedin,a.button-pinterest,a.button-rss,a.button-twitter {    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    border-radius: 3px;    box-shadow: 0 1px 1px #999;    color: #fff;    display: inline-block;    font-size: 16px;    margin: 0 20px 20px 0;    padding: 10px 15px;    text-align: center;    width: 130px;    text-decoration:none;}a.button-facebook {    background-color: #2b4170; /* fallback color */    background: -moz-linear-gradient(top, #3b5998, #2b4170);    background: -ms-linear-gradient(top, #3b5998, #2b4170);    background: -webkit-linear-gradient(top, #3b5998, #2b4170);    border: 1px solid #2b4170;    text-shadow: 0 -1px -1px #1f2f52;}a.button-facebook:hover {    background: -moz-linear-gradient(top, #2b4170, #3b5998);    background: -ms-linear-gradient(top, #2b4170, #3b5998);    background: -webkit-linear-gradient(top, #2b4170, #3b5998);}a.button-googleplus {    background-color: #c33219; /* fallback color */    background: -moz-linear-gradient(top, #e64522, #c33219);    background: -ms-linear-gradient(top, #e64522, #c33219);    background: -webkit-linear-gradient(top, #e64522, #c33219);    border: 1px solid #c33219;    text-shadow: 0 -1px -1px #972412;}a.button-googleplus:hover {    background: -moz-linear-gradient(top, #c33219, #e64522);    background: -webkit-linear-gradient(top, #c33219, #e64522);}a.button-linkedin {    background-color: #0073b2; /* fallback color */    background: -moz-linear-gradient(top, #009cda, #0073b2);    background: -webkit-linear-gradient(top, #009cda, #0073b2);    border: 1px solid #0073b2;    text-shadow: 0 -1px -1px #005486;}a.button-linkedin:hover {    background: -moz-linear-gradient(top, #0073b2, #009cda);    background: -ms-linear-gradient(top, #0073b2, #009cda);    background: -webkit-linear-gradient(top, #0073b2, #009cda);}a.button-pinterest {    background-color: #a0171c; /* fallback color */    background: -moz-linear-gradient(top, #cb2027, #a0171c);    background: -ms-linear-gradient(top, #cb2027, #a0171c);    background: -webkit-linear-gradient(top, #cb2027, #a0171c);    border: 1px solid #a0171c;    text-shadow: 0 -1px -1px #761114;}a.button-pinterest:hover {    background: -moz-linear-gradient(top, #a0171c, #cb2027);    background: -ms-linear-gradient(top, #a0171c, #cb2027);    background: -webkit-linear-gradient(top, #a0171c, #cb2027);}a.button-rss {    background-color: #e2733d; /* fallback color */    background: -moz-linear-gradient(top, #e88845, #e2733d);    background: -ms-linear-gradient(top, #e88845, #e2733d);    background: -webkit-linear-gradient(top, #e88845, #e2733d);    border: 1px solid #e2733d;    text-shadow: 0 -1px -1px #9a4824;}a.button-rss:hover {    background: -moz-linear-gradient(top, #e2733d, #e88845);    background: -ms-linear-gradient(top, #e2733d, #e88845);    background: -webkit-linear-gradient(top, #e2733d, #e88845);}a.button-twitter {    background-color: #0081ce; /* fallback color */    background: -moz-linear-gradient(top, #00aced, #0081ce);    background: -ms-linear-gradient(top, #00aced, #0081ce);    background: -webkit-linear-gradient(top, #00aced, #0081ce);    border: 1px solid #0081ce;    text-shadow: 0 -1px -1px #005ea3;}a.button-twitter:hover {    background: -moz-linear-gradient(top, #0081ce, #00aced);    background: -ms-linear-gradient(top, #0081ce, #00aced);    background: -webkit-linear-gradient(top, #0081ce, #00aced);}

Using It in Your Posts

Use any 1 of the codes

Quote:

<a class="button-facebook" href="#">Cool World</a></div>

Quote:

<a class="button-googleplus" href="#">Cool World</a></div>

Quote:

<a class="button-twitter" href="#">Cool World</a></div>

Quote:

<a class="button-linkedin" href="#">Cool World</a></div>

Quote:

<a class="button-rss" href="#">Cool World</a></div>

Quote:

<a class="button-pinterest" href="#">Cool World</a></div>

Customize 

Replace Cool World with your own text. 

Change # to the desired link.

Read more…

 

Today's topic will be the addition of fund Subscribe to mailing lists and everyone knows the importance of this add-on, this add-on will be easy to install and beautiful on blog. hope you like it

How To Add Cool Feedburner Subscribe Box For Blogger

 

Written explanation 

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login">
<h1>SUBSCRIBE TODAY</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhUc6Posob6aqoTyF5zIchvu3jh5O8QmH4SAEbG_q550zdeJ0rnbYRUE8mcbdyt1FTv-l7JC9Pmy3GwbgWkP1HTbqNwDjF-gh8t6tLJWzmg2cdrFK5K-ptV6Zt1AgMkUmypuRDN41vgo/s1600/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Sign up and receive our free Newsletter &nbsp;</span></font></center><br/>
<input type="hidden" value="USERNAME1" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit" />
</form>
<br/>
</center>
<div align="right">
<a href="http://newth3.blogspot.com/" class="tt">Get This<span class="tooltip"><span class="top"></span><span class="middle">Premium Widget provided by coolworld.in</span><span class="bottom"></span></span></a></div>
<style>
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
    text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
}

::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:-moz-placeholder {
  color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
  color: #bcc0c8;
}
:-ms-input-placeholder {
  color: #bcc0c8 !important;
}
.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}
.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login {
  padding: 18px 20px;
  width: 80%;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}
.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}
</style>

4) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it USERNAME1 with your Feedburner Username. 

5) Save your Widget.

Read more…

 

This tutorial will show you How To Add Social Bookmarking Buttons Beside Adsense Ad Unit To Blogger.The main advantages of using this widget is that you can increase your Adsense impressions along with CTR - and fill up the empty space besides Adsense units, making your blog look more beautiful and professional. The widget includes buttons for Google Plus, Del.icio.us, Twitter, Facebook, StumbleUpon and Digg.

HOW ADD SOCIAL BOOKMARKING BUTTONS BESIDE ADSENSE AD UNIT IN BLOGGER

Written explanation 

1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box) 

]]></b:skin>

3) Now Paste the Code Shown Below just Befor it.

.ads{margin-bottom:10px;border-top:solid 1px #dedede;padding-top:10px;font-size:13px}.ads-right-min{border-left:solid 1px #dedede;height:250px;padding-left:10px}.ads-right-min a:link,.ads-right-min a:visited,.bottom-share-links a:link,.bottom-share-links a:visited{color:#222;display:block;height:32px;width:140px;font-size:12px;line-height:22px;margin-top:10px;padding-left:42px}.ads-right-min a:hover,.bottom-share-links a:hover{color:#666}.mini-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-PrasQWcMEYZQXlom2yxd0opzbYEdviT8Ur6Bd0UGEVaka4tAQTrK39EEz9gVIo9Kmtp2yED6r6Jjvic5AYjUXvCVuo2yisuTCtLTNUTnM2usNW4MO4OpHqaVMuKJtrgv7RF3ylGfeU/s1600/facebook.png) no-repeat}.mini-tweet{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLS5hM-Y_iOq0kPM_OPjW2rKzTzOVp1qeQoCd09RdFczyuI0NI52MJBPFBbYAzNtaf5OH95UBmMySe5Eac-k-ADbSCl_bBn16KxLQ3VzVcSoFAHseItd_nTaRCQmJOSQbcZ6FvXrLZ5Z8/s1600/twitter.png) no-repeat}.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPavztwNnLM9A77Hb_BRFC0XdjEU8VM1RSw5eu4-4xwbVlnHoixIAil8qgHaNx5tm-97MQWgU0e-0RxH20_OVSb-2LhJmxn3QfSKPqA1h6rbIltmXB59glGDjx5FEJ7Luo9AhJnaBPpU/s1600/delicious.png) no-repeat}.mini-stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvo8g61TvQ1EtFUN8nLCBgTSV4JEqjE1BaWuWX8jGyg45zFooXdptOLmEdWw5y5Qvor4YlSIYutiLr6W7L4iAMs-rV4DViO3DmvMtKe3qqY-8IOgkeZFRqVZHNkyk9QzUVL6Kf28Msp4/s1600/stumbleupon.png) no-repeat}.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVr3XEq0upUYo3nRhBjix40uJMDhe4UD41X2LdUlD99nDti5qMfQS2H-4foaDZQBw2Qd0WBLdLCW6WEZhNxYLUTqZSgxHn58BreuyLRP8VVAPQ0Rfh-oCcHWvTNTjB2fjfE08I0ZpJj8/s1600/digg.png) no-repeat}.mini-plus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOQAyh69G8ci5dO2wsUJvd4h3kvtG1gtZj3KE-2duJZtvK7v-i04zYGf0E1jyTBsCvfP71R2LQ_Zw1a9wTuzBVUsab6rxV85fNbVDNwaidYfLJHa2xLm8nuvuctFhgacL0GPfnRVXn7g/s1600/googleplus.png) no-repeat}.flt-wdt{position:fixed;margin-right:10px;left:0;top:40%}.flt-wdt img{float:left;clear:left;margin:5px}

4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

<div class='post-header-line-1'/>

5) Now Paste the Code Shown Below just Befor it.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='ads'><table border='0' cellpadding='0' cellspacing='0' width='100%'><tr><td width='354'>

AdSense Ad Unit Code

</td><td><div class='ads-right-min'><a class='mini-plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>Share On Google+</a><a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>Add This To Delicious</a><a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' rel='external nofollow' target='_blank'>Tweet/ReTweet This</a><a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>Share on Facebook</a><a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>StumbleUpon This</a><a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>Digg This</a></div></td></tr></table></div></b:if>

3) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it PASTE YOUR AD CONVERTED CODE with your Ads converted code. 

♥ Convert your code - Click Here.(In HTML Form) 

7) Now Save Your Template.

Read more…

Today, my friends, I'll give you an excellent addition and beautiful, Characterized by the characteristics of the positive, which help in Earn Fans And keep track Add Stylish All In 1 Social/Email Subscription Box For Blogger and Add New Social/Email Subscription Box Widget For Blogger

How To Add Cool All In One Subscription Box For Blogger

Written explanation 

1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
 

]]></b:skin>

3) Now Paste the Code Shown Below just Before it.

.strip{
    margin-top:-12px;
    width:100%;
    margin-bottom:-6px;
}
#socialsub {
    width:300px;
    padding-bottom:10px;
    background:#f9f9f9;
    border:1px solid #eaeaea;
    -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
  }
  .socialsub-title {
       font-family: Verdana;
    font-size:25px;
    background:#16a085;
    padding-top:10px;
    padding-bottom:14px;
    color:#fff;
    text-align:center;
    margin-bottom:5px;
  }

  .socialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .socialemailsubname {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMdHPqYZWBtY9fc-iOZ4lqNfVif3OiLkC3lmYZqDg1KCUNMBZFxcksQwc7PMHu0Bu1v-2WZOoXMBoHqN9bTxxI9t5Fh4WoVPeSkvBSlRRDS5fTwsDX2vqieuHchxK8Lh7fTvKrmwYBNng/h120/name.png) no-repeat 7px 8px;
    border:2px solid #dbdad9;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#dbdad9;
    width:225px;
    height:25px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;

  }
  .socialemailsubemail {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiqvXneO8kBzW_MGgSaI4crV6JwWZVFv4llJ8G6sWm_ZZiD2nJwq2yHGQpGcj_t06FCanIH1g2RlMtEY6AewWLl4zsqu-CjQyRQVdaqZ8eu06inAvVTjG5K84cRegeqwviMrb6Iwv7PPw/h120/email.png) no-repeat 7px 10px;
    border:2px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:#ddd;
    width:225px;
    height:25px;
    margin-top:10px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
     -moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;

    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;

    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;


  }
  .socialemailsubname:hover,.byard-socialemailsubemail:hover {
    border:2px solid #bebebe;
    box-shadow:0.5px 1.5px 2px #ddd;
     moz-box-shadow: 1px 1px 3px 0 #ddd;
-webkit-box-shadow: 1px 1px 3px 0 #ddd;
box-shadow: 1px 1px 3px 0 #ddd;
  }

  .social89button {
      box-shadow:none;
   background:#e74c3c;
    color:#ffffff;
    font-family:arial;
    font-size:20px;
    font-weight:bold;
    padding:10px 0px;
    text-decoration:none;
    margin-top:15px;
    margin-left:6px;
  width:280px;
border-radius: 8px;
  }
  .socialemailsubbutton:hover {
  opacity:0.9;
  }
  .socialemailsubbutton:active {
    position:relative;
    top:1px;
  }
.text5{
    margin-top:8px;
    color:#ddd !important;
    font-size:12px;
    padding-right:2px;
    padding-left:2px;
    font-family:verdana;
}
#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);
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
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;
}

4) Now save your template.

5) Go to Blogger Dashboard → Layout → Page Elements.

6) Add a HTML/JavaScript Gadget.

7) Paste below code in it.

<div id='socialsub'>
<div class="strip">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtfYogmMB9Clls1_ygQBB0nJHpm8YQHXUx29t3tt-IIRaxJrdSGZXPBWMi_AWCBA1te8d2pezzWJUDF5yowBep4QWPBxy0sX0xS_rCxmIR1dBypCvP7WhBxl2i3S3VZFckDsG87LQeguc/s1600/strip.png" height="5" width="100%"/>
</div>
<div class='socialsub-title'>
Sign Up In Seconds
</div>
<div class='socialemailsub'>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1' class='subsbox-form' method='post' target='_new'>
<input class='socialemailsubname' name='name' placeholder='Your Name' type='text'/>
<input class='socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
<br/> <br/>
<input class='social89button' type='submit' value='Sign Me Up!'/>
</form>
</div>
<br/>
<div id="flipboard_btrix">
<div class="text5">
<font size="2"> <font color="#bdc3c7"> .or you can connect through our social sites </font></font>
</div>
<br />
<center>
<ul class="flipboard_btrix">
<li><a href="http://www.pinteresr.com/USERNAME4" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAaJItMZOfIlw5-7DBt6t3AI5ylHIaAXO0GW3G7RY4SBFsT2BDlzwtgLxK1bVMhxZianN4SzNtF0N1D9fvx-odWTv8py6pRvt3d5PX_9t6Al0aAyz4-iiofSR2hK45tO0IRcS8QneLSHc/h120/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/USERNAME3" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ONF1Pctsuu1gpthMX2FsDKLUr_W5h78PX3J5abng_LaXhXPp_TKOstIn5u6YUaKSXD2GuBrdfftxlRcPnFe5itS7e3REoyVAEBY2dMNnz6f3811-AcdO903i4TSpsg4DV7EggnEXcFc/h120/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="G+ URL" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6LJ4GURANMuBIgP-KJ1f9hSgbjXZO2ByowXYEDrIgKwpDmKDxnOocgJwHGMXGayBP2oAT7WcxEFNu5GmybwMNCG6oqwUSTMYLGEsQWjefjWVzzR3wGvmQ6T7eK10rAvA36NO95jApzNA/h120/google+.png" title="Google plus" /></a></li>
<li><a href="http://twitter.com/USERNAME2" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaTohe7G8Zxnb7hbuE344m5rLnIUhTeUnkDwm-ThNLYgh5HUMfDVxxWDGIlrW-ezsvsAHhA0IpFcOFNffFpOGaoFQUGhkNqyftmak2unch95amJSTzPazfSJMIamBOVs1v33r9dsKDWM/h120/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/USERNAME1" target='blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZLs5zOYK0xnfENCjnQa-pV4LV1X2kF-RupUXNCPIetO3FTGgzjzMe2M7SRSa8HsVjsQl0FTRLXXeNN-VCJ7ofHPzsxz8WoepFyFh6oxePPklRlSV4fDye6_Ds1zoVVd6ArupVzFFIPc/h120/rss.png" title="Add RSS Feed" /></a></li>
</ul>
</center>
</div>
</div>

8) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it USERNAME1 with your Feedburner Username. 

♥ Replace it USERNAME2 with your Twitter Username. 

♥ Replace it USERNAME3 with your Facebook Username. 

♥ Replace it G+ URL with your Google+ Page url . 

♥ Replace it USERNAME4 with your pinteresr Username.

9) Save your Widget.

Read more…

Today, my friends, I'll give you a beautiful addition and rich on the definition,which similar to Add Facebook Like Box Widget With Hover Button Effect For Blogger. I will not dwell upon you, Follow explain the installation added

How To Add Pop Up Email Subscription Form

Written explanation 

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.   

<style type="text/css">
#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFODt6l60FlzDr9Lx_w_pkoOm75GA1vYHMkmXVAXMqln1QnP4yi0W5M4yga6dJnGGc-7oyhz14Y__DCRjwkZvbvPMObxzYUiVMU-m-Y-Mml70rwxXCioODawffaMsyqjP7MRllZ0zGmU/s1600/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif;   font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFODt6l60FlzDr9Lx_w_pkoOm75GA1vYHMkmXVAXMqln1QnP4yi0W5M4yga6dJnGGc-7oyhz14Y__DCRjwkZvbvPMObxzYUiVMU-m-Y-Mml70rwxXCioODawffaMsyqjP7MRllZ0zGmU/s1600/x.png',sizingMethod='scale'); }
#btntfollowForm  input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]-->
</style>
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGkE8hMAuxcoSUPIf4N8l6J5OUejSxXdJcSj9Hnx_wqoSLNAIAhub3SRoHW7nq97ZsmexOgGGzBlMsizmyb0pUuCBbbAKSlYCG8mmMnxl4O69jzzEHe_NeJmxm1gqDBplhSBtIj9PK5ww/s1600/subscribe_to_email.png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWP7Rt_vAtqfy5aMDQCJUuj6CAmF4jHD1MwY7DwH44K97ei-Z17XkV-rc9eW9r4Gu01WobGPmpRrRkksryVtxMxJ_Imd6oz-DH1onI_MmZMQNwM_IiK7LzyFVIfVmR8mQuDPVXS_3TKl0/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGf6GPMp7t8zx5wCv-GmEQV_9l-Sp7WKg7ZoxbBGsi6_325IzmZc-5DrEFD-TnOpONolfbEOC9fmzLnsJzZbZSkBOnpjmofZwU2EvRWK4KeDwfSngDBNcfoW_8e1MBxWn5ovOTB92Sxdk/s1600/email-icon.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="USERNAME" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://newth3.blogspot.com/" rel="dofollow" target="_blank">NEWTH3</a></div>
</div>
<script src="http://pc-tools-tips.googlecode.com/svn/wiki/ppp.wiki" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
    // Load dialog on page load
    //$('#subscribe-widget').modal();

    // Load dialog on click
    $('#subscribe-button .subscribe').click(function (e) {
        $('#subscribe-widget').modal();

        return false;
    });
});
</script>

4) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it USERNAME with your Feedburner User Name. 

5) Save your Widget.

Read more…

 

To add a beautiful day than its predecessor, How to Add Metro Style Social Widget for Blogger. And features several new features, namely YouTube and Linkedin and Pinterest. They additions very important to your blog

How To Add Metro Style Social Icons

Written explanation 

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it. 

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/USERNAME1 rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/USERNAME2></a></li>
<li><a class="gp" href="https://plus.google.com/USERNAME3"></a></li>
<li><a class="pi" href=http://pinterest.com/USERNAME4="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/USERNAME5="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/USERNAME6></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/USERNAME7="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

♥ Replace it USERNAME1 with your facebook Username.

♥ Replace it USERNAME2 with your twitter Username.

♥ Replace it USERNAME3 with your plus.google Username.

♥ Replace it USERNAME4 with your pinterest Username.

♥ Replace it USERNAME5 with your linkedin Username.

♥ Replace it USERNAME6 with your youtube Username.

♥ Replace it USERNAME7 with your feedburner Username. 

Save your Widget. 

Read more…

 

Today my friends give you a new topic Add new task, which helps the user to read the related topics and contribute to increase the number of your pages, I hope you like it

HOW TO ADD RELATED POSTS WIDGET TO BLOGGER

Written explanation   

1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

</head>

3) Now Paste the Code Shown Below just Before it.

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 10px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 15px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 10px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

<data:post.body/>

5) Now Paste the Code Shown Below just After it.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>

6) Now save your template.

Read more…