 |
| Share widget about đơn giản cho blogspot. |
Dưới đây mình sẽ chia sẽ cho anh em một đoạn code ngắn giúp hiển thị một khung thông tin đơn giản.
Ưu điểm:
- Đẹp
- Đơn giản
- Chất
- Responsive
Khung thông tin này được tạo ra nhằm giúp cho các bạn có thể chèn lên website/blog của mình và viết một đoạn text ngắn giới thiệu về blog. Bên cạnh đó còn có các nút mạng xã hội nhằm giúp cho đọc giả của các bạn dễ dàng trao đổi với bạn hơn. Cuối cùng là 2 cái button cực chất do mình đem từ toishare.net về. Nhờ đó mà khung này càng thêm đặc sắc hơn.
Bước chèn vào website/blog:
Bước 1: Chèn đoạn code sau bên dưới thẻ <head>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) {
"use strict";
var i = window.document.createElement("link");
var o = t || window.document.getElementsByTagName("script")[0];
i.rel = "stylesheet";
i.href = e;
i.media = "only x";
o.parentNode.insertBefore(i, o);
setTimeout(function() {
i.media = n || "all"
})
}
loadCSS("//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css");
//]]>
</script>
Bước 2: Chèn đoạn css sau lên trên thẻ ]]></b:skin><style>
.widget_about{position:relative;overflow:hidden;background-image:linear-gradient(-20deg,#5ed19c 0%,#b7ff44 100%);text-align:center!important;color:#fff;padding-bottom:60px;margin-bottom:40px}
.widget_about p{font-size:13px;z-index:200;position:relative;z-index:200;padding:0 15px 5px 15px}
.widget_about .widget-title{margin-top:15px!important;margin-bottom:5px!important;padding-bottom:0!important;z-index:200!important;text-align:center!important;color:#fff!important;background:none!important}
.widget_about .widget-title:after{content:none}
.widget_about .widget.widget_social{z-index:200;position:relative;padding-bottom:0;padding-top:10px;margin:0;background:none!important}
.widget_about .widget.widget_social a{width:30px;color:#555;height:30px;padding:5px;background:none!important}
.about-avatar{width:120px;height:120px;border-radius:50%;border:8px solid #fff;z-index:200;margin:auto;background-repeat:no-repeat!important;background-size:cover!important;background-position:50% 50%!important;position:relative;margin-top:50px}
.about-avatar img{transform:scale(2)}
.profile-card-ctr{display:flex;justify-content:center;align-items:center;margin-top:10px}
@media screen and (max-width:576px){.profile-card-ctr{flex-wrap:wrap}}
.profile-card__button{background:none;border:none;font-weight:700;font-size:17px;margin:15px;padding:6px 16px;min-width:112px;border-radius:50px;min-height:40px;color:#fff;cursor:pointer;backface-visibility:hidden;transition:all .3s;text-align:center}
.profile-card.active{min-height:460px}
.profile-card-message.js-message .profile-card__button,.profile-card-message.popup-like .profile-card__button{margin:0}
.profile-card-message.js-message .profile-card__button:nth-child(1){margin-right:12px}
.profile-card-message.js-message .profile-card-form__bottom{margin-top:10px}
@media screen and (max-width:768px){.profile-card__button{min-width:170px;margin:15px 25px}}
@media screen and (max-width:576px){.profile-card__button{min-width:inherit;margin:0;margin-bottom:16px;width:100%;max-width:300px}.profile-card__button:last-child{margin-bottom:0}}
.profile-card__button:focus{outline:none!important}
@media screen and (min-width:768px){.profile-card__button:hover{transform:translateY(-5px)}}
.profile-card__button:first-child{margin-left:0}
.profile-card__button:last-child{margin-right:0}
.profile-card__button.button--blue{box-shadow:0 4px 30px rgba(19,127,212,0.4)}
.profile-card__button.button--blue:hover{box-shadow:0 7px 30px rgba(19,127,212,0.75)}
.profile-card__button.button--orange{box-shadow:0 4px 30px rgba(223,45,70,0.35)}
.profile-card__button.button--orange:hover{box-shadow:0 7px 30px rgba(223,45,70,0.75)}
.profile-card__button.button--gray{box-shadow:none;background:#dcdcdc;color:#142029}
.profile-card-message{width:100%;height:100%;position:absolute;top:0;left:0;padding-top:130px;padding-bottom:90px;opacity:0;pointer-events:none;transition:all .3s}
.profile-card-form{box-shadow:0 4px 30px rgba(15,22,56,0.35);max-width:88%;margin-left:auto;margin-right:auto;height:100%;background:#fff;border-radius:10px;padding:16px;transform:scale(0.8);position:relative;z-index:3;transition:all .3s}
@media screen and (max-width:768px)
</style>
Bước 3: Vào bố cục => thêm tiện ích HTML/Javascript thêm đoạn code dưới vào trong nó.<div class='widget widget_about'>
<h3 class="widget-title">Thông Tin</h3>
<p>Code 5 Giây là blog chia sẽ thủ thuật - đồng thời cũng là blog chuyên chia sẽ kiến thức về lập trình.</p>
<div class="widget widget_social">
<a href="https://twitter.com/340Media" class="twitter"><span><i class="fa fa-twitter" style="background: #ededed;height: 35px;line-height: 37px;width: 35px;text-align: center;border-radius: 100px;"></i></span></a>
<a href="#" class="facebook"><span><i class="fa fa-facebook" style="background: #ededed;height: 35px;line-height: 37px;width: 35px;text-align: center;border-radius: 100px;"></i></span></a>
<a href="#" class="pinterest"><span><i class="fa fa-pinterest" style="background: #ededed;height: 35px;line-height: 37px;width: 35px;text-align: center;border-radius: 100px;"></i></span></a>
<a href="#" class="instagram"><span><i class="fa fa-instagram" style="background: #ededed;height: 35px;line-height: 37px;width: 35px;text-align: center;border-radius: 100px;"></i></span></a>
<a href="#" class="flickr"><span><i class="fa fa-flickr" style="background: #ededed;height: 35px;line-height: 37px;width: 35px;text-align: center;border-radius: 100px;"></i></span></a>
<a href="#" class="vimeo"><span><i class="fa fa-vimeo" style="background: #ededed;height: 35px;line-height: 37px;width: 35px;text-align: center;border-radius: 100px;"></i></span></a>
</div>
<div class='profile-card-ctr'>
<button class='profile-card__button button--blue js-message-btn'>Message</button>
<button class='profile-card__button button--orange popup-like-btn'><a href='https://www.facebook.com/binh123dz' rel='nofollow' style='color:#fff' target='_blank'>Follow</a></button>
</div>
</div>
</div>
Bước 4: Lưu lại và hưởng thụ thành quả.--- Chúc các bạn thành công ---
Bình luận