5 in 1 Slide out social follower box

Posted by on
Như các bạn cũng biết thì Social follower box là một thành phần quan trọng mà hầu hết các website và blog đều có, một vấn đề đặt ra là có rất nhiều Social follower box mà không gian của blog thì lại hạn chế. Vì vậy, hôm nay, mình giới thiệu với các bạn wiget Social follower box 5 trong 1, được thiết kế ẩn hiện giúp tiết kiệm diện tích. Wiget này bao gồm nhiều loại social follower box(Facebook, Twitter, Google +, YouTube và subscribe).

#Cách làm

1. Đăng nhập Blogger
2. > Bố cục > Thêm tiện ích > HTML/Javascrip
3. > Dán code dưới vào
<style>
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {
width:245px;
height:260px;
overflow:hidden;
}
#twitter_div {
width:260px;
height:238px;
overflow:hidden;
}
#google_plus_div {
width:320px;
height:143px;
overflow:hidden;
}
#knfeedburner_div {
width:300px;
height:97px;
overflow:hidden;
}
#youtube_div {
width:300px;
height:97px;
overflow:hidden;
}
#facebook_right {
z-index:10005;
border:2px solid #3c95d9;
background-color:#fff;
width:245px;
height:260px;
position:fixed;
right:-249px;
}
#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:260px;
height:238px;
position:fixed;
right:-264px;
}
#twitter_right_img {
position: absolute;
top: -2px;
left: -35px;
border: 0;
}
#google_plus_right {
z-index: 10003;
background-color: #006ec9;
border:2px solid #006ec9;
border-top:2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right:2px solid #0056a0;
border-left: hidden;
width:320px;
height:107px;
position:fixed;
right:-323px;
}
#google_plus_right_img {
position: absolute;
top:-2px;
left:-33px;
border:0;
}
#youtube_right {
z-index:10002;
background-color:#fefefe;
border:2px solid #ff0000;
border-top:2px solid #5b5b5b;
border-bottom: 2px solid #5b5b5b;
border-right:2px solid #5b5b5b;
border-left: hidden;
width:301px;
height:97px;
position: fixed;
right: -303px;
}
#youtube_right_img {
position:absolute;
top:-2px;
left:-33px;
border: 0;
}
#feedburner_right {
z-index:10001;
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;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script src="https://harunzoki.googlecode.com/svn/trunk/FB+Twitt+Goog+Yout+Rss.js" type="text/javascript"></script>

<br />
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQvJgNZAgcn1iibCkViSADb3mS_Fa4pss2YYmwi9ZFojj1Px6EYzfa-9-A3ajd7K7Zvj-Ca655zktuGC1fT0_DWj5YgAq5Rd9agnPwOe08kbkiDrLOyl1H6juh4vzY0xs4WVpAkL4eKuk/s1600/FB.png" />
<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fkhanh98blogspotcom&amp;locale=en_GB&amp;width=190&amp;connections=10&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=260"></iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 25%;">
<div id="twitter_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBZ8dQHUDbFfx-__dpP8sMD-5Dy-om6Ugwbpzx8jrA1PXzorn-DPRWiIimQLTgvWoQCgkdsoBEfIepVEMZFJpV6l83E44F_eHFpmSk0LJVxoVkR_LWwWwv12wmVa_jsO1Xkv67P85GsU/s1600/TW.png" id="twitter_right_img" />
<script src="http://script-ot.googlecode.com/svn/twitterbox.js" type="text/javascript"></script>
<br />
<div id="twitterfanbox">
</div>
<a class="twitter-timeline" data-dnt="true" data-widget-id="503186053398683649" href="https://twitter.com/Chelskivn29">Tweet của @Chelskivn29</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 42%;">
<div id="google_plus_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuAnuVlM2h2Y-7b5DJGs5DBmveGUJm0El8AKd2FBLkvwTvxXCyHOgw5FWoi62bq4NuHjEU8dM6MR0EU3ixuEtfRss293qsGcnoBMlYCSOvn-PhFMx_64Q8O4DAwFBvmeJvrnes-z6VyY/s1600/G+.png" id="google_plus_right_img" />
<br />
<div style="float: left; margin: 1px 0px 0px 2px;">
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" type="text/javascript"></script>
<!-- Place this tag where you want the widget to render. -->
<br />
<div class="g-person" data-href="https://plus.google.com/+QuốcKhánhBùi2641998" data-layout="landscape" data-rel="author" data-showcoverphoto="false" data-showtagline="false" data-theme="dark" data-width="335">
</div>
</div>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXqhfYARQh_BdwUgbXV67traC2Z1bkqsdo7wKtMIBUD2-DZ3wr2h6m6YlPyy8Z3mEJUncqoKlfGmgG84w5jPz3bk66kj1Y4RXIdqKITfWE2VUCCdv1W9NMBtkABCrovJJijwUay4kD5q0/s1600/You.png" id="youtube_right_img" />
<br />
<div style="float: left; margin: 1px 0px 0px 2px;">
<iframe frameborder="0" scrolling="no" src="http://www.youtube.com/subscribe_widget?p=htv2channel" style="border: 0; height: 105px; width: 300px;"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style="top: 76%;">
<div id="knfeedburner_div">
<center>
<br />
<h4 style="color: #f66303;">
Subscribe And Get Free E-Mail</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogkhanh98', '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 E-Mail Here...';}" onfocus="if (this.value == 'Enter Your E-Mail Here...') {this.value = '';}" type="text" value="Enter Your E-Mail Here..." /><input name="uri" type="hidden" value="blogkhanh98" /><input class="submitbutton" type="submit" value="Submit" /></form>
</center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjov0W-ourit0OE-9MyNIw8LLAinxKn2GQDE4M0qedVcC2O_Cu6pJ1Xbkhz4YRKHE__HwpyVCzd1MKTkbKqefrFZKbO6kGFfjtGuZvP9GLmRAzBeK8CvdkVpPfcg1yIEgDft-NcsqE9g/s1600/Sub.png" id="feedburner_right_img" />
</div>
</div>
</div>
Lưu ý:

  • Thay khanh98blogspotcom thành ID trang fanpage của bạn
  • Thay đoạn màu lục thành code Twitter Wiget của bạn, code này với mỗi tài khoản Twitter là khác nhau - bạn có thể xem cách lấy code TẠI ĐÂY.
  • Thay htv2channel thành tên kênh YouTube của bạn
  • Thay blogkhanh98 thành ID Feedburner của bạn - Nếu chưa có, bạn có thể xem cách đăng kí TẠI ĐÂY.

4. > Save.





Subscribe And Get Free E-Mail

Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.