MOBILYBLOCKS - Chia sẻ lên các mạng xã hội

Với tiêu chí nhỏ gọn , có nhiều Social Media không phù hợp với blog bạn. Bạn nghĩ sao khi có 1 Social Media vừa nhỏ gọn , vừa có hiệu ứng tuyệt đẹp như trong:

Demo

Quả thật hiệu ứng mượt mà , không thể tả nổi với hiệu ứng chuyên nghiệp của nó

Để có thể sử dụng lâu dài , phòng khi host của demo die nên Yolks có 1 file lưu trữ các bạn Download tại đây.

Đọc kỹ hướng dẫn trước khi dùng.

1.Thêm .js và teamplate:

Đầu tiên tìm thẻ </head> và thêm trước nó :

<script src='http://dl.dropbox.com/u/39436129/jquery.js' type='text/javascript'></script>
<script src='http://playground.mobily.pl/assets/demo/blocks/js/mobilyblocks.js' type='text/javascript'></script>
<script type="text/javascript">
$(function(){
    $('.socials').mobilyblocks({
        trigger: 'click', //Hover hoặc Click
        direction: 'counter', //clockwise hoặc counter (Cùng hoặc ngược chiều kim đồng hồ
        duration:500,//Thời gian hiển thị vòng tròn (Số càng nhỏ, hiển thị càng nhanh)
        zIndex:50,//Giá trị z-index của thẻ li
        widthMultiplier:1.15//Phạm vi của vòng tròn sau khi click
    });
});
</script>

2. Thêm css vào template:
Tìm ]]></b:skin> thêm vào trước nó:

.socials {float:left;display:block;width:32px;height:32px;background:url(http://i.imgur.com/lmSYJ.png) no-repeat;cursor:pointer;position:relative;margin:14px 0 0 30px}
ul.reset,ul.reset li {display:block;list-style:none;padding:0;margin:0}
ul.reset li {position:absolute}
ul.reset li a {outline:none}

3. Thêm đoạn code vào nơi bạn muốn:

<div class="socials">
  <ul class="reset">
    <li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/F8dqt.png" alt="" /></a></li>
    <li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img src="http://i.imgur.com/Wy83E.png" alt="" /></a></li>
    <li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img src="http://i.imgur.com/xy0Ln.png" alt="" /></a></li>
    <li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img src="http://i.imgur.com/3XABb.png" alt="" /></a></li>
    <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/sizrF.png" alt="Facebook" /></a></li>
    <li><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/KFgDs.png" alt="" /></a></li>
  </ul>      
</div>  

Các bạn có thể chèn ở:
Chèn vào sau:

<div class='post-footer-line post-footer-line-1'>

Or

<div class='post-footer-line post-footer-line-2'>

Or

<div class='post-footer-line post-footer-line-3'>

Nếu ko có các bạn cứ để dưới

<data:post.body/>

Chúc các bạn vui vẻ