» » » Tiện ích mạng xã hội dạng tab ẩn cho website/blog

VIEW:


BÀI LIÊN QUAN

Thêm các mạng khác nhau cắm thực sự giúp mỗi trang web hoặc blog để tăng thuê bao và các tín đồ của họ. Vì vậy, nó là cần thiết cho mỗi Blogger để có lợi ích từ các plugin. Tôi đã xuất bản xã hội chia sẻ may và vật dụng thuê bao xã hội. Vì vậy, đây là một khác, đó là kết hợp trượt ra widget. Vài ngày trở lại tôi gửi về Facebook trượt ra Widget mà là thực sự tuyệt vời. Hôm nay tôi sẽ giới thiệu một phụ tùng tương tự như trước đó nhưng phần tuyệt vời đằng sau vụ tiện ích được nó chứa 4 mạng khác nhau Facebook, Google+, Twitter và Feedburner. Widget này xuất hiện trên phía bên phải của blog của bạn và đi ra trên di chuột. Nếu bạn muốn thêm vào sau đó làm theo các bước đơn giản dưới đây đưa ra.

 Thêm 4 trong 1 tiện ích xã hội trên Blog


  • Thứ nhất Mở Bảng điều khiển blogger của bạn >> Sau đó đi đến Layout Mục
  • Click vào nút Add a gadget
  • Sau đó mở HTML / JavaScript
  • Bây giờ Dán mã dưới đây vào tiện ích Blog
thangbme.com 
<style>
img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-left: 5px;    margin-top: 1px;  }
#STfeedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-left: -4px;  } 
#ST_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* right side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  } 
#facebook_right img {    position: absolute;    top: -2px;    left: -35px;  } 
#facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  } 
#twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    right: -254px;  } 
#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: 2px solid #0056a0;    width: 290px;    height: 250px; position: fixed; right: -294px;  }
#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: -304px;  } 
#feedburner_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  } 
#ST_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  } 
#ST_right img {    position: absolute;    top: -1px;    left: -101px;  }  /* left side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    right: -35px;  } 
#facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  } 
#twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    left: -254px;  }  #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: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    left: -294px;  } 
#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: -304px;  } 
#feedburner_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #ST_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #ST_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: #FF8000;    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://code.jquery.com/jquery-latest.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: -239 }, 500);  }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate(  { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 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: -294 },  500); }); jQuery("#feedburner_right").hover(  function (){ jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function (){ jQuery("#feedburner_right").stop( true, false).animate( { right: -304  },  500); }); }); </script>     
<br /> 
<div id="on">   
<div id="facebook_right" style="top: 8%;">     
<div id="facebook_div"> 
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtXgbc2l63X_G77jaZ0xoqZjk7ypruV0C_xD7foQ5sg93Qc1gO1S2o9qdC1NQ47gfLQ1QSGP5OSTd5FMKQgHEUCU_woUvzR03l0-OzZszQTiyQ3j-BPG-pZTx3yV524Gvsa6mAR_w25s_j/s101/fbfloat.jpg"/>      
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fblogtopviet&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 25%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvT4ttoinrfR4SYnklE14NFifpRueEvNG9bqcxzSPX75xNCKSlTQjTvnlqqUr-BEwF2AE8Flyg-TbIjDO_LkHcXTH3uhD6RQ6XKvR5Swbk0zPPjPbhTJwsaBObuNYu_IBT7Qm8buEtjr4/s101/twitter-icon.png" />
<div style="width:248px;font-size:8px;text-align:right;">       
<script type="text/javascript"> document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=blogtopviet&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E" ));</script> <a href="http://Safetricks.net/" target="_blank"></a></div></div></div></div><div id="on"><div id="google_plus_right" style="top: 42%;"><div id="google_plus_div">       
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nvs1cp9a1io6q4QTF2-mQAeAsHTcYfXfNUEub5od6U1g19VORS0Lzey3jLoxeRPwWPYXNkJUZGXQGDPJgIYB8VD_3DTfkLSUZzjfmZZWT0yBt-wS1Brm0whfVJb5kIWrZ_QbcKmiLiA/s101/googleplus.png"/> <div style="float: left; margin: 10px 10px 10px 0;">        
<div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/103461100461387836171"data-source="blogger:blog:followers"data-width="270"></div>          <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; var po = document.createElement('script'); po.type ='text/javascript'; po.async = true;  po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore( po, s); })();</script></div></div></div><div id="on"><div id="feedburner_right" style="top: 59%;">      
<div id="STfeedburner_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=Topviet247', '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="Safetricks" /><input class="submitbutton" type="submit" value="Submit" /></form></center>         
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRj-IckvJxXIreu3N1LkPJLid9Cj84Cn8vi8oGnLgjyRJRgHFK5X5aHYTyOGiQ99mMSUw2HU1TQ3RhIrQTlfoc5SppEfGxvDTQPDyAaTe8Dmo_JbtdKgdPU5wn32ciZiCScvGwNus0gBg/s101/subscribe-icon.png"/>        
</div></div>     
</div></div>

Bây giờ thay thế Tên người dùng vào các căn cứ của màu sắc phù hợp


  • blogtopviet Với Facebook Tên đăng nhập của bạn

  • blogtopviet với Twitter của bạn Tên đăng nhập

  • 103461100461387836171 với id Google+ của bạn

  • Topviet247 với id Feedburner mà đến 2 lần


Sau khi thay thế tất cả các tên người dùng nhấp chuột vào nút Save Gadget
Bây giờ mở trang chủ blog của bạn và xem tiện ích này 4 trong 1 live. Tôi hy vọng bạn thích bài này, nhưng nếu bạn có bất kỳ câu hỏi cảm thấy tự do để lại ý kiến ​​của bạn

0 nhận xét Blogger 0

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
 
ThangShare © 2016. All Rights Reserved. Design by: Thắng BME - Sitemap
Top