Bạn đang xem chuyên mục "Social"

Tiện ích chia sẻ ảnh lên các mạng xã hội

bới Gửi nhận xét

Để kiếm được lưu lượng truy cập cho website thì không phải là một điều dễ dàng, chúng ta phải đầu tư khá nhiều vào đủ mọi thứ để tăng số lượng khách truy cập. Từ việc áp dũng các kỹ thuật SEO-Onpage và SEO-Offpage, phổ biến bài viết lên mạng xã hội,... để có mọi người biết tới. Nhắc với việc chia sẻ trên mạng xã hội mình muốn chia sẻ với các bạn một vài điều.

Tiện ích chia sẻ ảnh lên các mạng xã hội

Bây giờ mạng xã hội chia sẻ hình ảnh khá nổi tiếng Pinterest đã hỗ trợ Tiếng Việt. Một điều khá hay từ mạng xã hội này là nếu một bạn có một hình ảnh hay để chia sẻ trên đó thì bạn có khá năng kiếm được khách truy cập qua đó rất là lớn. Tại sao được như vậy? Đây mà mạng xã hội cho phép người dùng "ghim" ảnh lên đầu trang web, và đối với mạng xã hội khá nổi này việc có hình ảnh ở trên đầu trang thì tỉ lệ thuận với việc bạn sẽ được nhiều người biết tới.

Cũng trong thời điểm hiện tại thì mọi website đều có các nút chia sẻ lên mạng xã hội như Facebook, Twitter, Google+, cũng khá nhiều website đã thêm vào nút chia sẻ qua ảnh lên Pinterest. Nhưng hầu hết chúng không hỗ trợ tối đa cho việc chia sẻ hình ảnh lên các mạng xã hội. Chính vì thế mình lập bài viết này để chia sẻ với các bạn một tiện ích khá hay hỗ trợ tối đa cho việc chia sẻ hình ảnh lên các mạng xã hội đặc biệc là Pinterest.

Bạn hãy chèn đoạn mã sau đây lên trên thẻ </body>
<script type="text/javascript">(function(features){var d=document,s=d.createElement('script');s.src='http://widget.symphonytools.com/widget/js/symphony.js';s.type='text/javascript';s.async='true';s.onload=s.onreadystatechange=function(){var rs=this.readyState;if (!rs || /loaded|complete/.test(rs)) try{symphony.init(features);}catch(e){}};var sc=d.getElementsByTagName('script')[0];sc.parentNode.insertBefore(s,sc);})();</script>
lưu lại là xong.

Để xem demo và script gốc của nó bạn truy cập vào địa chỉ này
http://www.symphonytools.com/widgets
chắc rằng sau khi bạn xem qua cũng thấy, khi rê chuột vào trong hình ảnh, nó sẽ xuất hiện 2 nút bấm. Nút thú nhất cho phép chia sẻ hình ảnh đó lên mạng xã hội pinterest, còn nút thứ 2 cho phép chỉnh sửa lại hình ảnh đó và chia sẻ lên các mạng xã hội facebook và twitter.

Vậy là tổng kết một bài viết tương đối chỉ cho đoạn mã nhỏ nhắn đó thôi, và hi vọng rằng nó hữu ích đối với các bạn.

Google+ Follower ẩn hiện bằng CSS3

bới 8 nhận xét

Như đã hướng dẫn với các bạn Facebook Like Box ẩn hiện bằng CSS3, thì qua bài này mình hướng dẫn luôn thằng Google+ xài thêm vào cho đủ bộ. Mạng xã hội Google+ thì chắc ở Việt Nam ra thì đứng thứ hai sau Facebook, và đối với dân SEO thì chắc nó còn quan trọng hơn thằng Facebook nữa chứ chẳng đùa.

Google+ Follower ẩn hiện bằng CSS3

Google+ Follower thì trông nó khá tương tự với Facebook Like Box, nó cũng hiện avatar và số lượng của những theo dõi trông cũng khá là hoành tráng. Giao diện mình sẽ chia sẻ cho các bạn dưới đây cũng sẽ tương tự như của bạn faceook, tiết kiệm diện tích và hiệu quả bất ngờ. Link demo: http://jsfiddle.net/kieusonlam/nGJNS/show

Google+ Follower ẩn hiện bằng CSS3

