Tăng truy cập Blog từ mạng xã hội bằng Socializer Widget

Trong thế giới blog, giao thông là vấn quan trọng bậc nhất đối với mỗi chủ sở hữu blog. Bởi vì nếu chúng ta không có lưu lượng truy cập vào website của mình thì đồng nghĩa là không có gì. Có hàng ngàn cách để tăng lưu lượng truy cập vào blog. Một trong những cách hữu hiệu nhất mà tôi sẽ giới thiệu sau đây là thúc đẩy các phương tiện truyền thông xã hội để tăng lưu lượng truy cập.

Vì sao phải thúc đẩy các phương tiện truyền thông xã hội? Bởi vì ngày nay hầu hết người dùng internet đang sử dụng các trang web mạng xã hội như Facebook, Twitter và Google Plus chiếm đến gần 78% thời gian online của họ. Nắm bắt được điều này, đây là một cơ hội tuyệt vời cho mỗi blogger có thể phát triển được lưu lượng truy cập website từ các trang mạng xã hội này. Như tôi đã từng nói với bạn rằng, tôi đang làm việc hết sức mình để chia sẽ những hiểu biết của tôi trên trang này. Đây là một số cách của tôi sẽ giúp bạn nhận được lưu lượng khách truy cập lớn nhất từ các trang web mạng xã hội. Sử dụng một widget box có sẵn trong các tiện ích blog, và đặt tên nó là "Socializer Widget". Tiện ích này được tích hợp các nút mạng xã hội lớn nên nó rất cần thiết cho mỗi blog.

                     Đọc thêm:   Làm sao để nhúng bài viết trên Google Plus vào Blogger

Socializer Widget là gì ?

Đây là một tiện ích tuyệt vời mà có thiết kế bắt mắt. Ở phía trên của widget này nó hiển thị một nhóm phong cách, chúng ta có thể thay đổi tiêu đề tùy ý của mình. Trong phần thứ hai là "Nút xã hội hóa" có ba nút like trang web được hiển thị như like Twitter, like Facebook và like Google Plus. Các nút này dành cho người dùng ấn thích hoặc twitering bài viết hiện tại của bạn. Phần thứ ba là "Follow Us" và ở đây là để thêm một nút like trang Facebook cộng đồng hay trang Fan hâm mộ và tiếp theo là nút Twitter để người dùng theo. Dòng thứ ba, là các nút "Chia sẻ" cho các mạng xã hội khác. Với các nút chia sẽ mạng xã hội rộng lớn được tích hợp chung vào một tiện ích sẽ giúp trang web đón nhận ngập tràn các lượng truy cập từ những mạng này.

Nơi tốt nhất để đặt tiện ích này là dưới chân mỗi bài viết. Vì thế, nó sẽ phù hợp hơn cho thiết kế giao diện trang này. Widget này có màu nền khói trắng nhưng khi một người nào đó rê chuột vào nó thì sẽ được thay đổi thành màu trắng với hiệu ứng tuyệt đẹp. Với thiết kế này sẽ làm tăng kích thích thị giác của người đọc. Và dĩ nhiên sẽ lôi kéo người đọc ấn vào nút thích, chia sẽ hay làm theo nó.

Cách cài đặt Socializer Widget trong Blogger

Sau khi tìm hiểu qua tiện ích này, bây giờ chắc chắn rằng bạn rất muốn cài đặt nó trong blog của mình rồi. Cách cài đặt rất dễ dàng, hãy làm theo hướng dẫn này

• Đăng nhập vào Blogger - Chọn Mẫu - Chọn Sao lưu mẫu

• (Trước tiên hãy copy mẫu cũ ra sao lưu ở Notepad hoặc Word trước khi sữa chữa nhằm đề phòng các trường hợp bất trắc có thể xãy ra, lúc này có thể dán mẫu cũ vào và khôi phục lại)

• Ấn vào Chỉnh sửa HTML và Click chuột vào bất cứ nơi nào trong hộp đó và nhấn CTRL + F

• Copy mã dưới đây vào hộp tìm kiếm và ấn Enter                                                                                                           

                                                                          <data:post.body/>

Sau khi tìm được mã ngắn ở trên, tiến hành copy đoạn mã dài phía dưới và dán phía sau mã ngắn ở trên đó

Mã để dán vào:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

 <style>

#weblog-socializer {

    width: 500px;

    height: 240px;

    border: 1px solid #99FFFF;

    -webkit-box-shadow0px 7px 9px rgba(50, 50,
50, 0.75);

-moz-box-shadow: 0px 7px 9px
rgba(50, 50, 50, 0.75);

    box-shadow: 0px 7px 9px rgba(50, 50, 50,
0.75);

    background: #99FFFF;

    -transition: background 0.50s;

    -webkit-transition: background 0.50s;

    -moz-transition: background 0.50s;

    margin-bottom: 10px;

    overflow: hidden;

}

#weblog-socializer:hover {

    background: #FF9999;

}

#weblog-socializer-title {

    text-align: center;

    border: 1px solid #FF9999;

    font-size: 20px;

    background: #FF9999;

    font-weight: 2000;

    font-family: oswald;

    padding: 5px;

    color: #fff;

}

