hhju: Share Box

Showing posts with label Share Box. Show all posts

Home > Posts filed under Share Box

Sunday, 9 June 2013

How To Add Flipper Sharing Widget Below Every Post In Blogger

Hi Friends , Today i am going to share about how to add flipper sharing widget below every post in your blogger and website. This widget make your backlinks for sites and increase your traffic.

How To Add Flipper Sharing Widget Below Every Post In Blogger

Go To Blogger.com > Design > Edit Html

Find <data:post.body/> Using

CTRL+F

Copy the code below and paste it just after <data:post.body/> tag.

<style>

        /*--------TricksTeacher Flipper Sharing Widget ------*/

        .flipper a {

        display:block;

        height:48px;

        width:48px;

        padding:0 4px;

        float:left;

        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5HtE-ri47oRFVt64ne9zhOALP80nWW9gQJa9DjdXhgPg-jWmkmbUBSTGh5LvpUiLpjXVJxBV-tL0jgfyZSS64v3QAbNam5wglYMkAklDC3469MTxGLuuPQTaNG0Vcdtqrn85dXwN61JzD/s1600/tricksteacher.png) no-repeat;

        -webkit-transition: ease-in 0.15s all;

        -moz-transition: ease-in 0.15s all;

        -o-transition: ease-in 0.15s all;

        -ms-transition: ease-in 0.15s all;

        transition: ease-in 0.15s all;

        cursor:pointer;

        }

        .flipper a.googleplus {

        background-position: 0px -348px;

        }

        .flipper a.googleplus:hover {

        background-position: 0px -406px;

        }

        .flipper a.pinterest {

        background-position: 0px -464px;

        }

        .flipper a.pinterest:hover {

        background-position: 0px -522px;

        }

        .flipper a.delicious {

        background-position: 0px 0px;

        }

        .flipper a.delicious:hover {

        background-position: 0px -58px;

        }

        .flipper a.digg {

        background-position: 0px -116px;

        }

        .flipper a.digg:hover {

        background-position: 0px -174px;

        }

        .flipper a.stumbleupon {

        background-position: 0px -812px;

        }

        .flipper a.stumbleupon:hover {

        background-position: 0px -870px;

        }

        .flipper a.technorati {

        background-position: 0px -928px;

        }

        .flipper a.technorati:hover {

        background-position: 0px -406px;

        }

        .flipper a.twitter {

        background-position: 0px -928px;

        }

        .flipper a.twitter:hover {

        background-position: 0px -986px;

        }

        .flipper a.facebook {

        background-position: 0px -232px;

        }

        .flipper a.facebook:hover {

        background-position: 0px -290px;

        }

        .flipper a.reddit {

        background-position: 0px -580px;

        }

        .flipper a.reddit:hover {

        background-position: 0px -638px;

        }

        .flipper a.rss {

        background-position: 0px -696px;

        }

        .flipper a.rss:hover {

        background-position: 0px -754px;

        }

        .Pleaseshare{

        margin:10px 0px;

        color:#333333;

        font-weight:bold;

        font-size:20px;

        font-family:sans-serif;

        }

        </style>

        <div class='flipper'>

        <b:if cond='data:blog.pageType == "item"'>

        <div class="Pleaseshare">

        Please Share it! :) </div>

        

        <a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1 it :>'/>

        

        <a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>

        

        <a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>

        

        <a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>

        

        <a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>

        

        <a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>

        

        <a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>

        

        <a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :>'/>

        

        <a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Bookmark plz :>'/>

        </b:if></div>

        <div style="clear:both"/>

Then save it and enjoy :)

Sunday, 2 June 2013

Floating Social Media Slide out Widget For Blogger

Haryana Marble House Share Box 20:28

Floating social media slide out stick to right site of your blogger. When you mouse over then you will see a slide out option. This widget has created completely with CSS and when you scroll down then the widget will also scroll down up to edge of your footer bar.

Go to Blogger.com

Select your Layout.

Click on "Add a Gadget" then select "HTML/JavaScript".

Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

Live Demo

