BỘ NÚT MẠNG XÃ HỘI VỚI TOOLTIP ĐẸP BẰNG CSS

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

• Bộ nút mạng xã hội

để tìm được một giao diện ứng ý cho blog của bạn.

"nguồn bài viết từ KslZone.NET".

Đọc Bài

BỘ NÚT CHIA SẺ QUA MẠNG XÃ HỘI SOCIALIZE IT CHO BLOGGER

Hôm nay, trong bài viết này mình xin chia sẻ với các bạn bộ nút mình đang sử dụng tại template mới này, trong rất ngầu và bắt mắt. Như đã nói ở rất nhiều bài viết trước, mạng xã hội có một vai trò cực kỳ quan trọng trong việc lôi kéo lượng truy cập, đây là một trong những cách điển hình giúp bài viết của bạn được phổ biến đến người dùng trên đó, từ đó lấy website của chúng ta được nhiều người biết đến hơn và rồi gia tăng lượng truy cập. 

Bộ nút chia sẻ qua mạng xã hội SOCIALIZE IT cho Blogger

Công đoạn đầu tiên lúc nào cũng thế đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

Bây giờ các bạn tìm đến thẻ </head> và thêm đoạn mã này lên trên nó

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>
// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();
</script>

<style type='text/css'>
/*KslZone Social Bar ----------------------------------- */
#SocialBar {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweeetero, .fbwolo, .g-plusones, .stumblo {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}
</style>

</b:if>

Tiếp tục chúng ta sẽ sử dụng hàm includable thay vì chèn toàn bộ đoạn mã này vào một chỗ để dễ dàng chỉnh sửa, hoặc xóa nó đi khi bạn không cần nữa. Bạn tìm đến một thẻ

</b:includable>

và chèn đoạn mã này xuống dưới

<b:includable id='kslzoneSocialb'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT &#8594;</h5>
 </div>
 <div class='tweeetero'>
  <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='fbwolo'>
  <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&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='pocko'>
   <a class='pocket-btn' data-lang='en' data-pocket-count='horizontal' data-pocket-label='pocket'/>
<script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>
  </div>
 </div>
 </b:if>
</b:includable>

Cuối cùng lựa chọn vị trí bạn muốn chèn ở đây ví dụ 2 vị trí cơ bản

Dưới tiêu để bài viết

Tìm đến thẻ

<div class='post-body entry-content'>

và thêm đoạn này lên trên

<b:include name='kslzoneSocialb'/>

Dưới cuối bài đăng

Tìm đến thẻ

<div class='post-footer'>

và thêm đoạn mã này lên trên

<b:include name='kslzoneSocialb'/>

Lời kết

Sau khi hoàn tất thì bạn đã có cho mình bộ nút chia sẻ rất đẹp. Blog của mình làm dựa trên tiêu chí chia sẻ tất cả những thứ mình biết để giúp blog của bạn có một blog thật đẹp cho riêng mình. Nếu như cảm thấy bài viết này khó hiểu và cần trợ giúp bạn có thể để lại nhận xét phía dưới, mình sẽ hỗ trợ tất cả các bạn.

"nguồn bài viết từ KslZone.NET".

Đọc Bài

TIỆN ÍCH CHIA SẺ ẢNH LÊN CÁC MẠNG XÃ HỘI

Để 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.

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.

Đọc Bài

THANH MẠNG XÃ HỘI TRƯỢT ĐẸP CHO BLOGGER

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.

Đọc Bài

THANH THEO DÕI QUA MẠNG XÃ HỘI FLAT UI CỰC ĐẸP

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/AVvXsEigHpbVRhIGlMxquMlIxMAo6atGaEGEImmB6-HH2y2tufw8oWRwvzkQdUTL9ZPm6lHwY-1RF3cQlZUB0-e8F4QNZZcR76Ma-75WhkJ1tNyfm5Xyf1lZkD6Wz8owPBTe5pXC4fKjXiD-2rKy/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/AVvXsEjehhxOXhutK37sIG8TYAPY7kb2aLVxPCvnvUYU3rdPbiKjrRnjd9GZbcjy0UbybWoheMhyphenhyphennOaksvf8Q6Pwy-RayBmwVMUtD527arW3F9-6_nZiq6v1NUeU5R7e8GurVhvXWkMGKXZ3pzZc/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.

Đọc Bài

NÚT CHIA SẺ VỚI HOẠT ẢNH KHÁ ĐẸP BẰNG CSS3 CHO BLOGGER

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

Đă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/AVvXsEgWNZlGLimEiYprbvVhtNj-3z-f7qF8lsQOih2U_Anvje0DAlrld0MNZ0kExpON8-NMz4vMq6IH82fL8Oij19zIIPAHdt4QBaTPjV39NBBYoPubfiQh9akVZnrfjvjSXTD2otk77zEXxcW-/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/AVvXsEh1pCNTaw1ukvlT3JvJSUKgsYlsKHAKT4vkcSDgFGC6SHyn3sbWft1i8cuMt1mizSAhgBjgJbq09OiX_WjfRIr8Kn8a0Vi2HNSNeQzvB1oil0Ri6RFvqiU0zrUy9Sde3dZTJ-z_JPjVUoIT/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/AVvXsEhWwH-0vCnQHaqyvgCQEBnEKnrI-UWBbYm-NS7mvOlu0wWznb2bMXB9sIyyXpIvsTj1E9_n10_-qKSx8fGS1Uk9j8t190BXHe6rwnNqfpDF-vYYi4-9QUI-mKoXlEPJlcbMfhtGt_z4W_r5/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/AVvXsEjUuegShyyla-Ojxtwp-N0KYsQXjIAnVOyA_v5RK-97Cqo2qJTY5BZyWVilYYqFN-TDUW4g2RYRy48xUD3MfREXBjk-mWOCd0LkiqFt4SJyzUqkY5vcNJd_nzb-eMUr4e8pv3nPvH_LIFwW/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.

