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 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>2. Thêm css vào template:
<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>
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}3. Thêm đoạn code vào nơi bạn muốn:
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}
<div class="socials">
<ul class="reset">
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/F8dqt.png" alt="" /></a></li>
<li><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src="http://i.imgur.com/Wy83E.png" alt="" /></a></li>
<li><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src="http://i.imgur.com/xy0Ln.png" alt="" /></a></li>
<li><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src="http://i.imgur.com/3XABb.png" alt="" /></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/sizrF.png" alt="Facebook" /></a></li>
<li><a expr:href='"http://twitthis.com/twit?url=" + 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ẻ
vn greenzone
October 3, 2011 at 8:21 PM
@D.N.H Bác chia footer ra làm 2 , 1 cái hảng cáo 468x60 rồi để nó kế bên :1)
Linh Dung
October 4, 2011 at 10:16 AM
Yolks quên liên kết của mình rồi à!:1)
vn greenzone
October 4, 2011 at 12:27 PM
@Linh Dung Lúc sửa lại blog thì em quên :))
vn greenzone
October 4, 2011 at 12:27 PM
@Huỳnh Nhật Hà Để cho đọc giả dễ tìm thôi mà :))
Hody chan
October 6, 2011 at 12:51 PM
oh, cai' nay` minh ap dung dc 1 tg r`, cung dc @@~
vn greenzone
October 6, 2011 at 12:56 PM
@Hody chan uhm`, hodychan đi đầu mà hihi
Neyurt
October 7, 2011 at 7:33 PM
Khá hay.
vn greenzone
October 9, 2011 at 6:52 PM
@Pika Rock Nhập số điện thoại là như sau +84 9 số còn lại là xong mà
Huỳnh Nhật Hà
October 10, 2011 at 5:02 PM
Ha ha lúc trước được, bây giờ k được, có lẽ bác gúc đổi policy hay sao ta, may mà lúc trước từng đăng ký demo một phát, bây giờ xài quá đã.
Linh Dung
October 10, 2011 at 8:55 PM
Yolks cho cái hình nền đứng yên xem sao? hì
vn greenzone
October 11, 2011 at 9:45 PM
@Quốc Vịnh Cám ơn sự chân tình của bạn , đến lúc đó tớ sẽ thêm sidebar vào