Thêm đoạn css này vào trên thẻ ]]></b:skin> cho bạn, bạn có thể yên tâm nó không trùng với thằng css của thằng kia đâu, mình đã thay đổi vị trí của thằng G+ này để bạn có thể sử dụng song song cả hai
.gfbox{
    position:fixed;
    top:145px;
    right:-325px;
    height:230px;
    width:305px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
    padding:10px;
}
.gficon-box{
    width:30px;
    height:32px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#DD4B39;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Georgia;
    font-size:20px;
    font-weight:700;
    text-align:center;
    padding-top:5px;
}
.gfbox:hover, .gfbox:active{
    right:0;
}
Cũng như bác Facebook, Google cũng có một đoạn mã giúp hỗ trợ để tạo ra G+ Follower. Cũng tương tự tìm đến <body> và thêm vào sau
<script type='text/javascript'>
 (function() {
  var po = document.createElement('script');        
  po.type = 'text/javascript';        
  po.async = true;        
  po.src = 'https://apis.google.com/js/plusone.js';        
  var s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s);
 })();
</script>
Tìm đến </body> và thêm vào bên trên
<div class="gfbox">
    <div class="gficon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+KslzoneNetVn" data-source="blogger:blog:followers" data-width="260"></div>
</div>
thay bằng địa chỉ G+ của trang cá nhân hoặc fanpage của bạn rồi lưu lại.

Lời kết

Sau khi thành công thì website của bạn đã có được hai box tổng hợp số lượng người theo dõi trên hai mạng xã hội phổ biến này. Việc blog của bạn có nhiều người theo dõi và hoạt động (không phải là trao đổi fan mua like các thứ nhé, fan thật ấy) trên mạng xã hội ngoài việc tăng lượng truy cập trở lại, nó còn tạo cho website của bạn độ uy tín cho tương lai.

Facebook Like Box ẩn hiện bằng CSS3

bới 5 nhận xét

Thời buổi hiện nay thì mạng xã hội xuất hiện ở khắp nơi rồi, đặc biệt là facebook. Dù đi đến website nào bạn cũng thấy nút like, rồi thì nhận xét của facebook, và cả facebook like box nữa. Qua việc này bạn thấy gì? Các mạng xã hội hiện nay đặc biệt là facebook đang có vai trò khá quan trọng trong lĩnh vực thu hút lượng truy cập cho website của chúng ta. Chính vì thế chúng ta không nên bỏ lỡ chúng, phải thêm ngay vài cái vào website để bắt kịp với đồng bào.

Facebook Like Box ẩn hiện bằng CSS3

Đối với các thứ như nút like và nhận xét của facebook thì trong blog này mình đã chia sẻ cả rồi. Bây giờ chỉ còn một thứ nữa đó là Facebook Like Box thôi. Thì hôm nay mình sẽ chia sẻ với các bạn một Facebook Like Box khá là tiết kiệm diện tích trượt theo sidebar và ẩn hiện khi rê chuột vào. Link demo cho các bạn: http://jsfiddle.net/kieusonlam/fAuL6/show/

Facebook Like Box ẩn hiện bằng CSS3

Công việc đầu tiên thì chúng ta sẽ thêm css tùy chỉnh giao diện vào Blogger. Bạn tìm đến thẻ ]]></b:skin> và thêm vào bên trên đoạn mã sau đây
.fb-box{
    position:fixed;
    top:10%;
    right:-286px;
    height:250px;
    width:285px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:30px;
    height:35px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#405D9B;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.fb-box:hover{
    right:0;
}
Bây giờ tiếp tục để có thể tạo ra facebook like box tối ưu nhất thì chúng ta sẽ thêm Facebook SDK vào blog. Tìm đến thẻ <body> chèn vào phía sau (nếu có rồi thì thôi nhé)
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Cuối cùng đây, chèn đoạn mã này lên trên thẻ </body> để nó xuất hiện trên blog của chúng ta
<div class="fb-box">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/KslZone" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
nhớ thay KslZone bằng địa chỉ fanpage của bạn và lưu lại.

Lời kết

Nếu website của bạn có một fanpage lớn, và bạn thường xuyên cập nhật trên đó thì khả năng cao bạn sẽ giữ được và kiếm thêm được khá nhiều lưu lượng truy cập.

Thanh theo dõi qua mạng xã hội flat ui cực đẹp

bới 2 nhận xét

Lâu rồi do bận quá không đăng bài được, hôm nay tìm được một thanh theo dõi mạng xã hội khá đẹp từ tác giả của All Blogger Tricks và đem về đây chia sẻ với các bạn. Trên thanh công cụ này gồm có 2 mạng xã hội phổ biến là Facebook, Twitter, kèm theo khung đăng ký theo dõi từ Feedburner. Với phong cách Flat UI Design thì bạn chắc cũng biết rồi, giao diện rất đơn giản chỉ gồm màu sắc rất tinh tế và đẹp. Tại bài viết này mình sẽ chia sẻ với bạn chèn thanh mạng xã hội này xuống cuối mỗi bài đăng trên blog của bạn.



