Tạo Button Share Trong Bài Viết Cho Blogspot

Xin chào mọi người, hôm nay Bảo cũng bận bịu lắm mới dành chút thời gian rảnh để làm bài viết này cho anh em, mọi người ai cũng hỏi mình về cái code này nên hôm nay mình sẽ share cách làm luôn !

CÁC BƯỚC THỰC HIỆN

Bước 1:  Thêm đoạn CSS này vào phía trên thẻ ]]></b:skin>

/* dropdown share button */
.dropdown {display:inline}
.dropdown-link{float: right; background: #eee; padding: 5px 20px; border-radius: 100px;}
.dropdown-link:hover {background: #636363;color:#fff!important}
.dropdown-container{position: fixed; left: 50%; top: 50%; background: #FFF; box-shadow: 0 3px 110px rgba(0,0,0,.25); width: 400px; display: none; z-index: 9999; transform: translate(-50%,-50%); border-radius: 10px; padding: 10px}
.dropdown-container li {list-style:none;width:50%;float:left;padding:5px;box-sizing:border-box}
.dropdown-container li a{display: block; padding: 6px 15px; text-transform: uppercase; font: 500 14px Roboto,sans-serif!important; text-align: center;border-radius:100px;border:1px solid #eee}
.dropdown-container li a:hover{border:1px solid; color: #52537d!important}
.dropdown-container h2 {padding: 10px 0; margin: 0 0 10px; font: 500 16px Roboto,sans-serif; text-transform: uppercase; border-bottom: 1px solid #eee; text-align: center;position:relative}
.dropdown-container h2:after{content: ''; position: absolute; bottom: 0; left: 50%; background: #52537d; height: 1px; width: 100px; transform: translate(-50%,0);transition:.5s}
.dropdown-container h2:hover:after{width:100%;background:#d2a12f}

Bước 2: Thêm đoạn Javascript này vào phía trên thẻ </body>

<script>
function copyTextToClipboard(e){var t=document.createElement(&quot;textarea&quot;);t.style.position=&quot;fixed&quot;,t.style.top=0,t.style.left=0,t.style.width=&quot;2em&quot;,t.style.height=&quot;2em&quot;,t.style.padding=0,t.style.border=&quot;none&quot;,t.style.outline=&quot;none&quot;,t.style.boxShadow=&quot;none&quot;,t.style.background=&quot;transparent&quot;,t.value=e,document.body.appendChild(t),t.select();try{document.execCommand(&quot;copy&quot;),alert(&quot;Đã sao chép liên kết!&quot;)}catch(o){alert(&quot;Không thể sao chép liên kết!&quot;)}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)}
</script>
<script>
$(document).ready(function(){$(&#39;.dropdown&#39;).each(function() {var $dropdown = $(this);$(&quot;.dropdown-link&quot;, $dropdown).click(function(e) {e.preventDefault();$div = $(&quot;.dropdown-container&quot;, $dropdown);$div.toggle();$(&quot;.dropdown-container&quot;).not($div).hide();return false;});});$(&#39;html&#39;).click(function(){$(&quot;.dropdown-container&quot;).hide();});});
</script>

Bước 3: Cuối cùng là thêm đoạn này vào dưới thẻ <div id="entry-header"> thứ 2.

<div class='dropdown'>
<a class='dropdown-link' href='javascript:void(0);' title='Chia sẻ bài viết này'><i class='fa fa-share-alt' style='margin:0 5px 0 0'></i>Chia sẻ</a>
<ul class='dropdown-container'>
<h2>Chọn hình thức muốn chia sẻ:</h2>
<li><a onclick='CopyLink()' style='cursor: pointer;' title='Sao chép liên kết của bài viết'>Copy liên kết</a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' title='Chia sẻ lên Facebook'>Facebook</a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Chia sẻ lên Google +'>Google +</a></li>
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Chia sẻ lên Twitter'>Twitter</a></li>
</ul>
</div>

LỜI KẾT

Chúc các bạn thành công nhé ! Và mình mong muốn là sẽ phát triển hơn nữa vì blog mình mới thay domain nên mọi người truy cập .tk không thể truy cập được và cho rằng blog mình bị sập . Mong mọi người share bài viết này của mình và cho 1 comment góp ý ạ .

Nguồn : Bác Sĩ Windows  

47

• Nhận liên kết

Hashtag: #Tất Cả #Thủ Thuật Blogger

Huỳnh Hoài Bảo

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!

Bài cùng chuyên mục