• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo Panel về tác giả kiểu Wordpress

26
01/03/2011

Tạo Panel về tác giả đặt cuối mỗi bài viết sẽ làm tăng brand name cho tác giả bài viết. Chúng ta đã biết cách tạo một Panel như vậy qua bài viết này. Như các bạn để ý ở một số blog viết trên nền Wordpress sẽ thấy Panel về tác giả khá đẹp. Đôi khi blog đó cấp quyền tác giả đăng bài viết cho một số người đăng ký và các tác giả đó đều có Panel giống như Admin của blog. Liệu blogspot có thể có được tính năng này hay không? Câu trả lời là có thể.



Qua bài viết này, tôi sẽ giới thiệu cách tạo một Panel về tác giả có phong cách Wordpress theo các bước như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm đến đoạn code như bên dưới.

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span></div>

Đặt vào sau đoạn code đó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType == "item"'>
<div class='Post-Author'>
<b>Về tác giả:</b><br/>

<b:if cond='data:post.author == "Tên tác giả"'>
<div id='AUTHOR_1'>
<a href='URL_Hồ sơ_Tác giả là Admin'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh của Admin'/>
<p>Đoạn text sơ nét về tác giả là Admin</p>
</div>
</b:if>

</div>
</b:if>

Trong đoạn code trên, bạn cần thay Tên tác giả, URL dẫn đến trang hồ sơ hoặc trang giới thiệu về tác giả là Admin, URL hình ảnh của Admin, đoạn text giới thiệu sơ nét về tác giả hoặc về blog.

Bước 2. Đặt đoạn code sau đây vào trước thẻ ]]</b:skin>.

.Post-Author img{
float:left;
margin:4px 7px 0px 0px !important;
-moz-box-shadow:0 0 20px rgba(255, 255, 255, .6);
border:0;
padding:0;
width:98px;
}
.Post-Author{
color:white;
border:1px solid transparent;
padding:10px;
text-align:justify;
-moz-border-radius:6px;
-moz-box-shadow:0 0 30px rgba(255,255,255,.3);
margin:20px auto;
background-image:-moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.2));
background-image:-webkit-gradient(linear,left bottom,right bottom,from(rgba(255,255,255,0)), to(rgba(255,255,255,.2)));
}

Bạn có thể tìm hiểu thêm về CSS để tùy biến đoạn CSS ở trên theo ý muốn của mình.

Lưu Template là OK.

Nếu blogspot của bạn đã cho phép một số người đăng ký đăng bài (cộng tác viên) trên blogspot của bạn, có quyền đăng nhập vào Blogger của bạn để đăng bài viết thì bạn có thể tạo Panel thêm cho các tác giả đó. Ở bước 1, dùng code như sau.

<b:if cond='data:blog.pageType == "item"'>
<div class='Post-Author'>
<b>Về tác giả:</b><br/>

<b:if cond='data:post.author == "Tên tác giả là Admin"'>
<div id='AUTHOR_1'>
<a href='URL_Hồ sơ của tác giả là Admin'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh của Admin'/>
<p>Đoạn text sơ lược về Admin</p>
</div>
</b:if>

<b:if cond='data:post.author == "Tên Tác giả 2"'>
<div id='AUTHOR_2'>
<a href='URL_Hồ sơ Tác giả 2'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh Tác giả 2'/>
<p>Đoạn text sơ lược về Tác giả 2</p>
</div>
</b:if>

<b:if cond='data:post.author == "Tên Tác giả 3"'>
<div id='AUTHOR_3'>
<a href='URL_Hồ sơ Tác giả 3'><b><data:post.author/></b></a>,
<img src='URL_Hình ảnh Tác giả 3'/>
<p>Đoạn text sơ lược về Tác giả 3</p>
</div>
</b:if>

</div>
</b:if>

Đến Bước 2, thì có thể thêm định dạng CSS như bên dưới để tạo dáng khác biệt cho Panel của từng tác giả.

#AUTHOR_1{

Đặt các thuộc tính CSS ở đây

}
#AUTHOR_2{

Đặt các thuộc tính CSS ở đây

}
#AUTHOR_3{

Đặt các thuộc tính CSS ở đây

}

Hy vọng bạn có thể linh hoạt vận dụng để có một Panel về tác giả theo ý muốn của mình.

{26 bình luậnAdd yours ?}

14:08:00, 1 thg 3, 2011

Template của mình không có
div class='post-footer-line post-footer-line-3'
Thế phải làm thế nào ?

Reply
14:15:00, 1 thg 3, 2011

Với blog của cậu thì đặt sau thẻ đóng </div> của thẻ <div class='tags'>. :67)

Reply
14:23:00, 1 thg 3, 2011

Anh Hà uống thuốc tăng lực hay sao mà ngày nào cũng đều đều 1 thủ thuật thế :67)

Reply
14:32:00, 1 thg 3, 2011

Hê hê, mở rộng trí tưởng tượng tí để viết k thì blog trở nên hoang vắng. A sợ viễn cảnh đó quá đi mất.
:58)

Reply
14:55:00, 1 thg 3, 2011

