Gia Huy NY BLOG

Blog chia sẻ ảnh chất lượng cao - thủ thuật hay - ảnh bìa chất

Share Widget Info Cực Đẹp cho Blogspot

Xin chào tất cả các bạn đến với blog của mình.Hôm nay mình tình cờ thấy ở một template nước ngoài có cái widget info khá đẹp nên mình đem về share cho anh em
Share Widget Info Cực Đẹp cho Blogspot
Bắt tay vào làm thôi nào =))
Để thêm widget này vào blogspot thì rẩ đơn giản;các bạn chỉ cần vào bố cục →thêm tiện ích→html/js sau đó các bạn nhập toàn bộ đoạn code bên dưới vô
<style>

#about-wrapper{font-family: 'Roboto Condensed', sans-serif;;padding:0 0 20px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:100%;font-weight:700}

#about-wrapper .aboutimg{width:100%;height:130px;float:left;overflow:hidden}

img.profilex{width:60px;border-radius:100%;float:left;margin:-35px 20px 0;box-shadow:rgba(0, 0, 0, 0.2) 0px 8px 17px 0px, rgba(0, 0, 0, 0.188235) 0px 6px 20px 0px;height:60px}#about-wrapper p{padding:0 20px}

a.linkx{color:#fff;background-color:#404F6C;position:absolute;top:150px;right:30px;border-radius:100%;height:20px}

a.linkx:hover{background-color:#314151;color:#fff}

#about-wrapper h4{font-family: 'Roboto Condensed', sans-serif;line-height:3;font-weight:700;font-size:15px}

#material-subscribe{padding:20px 30px 30px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:100%;max-width:400px}

.buttonx{color:#fff!important;padding:10px 15px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out}

.buttonx:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

.buttonx.red{background:#404F6C}

</style>

<div id="about-wrapper">

<div class="aboutimg">

<img src="https://1.bp.blogspot.com/-5VCfJV5dYOo/W2wRZk2tiFI/AAAAAAAAApM/_6g7_aU0yfAO-xelAe2PuqiyAYZ5GFxawCLcBGAs/s1600/bg.jpg" alt="NGUYỄN DIỆN BLOG" title="NGUYỄN DIỆN BLOG"/></div>

<img class="profilex" src="https://2.bp.blogspot.com/-JwM_GRXg28c/W2wQJ6jcaDI/AAAAAAAAApA/N4o0psLZ8vwPUuryAYP9i4-6Z6qevO9nwCLcBGAs/s1600/7d2454cf6411e0366737e9ae619c4568.jpg" title="NGUYỄN DIỆN BLOG"/>

<h4>NGUYỄN DIỆN</h4>

<p>Nguyễn Diện là một chàng trai đẹp trai,cute,dễ thương và rất hòa đồng</p>

<a class="buttonx linkx" href="#"><i class="fa fa-user"></i></a>

</div>
Lời Kết:Chúc các bạn thành công !

Lê Võ Gia Huy Designer

Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Các bạn hãy đóng góp ý kiến của mình vào đây giúp tôi nhé !
Mọi chi tiết xin liên hệ:
Email : giahuylevo412@gmail.com
Facebook: https://www.facebook.com/giahuynyblog/
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • 4 nhận xét: