Tạo Nút Chia Sẻ Mạng Xã Hội Trong Bài Viết Trên Blogspot

Ngày nay mạng xã hội đang là mục tiêu hàng đầu mà các doanh nghiệp hướng tới nhằm quảng bá hình ảnh, giới thiệu những sản phẩm, dịch vụ và tăng lượng khách truy cập cho Website, Blog của mình.  Tạo nút chia sẻ mạng xã hội trên Blog, website không những giúp người đọc có thể chia sẻ bài viết cho mọi người mà còn làm tăng tính tương tác cho Blogspot tạo điều kiện rất tốt cho SEO. Tiếp nhận những phản hồi cho phép doanh nghiệp có thể “lắng nghe” tiếng nói của khách hàng để có sự điều chỉnh kịp thời cho phù hợp với nhu cầu của họ. 

Sau đây chúng tôi sẽ hướng dẫn các bạn tạo nút chia sẻ bài viết trên Blogspot lên các mạng xã hội phổ biến hiện nay như: Facebook, Google Plus, Twitter và STUMBLE UPON.

 

  • Bước 1: Đăng nhập vào Blogger: Chọn Mẫu —> Chỉnh sửa HTML

Tạo nút chia sẻ mạng xã hội trong bài viết trên blogspot

  • Bước 2: Trong phần chỉnh sửa code. Nhấn tổ hợp phím Ctrl + F tìm thẻ </b:skin>
  • Copy đoạn code sau vào trước thẻ ]]></b:skin>

#SocialShareBar {

      float: left;

      border-top: 1px solid #eaeaea;

      border-bottom: 1px solid #eaeaea;

      width: 610px;

      margin-bottom: 20px;

      margin-left: -10px;

      margin-top: 10px;

      position: relative;

      clear:both;

      z-index: 9999;

    }

    .social-heading h5 {

      float: left;

      padding-right: 20px;

      padding-top: 13px;

      text-transform: uppercase;

      font-weight: bold;

      margin: 0px;

      padding-left: 10px;

      font-family: &#39;Lora&#39;,Arial,Helvetica,Geneva,sans-serif;

      font-size: 15px;

      color: #555555;

    }

    .twitter-tweet, .facebook-like, .google-plus, .comment-counter {

      float: left;

      border-left: 1px solid #eaeaea;

      padding-left: 18px;

      padding-top: 15px;

      padding-bottom: 10px;

      width: auto;

      height: 22px;

    }

    .comment-counter a {

      text-decoration: none !important;

    }

    .share-bubble{

      background: url(http://4.bp.blogspot.com/-dvG3kQrRsJc/UoKM0HSkjUI/AAAAAAAAAbw/jZnkyNLnS9I/s1600/Comments.png) no-repeat;

      height: 22px;

      min-width: 30px;

      float: left;

      margin: 4px 5px 0px 5px;

    }

    .google-plus {

      margin-left: 20px;

    }

 

  • Bước 3: Tiếp tục dán đoạn code sau vào giữa hai thẻ <b:if cond=’data:blog.pageType == &quot;item&quot;’>   và   <data:post.body/>:

 

<div style=’background:#f5f5f5; border:1px solid #ddd;-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;padding:5px;box-shadow:3px 3px 3px #CCCCCC;’>

        <table border=’0′>

            <tr>

                <td>

                    <!– Twitter –>

                    <a class=’twitter-share-button’ data-count=’horizontal’ data-lang=’en’ expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ href=’http://twitter.com/share’ rel=’nofollow’/>

                    <b:if cond=’data:post.isFirstPost’>

                        <script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’>

                        </script>

                    </b:if>

                </td>

                <td>

                    <!–Facebook–>

                    <iframe allowTransparency=’true’ expr:src=’&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;’/>

                </td>

                <td>

                    <div style=’margin-right:25px;’>

                        <!– STUMBLE UPON –>

                        <script expr:src=’&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url’/>

                    </div>

                </td>

                <td>

                    <div style=’margin-right:5px;’>

                        <!– GOOGLEPLUS –>

                        <g:plusone expr:href=’data:post.url’ size=’medium’/>

                    </div>

                </td>

                <td>

                    <!– AddThis Button BEGIN –>

                    <div class=’addthis_toolbox addthis_default_style ‘>

                        <a class=’addthis_counter addthis_pill_style’/>

                    </div>

                    <script src=’http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28′ type=’text/javascript’/> <script type=’text/javascript’> var addthis_config = { ui_cobrand: &quot;My Tutorials Cafe&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; }

                    </script>

                    <!– AddThis Button END –>

                </td>

            </tr>

        </table>

    </div>

 

  • Bước 4: Click Lưu mẫu chờ Blogspot lưu lại những thay đổi. Tắt trình duyệt và khởi động lại sau đó bạn hãy vào Blog của mình kiểm tra thành quả. Sẽ thấy xuất hiện những nut chia se mang xa hoi phía dưới tiêu đề mỗi bài viết như hình phía dưới:

Tạo nút chia sẻ mạng xã hội trong bài viết trên blogspot

 

Bạn có thể đọc thêm những bài viết rất hữu ích khác của chúng tôi giúp: Chặn quảng cáo trên Firefox, Chrome, Cốc cốcchèn biểu tượng cảm xúc trên Facebook

Rate this post

Bình Luận