Thêm button chia sẻ sử dụng HTML và CSS đẹp cho Blog/Website

Thêm button chia sẻ sử dụng HTML và CSS chất và đẹp cho blogspot giúp tăng tương tác giữa tác giả và người đọc cũng như tăng view cho blog của bạn
Thêm button chia sẻ sử dụng HTML và CSS đẹp cho Blog/Website
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Xin chào các bạn, dạo này mình cũng hơi bận nhưng hôm qua Chủ Nhật có hơi rảnh chút vào làm cái button chia sẻ blogspot sử dụng HTML và CSS không dùng JS. Ban đầu mình định là cái button liên hệ mà thôi nhiều bài share quá rồi thì mình đổi chút nó thành button chia sẻ cho hay và khác một chút. Code này thì trước đó mình cũng tham khảo một bài trên mạng thôi. 😁😁

Thêm button chia sẻ chất và đẹp cho blogspot

Code này bạn cũng có thể chỉnh sửa lại thành button liện hệ hoặc button thông tin mạng xã hội cá nhân, mình sẽ để code HTML của cả button chia sẻ và thông tin mạng xã hội cá nhân cho bạn nào không biết sửa nhé!

Hướng dẫn

Bước 1: Thêm đoạn code CSS sau đây vào trong theme của bạn thường nằm giữ cặp thẻ <head>...</head>.

<style>/*<![CDATA[*/
 	.social-container{position:fixed;height:50px;width:50px;border-radius:40px;background-color:#ffffff;bottom:30px;left:30px;box-shadow:0 12px 25px 0 rgb(30 30 30 / 4%);transition:0.3s ease, box-shadow 0.1s 0.3s ease;z-index:5}
	.social-check-label{z-index:10;cursor:pointer;position:absolute;height:50px;width:50px;bottom:0;left:50%;transform: translateX(-50%) rotate(0deg);border-radius:100%;transition:0.3s ease}
	.social-check-label:after,.social-check-label:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:4px;width:35%;border-radius:2px;background-color:#7577a9}
	.social-check-label:after{transform: translate(-50%,-50%) rotate(90deg)}
	.social-button{position:absolute;height:45px;width:45px;left:50%;transform: translate(-50%,-50%) scale(0.75);transition:0.3s ease, opacity 0.1s ease;background-size:cover!important;backface-visibility:hidden;opacity:0}
	.social-button > span{z-index:3;position:absolute;left:-100%;background:#fff;border-radius:100px;top:50%;transform:translateY(-50%);white-space:nowrap;box-shadow:0 12px 25px 0 rgb(30 30 30 / 4%);padding:8.25px 15px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:all 0.2s ease-in-out}
	.social-button:hover > span{left:calc(100% + 18.25px);opacity:1}
	.social-button.facebook{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/facebook-icon.png") no-repeat center}
	.social-button.twitter{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/twitter-icon.png") no-repeat center}
	.social-button.pinterest{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/pinterest-icon.png") no-repeat center}
	.social-button.linkedin{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/linkedin-icon.png") no-repeat center}
	#socialcheckbox{display:none}
	#socialcheckbox:checked~ .social-container{height:219.5px;transition:0.3s ease, box-shadow 0.1s ease}
	#socialcheckbox:checked~ .social-container > .social-button{opacity:1;cursor:pointer}
	#socialcheckbox:checked~ .social-container > .social-button.facebook{top:25px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-button.twitter{top:61.75px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-button.pinterest{top:99.25px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-button.linkedin{top:137.25px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-check-label{transform:translateX(-50%) rotate(225deg)}
/*]]>*/</style>

Bước 2: Thêm đoạn HTML sau vào trước thẻ đóng </body>

Nếu bạn dùng button chia sẻ thì dùng code dưới đây:

<input id='socialcheckbox' type='checkbox'/>
  <div class='social-container'>
    <a class='social-button facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Facebook</span></a>
    <a class='social-button twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Twitter</span></a>
    <a class='social-button pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Pinterset</span></a>
    <a class='social-button linkedin' expr:href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Linkedin</span></a>
    <label class='social-check-label' for='socialcheckbox'/>
  </div>

Nếu bạn dùng button thông tin mạng xã hội cá nhân thì dùng code dưới đây:

<input id='socialcheckbox' type='checkbox'/>
  <div class='social-container'>
    <a class='social-button facebook' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Facebook tác giả</span></a>
    <a class='social-button twitter' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Twitter tác giả</span></a>
    <a class='social-button pinterest' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Pinterset tác giả</span></a>
    <a class='social-button linkedin' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Linkedin tác giả</span></a>
    <label class='social-check-label' for='socialcheckbox'/>
  </div>

Button thông tin mạng xã hội cá nhân các bạn nhớ thay đường dẫn trong thuộc tính href nhé!

Bước 3: Lưu thay đôi.

Demo các bạn có thể xem trực tiếp trên trang bài viết này nhé, nó ở phí góc dưới bên trái màn hình kia kìa. 😛
Có thắc mắc gì thì cứ comment bên dưới bài viết này mình sẽ giải đáp nhé.

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

12 Nhận xét

Your email address will not be published.

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


  1. Tomorrow

    Duy chia sẻ parallax có thể áp dụng cho blogspot đi e

    Trả lời Xóa
  2. Tên bth

    dùng được trong median ui 1.7 không ạ?

    Trả lời Xóa

Maybe You Like

Follow
Google Translate