<style type='text/css'>
.tricksteacherFSS a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.tricksteacherFSS {height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px}
.tricksteacherFSS a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuud6izRif_f4WisEgk1ReIlCyvzq3-PO5omb03Nh3pO5vn_GTqCc5PkHFGE_bpYn9ws29D2jNAG7zO4n4qIZnoqzBA-8w6K4-DddcWrT7CZRnSEPTnAlgiyiuNueOy2Fq0DpNx16_V8dj/s320/BS+FSS.png) no-repeat;overflow:hidden}
.tricksteacherFSS a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px}
.tricksteacherFSS a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
.tricksteacherFSS a:hover span{visibility:visible;position:absolute;top:0;left:25px}
.tricksteacherFSS a.BSfacebook{background-position:3px -15px;top:20px;background-color:#526ca5}
.tricksteacherFSS a.BStwitter{background-position:3px -36px;top:40px;background-color:#75ddfe}
.tricksteacherFSS a.BSrss{background-position:3px -55px;top:60px;background-color:#f6a858}
.tricksteacherFSS a.BSmail{background-position:3px -75px;top:80px;background-color:#c1c1c2}
.tricksteacherFSS a.BSfacebook:hover{background-color:#526ca5;background-position:5px -15px}
.tricksteacherFSS a.BStwitter:hover{background-color:#75ddfe;background-position:5px -36px}
.tricksteacherFSS a.BSmail:hover{background-color:#c1c1c2;background-position:5px -75px}
.tricksteacherFSS a.BSrss:hover{background-color:#f6a858;background-position:5px -55px}
.tricksteacherFSS a.BSfacebook:active{background-color:#294a90}
.tricksteacherFSS a.BStwitter:active{background-color:#40b5fe}
.tricksteacherFSS a.BSmail:active{background-color:#909090}.tricksteacherFSS a.BSrss:active{background-color:#f37526} /*widget by www.tricksteacher.blogspot.com */
</style>
<div class='tricksteacherFSS'> <a class='BSfacebook' href='https://www.facebook.com/asadtariq786' onclick='dcsSetVar('WT.z_iLinks','Facebook','WT.z_iLinks_actionoffer','exnav-soc','WT.z_iLinks_targetcampaign','src-gs');' target='_blank' title='Facebook'><span>Join Us on Facebook</span></a> <a class='BStwitter' href='https://twitter.com/asadtariq77' onclick='dcsSetVar('WT.z_iLinks','Twitter','WT.z_iLinks_actionoffer','exnav-soc','WT.z_iLinks_targetcampaign','src-gs');' target='_blank' title='Twitter'><span>Tweet Us On Twitter</span></a> <a class='BSrss' href='/feeds/posts/default' onclick='dcsSetVar('WT.z_iLinks','RSS','WT.z_iLinks_actionoffer','invite-follow','WT.z_iLinks_targetcampaign','src-gs');' target='_blank' title='RSS Feed'><span>Visit Our rss feed</span></a> <a class='BSmail' href='mailto:asadtariq77@gmail.com' onclick='dcsSetVar('WT.z_iLinks','Email','WT.z_iLinks_actionoffer','invite-email','WT.z_iLinks_targetcampaign','src-gs');' target='_blank' title='Email'><span>Newsletter</span></a></div>

    Replace asadtariq786 with your Facebook name.
    Replace asadtariq77 with your twitter name.
    Replace asadtariq77@gmail.com with your email address.

Thursday, 2 May 2013

How To Add Social Bookmarking Running Trucks in Blogger

Haryana Marble House Share Box 22:05

Today i am share Social Bookmarking Widget. This Widget is very important for any website\blog. It always gives a very good impression to any blog and also your visitor like to play it and they also also want to see it many time

How To Add Running Trucks in Blogger

<div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="http://www.facebook.com/software786" target="blank"> <abbr title="Follow us at Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw8C4dGMe2lYEU1Dy0Db_7fUQEY6LRTFdmi7BDRCa9lahw-b9GRa3GMwtqpaJAwXxwpUPfpU1-tzNtmTKuhbwuCnocy1yam8PWordWlTtc2l9e5TWAMju4jCx6ULyPZ6TRpdwuL9J9eUY0/s1600/tricks+teacher.png" width="120px" height="100px"/> </abbr> </a> <a href="http://feeds.feedburner.com/blogspot/USDlLP" target="blank"> <abbr title="Subscribe Our Feeds"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimiUvzC4wNKQXwY7DjeYddGp0ElPs7p6mLo7Fmgp9h_nPQgpV7TqSXE6bWG2h5n3NZ5Zz95L_K4MrhSQz4HPScb1uFz139gQ8wyAgo37AWN57u3IVs3oHZdct5frwbL3WMwd-gpmBql-D6/s1600/tricks+teacher.png" width="120px" height="100px"/> </abbr> </a><a href="http://twitter.com/ASADTARIQ77" target="blank"> <abbr title="Follow Us on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGeOg5MarrK1_7R4KW7aaNEq72ytpruj1C-FbhfYg4fcxfcoF-w2McDxBCVktiXAcENnWL1so9V7L3-sNfexe8QIq1eE1MGQcbk4mTKg57mN3S-MnvE8eslG4eX6mkbAK43e16sALqbHor/s1600/tricks+teacher.png" width="120px" height="100px"/> </abbr> </a> </marquee></div>

Save your Widget.

    Replace it software786 with your Facebook Username
    Replace it blogspot/USDlLP with your Feed Burner Username
    Replace it ASADTARIQ77 with your Twitter Username

Saturday, 27 April 2013

4 in 1 Social Subscribing Slide Out Widget For Blogger

Haryana Marble House Share Box 02:32

Today I am share 4 in 1 Social Subscribing Slide Out Widget For Blogger.
If you don't have a space for your social subscribing widgets then don't worry.
I an share Hide and show them out with smooth j Query slide out hover effect.
This 4 in 1 slide out widget contains a floating facebook like box,your recent tweets, Google +1 button and feed burner email subscription.

Go to blogger.com
Go to Layout
Add a Gadget
Click HTML Javascript
Paste the code

<div dir="ltr" style="text-align: left;" trbidi="on">
<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;
}

#kakinetwork_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;
}

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

#kakinetwork_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;
}

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

#kakinetwork_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 src="http://apis.google.com/js/plusone.js" type="text/javascript"></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>
<br />
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4QD5SwFNpktijZ_ZnKfbQmg45_mFnRfPE43WzcGKNwuWsBzRM6UjOCO4vP6ePq_jWMEsJ4T279XMQdVYcd5KYjRPjMq8DeGR0D7P2ApkTXKJi-vCfCenNf2mHlHVnLWDA-LS-ifgTtcp/s1600/tricksteacher.blogspot.com-facebook-icon.png" />
   <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fasadtariq786&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;">
   </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/AVvXsEjKBaPWB2suy7Iy5QlZOIWpcib_WHZ5Q3CAkmTupxtyKZyWbue2YPTbU6A_VTOD4MwB799XsDonJOj-6gRVnDhCLte9pkRyajOCQUtMJB4OTbtr_qQ9UVKiFm2aGLwKKxR2_qx1I9qEBgJg/s1600/tricksteacher.blogspot.com-twitter.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('asadtariq77').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/AVvXsEiZ-gUzsVA-Uro8Bl4WB7vs0fSKgbDBw1DZNtcR6JEbi75cnHjtxB36wswPsov2xBHGee3sez5V-JWW2NZlAMbxjO8EZOIO5FzpZp385CXT7ESeK-WyqbFJLA6i9EU9NBEphMBe0IY7eGIq/s1600/tricksteacher.blogspot.com-google+.png" />
   <br />
<div style="float: left; margin: 10px 10px 10px 0;">
<g:plusone expr:href="data:post.url" size="tall"></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" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/USDlLP', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..." /><input name="uri" type="hidden" value="hblogger" /><input class="submitbutton" type="submit" value="Submit" />
    </form>
</center>
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmBHm7QPpe_jyr3KxoB_RFMCdj0B-_J2NrC_Z1J_whUUudTQhXCmrV8oOk3niDbgpJ8PSkW03_UgBNMvt3cuI3BUKTAALy_hOpHCeIfV_t5Sw9FjAIVtU4CKS-W-6XEfVAHufMuNnST1u/s1600/tricksteacher.png" />
   </div>
</div>
</div>
</div>
</div>

replace asadtariq786 with your facebook fanpage username.
Replace asadtariq77 with your twitter username.
Replace blogspot/USDlLP with your feedburner username.

Monday, 22 April 2013

How to Ad Floating Facebook, Google+ Twitter Buttons For Blogger

Haryana Marble House Share Box 22:40

How to Ad Floating Facebook, Google+ Twitter Buttons For Blogger

Go To Blogger.com
CliCk layout
Click Add a Gedget
Choose a HTML/JavaScript widget
Paste the following code inside it,

/*-------tricksteacher------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:229px;
    top:0;
    left:0;
        z-index:100
}

#mbtsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:220px;
    width:55px;
    margin:0 0 0 5px;
}
</style>

<br />
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0">
    <tbody>
<tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding: 5px 0 2px 0;"><div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like font="" href="" layout="box_count" send="false" show_faces="false"></fb:like>
    </td>
    </tr>
<tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding: 5px 0px;"><g:plusone expr:href="data:post.url" size="Tall">
    </g:plusone></td>
    </tr>
<tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding: 5px 0 0px 0;"><a class="twitter-share-button" data-count="vertical" data-via="Asadtariq77" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </td>
    </tr>
<tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding: 0px 0 0px 0;"><div style="color: #dddddd; font-size: 10px; text-align: center;">
<a href="http://tricksteacher.blogspot.com/2013/04/how-to-ad-floating-facebook-google.html" style="color: #dddddd;" target="_blank">Widgets</a></div>
</td>
    </tr>
</tbody></table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

   </div>

Replace Asadtariq77 with your Twitter username. And Save your widget

Now Go To Blogger.com
template
Edit HTML
search (ctrl+f) for this,

</head>

Just above it paste the following code,

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

And save it

Friday, 19 April 2013

Vertical Floating Bar Social Sharing Widget

Haryana Marble House Share Box 08:05

I am Share Vertical Floating Bar Social Sharing Widget
How to add Vertical Floating Bar Social Sharing Widget

First Go to Blogger Dashboard > Template
Click Layout
Click Add a Gadge
Click HTML/JavaScript
past code and save it

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-50256c9955de3d1e"></script>

Click on below Add to Blogger button
Choose your blog and add click on Add Widget button

<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-50256cd215773286"></script>

Click on below Add to Blogger button
Choose your blog and add click on Add Widget button

<div class="addthis_toolbox addthis_floating_style addthis_16x16_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-50256cf13ad74b07"></script>

Click on below Add to Blogger button
Choose your blog and add click on Add Widget button

Friday, 5 April 2013

Add Social With Email Subscription Widget Below Your Blog Posts

Haryana Marble House Share Box 03:41

Go to tricksteacher.blogspot.com and select your desired blog.Get to the template section of your blog.Click on EDIT HTML and click PROCEED from the next box that appears
Search for <data:post.body/> . (Using CTRL+F)
There may be 4 similar code in your template. Search the 3rd time this code appears and paste the code below just after the 3rd <data:post.body/> .
Save and enjoy !

<b:if cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.bestsoftz-email-style{
padding:7px 15px 7px 5px;
color:#666;
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;
}
.bestsoftz-email{
background:url(http://2.bp.blogspot.com/-oHGqJ1etW_M/UDRi0T2OkXI/AAAAAAAAAyw/voPqdzqf-F4/s1600/MBT+Stay+Connected+Email.png) no-repeat 0px 13px ;
width:300px;
padding:10px 0 0 55px;
float:bottom,left;
font-family: "Trebuchet MS",sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.bestsoftz-submit-button{
color:#000000;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #00ff01;
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%);
}
#tgemailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 5px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #c4c4c4;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:auto;
margin:10px 0;
}
#tgemailwidget-outer:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
#tgemailwidget-outer td{
padding:3px 0;
}
</style>
<center>
<div id='tgemailwidget-outer'>
<div id='emailwidget'>
<p style='color:#333; font-weight: bold; font-size: 23px;font-family: "Georgia MS",sans-serif; margin:0px 0px 5px 0px; '>Subscribe And Get Latest Updates Free !</p>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<div class='bestsoftz-email'>Enter Your Email Below !
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bestsoftz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bestsoftz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='bestsoftz-email-style' name='email' onblur='if (this.value == "") {this.value = "Enter your email�";}' onfocus='if (this.value == "Enter your email�") {this.value = ""}' type='text' value='Example@example.com'/>
<input alt='' class='bestsoftz-submit-button' title='' type='submit' value='Submit'/>
</form></div>
</td>
<td style='border:none; margin: 40px 0px 0px 0px; padding: 40px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://www.facebook.com/asadtariq77' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-GI9nIBrkkmuDreyjHhQH-r_TTcQCZxThBRQi_Zu6MAajEDbO83ifwfDUnFrKVxA48dfIrxKingaPudRxSDAMY76wAtB-nZwwJKNTAegxZ_h6nJH4QcNBGSGk4-8lt7byANskkcsGkg/s1600/1.png'/></a>
<a href='http://twitter.com/asadtariq78' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwlvl8zjV2FmftjoeklMynPgEF-prkP85T46TvuI9c4MeuX0uxUmQQWcjTj91cItyfVNUI81nKqOm3cCn3iP_IarxuGPrE7SiQ2Q989k6ELPLkClVDoVgxygIztb7QwNy6oFydFlZlioI/s1600/4.png'/></a>
<a href='https://plus.google.com/106080909507696381306' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAb5_J3-6CFhGYvmYawQ379ObBWOucsJOClveCfRBoFyHoCraVo6xd9hyx_WWKmtWtFZ4dwGNLMAuwzNKHh9Q0VrOBU9GyAJTytb8dBS9T6PlIOYZz__8lJ2m1-rfOYQvI01aHDAN4RBA/s1600/2.png'/></a>
<a href='http://www.stumbleupon.com/stumbler/asadtariq786/' rel='nofollow' target='_blank' title='Follow Us On Stumble Upon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE90IuoJ267ZB6fVRtJ89U0_RrGxOTUKjW5xZ4lCV34645reXuchEkwPxxxFyeDjcmTG39Nuv20rphPVtWhbICCzZqpZhwdVXx1UY7Dbr09_6-_rKNlez63T06UHfZ9DiwjWiC6JTqajI/s1600/4.png'/></a>
</td>
</tr>
</tbody></table>
</div></div>
</center>
</b:if>

Note : This widget will not appear in the homepage !

Customization.

Change the codes highlighted in RED with your Social and RSS profile links respectively

If you liked this article, Please Share This !!

hhju

Blog Archive

Sunday, 9 June 2013

How To Add Flipper Sharing Widget Below Every Post In Blogger

Sunday, 2 June 2013

Floating Social Media Slide out Widget For Blogger

Thursday, 2 May 2013

How To Add Social Bookmarking Running Trucks in Blogger

How To Add Running Trucks in Blogger

Saturday, 27 April 2013

4 in 1 Social Subscribing Slide Out Widget For Blogger

Monday, 22 April 2013

How to Ad Floating Facebook, Google+ Twitter Buttons For Blogger

How to Ad Floating Facebook, Google+ Twitter Buttons For Blogger

Friday, 19 April 2013

Vertical Floating Bar Social Sharing Widget

Friday, 5 April 2013

Add Social With Email Subscription Widget Below Your Blog Posts

Change the codes highlighted in RED with your Social and RSS profile links respectively

Find us on Facebook

Premium Sponsor

Find us on Google Plus

Labels

Popular Posts

Followers