Tạo Widgets chứa thông tin giới thiệu về blog

Tạo Widget chứa thông tin giới thiệu về blog
Tạo Widget chứa thông tin giới thiệu về blog

Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách tạo Widgets chứa thông tin giới thiệu về blog của bạn. Widget này khá đơn giản như tôi giới thiệu sau đây tuy nhiên bạn có thể tích hợp thêm nhiều thứ khác nữa như mạng xã hội hay gì đó thì tùy bạn code rất đơn giản chỉ bao gồm CSS và HTML. Vui lòng làm theo các bước sau đây:

Bước 1: Đăng nhập vào Blogger => Bố cục => Thêm tiện ích = > HTML / Javascript
Bước 2 : Copy đoạn toàn bộ đoạn code bên dưới dán vào. Ở đây tôi đã gộp cả CSS và HTML vào cùng một nơi cho tiện quản lý.
<style>
.card{padding-top:20px;margin:10px 0 20px 0;background-color:rgba(214,224,226,0.2);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card .card-heading{padding:0 20px;margin:0}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999}
.card .card-body{padding:0 20px;margin-top:20px}
.card .card-media{padding:0 20px;margin:0 -14px}
.card .card-media img{max-width:100%;max-height:100%}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap}
.card-comments .media-heading{font-size:13px;font-weight:bold}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top}
.card.people:first-child{margin-left:0}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff}
.card.people .card-top.green{background-color:#53a93f}
.card.people .card-top.blue{background-color:#427fed}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:rgba(214,224,226,0.2)}
.card.hovercard .cardheader{background:url("https://4.bp.blogspot.com/-d_fN3zZbj7M/W5n5GB8HhWI/AAAAAAAAADY/amIuXSOibnww4ysgBE0mLblBL0bRpb5TgCLcBGAs/s1600/banner2.jpg");background-size:cover;height:135px}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5)}
.card.hovercard .info{padding:4px 8px 10px}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px}
.longanit{border-radius:50%;width:32px;height:32px;line-height:18px}
</style>
<div class="card hovercard">
<div class="cardheader"> </div><div class="avatar"><img alt="" src="https://4.bp.blogspot.com/-cGitMJWA1oI/W5n5yR1216I/AAAAAAAAADg/s9lhXj69ir01fw7ibXygq3-r57Oxz3aKACLcBGAs/s1600/chuky.png" /></div><div class="info">
 <div class="title"> <a href="https://plus.google.com/116598239400614437662">Hamedledam</a>
 </div> <div class="desc">Web developer</div> <div class="desc">Advance Graphics Designer</div><div class="desc">Windows Tips, IT Manager</div> </div></div>

Bước 3: Bạn sửa đổi các thông tin trong phần HTML cho phù hợp với Blog của bạn nhé.

Nhận xét

Được xem nhiều nhất

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8

Lấy lại Windows Photo Viewer trên Windows 10 giúp xem ảnh nhanh hơn

Hướng dẫn mở PORT Modem GPON H646EW Viettel

Hướng dẫn triển khai AMP trên Blogspot

Chia sẻ template blogspot longanit đang sử dụng