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. 😁😁
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='"https://www.facebook.com/sharer.php?u=" + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Facebook</span></a>
<a class='social-button twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Twitter</span></a>
<a class='social-button pinterest' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Pinterset</span></a>
<a class='social-button linkedin' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + 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é.
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.
Duy chia sẻ parallax có thể áp dụng cho blogspot đi e
Trả lời XóaCái parallax nó nhiều mục đích áp dụng lắm anh, để em nghiên cứu áp dụng cho cái intro như blog anh.
Trả lời Xóaa thấy ví dụ hay như bg bầu trời đầy sao vào ban đêm chẳng hạn
XóaĐúng kiểu như này không anh?
Xóauh, đại khái thế. Cuộn chuột thì bầu trời nó chuyển động theo, kiểu như mình vừa đi vừa ngắm sao ngoài thực tế ấy
XóaEm không biết bầu trời nó như nào cho hợp lý luôn, anh check lại xem bầu trời như nào. ;vvv
Xóachưa đúng ý a lắm nhưng mà cũng hay, chia sẻ cách làm đi e
XóaAnh f12 đi anh chứ em lười lắm làm demo cho anh thôi. ^^
Xóadùng được trong median ui 1.7 không ạ?
Trả lời XóaDùng được nhé bạn.
Trả lời Xóasao mik cài mà nó chi ghi dấu x mà không có khung share v bạn?
XóaBạn thử lại xem nhé, mình thấy code vẫn chạy bình thường.
Xóa