Cách tạo nút share facebook và twitter trên blogger ~ Học seo

Chào các bạn, nhận thấy là các bài tạo nút share facebook và twitter trên blogspot còn chưa được nhiều bài chất lượng cũng như là sự thành công của các bài hướng dẫn đó.

Vì vậy, NgocTan's blog xin giới thiệu với các bạn cách tạo nút share facebook, twitter cũng như một số mạng xã hội lớn khác trên thế giới. Trong quá trình tạo nút share này, mình cũng sẽ hướng dẫn các bạn thêm hoặc bỏ bớt các mạng xã hội bạn không thích, hoặc chỉnh sửa độ dài, màu sắc thích hợp với phông nền của website bạn.

Giới thiệu sơ qua thế được rồi, nội dung thì cũng không có gì khó lắm. NgocTan's blog đã tối ưu hóa các bước cho các bạn dễ thực hiện nhất.

1. Vào trang quản lý blogger - https://www.blogger.com/home

2. Chọn template rồi ấn vào nút Edit HTML

3. Khi vào trong phần Edit HTML, bạn tìm ký tự sau <data:post.body/> và nhớ là phải enter 2 lần nha.

Enter 2 lần là vì trong blogspot thông thường bạn sẽ xuất hiện <data:post.body/> 3 lần. Và việc của bạn là phải tìm đến vị trí thứ 2.

4. Dán đoạn mã dưới đây phía sau <data:post.body/> và tận hưởng kết quả.

Chú ý là bạn nên đặt đoạn mã phía dưới nằm sau <data:post.body/> nha. Nếu để đằng trước thì nó sẽ lên phía trước tiêu đề bài viết, sẽ không đẹp.

