BlogTariff


Hello my readers here we come up with another fantastic simple Social sharing buttons widget for blogger. This widget especially designed for bloggers and launched in new look for 2012. Adding this widget can help in increasing not only traffic also numerous subscribers. In this widget you can find Email subscription box, RSS feed button, Google plus button, Twitter button, Facebook button. Versatile widget crafts your blog in connecting with readers and the new visitor helps interacting with subscribers. In this tutorial BlogTariff educate you for adding of versatile widget for blogger.

How to add Versatile Widget for blogger?

Step 1
Sign into your blogger account
Click on “Design (Layout in the new blogger interface)”
Search for code
</head>
After finding the code copy the below code and paste above to it

    <style type='text/css'>
    .sub-box{
    width: 270px;
    background: #fff;
    padding: 2px 5px 7px 7px;
    border: 2px solid #000;
    border-radius: 15px;
    }
    .sub-box:hover{
    border-style:dashed; 2px solid: #389af2;
    }
    .followlinks h1{
    font-family:Cabin Condensed;
    font-weight: bold;
    color: #000;
    padding: 0px 0px 2px 40px;;
    font-size:17px;
    }
    .followlinks ul{
    font-family:Cabin Condensed;
    font-weight: bold;
    }
    .followlinks ul li{
    float:left;
    width:90px;
    padding-left:40px;
    margin:0 0 0 5px !important;
    line-height:35px !important;
    }
    .followlinks ul li a{
    font-size:20px !important;
    text-decoration:none;
    font-weight:normal;
    }
    .followlinks ul li.btfrss{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJotJ635rRqBsIy1j_oNze66EapfeXo3jJA9sRUtkEPqhcJZfH2r_I_UpOhyphenhypheneEUKgfxMwbkXClV5PrY8MdtzEE-FTC0zTTJIFsakCt2iu9iyHCeiLtxGALr4Wpb8yGvPunGA9AgLEEIUZu/s760/rss-blogtariff.png) no-repeat scroll left center transparent;
    }
    .followlinks ul li.btfgoogleplus{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2hDyQgDiNqssaPtfGTSydKjj_u0KiTHnNouL8v5nNePFwILKaI1lQbDeYJQOcOlC6gwGjevtoNkt_m3rJzn6hzFKELJD1HBMX26BvdGVowLMAy0Dl7aEh8CN8QEiaM65cmvhC48U0ptU3/s760/googleplus-blogtariff.png) no-repeat scroll left center transparent;
    }
    .followlinks ul li.btftwitter{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzlDIeukKfMpSA2ZhhFTYGh0csWT4En_M9JqLOrnVmWTk_4i9f0AGuFYN7RyUQZgPSU0k0Upkth3ChlQALlvV_Uh1WLR9LQQJe64fzwbW6GiWm4ziNsHh_Y26vqI6xaDXqj7N8mgAWzWMp/s760/blogtariff-twitter.jpg) no-repeat scroll left center transparent;
    }
    .followlinks ul li.btffacebook{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4iiyXWJ5U3oFgw86-AupT_LgIM3ftRqrgi3zjh0Yl452ULfn5ty1p4r7mOrDPqJ0Xk4m3et9e87KzmlZjtxKp4J1KbhJS85pd-3pKoZ3T4uGerqceBu-J1i4dgvcUYkihUOIv5QPGUGMm/s760/facebook-blogtariff.png) no-repeat scroll left center transparent;
    }
    form.emailform{
    margin:5px 0 0;
    display:block;
    clear:both;
    }
    .emailtext{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIaTEPivwiJcXdHd66lnE0vCg4c6X9fh4WQNHQ2aXFRGn5B5hUEtrLcLvyAShY0_ouU2-WAJO4ZRYpK0z7mnP9qlqUzLKe8_XrrVqQ7tpFGG7mYqHP8HltD2FO6PfIQ0rmrPdBiE4AxFH/s760/blogtariff-mail.jpg) no-repeat scroll 4px center transparent;
    padding:7px 15px 7px 35px;
    color:#444;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #D3D3D3;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
    width: 142px;
    }
    .emailtext:focus{
    outline: none;
    }
    .sub-button{
    color:#444;
    font-weight:bold;
    text-decoration:none;
    padding:6px 10px;
    border:1px solid #D3D3D3;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -goog-ms-border-radius: 5px;
    border-radius: 5px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    }
    .sub-button:hover{
    background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
    }</style>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Cabin+Condensed::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })(); </script>

After successful pasting the above code now, “Save the Template”
Step 2:
Click on “Design (Layout in the new blogger interface) – Page Elements”
Click on “Add a Gadget”
Select “HTML/Javascript” widget
Copy the below code and paste in it
<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Upadtes</h1>
<ul>
<li class='btfrss'><a target='_blank' href='http://feeds.feedburner.com/blogtariffcom'>RSS</a></li>
<li class='btfgoogleplus'><a target='_blank' href='https://plus.google.com/108581316248547169217'>Google+</a></li>
<li class='btftwitter'><a target='_blank' href='https://twitter.com/#!/blogtariff'>Twitter</a></li>
<li class='btffacebook'><a target='_blank' href='http://www.facebook.com/BloggerTariff'>Facebook</a></li>
</ul>
</div>
<br />
<a href="http://www.blogtariff.com"/a>
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogtariff', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">

<input type="hidden" value="blogtariff" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="SignUp" title='' alt='' /></br>
<a href="http://www.blogtariff.com">Get This widget</a>
</form>
</div>
</div>

Customization:

Change http://feeds.feedburner.com/blogtariff with your Feedburner URL in red
Change https://plus.google.com/108581316248547169217 with your google plus page URL
Change https://twitter.com/#!/blogtariff with your twitter username URL
Change http://www.facebook.com/pages/Blogtariffcom with your facebook page URL
Change blogtariff with your feedburner name in two conditions.
After successful adding code and necessary Corrections now, “Save the Widget” preview your experiment done on blog.

Appreciation:

If you enjoyed this post let know your views via comments and favor us on Subscribing to US

Posted by
Share to:

Post a Comment Gmail ID

Do not Try to Add Spam Comments

Subscribe to: Post Comments (Atom)
 
Top