Thích trang
    Trở thành fan của Tanchau123.blogspot.com

    Bạn muốn nhận tin tức mới nhất từ Tanchau123.blogspot.com? Hãy nhấn nút "Thích" bên dưới để nhận thông tin mới nhất từ chúng tôi trên Facebook.

T

a

n

chau123

Blog Giải Trí Tổng Hợp

trang chủ
Báo lỗi bài
    Báo lỗi thông tin bài viết

    Nhập thông tin báo lỗi vào ô bên dưới

22:49 ngày 15/5/12

Nút thích 4 trong 1 bật ra từ bên phải cho blogspot

Bài trước mình đã hướng dẫn các bạn tạo hộp tiện ích sử dụng hiệu ứng trượt, hôm nay mình hướng dãn các bạn thêm tiện ích nâng cấp của tiện ích cũ, nó bao gồm nút thích FB, twitter, g+ và feed. XEM DEMO





BẮT ĐẦU THỦ THUẬT:

1. Đăng nhập tài khoản Blogger của bạn.
2. Vào Thiết Kế => Phần Tử Trang => Thêm Tiện Ích => HTML/Javascript
3. Copy và Paste toàn bộ code sau vào :

<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#twitter_left {; 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: 180px; 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/AVvXsEh7_Whp3GguB7jPliQXau00qunZBOBRfC9Q-Y1MnHWPvALZcY0jS9GddQUdT_SbgwJMI2ViKQubJkmcYnGWAeRbxxMwGH2OMD0X62dsjpuDnXQFYfqU1cQsSV-_1_B4R-_sn4efHa7MJrk/s1600/helperblogger.com-facebook-icon.png" alt=""/> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlog-Gi%25E1%25BA%25A3i-Tr%25C3%25AD-T%25E1%25BB%2595ng-H%25E1%25BB%25A3p%2F179578118831562&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border=no; 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/AVvXsEhTPpPC1lj9BSa6v912g8Uxyq1A7FCJgx_DYleDEhamFhZcrgttOloyXXXSpnEHOa6913b7pOV_ms4PsPx4YHVrjV7lG_2QP9M6O49ROaM-7GX1HhEgUVsku8yFuvwAtjqbWKP3n8rEVlo/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('Abbott270293').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/AVvXsEiC9BaK8odflyFrpb7tfaehL-yIxry9INurqbEcZv6IDCVIS9q-qsDRb5wWsPpbPUM_LztkPpknTAZ2FgUHlaWkwkcO0QDY2IrolhCLpBfSQR04dGqXY6usrcyOznMJyCRMBh6vbJtQjQM/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;">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= tanchau123 ', '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="Blog Giải Trí Tổng Hợp" 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/AVvXsEhR01-YiLePimKdD_eFDdq3q7CJYsl6a7E1TFuWea8ZLoidIpiUbQsu2Jfy9sai9OfCD_YEVyiAVGyPJcLf5H5ofsJ1LlRwttk1LIkgvp-q4h5xTFMyTMtCZhN6DGmCG6M8UTjaUv83WLI/s1600/helperblogger.com-subscribe-icon.png"/> </div> </div> </div> </div>

CHÚ Ý: thay các đoạn code bên dưới cho phù hợp với blog / web bạn.

  • - Đổi  <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlog-Gi%25E1%25BA%25A3i-Tr%25C3%25AD-T%25E1%25BB%2595ng-H%25E1%25BB%25A3p%2F179578118831562&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border=no; overflow:hidden; width:200px; height:346px;" allowtransparency="true"></iframe> thành plugin Facebook của bạn.

  • - Đổi  Abbott270293 thành tên tài khoản Twitter của bạn.

  • - Đổi  tanchau123 thành ID Feedburn của bạn và  Blog Giải Trí Tổng Hợp thành tên trang blog/web bạn.

4. Lưu lại và thưởng thức.
Chúc các bạn thành công !!!

Theo cayxadenhoabinh

Mới cập nhật

10 nhận xét

· Thêm biểu tượng cảm xúc

  1. Cho mình hỏi lấy cái đoạn pờ lút facebook như nào vậy .

    Mình k hay sài facebook lắm nên chẳng bik j` lun .

    Còn cái IDFeed thì làm giống bài này :http://prozix.com/feedburner-id-la-gi-feedburner-la-gi/ àh

    Trả lờiXóa
    Trả lời
    1. Lấy plugin Facebook bạn VÀO ĐÂY xem hướng dẫn.
      Tạo ID Feed bạn VÀO ĐÂY tham khảo.

      Xóa
  2. Đã làm được THanh kiu bác :))

    Trả lờiXóa
  3. àh cho mình hỏi thêm cho nó sang bên <= thì làm thế nào :-?

    Trả lờiXóa
    Trả lời
    1. sang bên trái nhìn xấu lắm. Dời sang phải thì phải đổi code lại nhiều lắm @-)

      Xóa
  4. hì
    tại bên phải mình để nhìu thứ ùi nên thấy hơi vướng :-SS

    Thôi thì kệ nó vậy

    Trả lờiXóa
    Trả lời
    1. nảy mình trả lời rồi đó - giamdoc đó =))

      Xóa
  5. bik òi :P

    Khoe giám đốc hả :-t

    Trả lờiXóa
    Trả lời
    1. Tại nảy có người bạn nhờ thiết kế template giùm nên đăng nhập nick gmail khác mà ^^

      Xóa
  6. rõ ràng là khoe giám đóc :-t

    Miễn giải thik

    Giải thik lên phường b-(

    Trả lờiXóa