[Blogspot]- Thêm thông tin về tác giả ở cuối bài viết của Blog

[Blogspot]- Thêm thông tin về tác giả ở cuối bài viết của Blog

Tác giả là trái tim và linh hồn của một blog. Là người tạo ra một blog đẹp với lượng kiến thức lớn mang chia sẻ cùng mọi người.Vậy chắc sẽ có nhiều người muốn biết chút ít về thông tin của tác giả blog.Thủ thuật sau đây sẽ giúp cải thiện phần nào điều đó.Dưới đây chỉ là thủ thuật tạo khung cơ bản còn các bạn có thể tùy biến theo ý thích của mình

about-the-author-widget-for-blogger

Có 2 bước cần làm 1- Thêm CSS
2- Thêm HTML

1- Thêm CSS
Đăng nhập Blogger Bảng điều khiển> Thiết kế> Chỉnh sửa HTML.
- Sao lưu / Tải mẫu đầy đủ.
- Bây giờ tìm thẻ ]]></b:skin>
- Thêm mã dưới đây ngay trên nó ]]></b:skin>
- Lưu mẫu của bạn.

/* Bản thân */#authorbox {background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;width:auto;overflow:hidden;color:#fff;margin:5px auto;padding:40px 10px 10px 20px;font-family:Georgia;border-radius:7px;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.5),0px 4px 4px 0px rgba(255, 255, 255, 0.5) inset;}#authorbox:hover {-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);}#authorbox h4 {font-size:22px;color:#87CEFA;clear:none;margin:0;padding:10px 10px 5px;}#authorbox .author_small {font-style:italic;}#authorbox img {-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5),0px 4px 4px 0px rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5),0px 4px 4px 0px rgba(255, 255, 255, 0.5) inset;
padding: 5px 5px 5px 5px;-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);float:left;border:4px solid #7B68EE;margin:10px;padding:0;}#authorbox img:hover {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform: rotate(+180deg);-moz-transform: rotate(-180deg);}#authorbox p {color:#87CEFA;margin:0;padding:0 10px 10px;}#authorbox a {color:#FFA500;text-decoration:none;}

2-Thêm HTML
Bây giờ lại quay lại chỉnh sửa HTML và tìm tới thẻ
<div class='post-footer-line post-footer-line-2'/>
Cũng có thể đặt sau thẻ
<data:post.body/>
Nhưng phải ở trên phần bài liên quan
Và dán code sau vào dưới 1 trong 2 thẻ trên

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='authorbox'> <img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0rWCmV-jC1qapWQ6JZfx0M8K2d3vK7QcBKslOYMIJNYJX2g9WTj11wdyQ_VZQaZFP_7ueXIg7QlaIzQtHec-Wo9VpKnv4o7n8yblm5NJSCa5p-JOn3YJK_qlqZ8f4f8GFas8oJ1AOjA48/s320/13-1.gif' width='100'/> <h4><a href='http://jschanel.blogspot.com/' rel='author' title='Posts by JS Chanel '>Posts by JS Chanel</a></h4> <p>Xin chào!Mình làJS.Mình muốn được chia sẻ cùng các bạn những gì mình biết.</p> <p>Theo tôi trên <a href='http://www.twitter.com/abcdehxz'>Twitter</a> Or <a href='http://www.facebook.com/pages/abczcscs'>Facebook</a></p></div></b:if>

Thay các đổi một tí thông tin cho phù hợp với blog của bạn.

Nguồn: dautocrzazy.blog