<style type="text/css">
#phamngoctan_social_sharing   { 
width:550px; 
height: 90;
background: radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -o-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -ms-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -moz-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
background: -webkit-radial-gradient(center center, circle cover, #ffffff, #f9f9f9); 
padding:10px; 
margin:0 auto; 
border: 1px solid #999; 
border-radius:5px; 
-webkit-border-radius:5px 5px 5px 5px; 
-moz-border-radius:5px 5px 5px 5px; 
-webkit-transition: all 0.6s ease-out; 
-moz-transition: all 0.6s ease-out; 
-o-transition: all 0.6s ease-out; 
-ms-transition: all 0.6s ease-out; 
transition: all 0.6s ease-out;
}
#phamngoctan_social_sharing:hover { 
-webkit-box-shadow: 1px 1px 3px #CCC inset; 
-moz-box-shadow: 1px 1px 3px #CCC inset; 
box-shadow: 1px 1px 3px #CCC inset; 
}
#phamngoctan_social_sharing img { 
width: 35px; 
padding: 5px; 
border: 0; 
box-shadow: 0; 
display: inline; 
opacity:1; 
filter:alpha(opacity=1); /* For IE8 and earlier */ 
}
#phamngoctan_social_sharing img:hover { 
-webkit-transition: all 0.6s ease-out; 
-moz-transition: all 0.6s ease-out; 
-o-transition: all 0.6s ease-out; 
-ms-transition: all 0.6s ease-out; 
transition: all 0.6s ease-out; 
opacity:0.6; 
filter:alpha(opacity=60); /* For IE8 and earlier */ 
}
.phamngoctan_social_sharing_title { 
text-align: center; 
padding: 3px 10px 2px 0px; 
margin: 0 0px 0 0; 
color: #8d0303; text-transform: uppercase; 
line-height: 25px; 
vertical-align: middle; 
font-size: 14px; 
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'><center style="margin-top:10px;"> 
<div id='phamngoctan_social_sharing'> 
<div class='phamngoctan_social_sharing_title'>Chia sẻ ngay với bạn bè bài viết này</div>
<!-- Facebook --> 
<a class='face-book' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOHxBCqPXssEUYlBN82MLq4t9FqDsOVoez0VJMvFzIltAYSv9e4545axRXFOfWHYkkUzvg2evL7FNJ5Q4HzE69NYNwkTK7JsjPSggnLeRPDjEc9SWHT4mEV_twzePOFznmvz_B2AeTgKOH/s1600/Facebook.gif'/></a>
<!-- Twitter --> 
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgcJ6sbSOxdK2Itr_ISbYTMka3Luyen5rVoMkEl0o2FvD74adFo8wrh2NFM60fxrf5JOsRg7oI8xJji_-_qEu1Y6DTmSYUQzEswREujKUD9bFaNlvehR-RCrhxWgFZvFn4rZXJRVAiHhV/s1600/twitter_bird.gif'/></a>
<!-- Pinterest --> 
<a class='pint-er-est' href='javascript:void((function()%7Bvar%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)%7D)());'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYirUClEVwyk4LN_mYSKrVJjgcQqLzbpHtZSw-8P2-FF2TnVk57fw4TA3z7eQgWQW5b-nlMMeVWqXjdD5vi9J9teEGPl29TwyXMJj5gRy4MdZR7Sw_OTgMp41r6nds1RIKQ0Kwdjz8xV9l/s1600/Pinterest.gif'/></a>
<!-- Stumbleupon --> 
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6Ul6Ga5M0RxFqePafmNJsXF3qplkNbj7nxlG3LUGySOo_Nq1YmeOzvmD2vROW19FuQ7BcJ6BpxiZ06Bu3-qp0yMH4gsWLyve7c-4dbVUpXezYFMm-3A2-NhnD_ihdgnjd-ksa1f0fyNR/s1600/stumbleupn.gif'/></a>
<!-- Delicious --> 
  <a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzFtcMJZFmBnUppSZ9GBgzgQtOr32qR2_jdFDOYXY8nvU1g8yO3yacCHnrHdV91UTe47xgq1IFHExCl6Vy9nMCU4ASDNxwWc-r5ON8C8FKXyxMsLL7F4k95_Hb4dKjkls9P-FZszFWPsA/s1600/Delicious.gif'/></a>
<!-- Reddit --> 
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fiVShYWsbXDXOQqm9_zlRCWjRdpz5dbttKQQtRaO5UwqW0UnqNoehG0EgtDOXbJVFlmp0oTAx91q6e28sD6gwcm7aH1pMbXxk0gDXu4dWKGmpYi7saQUh314IduYc_6S3aacXvG1P0b_/s1600/reddit.gif'/></a>
<!-- Digg --> 
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='nofollow' target='_blank' title='Digg This'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAyMyCGdFzWnxQjv0cpYc84S_i7NCRiUtlS3urnrYSWc5wMBW7v22w1MQaYoQ-MIVJ0xcbY4Rm9uCznGpUAKxJ4DynX22GKLT_S3TIpJuGg1DVmhheKjPHX_sSOLUKoKvoyeVox0gD3MPF/s1600/digg.gif'/></a>
<!-- Email --> 
<a href='mailto:?Subject=My Blogger Tricks&amp;Body=Check out this site.. http://www.myblogger-tricks.com' rel='nofollow' target='_blank' title='Email This'><img alt='Email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhu3ucRujRwi_4flNB2wJ_mhXkrzYVse7SaE1OwhSSqyyljb0gXyjon3HmK6IgmupgWFLRssvQqpH-fvp2g4pdSRj693kAtUaszCNlOK6zlvMhM77IKYF6XhlKlCDw1ooH94ESHgeHnoY/s1600/email.gif'/></a>
<!-- Addtoany --> 
<a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share On Others Networks'><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJdROzYAsHJBH0TvlIA8CxNY25hFaccYSyCC8qWXQD7uKKIurERk827mlhiLezGr8AIdW-3vjmWiWwyFP5k4KPb5uXdK8V275NbTwFgeU93RHMeqe-2Pqf1idhgCBSI6jsY8QkmrBeLJt/s1600/share-to-any.gif'/></a>
</div> 
</center>
</b:if>

5. Các bạn có thể tùy chỉnh độ dài rộng của phần này bằng cách chỉnh sửa 2 giá trị

width: 550px; height: 90px; ở trên nha.

Bên cạnh đó, một số nút chia sẻ phía trên bạn sẽ không cần dùng tới, lúc đó, bạn chỉ đơn giản xóa thẻ <a ...> tương ứng ở trên là được.

Ví dụ, bạn muốn xóa nút pinterest. Chỉ cần xóa phần này là ok.

<!-- Pinterest --> 
<a class='pint-er-est' href='javascript:void((function()%7Bvar%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)%7D)());'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYirUClEVwyk4LN_mYSKrVJjgcQqLzbpHtZSw-8P2-FF2TnVk57fw4TA3z7eQgWQW5b-nlMMeVWqXjdD5vi9J9teEGPl29TwyXMJj5gRy4MdZR7Sw_OTgMp41r6nds1RIKQ0Kwdjz8xV9l/s1600/Pinterest.gif'/></a>

Chia sẻ ngay với bạn bè bài viết này