#SocializeIt {

    float: left;

    border-top: 1px solid #eaeaea;

    border-bottom: 1px solid #eaeaea;

    margin-left: -10px;

    margin-top: 10px;

}

.tweet, .like, .plusone,

.stumbleit {

    float: left;

    border-left: 1px solid #99FFFF;

    padding-left: 18px;

    padding-top: 15px;

    padding-bottom: 10px;

}

.g-plusones {

    margin-left: 20px;

}

.heading {

    float: left;

    padding-right: 20px;

    padding-top: 15px;

    text-transform: uppercase;

    font-weight: bold;

    margin: 0px;

    padding-left: 30px;

    font-family: oswald;

}

#followus, #share {

    float: left;

    border-bottom: 1px solid #99FFFF;

    margin-left: -10px;

}

.likeonfb, .followontwitter,

.sharing {

    float: left;

    border-left: 1px solid #99FFFF;

    padding-left: 10px;

    padding-bottom: 10px;

    padding-top: 15px;

}

#sw-credits {

    float: right;

    padding: 3px;

    font-size: 10px;

    margin-right: 10px;

}

</style>

   <script type='text/javascript'>

(function (_0x2162x1,
_0x2162x2, _0x2162x3) {

    var _0x2162x4 =
_0x2162x1[&#39;getElementsByTagName&#39;](_0x2162x2)[0];

    if
(!_0x2162x1[&#39;getElementById&#39;](_0x2162x3)) {

        _0x2162x1 =
_0x2162x1[&#39;createElement&#39;](_0x2162x2);

        _0x2162x1[&#39;id&#39;] =
_0x2162x3;

        _0x2162x1[&#39;src&#39;] =
&#39;//platform.twitter.com/widgets.js&#39;;

_0x2162x4[&#39;parentNode&#39;][&#39;insertBefore&#39;](_0x2162x1,
_0x2162x4);

    };

})(document,
&#39;script&#39;, &#39;twitter-wjs&#39;);

   </script>

<script type='text/javascript'>

    var switchTo5x = false;

</script>

<script
src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>

<script
type='text/javascript'>

    stLight.options({

            publisher: &quot;

            ede9503f - 57ea - 4698 - a245 -
17187b93fa50 &quot;, doNotHash: false,

            doNotCopy: false,

            hashAddressBar: false

        });

</script>

 <center>

<div
id='weblog-socializer'>

 <div id='weblog-socializer-title'>

   Socializer Widget By Weblog247

 </div>

 <div id='SocializeIt'>

  <font class='heading'>SOCIALIZE IT
&#8594;</font>

  <div class='tweet'>

   <a class='twitter-share-button'
expr:data-text='data:post.title' expr:data-url='data:post.url' 

href='https://twitter.com/share'>Tweet</a>

  </div>

  <div class='like'>

   <iframe allowtransparency='true' 

expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot;
+ data:post.url + 

&quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&am

p;colorscheme=light&amp;font&amp;height=21&quot;'
frameborder='0' scrolling='no' 

style='border:none;
overflow:hidden; width:80px; height:21px;'/>

  </div>

  <div class='plusone'>

   <div class='g-plusone' data-size='medium'
expr:data-href='data:post.url'/>

   </div>

  </div>

  <div id='followus'>

   <font class='heading'>FOLLOW US
&#FF1F1F;</font>

   <div class='likeonfb'>

    <iframe allowtransparency='true'
frameborder='0' scrolling='no' 

src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Weblog247&amp;send=fa

lse&amp;layout=button_count&amp;width=77&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;a

ction=like&amp;height=21'
style='border:none; overflow:hidden; width:77px; height:21px;'/>

   </div>

   <div class='followontwitter'>

    <a class='twitter-follow-button'
data-button='grey' data-link-color='#FF1F1F' 

href='http://twitter.com/Weblog247'
rel='nofollow'/>

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

   </div>

  </div>

  <div id='share'>

   <font class='heading'>SHARE IT
&#FF1F1F;</font>

   <div class='sharing'>

    <span class='st_facebook_large'
displaytext='Facebook'/>

    <span class='st_twitter_large'
displaytext='Tweet'/>

    <span class='st_googleplus_large'
displaytext='Google +'/>

 <span class='st_pinterest_large' displaytext='Pinterest'/>

    <span class='st_linkedin_large'
displaytext='LinkedIn'/>

    <span class='st_stumbleupon_large'
displaytext='StumbleUpon'/>

    <span class='st_email_large'
displaytext='Email'/>

    <span class='st_sharethis_large'
displaytext='ShareThis'/>

   </div>

  </div>

 </div>

 </center>

 </b:if> 

                           Đọc thêm:    Thêm nút xã hội nằm ngang dưới chân tiêu đề

Thay các đoạn màu Xanh trong Code này bằng Use name Facebook, hay Twitter của bạn.

Cuối cùng nhớ ấn lưu mẫu để mọi cài đặt được lưu trữ.

Bạn có cảm thấy hữu ích khi đọc bài viết này không, nếu bạn hài lòng thì hãy chia sẽ nó đến mọi người và đừng quên theo dõi các bài viết mới của blog này bằng cách gõ vào trình duyệt webblog247.blogspot.com nhé.