-->

Button like 4 in 1 turn out from the right for blogspot include (facebook, twitter, google+ and feed)

Today I guide you to add upgrades of old gadgets, it includes buttons like  Facebook, twitter, google+ and feed View detailed code here:  ht...


Today I guide you to add upgrades of old gadgets, it includes buttons like Facebook, twitter, google+ and feed
View detailed code here: http://home.kenhdaihoc.com/2012/05/n...-ben-phai.html


<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 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/AVvXsEiSpb-n_hHeZ5Nfg8nhSscBgwyKlxk6f8YQR2oiGZIfFM8lP8y0FZk5q8dy-GKBLA-YeO_-5SJC73GzPqG2O3_nruhRj3FIZn-vrb1seY1P0RMVf_1bxbef4Ggd4Aq31AERWJCq-snPb9o/s1600/helperblogger.com-facebook-icon.png" alt=""/> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FChiasekienthuc%2F158792620889846&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></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/AVvXsEiefRB5LsxU_RAv3HPAXm3VWKVbOVDDyzF1HkiHwbnJKya1M3DbfjTlHrq0p44kaw3WrCYvin0SoSAJTkXz3TjcSZppbrB_IyMBkohaXL6cx4ZBrWYaJh-wo-c7e9LBzlADsYc2eO6I1qY/s1600/helperblogger.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('traibavi2311').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/AVvXsEiOd7HoyZtVm4IpJ3zBZV7sHoWhO3to5oZnTKmh-mnF_1h6qMlRe6WiFmWa8mQL-fUtdYoCynq1GSKWQ1vbyQ7JMSKZh2yO_E1qAQwIumEzVRPn9Nh1wHS9LRWtCTq1jaEziCmRiiJkXXc/s1600/helperblogger.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=tin24h/sLdT', '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 == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/><input value="kenhdaihoc" 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/AVvXsEgqUMjhixgRsC9Na83FDZ6U6Fo3pSwXj8N4JJbL5wVA_i8GpuWMe29cgvTtS-01keJzwvA31DS1OMZzaqXIXAUDYU6Uyy71Jtb8MnfYYirT3slE7swRngfh3bWbKNSliY3URLBx_A-54I0/s1600/helperblogger.com-subscribe-icon.png"/> </div> </div> </div> </div>














































Ctrl + F to find and edit the information below offline Note: I highlighted below you change your address with offline



  • kenhdaihoccom change the name of your facebook page
  • contact_kdh change with your Twitter account name
  • kenhdaihoc Change your feed ID.

No comments: