Đôi khi bạn muốn chia sẻ tới các độc giả một vài điều về bản thân hay một vài mô tả về blog của mình. Hôm nay mình sẽ hướng dẫn các bạn tạo một khung thông tin tác giả đẹp mắt chèn bên dưới bài đăng trong Blogger. Sau đây là các bước thực hiện:
Các bạn có thể trực tiếp xem hình ảnh demo ở link bên dưới:
» VIEW DEMO
» Cách tạo khung author box đơn giản cho blogspot.
Bước 1.1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:
/* Author box by tqd.96.lt */ #post-footer-author { width: 90%; height: 67px; background: #e6e6e6; border:3px solid #b3b3b3; margin: 8px 0px 8px 0px; font-family: Arial,Verdana; } #author-img { /* Tùy chỉnh avatar */ width: 54px; height: 54px; background: #fff; float: left; margin: 7px; } #author-box { padding-right: 5px; margin: 0px; } #author-box p{ / * Tùy chỉnh phần mô tả * / font-size: 12px; padding: 10px; margin: 0; text-align: justify; text-transform: normal; color: #666666; } #author-box a{ / * Tùy chỉnh link * / color: #000fcc; text-decoration:none; } #autor-box a:hover { color:#7780ee; text-decoration:underline; }
Bước 1.2: Tìm đến dòng <data:post.body/> và chèn vào ngay sau nó đoạn code bên dưới (nếu template của bạn có nhiều hơn 1 dòng trên thì cứ chèn vào từng dòng rồi xem kết quả):
<!--Author box by tqd.96.lt--> <div id='post-footer-author'> <div id='author-img'> <img src='URL avatar của bạn' style='width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;'/> </div> <div id='author-box'> <p> Nội dung phần mô tả </p> </div> <!--/Author box by tqd.96.lt--> </div>
» Cập nhật nâng cao (tự động nhận diện ảnh tác giả đăng bài)
- Với những blog có nhiều cộng tác viên thì vấn đề thêm ảnh avantar nếu dùng code ở trên là rất phức tạp và rích rắc, sau đây mình sẽ hướng dẫn các bạn thêm một code tự động cập nhật avantar đơn giản như sau.
2.1. Thêm đoạn bên dưới trước thẻ đóng </head>
<script> //<![CDATA[ function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')} //]]> </script>
2.2. Trong bước 1.2 ở trên có một đoạn như bên dưới:
<img src='URL avatar của bạn' style='width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;'/>- Bạn hãy thay thế nó thành:
<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>- Giờ hãy lưu mẫu lại và kiểm tra kết quả nha.
Chúc các bạn thành công !
Xem thêm thủ thuật: kjmagic.blogspot.com
Nhận xét
Anh Nam và các bạn ơi cho mình hỏi chút ạ mình có đoạn code social share của bên sharethis.com mình đã chèn vào khung HTML và nó đã xuất hiện ở cuối mỗi bài viết. Anh và các bạn có thể xem thử tại đây: Practice English Movie . Bây giờ mình muốn thêm một bức ảnh như thế này [click vào đây để xem ảnh] ở trên thanh social share và nó cũng xuất hiện ở cuối mỗi bài viết thì phải làm như thế nào ạ. Rất mong nhận được sự giúp đỡ từ Anh và các bạn !
Trả lờiXóaTa có thể dán nó vào trước hoặc sau đoạn code social share đã thêm ban đầu, Nếu không nhớ đoạn nào có thể thêm vào trước hoặc sau đoạn:
Xóa<div class='post-footer'>
Note: có 2 đoạn <div class='post-footer'> trong mỗi blog chèn đúng đoạn cần thiết nó sẽ hiển thị ngay:
- Dùng code chèn hình ảnh như sau:
<b:if cond='data:blog.pageType == "item"'>
<img src='link ảnh' title='chia sẻ' alt='share'/>
</b:if>
Chỉ sử dụng đoạn: <img src='link ảnh' title='chia sẻ' alt='share'/> nếu muốn nó hiển thị cả ở trang chủ.
Uke được rồi ạ em cảm ơn anh nhiều lắm ạ
Xóa- tks bạn. Mình thử với blog của mình ngay mới được. Tiện đây mình muốn xin bạn một liên kết với blog của bạn được ko? Nếu ok thì bọn mình trao đổi link nhé.
Trả lờiXóa- Blog của mình: www.duongdoi8x.com
Tất nhiên là được bạn ak.
XóaMình đặt link cho bạn luôn hnay nhé. Lúc nào online thì đặt link giúp mình với. vwww.duongdoi8x.com. :)
XóaAnh Namkna ơi. Anh có thể giúp đỡ em làm khung như thế này được không ạ. Em thấy khung like và share của web tinvn.info rất hay.
Trả lờiXóaẢnh
Mong anh và các admin của Blog giúp đỡ em với ạ.
- Links web của em: Link
- Links web của tinvn.info: Link
Em cảm ơn anh nhiều.
Giờ bạn còn nhận trao đổi link không cho mình một chỗ. Hihi. Mình cũng không biết nhiều về mấy cái này vì mình mới tham gì blog :)
Trả lờiXóaĐây là blog của mình http://www.ducpham.net
Cảm ơn anh Doan Trinh.
Trả lờiXóaAnh có thể hướng dẫn cụ thể thêm được không ạ. Thay thế code ở đoạn nào, bỏ code ở đoạn nào, thêm code mới vào chỗ nào,.,........
- Links ảnh: Chia sẻ trên Facebook
- Links ảnh: Like và Chia sẻ bài viết này
Đây là trang Blog em đang sử dụng và muốn thay đổi ạ: Blog
Mong anh giúp đỡ ạ.
Bạn ơi mình muốn tạo một phần ghi chú trước comment như của bạn, mà khi mình viết code vào, nó không hiên ra kiểu <a href="Link" rel ... mà lại hiện luôn link ra. Phải làm thế nào bạn?
Trả lờiXóabạn sử dụng công cụ sau XEM CÔNG CỤ để mã hóa code rồi pate vào phần ghi chú nhận xét đó sẽ được ngay nha bạn.
XóaMình mã hóa rồi chèn nó vào mẫu nhưng nó lại hiện luôn ra nội dung code chứ không hiện code dạng text. Như kiểu mã hóa đoạn scrip rồi cho vào file html thì nội dung đó vẫn được hiển thị bình thường đó. Mình muốn đoạn code hiện dạng text thôi :(
XóaPhần nội quy bạn chèn vào phần cài đặt như ảnh này nha; XEM ẢNH
XóaBạn ơi muốn chèn nội quy comment vào blog thì làm sao? mình chèn bị lỗi :(
Trả lờiXóaBạn vào Phần cài đặt => Bài đăng và nhận xét sau đó gõ nội dung bạn muốn vào ẢNH NÀY
XóaVí dụ mình để thông báo:
Trả lờiXóaĐể viết chữ in nghiêng các bạn dùng thẻ chữ in nghiêng của bạn. Thì nó hiện chữ in nghiêng luôn chứ không hiện code dạng text. Hix
Ở trên đã đưa công cụ rồi. nhưng không để ý, dây là hành động spam của skybooks thì phải. Mã hoá code tools
Trả lờiXóaAnh Nam cho em hỏi em cũng muốn chèn cái author box giống cái author box anh đặt ở cuối các bài viết thì làm thế nào ạ?
Trả lờiXóavậy bạn cho mình xin code được không?
Trả lờiXóaĐây nè e: Khung Author box có nút like cho blogger ves 2
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóa