Tạo Sharebox trượt dọc cho Blog

By Karl Carsten -
 Share là hình thức mà độc giả chỉa sẻ bài viết trên blog của bạn cho những người bạn thân hoặc mạng xã hội. Nhờ vậy, blog của bạn sẽ được nhiều người biết đến. Nhưng làm sao để bạn được độc giả share bài viết của mình? Tất nhiên điều tiên quyết chính là bài viết của bạn phải hay, nhưng vị trí và hình thức của nút Share cũng là điều không kém phần quan trọng.

 Bài viết này Karl sẽ giới thiệu cho các bạn cách tạo một bộ share đẹp, rất tiện dụng. Bởi hiệu ứng trượt và ẩn hiện của nó. Hy vọng các bạn sẽ thích.

Bắt đầu thủ thuật:
  • Vào Mẫu >> Chỉnh sửa HTML, chèn đoạn code sau vào sau thẻ <head>

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
  • Save template lại
  •  Sau đó vào Bố cục và Tạo một Widget HTML rồi dán code sau vào:

 
<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("http://code-pro.googlecode.com/files/ceewave-dot-blogspot-dot-com.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#fff;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
                
            </script>
            <script type="text/javascript">
                (function () {
                    var s = document.createElement('SCRIPT'),
                        s1 = document.getElementsByTagName('SCRIPT')[0];
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'http://widgets.digg.com/buttons.js';
                    s1.parentNode.insertBefore(s, s1);
                })();
            </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
            <div class='floatbutton' id='stumbleupon'>
                <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </div>
            <div class='floatbutton' id='digg'>
                <a class="DiggThisButton DiggMedium"></a>
            </div>
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://ceewave.blogspot.com/" title="Copyrights Ceewave"><span class="getfloat">Get buttons</span></a>
            </div>
        </div>
    </div>
</div>


  • Lưu lại và tận hưởng thành quả
Xong! 


Comments

Post a Comment

Popular posts from this blog

Leveraging the Fast TikTok API on Apify for Efficient Data Scraping

By Karl Carsten -
Image
Introduction: In the world of social media data analysis, TikTok has emerged as a popular platform with a vast amount of user-generated content. To extract valuable insights from TikTok, developers and researchers often resort to web scraping. One efficient way to accomplish this task is by utilizing the Fast TikTok API on the Apify platform. In this article, we will explore the benefits and capabilities of leveraging the Fast TikTok API for data scraping on TikTok. Check the API here:  https://apify.com/novi/fast-tiktok-api
Read more

FAQ là gì?

By Karl Carsten -
Image
Trên một số website các bạn thường hay thấy menu FAQ hay FAQs , vậy FAQ là gì? FAQ là viết tắt của cụm từ Frequently Asked Questions dịch nôm na là các câu hỏi thường gặp, nó đưa ra những câu hỏi phổ biến nhất mà người dùng thường gặp sau đó có phần giải đáp cho các câu hỏi đó luôn bên dưới.
Read more