Trong hướng dẫn này, tôi sẽ chỉ cho các bạn cách làm thế nào để tạo một tiện ích tác giả cho blogger tuyệt đẹp. Một widget tuyệt vời dành cho các Quản Trị Viên.
Bạn có thể chỉnh sửa tuỳ thích theo ý của mình. Biểu tượng Twitter, Facebook, Dribble và Google Plus. Tiện ích này được sử dụng hoàn toàn CSS riêng nên sẽ không ảnh hưởng gì đến tốc độ của blog cũng như các thành phần khác trên blog của bạn nha.
VẬY LÀM CÁI WIDGET TÁC GIẢ CHO BLOGGER THẾ NÀO?
Bước 1: Đăng nhập Blogger > Giao diện > Chỉnh sửa HTML và dán đoạn code sau trước thẻ
</b:skin> hoặc thẻ </styel>:@import url(http://weloveiconfonts.com/api/?family=entypo);[class*="entypo-"]:before {font-family: 'entypo', sans-serif;}*{ box-sizing: border-box; }a { text-decoration: none; transition: all .4s; }.container { margin: 0 auto; }.container:hover .author-body { height: 70px; }.author-body a {color:#fff}.author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; color: #b9becd; }.author2:before { content: ""; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url("http://i.imgur.com/rppvYgh.jpg") no-repeat; background-size: 80px; border-radius: 100%; }.author2 h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; }.author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }.author-body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}.author-body a:hover { background: #515761; }.author-body a:last-child { border-right: none; }.foot { /*height: 100px;*/ }[class^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }[class^="footItem"] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }.footItem1 { background: #14b9d6; color: white!important;}.footItem1:hover { background: #5bcee2; }.footItem2 { background: #f27935; color: white!important; }.footItem2:hover { background: #f6a172; }.footItem3 { background: #1fbba6; color: white!important;}.footItem3:hover { background: #63d0c1; }.widget-content { box-shadow: 0 0 0 1px #D3D3D3;}.section:first-child .widget:first-child {margin-bottom:15px}
Có thể thay link hình ảnh (avatar) trên theo ý riêng của mỗi người.
Bước 2: Sau khi lưu template, hãy vào phần Bố cục > Thêm tiện ích > chọn HTML/Javascript và dán đoạn code sau:
<div class="container"> <div class="author2"> <h1>Huỳnh Hoài Bảo</h1> The Designer </div> <div class="author-body"> <a href="#Your-Twitter-LINK"><span class="entypo-twitter"></span></a><a href="#Your-Facebook-LINK"><span class="entypo-facebook"></span></a><a href="#Your-Dribble-LINK"><span class="entypo-dribbble"></span></a><a href="#Your-GooglePlus-LINK"><span class="entypo-gplus"></span></a> </div> <div class="foot"> <a href="#" class="footItem1"><span class="entypo-heart"></span>102</a><a href="#" class="footItem2"><span class="entypo-user"></span>4,587</a><a href="#" class="footItem3"><span class="entypo-plus"></span>84,023</a> </div> </div>
Chúc các bạn thành công!
Hashtag:
#Tất Cả
#Thủ Thuật Blogger