Fun For Việt Nam

Sự tiến bộ, phát triển truyền thông của các mạng xã hội  như G+, Facebook, twitter ...   ngày càng được mọi người quan tâm và tích hợp lên web, blog cá nhân. Vì thế người ta đã cho ra đời hàng chục các công cụ đẹp mắt về các dịch vụ chia sẻ xã hội này. Được biết các blogger hiện nay phụ thuộc phần lớn vào các mạng như Facebook, Google plus và twitter thu hút độc giả và hướng họ tới web hay blog cá nhân của mình. Và công cụ mình sắp hướng dẫn tới hi vọng có thể giúp các bạn tăng số người hâm mộ cũng như độc giả cho web,blog của mình. Và mình xin giới thiệu tên công cụ đó chính là  "Touch Me". Tại sao tên gọi của nó lại như vậy? Bởi vì  khi di chuột qua nó nhìn thật hấp dẫn khiến người ta tò mò và có nhiều khả năng mọi người sẽ di chuột qua các biểu tượng và nhấn theo!  Tiện ích sử dụng các nút từ các dịch vụ phổ biến như Google Plus, Facebook, Twitter và RSS và được mã hoá nó gọn gàng bằng cách sử dụng HTML và  CSS. Và sau đây, để đưa tiện ích lên blog của mình các bạn làm theo hướng dẫn của mình nha!

Demo

<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://trollfile.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;  
-moz-transition: ease-in 0.2s all;  
-o-transition: ease-in 0.2s all;  
-ms-transition: ease-in 0.2s all;  
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="LINK RSS CỦA BẠN" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="LINK GOOGLE PROFILE CỦA BẠN" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="LINK FACEBOOK CỦA BẠN" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="LINK TWITTER CỦA BẠN" rel='external nofollow' target='_blank' ></a>
</div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
CODE CỦA WIDGET
</b:if>

<b:if cond='data:blog.pageType == "item"'>
CODE CỦA WIDGET
</b:if>

<b:if cond='data:blog.pageType == "static_page"'>
CODE CỦA WIDGET
</b:if>

<b:if cond='data:blog.pageType != "static_page"'>
CODE CỦA WIDGET
</b:if>

<b:if cond='data:blog.url == "URL OF Selected Post"'>
CODE CỦA WIDGET
</b:if>

<b:if cond='data:blog.url != "URL OF Selected Post"'>
WCODE CỦA WIDGET
</b:if>

1. Vào Blogger > Mẫu > Chỉnh sửa HTML
2. Chọn Mở rộng mẫu Tiện Ích
3. Tìm widget muốn ẩn/hiện
4. Code của một widget nào đấy thường có dạng tương tự như sau:

<b:widget id='HTML' locked='false' title='Tên Widget' type='Profile'>
<b:includable id='main'>
Toàn bộ code của widget
</b:includable> 
</b:widget>

• Giờ chỉ việc chèn các code theo nhu cầu của các bạn theo mẫu sau , ví dụ như muốn ẩn widget tại Trang chủ ta làm như sau

<b:widget id='HTML' locked='false' title='Tên Widget' type='Profile'>
<b:includable id='main'>
 <b:if cond='data:blog.pageType == "item"'>
Toàn bộ code của widget
</b:if>
</b:includable> 
 </b:widget>

1. Vào chỉnh sửa HTML
2. Lưu template hiện tại trước khi thực hiện để nhỡ xảy ra sai sót còn cứu vãn được :D
3. Dán đoạn code sau thẻ đóng </body>


<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='hcvvn'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://trollfile.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://trollfile.googlecode.com/files/tlikebox.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                      
        $().KNFBFansPRO({
           timeout: 10,
            wait: 0,
            url: 'http://www.facebook.com/hcvvn',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>


hcvn các bạn thay bằng id Fanpage của các bạn 10 là thời gian đếm ngược đến khi Likebox tự đóng Code trên sẽ hiện hình ảnh phía trên như hình dưới

http://trollfile.googlecode.com/files/tlikebox.js
Có vài sự lựa chọn cho các bạn , các bạn chỉ việc chọn link tương ứng với hình phía dưới sau đó thay bằng http://trollfile.googlecode.com/files/tlikebox.js , chính xác hơn các bạn chỉ việc thêm số 1,2 hoặc 3 vào sau tlikebox

http://trollfile.googlecode.com/files/tlikebox1.js

http://trollfile.googlecode.com/files/tlikebox2.js

http://trollfile.googlecode.com/files/tlikebox3.js

4. Lưu lại và thưởng thức thành quả :D