Thanh theo dõi qua mạng xã hội flat ui cực đẹp

Chuyện của muôn thuở với Blogger, tìm đến Mẫu → Chỉnh sửa HTML. Tại đây bạn tìm đến thẻ
<div class='post-footer'>
và chèn đoạn mã này xuống dưới (thông thường sẽ có 2 thẻ như vậy)
<section class="newsletter">
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/KslZone" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJZJ6hBBoysYrNsWrgh7EKom5Z3DXmFbC8FLvP9A7LSFayLlb2TE47AgnC7tensgswmJftcxrvpy8lB6UNSN7CeZhmKPs45-9qRJAvqoGibu7omUUZBkGyrGcVkZu9vQyCic5a_SasFlS/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FKslZone&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/KslZone" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjM_-H9quTxSUXlejLKUFJOJ4t2o_S_UjtYacoaGWrxIBtmQqPJWOvDlJXX49L0R9TVjqbE87eGSrqL9bv4rQbVDv9zmc-oCZg1msujSWpKqA_WdRFJ7CbytQywa7QSwaGQT8vxxcs_1N/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=KslZone&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Đăng ký nhận email khi có bài viết mới.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=KslZone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Nhập email của bạn vào đây.." />
          <input name="uri" type="hidden" value="KslZone" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Đăng ký" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>
thay toàn bộ KslZone cho đúng với địa chỉ Facebook, Twitter, và Feedburner của bạn rồi lưu lại.

Lời kết

Chỉ đơn giản như vậy, bạn đã thêm vào thành công cho mình một thanh theo dõi qua mạng xã hội cực đẹp và tinh tế. Mọi thắc mắc hoặc góp ý bạn có thể để lại nhận xét phía dưới mình sẽ tiếp nhận và hỗ trợ ngay khi nhận được.

Bộ nút mạng xã hội với tooltip đẹp bằng CSS

bới 2 nhận xét

Mạng xã hội là một trong những nguồn lực quan trọng để chúng ta lấy được lưu lượng truy cập. Ngày nay thì hầu như ai ai cũng biết đến và sử dụng các mạng xã hội như Google+, Facebook, Twitter,.. ,do đó bằng việc sử dụng nó một cách hợp lý, website của bạn sẽ phát triển một cách rất nhanh chóng. Chính vì thế nhiều giao diện bộ nút mạng xã hội ra đời nhằm mục đích này kiếm thêm lưu lượng từ mạng xã hội.


Trước đây mình có chia sẻ khá nhiều giao diện về các loại nút mạng xã hội, và hôm nay tiếp tục lại chia sẻ thêm một bộ nút nữa. Về bộ nút này, bộ nút sử dụng Pure HTML và CSS để làm ra, do đó các bạn không cần phải lo lắng tẹo nào về tốc độ tải trang cho blog của bạn.

Bộ nút mạng xã hội với tooltip đẹp bằng CSS

Bạn truy cập vào blog của mình và thêm một tiện ích mới bằng HTML trong  phần Bố cục

