BlogTariff


In last post BlogTariff explained here about how to add a Slideout Floating Facebook Like box to your blogger blog. Now BlogTariff is going to reveal the another good tricks for Google plus, Twitter, and also email subscription box. As you know already how social media buttons are playing a vital role in publicizing for your blog and how increasing subscribers to your blog. Here BlogTariff presents how to add Facebook, Twitter, Google plus and Email subscription box “Four Sliding Floating widgets” to your blogger blog.
Actually these four widgets are work when you on mouse over on them they slideout to show the widget information to your visitors.

Let’s start to add the above four key sliding floating social media buttons

Sign into your blogger blog --> Go to “Design Tab” --> Edit HTML -->
Before you do this just back up your blogger blog template, if any thing goes wrong in pasting you can reuse it.

Search for code </body> and paste the below code before it

    <style>
    img,a {
        border: 0;
    }


    #on {
        visibility: visible;
    }


    #off {
        visibility: hidden;
    }


    #facebook_div {
        width: 196px;
        height: 340px;
        overflow: hidden;
    }


    #twitter_div {
        width: 246px;
        height: 353px;
        overflow: hidden;
    }


    #google_plus_div {
        width: 152px;
        height: 97px;
        overflow: hidden;
        margin-left: 50px;
        margin-top: 10px;
    }


    #knfeedburner_div {
        width: 300px;
        height: 97px;
        overflow: hidden;
        margin-top: 5px;
        margin-left: -4px;
    }


    #blogtariff_div {
        width: 300px;
        height: 97px;
        overflow: hidden;
    }/* right side style */#facebook_right {
        z-index: 10005;
        border: 2px solid #3c95d9;
        background-color: #fff;
        width: 196px;
        height: 353px;
        position: fixed;
        right: -200px;
    }


    #facebook_right img {
        position: absolute;
        top: -2px;
        left: -35px;
    }


    #facebook_right iframe {
        border: 0px solid #3c95d9;
        overflow: hidden;
        position: static;
        height: 360px;
        left: -2px;
        top: -3px;
    }


    #twitter_right {
        z-index: 10004;
        border: 2px solid #6CC5FF;
        background-color: #6CC5FF;
        width: 246px;
        height: 353px;
        position: fixed;
        right: -250px;
    }


    #twitter_right_img {
        position: absolute;
        top: -2px;
        left: -35px;
        border: 0;
    }


    #google_plus_right {
        z-index: 10003;
        background-color: #F2F2F2;
        border: 2px solid #006ec9;
        border-top: 2px solid #0056a0;
        border-bottom: 2px solid #0056a0;
        border-right: 2px solid #0056a0;
        border-left: hidden;
        width: 152px;
        height: 97px;
        position: fixed;
        right: -154px;
    }


    #google_plus_right_img {
        position: absolute;
        top: -2px;
        left: -33px;
        border: 0;
    }


    #feedburner_right {
        z-index: 10003;
        background-color: #fefefe;
        border: 2px solid #5b5b5b;
        border-top: 2px solid #5b5b5b;
        border-bottom: 2px solid #5b5b5b;
        border-right: 2px solid #5b5b5b;
        border-left: hidden;
        width: 300px;
        height: 97px;
        position: fixed;
        right: -303px;
    }


    #feedburner_right_img {
        position: absolute;
        top: -2px;
        left: -33px;
        border: 0;
    }


    #blogtariff_right {
        z-index: 10003;
        border: 2px solid #303030;
        background-color: #fff;
        width: 300px;
        height: 97px;
        position: fixed;
    }


    #blogtariff_right img {
        position: absolute;
        top: -2px;
        left: -101px;
    }/* left side style */#facebook_left {
        z-index: 10005;
        border: 2px solid #3c95d9;
        background-color: #fff;
        width: 196px;
        height: 353px;
        position: fixed;
        left: -200px;
    }


    #facebook_left img {
        position: absolute;
        top: -2px;
        right: -35px;
    }


    #facebook_left iframe {
        border: 0px solid #3c95d9;
        overflow: hidden;
        position: static;
        height: 360px;
        right: -2px;
        top: -3px;
    }


    #twitter_left {
        z-index: 10004;
        border: 2px solid #6CC5FF;
        background-color: #6CC5FF;
        width: 246px;
        height: 353px;
        position: fixed;
        left: -250px;
    }


    #twitter_left_img {
        position: absolute;
        top: -2px;
        right: -35px;
        border: 0;
    }


    #google_plus_left {
        z-index: 10003;
        background-color: #006ec9;
        border: 2px solid #006ec9;
        border-top: 2px solid #0056a0;
        border-bottom: 2px solid #0056a0;
        border-left: 2px solid #0056a0;
        border-right: hidden;
        width: 152px;
        height: 97px;
        position: fixed;
        left: -154px;
    }


    #google_plus_left_img {
        position: absolute;
        top: -2px;
        right: -33px;
        border: 0;
    }


    #feedburner_left {
        z-index: 10003;
        background-color: #fefefe;
        border: 2px solid #5b5b5b;
        border-top: 2px solid #5b5b5b;
        border-bottom: 2px solid #5b5b5b;
        border-left: 2px solid #5b5b5b;
        border-right: hidden;
        width: 300px;
        height: 97px;
        position: fixed;
        left: -303px;
    }


    #feedburner_left_img {
        position: absolute;
        top: -2px;
        right: -33px;
        border: 0;
    }


    #blogtariff_left {
        z-index: 10003;
        border: 2px solid #303030;
        background-color: #fff;
        width: 300px;
        height: 97px;
        position: fixed;
    }


    #blogtariff_left img {
        position: absolute;
        top: -2px;
        right: -101px;
    }


    .box-title1 {
        border: 1px solid #ddd;
    /*border-radius*/
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    /*box-shadow*/
        -webkit-box-shadow: 5px 5px 5px #CCCCCC;
        -moz-box-shadow: 5px 5px 5px #CCCCCC;
        box-shadow: 5px 5px 5px #CCCCCC;
        padding: 10px;
        margin: 10px 0;
    }


    .enteryouremail {
        background: #fff !important;
        border: 1px solid #d2d2d2;
        padding: 0px 8px 0px 8px;
        color: #a19999;
        font-size: 12px;
        height: 25px;
        width: 165px;
    /*border-radius*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 0px;
    }


    .submitbutton {
        background: #F2F2F2;
        border: 1px solid #F66303;
    /*box-shadow*/
        -webkit-box-shadow: 3px 3px 3px #666;
        box-shadow: 3px 3px 3px #666;
        font: bold 12px Arial, sans-serif;
        color: #000000;
        height: 25px;
        padding: 0 12px 0 12px;
        margin: 0 0 0 5px;
    /*border-radius*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
    </style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
    <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>


    <div id="on">
     <div id="facebook_right" style="top: 18%;">
      <div id="facebook_div">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_dZm1wa8F4cXaCxS88a1XCkFVJ_pV8b-xg00Vcv7m1uBmqDQUNLdOpN2yQqlm3I6wngDnDGhul_OLQYV4X6muOwT5jHTu4lfpU3vDg6FHFigdFh1zONBoqOEUnou99-NRcTMkWoC6eY/s300/Blogtariff.com-facebook-icon.png" alt=""/>
       <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebook Fan page ID name&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">
       </iframe>
      </div>
     </div>
    </div>
    <div id="on">
     <div id="twitter_right" style="top: 35%;">
      <div id="twitter_div">
       <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOmBMf6F3wViyytqsQiXBXL-N0WRzjAkf_Afia4XHFAfmFFiNgT5Sav_-RhyphenhyphenHdty6Vnx0vzlWiIpWLfABX0xfr5d1g1Mvg3B7izrk7y12lgJOoU56cE8EwTciHcfYqEV0IvAoEvXeRnso/s300/Blogtariff.com-twitter-icon.png"/>
       <script src="http://widgets.twimg.com/j/2/widget.js"></script>
       <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('BlogTariff').start();</script>
      </div>
     </div>
    </div>
    <div id="on">
     <div id="google_plus_right" style="top: 52%;">
      <div id="google_plus_div">
       <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_CmehCHhcSe5myzIAGprnjQ0Wy9SNo6gB-PtMid2yC44IJXv6Fw-nZMdNAxGvKlIqbEnXQVbeIBqU2TtiGkpCf6cuqbLtKzQN_1VN4szyXTrxWA-C8YTsgkrsG5vSp3Jv-KIpOKSk93o/s300/Blogtariff.com-google-plus-icon.png"/>
       <div style="float:left;margin:10px 10px 10px 0;">
        <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
       </div>
      </div>
     </div>
     <div id="on">
      <div id="feedburner_right" style=" top: 69%;">
       <div id="knfeedburner_div">
        <center>
        <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
         <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="Your Feed Burner ID" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
        </form>
        </center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWl-2rNlJRa1VeNnzNREsBTULgU2Q95-dd9WV163qZmtGcKuP9aj7hGtPKqZVqN-LRp3a1AYA8jbXQWK8tEOsrGL4GBclLYa_rB1feWWPprLajb_GQ7TqhkU7KJATnQZl4g577k5rlDf8/s300/Blogtariff.com-subscribe-icon.png"/>
       </div>
      </div>
     </div>
    </div>
After successful pasting the above code, change the "Your Feed Burner ID" with your Feed burner ID and  change "Facebook Fan page ID name" with Your fan page name. Save the template and preview your blog template…just watch your widgets how its looks…good……You’ve done it successfully.
Don’t forget to leave your valuable words on this blog….we are always respects your views.

Posted by
Share to:

Post a Comment Gmail ID

Do not Try to Add Spam Comments

Subscribe to: Post Comments (Atom)
 
Top