[Blogspot] Tạo thanh chia sẻ bài viết có hiệu ứng tooltip đẹp

Mới gần đây mình có chỉnh sửa lại chút ít giao diện blog, làm cho nó trông gọn mắt hơn tí :))
Cũng cạn ý tưởng rồi nên hôm nay viết bài cho các bạn nhằm mục đích chia sẻ cái thanh chia sẻ bài viết (cạnh nút thích và không thích giống Facebook) có hiệu ứng tooltip kèm theo trông khá đơn giản nhưng cũng đẹp đẹp mà :D
Trong bài viết sau đây mình có sử dụng hiệu ứng tooltip từ Arlina Design. Giờ thì bắt đầu thôi!

Tạo thanh chia sẻ bài viết có hiệu ứng tooltip đẹp cho blogspot

Cách thực hiện: Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

/*------- 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: 14px !important; font-family: ' Roboto' !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 }

Bước 3: Chèn đoạn code hiển thị các button chia sẻ vào chỗ bạn muốn nhé.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='facebook arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Chia sẻ lên Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank'><i class='fa fa-facebook' style='color:#fff; display: block; float: left; font-size: 22px; height: 38px; line-height: 37px; text-align: center; width: 38px; background:#5a7abf;margin-right: 3px;margin-top:3px;border-radius:2px;margin-left:3px'/></a>

<a class='twitter arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Chia sẻ lên Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank'><i class='fa fa-twitter' style='color:#fff; display: block; float: left; font-size: 22px; height: 38px; line-height: 37px; text-align: center; width: 38px; background:#19BFE5;margin-right: 3px;margin-top:3px;border-radius:2px'/></a>

<a class='gplus arlina-tooltip arlina-tooltip-top' data-arlina-tooltip='Chia sẻ lên Google+' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank'><i class='fa fa-google-plus' style='color:#fff; display: block; float: left; font-size: 22px; height: 38px; line-height: 37px; text-align: center; width: 38px; background:#D64136;margin-right: 3px;margin-top:3px;border-radius:2px'/></a>
</b:if>

--- Đổi chữ trong tooltip theo ý bạn muốn cũng được.
--- Nếu muốn thêm button chia sẻ khác thì bạn truy cập Font Awesome để lấy icon như Instagram, Youtube....và căn chỉnh sửa code tương tự như 3 button sẵn có nhé.
Bước 4: Lưu template lại.
Kết luận: Vậy là xong rồi đó. Trước giờ mình hay thích dùng những thứ phức tạp nhưng giờ mình thích đơn giản rồi vì vậy mong các bạn ưa thích sự đơn giản ủng hộ mình nha :)
Chúc các bạn thành công :)

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!