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

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.