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

Cách chuyển hướng Blog cũ sang Blog mới trong Blogspot

By Karl Carsten -
Image
Cái này mình thấy nhiều người thắc mắc nên viết để chia sẻ luôn. Giả sử bạn đang viết blog bằng dịch vụ của Google là Blogger, một buổi sáng đẹp trời bạn tỉnh dậy và cảm thấy: "Ôi, Blogger không được!!". Thế là bạn mua ngay một cái Hosting, Domain để chuyển sang dịch vụ khác (Wordpress, Joomla, Drupal...).
Read more