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

LongAnIT 11/24/2018
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é.

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây