Huỳnh Hoài Bảo - Bảo Shady Blog
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.


Tao Widget Tac Gia Cho Blogger Tuyet Dep
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!
Không có nhận xét nào:
1. Chèn ảnh: [img]Link ảnh[/img]
2. Chèn video: [youtube]ID Video[/youtube]
Hướng dẫn lấy ID Video từ Youtube

Ví dụ video có link trực tiếp: https://www.youtube.com/watch?v=BUaLnDL3f-M, ta sẽ lấy BUaLnDL3f-M và thay vào vị trí ID Video ở cú pháp trên.

Nội quy chung Bảo Shady Blog

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Bảo Shady Blog - Life Is Share
- Thành lập: 01/08/2017
- Nội dung: Blog chủ yếu viết về những thủ thuật blog, và các thủ thuật khác. Ngoài ra, blog thi thoảng còn chia sẻ một vài bài viết về đời sống, share ảnh đẹp, tin tức về đời sống...
- Tác giả blog: Huỳnh Hoài Bảo hiện đang là học sinh cấp 2 THCS Lê Thị Cẩm Lệ, Bạc Liêu.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!