Portfolio

Our Blog

The outline of what we do in this site

Thứ Năm, 19 tháng 12, 2013

Tạo khung Thông tin tác giả dành cho Blogspot - Blogger Author Box





Rất nhiều website con thuộc hệ thống mình đã dùng Blogspot, 1 nền tảng web hoàn toàn miễn phí và đa năng của Google! Và những website con này thường mình tuyển nhiều Cộng tác viên để viết bài, phát triển web! Ví dụ như Việt FontViệt Cover,...

Tuy nhiên Blogspot không có sẵn khung Thông tin dành cho mỗi tác giả mà bắt buộc ta phải tùy biến vào! Việc thêm khung tác giả giúp cho website trở nên chuyên nghiệp hơn, và các tác giả cộng tác viên cũng cảm thấy hào hứng hơn vì mỗi bài viết của mình đều có phần giới thiệu thông tin tác giả.

Mình có xem nhiều bài hướng dẫn tạo khung thông tin tác giả rồi, tuy nhiên có 1 cách mà mình rất ưng ý và sử dụng nó cho hệ thống website sử dụng nền tảng Blogspot của Việt Designer. Bởi vì nhìn nó đơn giản và dễ tùy chỉnh :)

Và hôm nay mình xin chia sẻ bài hướng dẫn dành cho những ai đang tập tành Blogspot.

Trước tiên mới các bạn xem hình ảnh Demo:
[​IMG]

Khi áp dụng nó vào Việt Cover
[​IMG]

Bạn có thể xem demo trực tiếp tại đây: http://cover.vietdesigner.net/2013/08/cover-thang-6-co-gai-cua-thang-6.html

OKAY! Ta bắt đầu bài hướng dẫn luôn nhé!

Bước 1: Đầu tiên ta vào phần chỉnh sửa template, và tìm đến đoạn:
Code:
[B]]]></b:-skin>[/B]
Sau khi tìm ra vị nó nằm ở đâu, bạn dán đoạn CSS này ở phía trên của nó:
Code:
.author-box{background:#CFCFCF;width:570px border:1px dashed #999; margin-top:20px; overflow:hidden; padding:10px}
.avatar-author{border:1px solid #888; float:left; padding:5px}
.info-author{float:right; width:483px}
.info-author h2{font-size:18px}
Bước 2: Việc đơn giản cuối cùng đó là bạn đưa đoạn code sau đây đến bất cứ chỗ nào mà bạn muốn chèn khung thông tin tác giả:
Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
                                    <div class='author-box'>
                                        <b:if cond='data:post.author == &quot;Thay tên tác giả vào đây&quot;'>
                                            <img class='avatar-author' height='80' src='Hình tác giả' width='80'/>
                                            <div class='info-author'>
                                                <h2>Thông tin tác giả:<a href='Link website của tác giả' target='_blank'>Tên tác giả</a></h2>
                                                <p>Lời giới thiệu</p>
                                            </div>
                                        </b:if>
                                    </div>
                                </b:if>
Thường thì đoạn code Thông tin tác giả này được chèn ở 1 trong những đoạn sau trong template của bạn:
Code:
<div class='post-footer-line post-footer-line-1'>
Hoặc
Code:
<div class='post-footer-line post-footer-line-2'>
Hoặc
Code:
<div class='post-footer-line post-footer-line-3'>
Hoặc nếu template của bạn không có 3 đoạn trên, thì chèn vào dưới đoạn:
Code:
<data:post.body/>
Lưu 1 số điều:
  1. Phần thay tên tác giả vào đây là bạn sẽ chèn tên profile của tác giả đó vào, nếu bạn điền không đúng tên thì khung tác giả sẽ không xuất hiện.
  2. Cứ mỗi 1 tác giả là bạn phải tạo 1 đoạn code riêng, và điền đầy đủ info, link, avatar của người vào.
  3. Tùy vào mỗi template, bạn có thể tùy chỉnh bố cục màu sắc của khung tác giả tùy theo ý thích ở phần CSS nhé!
Chúc các bạn thành công!!! Mãi mà mình vẫn chưa có 1 bài viết chính thức giới thiệu về Blogspot, hẹn 1 ngày đẹp trời mình sẽ viết bài giới thiệu về mã nguồn blog tuyệt vời này cho những ai thích vọc phá web có thể tham khảo thêm :D

Bài viết trên có tham khảo từ tác giả Yolks




Read more: http://forum.vietdesigner.net/threads/tao-khung-thong-tin-tac-gia-danh-cho-blogspot-blogger-author-box.34984/#ixzz2nwL86xgW

[Blogger Cơ Bản] Hướng Dẫn Cách Tải Template Lên Blog Chi Tiết



Đây làm bài hướng dẫn cho newbie cách tải template lên blog :D
Đầu Tiên Bạn Chọn Và Download Template Tại Đây
Ở Đây Mình Chọn Template Này : Red hood Portfolio
Khi Tải Về Template Sẽ Có Định Dạng .xml


Ok , Bắt Đầu Nhé ;)

Bước 1: Đăng Nhập Vào Blogger
Bước 2: Chọn Blog Của Bạn
Bước 3 : Vào Mục "Mẫu" và chọn phần : "Sao Lưu Khôi Phục"

[​IMG]
Bước 4 : Click "Chọn Tệp Tin" Và Chọn Tới File Template Bạn Vừa Down Có Định Dạng .xml 
[​IMG]

Vậy Là Xong Bây Giờ Bạn Chỉ Cần Chỉnh Sửa Lại 1 Tý Thôi :-bd



Read more: http://forum.vietdesigner.net/threads/blogger-co-ban-huong-dan-cach-tai-template-len-blog-chi-tiet.44863/#ixzz2nwKsIyRL