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:





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ẻ