Tại phần nội dung của widget bạn thêm vào đoạn mã sau đây
<style>
a.tooltip{font-family:arial;font-weight:700}a.tooltip span{position:absolute;width:120px;color:#FFF;background:#111;height:30px;line-height:30px;text-align:center;visibility:hidden;border-radius:6px;top:-40px;margin-left:-60px!important}a.tooltip span:after{content:'';position:absolute;top:100%;left:50%;margin-left:-8px;width:0;height:0;border-top:8px solid #111;border-right:8px solid transparent;border-left:8px solid transparent}a:hover.tooltip span{visibility:visible;bottom:30px;left:50%;margin-left:-76px;z-index:999}.social-tooltip a{display:inline-block;position:relative}.social-tooltip a:hover{opacity:.8}.facebooktip{background:url(https://googledrive.com/host/0B8D3MQmcZTyva00xallLc2JoUTQ/) no-repeat;height:50px;width:50px}.twittertip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdTF5MURZQVd1Ykk/) no-repeat;height:50px;width:50px}.google_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvbUxQT0gtUV9aSVE/) no-repeat;height:50px;width:50px}.linkedin_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdUROT0NwNkFLaU0/) no-repeat;height:50px;width:50px}.pinterest_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvaWZ1T0FGLW9RNDA/) no-repeat;height:50px;width:50px}.rss_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvNDhEbnRfczVydnM/) no-repeat;height:50px;width:50px}
</style>
<div class="social-tooltip">
<a class="tooltip facebooktip" href="#">
<span>Facebook</span></a>
<a class="tooltip twittertip" href="#">
<span>Twitter</span></a>
<a class="tooltip google_tip" href="#">
<span>Google+</span></a>
<a class="tooltip pinterest_tip" href="#">
<span>Pinterest</span></a>
<a class="tooltip linkedin_tip" href="#">
<span>Linkedin</span></a>
<a class="tooltip rss_tip" href="#">
<span>RSS</span></a>
</div>
sau khi chèn vào thay thể đường dẫn đến các mạng xã hội của bạn và lưu lại.

Như vậy là đã hoàn tất rồi, hi vọng bộ nút này phù hợp với blog của bạn, nếu bạn không thích bạn có thể xem thêm nhiều bộ nút về mạng xã hội khác ở đây
để tìm được một giao diện ứng ý cho blog của bạn.

Nút chia sẻ với hoạt ảnh khá đẹp bằng CSS3 cho Blogger

bới Gửi nhận xét

Chào các bạn, như bạn đã biết thì minh đã chia sẻ một vài loại nút chia sẻ qua mạng xã hội, và hôm nay mình lại muốn chia sẻ thêm một lần nữa. Bộ nút chia sẻ này cũng với hiệu ứng đóng mở khi rê chuột vào nhưng theo một cách khác. Về các nút chia sẻ này thì không có gì nhiều để nói, mời các bạn xem ở dưới đây.

Nút chia sẻ với hoạt ảnh khá đẹp bằng CSS3 cho Blogger

Nút chia sẻ với hoạt ảnh khá đẹp bằng CSS3 cho Blogger

Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

Tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên
.share_button {
 width:300px;
 height:50px;
 margin:10px auto;
}
.share_button ul {
 width:50%;
 height:inherit;
 float:left;
 list-style:none;
 margin:0 !important;
 padding:0 !important;
}
.share_button ul h1 {
 margin-top:9%;
 overflow:hidden;
 width:100%;
 color:#4889F0;
 font-size:18px;
 text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
 position:absolute;
 height:inherit;
 width:150px;
 margin:0 !important;
 padding:0 !important;
 background:#EEEEEE;
 -webkit-transition:all 600ms;
 -moz-transition:all 600ms;
 -o-transition:all 600ms;
 -ms-transition:all 600ms;
 transition:all 600ms;
 text-align:center;
}
.share_button ul li h2 {
 display:inline-block;
 width:32%;
 height:40px;
 overflow:hidden;
 margin-top:5%;
 cursor:pointer;
 border:0 !important;
}
.share_button ul:first-child li:first-child {
 text-align:right;
}
.share_button ul:last-child li:first-child {
 text-align:left;
}
.share_button ul:first-child li:last-child,.share_button:hover ul:first-child li:first-child {
 -webkit-transform:rotateY(90deg);
 -moz-transform:rotateY(90deg);
 -o-transform:rotateY(90deg);
 -ms-transform:rotateY(90deg);
 transform:rotateY(90deg);
}
.share_button ul:last-child li:last-child,.share_button:hover ul:last-child li:first-child {
 -webkit-transform:rotateY(-90deg);
 -moz-transform:rotateY(-90deg);
 -o-transform:rotateY(-90deg);
 -ms-transform:rotateY(-90deg);
 transform:rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,.share_button:hover ul:last-child li:last-child {
 -webkit-transform:rotateY(0deg);
 -moz-transform:rotateY(0deg);
 -o-transform:rotateY(0deg);
 -ms-transform:rotateY(0deg);
 transform: rotateY(0deg);
}
Tiếp tục mình sẽ tạo hàm include để dễ chỉnh sửa cũng như xóa đi khi không cần nữa
<b:includable id='kslzoneShareb'>
<b:if cond='data:blog.pageType == "item"'>
<div class='share_button'>
 <ul>
  <li>
  <h1>Chia sẻ bài viết này</h1>
  </li>
  <li>
  <h2>
  <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRuDJ93x3VWz_JM9kbmW1Yvr-bpCaB4n2PirBnGUQfmeBjQYpCmrFB1J5RtY3dktovQ48os9MWGYPL9IxzeZKvhSy95EfOprzY5RFqOlwVjFC_mNwWc65sudfdUOepUxxL0GL3Garj4EXC/s1600/Facebook.png"/></a></h2>
  <h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiotygIE_s8WXNPP7cs2YfHBKWqQeCs49Iv6UPzDQqa1-bb-F5xIGRFgm7M2YEBNOLMQK0SkwZW3E5JzPdFrvci0hoYmyck_1n5GNQPAn72N_NM-zXchJYNSmbOQHWIfz8-uROVsjEbSyWj/s1600/Twitter.png"/></a></h2>
  </li>
 </ul>
 <ul>
  <li>
  <h1>his page</h1>
  </li>
  <li>
  <h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmeMR2qPBpsnLCC3BP1NF9dJRxObF1zGFJGFy3W2qe5XIfH6LdfCiVwj2l3EV8tbeApj0cMQDVkSyi1buOROAwgTK6JEzfv1lBBOX1uEjWdHCiFeJyZT3UCY9MPeHCRo6RblG4ZAx5uILh/s1600/Google-plus.png"/></a></h2>
  <h2>
  <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59sXVgmdFm5gs0f3h5UnyCWPBa8aWSK3tjKwK502i9Fhyphenhyphen-8bMvCJ2yKZGwm9qKUDBURUWZooFCZHeUCU_KaqVjENg0wdbNDbBoR6O4z-fgmusTIfSRnGdWuvW3H-EPxqiKKEvxA6jYEW-/s1600/Pinterest.png"/></a>
  </h2>
  </li>
 </ul>
</div>
</b:if>
</b:includable>
Cuối cùng chèn vào vị trí mong muốn của bạn v.d. cuối bài đăng bạn tìm đến thẻ
<div class='post-footer'>
và chèn đoạn mã này dưới nó
<b:include name='kslzoneShareb'/>

Lời kết

Hiện nay có rất nhiều loại nút chia sẽ được tùy biến với vô vàn màu sắc và hiệu ứng, do đó nếu lựa chọn hoặc tùy biến nó đúng với tông màu của blog, bạn sẽ thu hút được hơn đến người dùng về việc chia sẻ bài viết của bạn.

Thanh mạng xã hội trượt đẹp cho Blogger

bới 5 nhận xét

Sau khi chia sẻ bộ nút SOCIALIZE IT ở bài viết trước nhằm mục đích thu hút thêm khách truy cập, hôm nay mình xin chia sẻ thêm cho các bạn một thanh trượt mạng xã hội màu đen với phong cách khá chuyên nghiệp, thanh này nhằm mục đích đưa khách truy cập đến các fanpage ở mạng xã hội giúp họ dễ cập nhật thông tin mới nhất từ mạng xã hội khi họ đang trên đó. Thanh này sử dụng WeLoveIconFonts tương tự với Awesome Font mình đã giới thiệu có nghĩa là làm 100% bằng HTML và CSS nên tốc độ khá là tuyệt vời.

Thanh mạng xã hội trượt đẹp cho Blogger

Thanh mạng xã hội trượt đẹp cho Blogger

Đăng nhập vào Blogger » Bố cục » Thêm tiện ích HTML

Thêm đoạn mã sau đây vào phần nội dung của tiện ích
<div id='social-sidebar'>
   <ul>
    <li>
     <a class='entypo-twitter' href='https://twitter.com/kslzone' target='_blank'>
      <span>Twitter</span>
     </a>
    </li>
    <li>
     <a class='entypo-gplus' href='http://dribbble.com/kslzone' target='_blank'>
      <span>google+</span>
     </a>
    </li>
    <li>
     <a class='entypo-tumblr' href='http://www.tumblr.net/kslzone' target='_blank'>
      <span>tumblr</span>
     </a>
    </li>
<li>
     <a class='entypo-facebook' href='http://www.facebook.net/kslzone' target='_blank'>
      <span>facebook</span>
     </a>
    </li>
        <li>
     <a class='entypo-rss' href='http://feeds.feedburner.com/kslzone' target='_blank'>
      <span>feedburner</span>
     </a>
    </li>
   </ul>
  </div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>
thay toàn bộ kslzone thành các địa chỉ của mạng xã hội của bạn rồi lưu lại tiện ích.

Lời kết

Thanh mạng xã hội này sẽ dẫn khách truy cập đến các fanpage sẵn có của bạn, và mình đã nói rất nhiều về tầm quan trọng của mạng xã hội đến lượng truy cập đến website của chúng ta. Bạn cũng có thể chỉnh sửa lại đoạn mã này để biến nó thành thanh chia sẻ qua mạng xã hội. Nếu có thắc mắc cần hỗ trợ hoặc góp ý về những gì mình nên làm các bạn có thể để lại nhận xét ở phía dưới mình sẽ có gắng giúp đỡ và thu nhận ý kiến của các bạn.