Mình cũng đã có bài viết tương tự nhưng về số bài viết như của Hạ thì không thể auto thay đổi được, của hạ ví dụ như số lượng bài viết là cũng manual hay phải dùng tay thay đổi vậy?

Reply
15:07:00, 1 thg 3, 2011

Ồ, chào bạn Đình Chỉnh, bạn nhớ nhầm tên mình rùi, mình là Hà chứ k phải Hạ mà. Tất nhiên là automatic rùi chứ manual thì chẳng lẽ cứ mỗi lần đăng bài mới là phải thay đổi số hay sao. :50)

Reply
17:52:00, 1 thg 3, 2011

JS của bác chỉ đếm tổng số bài viết trên blog, ở đây mình bác viết thì là đúng rồi. Nếu có từ 2 người viết trở lên thì không dùng code js đếm tổng số bài đó dc rồi.

Reply
19:37:00, 1 thg 3, 2011

DP nói đúng, đối với 2 tác giả trở lên thì nghiên cứu kiểu khác thôi, dù sao đây cũng là cách mô phỏng phong cách Wordpress tuyệt lắm rồi, cũng rất cần cho các blogger :49)

Reply
14:43:00, 17 thg 4, 2011

Làm sao để chèn linh vào phần Đoạn text sơ nét về tác giả là Admin vậy anh?

Reply
15:15:00, 17 thg 4, 2011

<a href="http://...." target="_blank">link text</a>

Reply
11:29:00, 18 thg 4, 2011

sao em làm không được nhỉ?

Em ko thấy code:div class='post-footer-line post-footer-line-3',cũng không thấy div class='tags',em chèn vào div class='post-footer-line post-footer-line-3'/ Nó chỉ hiện ra chữ:Về tác giả.
A xem giúp em với.
xaydungnganh.blogspot.com

Reply
15:19:00, 18 thg 4, 2011

Hai thẻ đó như nhau mà, e chèn sau thẻ đóng của ost-footer-line post-footer-line-3 nha

Reply
09:31:00, 31 thg 5, 2011

@Huỳnh Nhật Hà Em muốn hỏi chút với ạ, hiện tại trang ở dạng 2 column làm sao em thay đổi thành 3 column (right, left và content)được ạ? Em xin cám ơn!

Reply
10:08:00, 31 thg 5, 2011

Cái này thêm 1 cái bên trái và điều chỉnh width của Main và sidebar để cho 3 cái cùng float hài hòa. Phải có guide chắc bạn mới làm được.

Reply
06:01:00, 1 thg 6, 2011

Mình làm ko đc. Nó chỉ hiện chữ tác giả lên thôi. Chứ không thấy gì hết

Reply
11:46:00, 22 thg 7, 2011

Anh Hà, anh chỉ rõ hơn code đếm số bài viết đi! :51)

Reply
10:27:00, 20 thg 10, 2011

anh hà ơi đoạn text giới thiệu là chữ màu trắng,cùng màu với nền mất rồi nên không xem được,anh chỉ em cách đổi sang màu đen nhé,cám ơn anh

Reply
10:13:00, 25 thg 10, 2011

a Hà ! em muốn làm cái Related post và cái Panel về tác giả như anh thì kết hợp bài viết này và bài nào nữa để làm há a, vì em thấy code dài wa, hok biết có bị ảnh hưởng gì hok.

Reply
23:25:00, 25 thg 10, 2011

@Elvis Anh Với bài này nè. Script cũng nhẹ nên k ảnh hưởng gì đâu.

Reply
23:25:00, 26 thg 10, 2011

Kết quả tạo panel về tác giả anh Hà ơi xem giùm em, e tìm đoạn code này "<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>" không có, anh xem giùm em nhá.

Reply
23:27:00, 26 thg 10, 2011

@Huỳnh Nhật Hà Cảm ơn anh Hà nhiều, chúc buổi tối ấm áp !

Reply
23:32:00, 26 thg 10, 2011

@Elvis Anhem sử dụng tamplate SuvModel của Lasantha, anh chỉ giúp em với.

Reply
08:04:00, 27 thg 10, 2011

@Elvis Anh Cái dòng
<b:if cond='data:post.author == "Tên tác giả là Admin"'>
áp dụng với em sẽ là

<b:if cond='data:post.author == "Elvis Anh"'>

Reply
23:05:00, 27 thg 10, 2011

@Huỳnh Nhật Hà Ui ! cảm ơn a Hà nhiều nhé, em làm thành công rùi, mấy ngày nay làm phiền a Hà liên tục.hihi, chúc a và blog ngày càng phát triển nhé !

Reply
18:40:00, 12 thg 11, 2011

admin ui-giúp tui với nào -tôi không thể nào tìm được mấy cái
class='post-footer-line post-footer-line-3'>
hoặc tag gì như bạn nói- nhưng khi dùng firebug thì vẫn thấy nó trong html nhưng trong template lại không có -làm sao đây

Reply
15:26:00, 19 thg 4, 2012

Em sử dụng tem Congly , xin tác giả chỉ giúp

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn