[TUT] Cách tạo Share Button đẹp chuyên nghiệp cho Blogspot | DEVA

Chào các bạn! 
Bài viết ngày hôm nay mình muốn giới thiệu tới các bạn sau vài ngày mình chưa viết bài viết mới nào cho blog: Cách tạo Share Button đẹp ngây ngất cho Blogspot.


Mấy ngày vừa qua có khá nhiều bạn hỏi mình cách tạo được những nút chia sẻ trên mạng xã hội cho blogspot mà lại có phong cách thẩm mỹ đẹp và chuyên nghiệp. Okay và bây giờ thắc mắc này của các bạn sẽ được mình giải đáp ngay trong bài viết này.

Trước tiên minh muốn lưu ý rằng: Trong thủ thuật này có sử dụng dịch vụ của bên thứ 3 đó là The Font Icons Awesome nên hãy kiểm tra lại nếu blog của bạn có đoạn mã này rồi thì không cần phải thêm nếm gì cả còn nếu chưa thì hãy thêm đoạn mã dưới đây vào blog của bạn trước thẻ </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Đầu tiên hãy vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào trước thẻ ]]></b:skin> hoặc trước thẻ CSS </style>

/* CSS Tooltip */.arlina-tooltip {position:relative;display:inline-block;}.arlina-tooltip:before, .arlina-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} .arlina-tooltip:hover:before, .arlina-tooltip:hover:after {opacity:1;}.arlina-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;} .arlina-tooltip:after {content:attr(data-arlina-tooltip)!important;background:#494158;color:#fff;padding:6px 8px;font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}.arlina-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}.arlina-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;} /* CSS Share Button */.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}.widget .post-body > .share-post ul {padding:0;}.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}.share-post li a:hover{color:#fff;}.share-post li .twitter{background-color:#19bfe5;}.share-post li .facebook{background-color:#3b5998;}.share-post li .gplus{background-color:#d64136;}.share-post li .pinterest{background-color:#cb2027;}.share-post li .tumblr{background-color:#304e6c;}.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}.share-post li:last-child{margin-right:0}.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}.share-post li .fa {display:initial;} @media only screen and (max-width:640px){.share-post li a{padding:6px 0 6px 0;}.share-post li .fa:before{display:none;}} @media screen and (max-width:480px) {.share-post li{width:100%}}

2. Tiếp theo thêm đoạn mã này ngay trên </article>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='share-post'> <ul> <li><a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li> <li><a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li> <li><a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li> <li><a class='tumblr arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li> <li><a class='pinterest arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li> </ul> </div><div style='clear:both'/> </b:if> 

3. Lưu lại và kiểm tra kết quả mà bạn vừa thực hiện.

Chúc các bạn thành công và như thường lệ nếu như bạn có bất kỳ thắc mắc nào hãy để lại comment bên dưới mình sẽ giải đáp sớm nhất cho các bạn. Xin chào và hẹn gặp lại ở những bài viết lần sau.