Thứ Hai, 12 tháng 11, 2012

Nút share dạng trượt bật tung 6 trong 1

Thủ thuật mới cùng sự trải nghiệm mới về blogspot - Nút share dạng trượt bật tung 6 trong 1 khi rê chuột vào. Thủ thuật này chưa ai đăng bài hướng dẫn nên nhân tiện hôm nay ngẫu hứng chia sẽ luôn với mọi người. Sau khi làm thành công hãy để lại vài lời bình để mình có động lực chia sẽ tiếp nhá. Thủ thuật kết hợp giữa CSS Javascript hiển thị tốt trên hầu hết mọi trình duyệt nên các bạn cứ yên tâm mà áp dụng.

Trước khi rê chuột vào
Sau khi rê chuột


BẮT ĐẦU THỦ THUẬT:
1. Đăng nhập Blogger.
2. Vào Mẫu => Chỉnh sữa HTML => Tiếp tục => Mở rộng mẫu tiện ích.
3. Thêm code sau vào trước thẻ </body>
<div class="shr_ss shr_publisher shareaholic-show-on-load" style="position: fixed;">
<div class="bookmarksDiv fanWrapperViewport"><div class="item1 fanIcon shrFan-313" style="left: 10px; bottom: 10px;"><a style="width:44px ;height:44px; display:block  " href="https://www.shareaholic.com/api/share/?title=4+in+1+slide+out+widget&amp;link=http%3A%2F%2Fhb-demo05.blogspot.com%2F&amp;notes=&amp;short_link=&amp;shortener=bitly&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=b87f5899d80a5edce8b5e55f58542ef0f&amp;source=Shareaholic-Publishers&amp;template=&amp;service=313&amp;ctype=" rel="nofollow" target="_blank" class="external" orig_title="Send via Shareaholic Mail"></a></div><div class="item2 fanIcon shrFan-78" style="left: 10px; bottom: 10px;"><a style="width:44px ;height:44px; display:block  " href="https://www.shareaholic.com/api/share/?title=4+in+1+slide+out+widget&amp;link=http%3A%2F%2Fhb-demo05.blogspot.com%2F&amp;notes=&amp;short_link=&amp;shortener=bitly&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=b87f5899d80a5edce8b5e55f58542ef0f&amp;source=Shareaholic-Publishers&amp;template=&amp;service=78&amp;ctype=" rel="nofollow" target="_blank" class="external" orig_title="Add to Tumblr"></a></div><div class="item3 fanIcon shrFan-5" style="left: 10px; bottom: 10px;"><a style="width:44px ;height:44px; display:block  " href="https://www.shareaholic.com/api/share/?title=4+in+1+slide+out+widget&amp;link=http%3A%2F%2Fhb-demo05.blogspot.com%2F&amp;notes=&amp;short_link=&amp;shortener=bitly&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=b87f5899d80a5edce8b5e55f58542ef0f&amp;source=Shareaholic-Publishers&amp;template=&amp;service=5&amp;ctype=" rel="nofollow" target="_blank" class="external" orig_title="Post to Facebook"></a></div><div class="item4 fanIcon shrFan-7" style="left: 10px; bottom: 10px;"><a style="width:44px ;height:44px; display:block " rel="nofollow" target="_blank" class="external" orig_title="Post to Twitter"></a></div><div class="item5 fanIcon shrFan-304" style="left: 10px; bottom: 10px;"><a style="width:44px ;height:44px; display:block  " href="https://www.shareaholic.com/api/share/?title=4+in+1+slide+out+widget&amp;link=http%3A%2F%2Fhb-demo05.blogspot.com%2F&amp;notes=&amp;short_link=&amp;shortener=bitly&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=b87f5899d80a5edce8b5e55f58542ef0f&amp;source=Shareaholic-Publishers&amp;template=&amp;service=304&amp;ctype=" rel="nofollow" target="_blank" class="external" orig_title=" Google+"></a></div><div class="item6 fanIcon shrFan-309" style="left: 10px; bottom: 10px;"><a style="width:44px ;height:44px; display:block  " href="https://www.shareaholic.com/api/share/?title=4+in+1+slide+out+widget&amp;link=http%3A%2F%2Fhb-demo05.blogspot.com%2F&amp;notes=&amp;short_link=&amp;shortener=bitly&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=b87f5899d80a5edce8b5e55f58542ef0f&amp;source=Shareaholic-Publishers&amp;template=&amp;service=309&amp;ctype=" rel="nofollow" target="_blank" class="external" orig_title="Post to Pinterest"></a></div><div class="fanRotor"></div><style type="text/css">.bookmarksDiv div{background-image:url(//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark/sprite.png) !important;}</style></div></div>
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
4. Cuối cùng lưu template lại và xem kết quả.
Chúc các bạn thành công !!!

Không có nhận xét nào:

Đăng nhận xét