Đọc Bài

NÚT CHIA SẺ VỚI HIỆU ỨNG ĐÓNG MỞ CỰC NGẦU CHO BLOGGER

Một điều chắc chắn với hầu hết tất cả mọi website đều có nút chia sẻ qua các mạng xã hội thông dụng. Việc thêm vào các nút này giúp website giữ được lượng khách truy cập đáng kể. Do đó việc làm cho khách truy cập chú ý đến nó là vấn đề khá cần thiết đối với mọi quản trị của website, từ vị trí, đến giao diện, v.v.. Hôm nay mình xin chia sẻ với các bạn những nút chia sẽ với hiệu ứng đóng mở khả là ngầu bằng CSS và JS khá bắt mắt đến người dùng.

Nút chia sẻ với hiệu ứng đóng mở cực kì ngầu cho Blogger

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

Bước 2: Tìm đến thẻ </head> và thêm đoạn css sau lên trên

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
    width: 475px;
    overflow: hidden;
    margin: 70px auto 0;
}

.button {
    float: left;
    margin-right: 10px;
    width: 110px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 1px 0px #fdfdfd;
    padding: 15px 5px 5px;
    box-sizing: border-box;
}

.button i {
    background: #c5c5c5;
    color: #eaeaea;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.social-container {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #656565;
    line-height: 54px;
    font-family: Open Sans;
    background: #d8d8d8;
    width: 100%;
    height: 45px;
    box-shadow: inset 0 -2px 4px #c7c7c7;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.slide, .button i {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.slide {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 22px 22px;
    -o-border-radius: 0 0 22px 22px;
    -ms-border-radius: 0 0 22px 22px;
    -moz-border-radius: 0 0 22px 22px;
    -webkit-border-radius: 0 0 22px 22px;
 /* top fix */
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 45px;
    width: 100%;
    top: -35px;
}

.slide::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    bottom: 0;
}

.button:hover .slide {
    top: 0;
    border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
    top: -2px;
    position: relative;
}

.twitter iframe {
    width: 79px !important;
}

.google #___plusone_0 {
    width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
    background: #305c99;
    color: white;
}

.button.twitter:hover i, .twitter .slide {
    background: #00cdff;
    color: white;
}

.button.google:hover i, .google .slide {
    background: #d24228;
    color: white;
}

.button.linkedin:hover i, .linkedin .slide {
    background: #007bb6;
    color: white;
}

.button.linkedin {
    margin-right: 0;
}

.credit {
    padding-left: 10px;
    font-size: 14px;
    color: #172b36;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: Open Sans;
}

.credit a {
    border-bottom: 2px solid #dc4106;
    text-decoration: none;
    padding: 0 0 2px;
    color: #172b36;
}
</style>

Bước 3: Tìm đến thẻ sau

<b:includable id='post' var='post'>

thêm đoạn mã sau ngay trên

<b:includable id='kslshare'>
<b:if cond='data:blog.pageType == "item"'>
<div id="buttons">
<div class="facebook button">
 <i class="icon-facebook"></i>
 <div class="social-container fb">
  <div class="slide">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.kslzone.net&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21&amp;appId=191743990857285" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"></iframe>
  </div>
   Facebook
 </div>
</div>
<div class="twitter button">
 <i class="icon-twitter"></i>
 <div class="social-container tw">
  <div class="slide">
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">
   Tweet </a>
   <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  </script>
  </div>
   Twitter
 </div>
</div>
<div class="google button">
 <i class="icon-google-plus"></i>
 <div class="social-container tw">
  <div class="slide">
   <!-- Place this tag where you want the +1 button to render. -->
   <div class="g-plusone" data-size="medium">
   </div>
   <!-- Place this tag after the last +1 button tag. -->
   <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>
  </div>
   Google+
 </div>
</div>
<div class="linkedin button">
 <i class="icon-linkedin"></i>
 <div class="social-container tw">
  <div class="slide">
   <script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
   </script>
   <script type="IN/Share"></script>
  </div>
   LinkedIN
 </div>
</div>
</div>
<div style="text-align: right;">
<a href="http://goo.gl/3nMvSh" target="_blank" title="Lấy widget này"><span style="font-size: x-small;">get</span></a></div>
</b:if>
</b:includable>

thay www.kslzone.net thành địa chỉ page facebook của bạn

Bước 4: Tìm đến các thẻ

<data:post.body/>

và thêm đoạn mã này xuống dưới

<b:include name='kslshare'/>

Bước 5: Lưu lại giao diện hiện tại.

Đọc Bài