Hiển thị các bài đăng có nhãn Admin. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Admin. Hiển thị tất cả bài đăng

Gắn Avatar cho tiện ích Team Blog Profile

Người đăng: buonkhongem on Thứ Bảy, 13 tháng 8, 2011

Nếu blogspot của bạn đã có một số tác giả tham gia viết bài cộng tác viên thì tiện ích Team Blog Profile rất cần thiết vì nó cho độc giả biết rằng blogspot của bạn đang có chương trình cộng tác viên, đồng thời cũng giúp tạo sự trân trọng đối với các tác giả. Để làm như vậy, thông thường chúng ta sẽ thêm vào tiện ích Profile (Hồ sơ). Cấu trúc XML của tiện ích này như sau:
<b:widget id='Profile1' locked='false' title='Các tác giả' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></ a></li>
</b:loop>
</ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'><a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a></b:if>
<dl class='profile-datablock'> <dt class='profile-data'><data:displayname/></dt>
<b:if cond='data:showlocation == "true"'> <dd class='profile-data'><data:location/></dd> </b:if>
<b:if cond='data:aboutme != ""'><dd class='profile- textblock'><data:aboutme/></dd></b:if> </dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>
</div>
</b:includable>
</b:widget>
Theo cấu trúc XML ở trên, hẳn bạn sẽ thấy rằng đối với Team Blog Profile thì tiện ích hồ sơ chỉ hiển thị tên tác giả (data:i.display-name) và đường dẫn đến trang hồ sơ tác giả (data:i.userUrl); còn trường hợp blogspot không có cộng tác viên thì tiện ích hồ sơ (normal blog profile) sẽ có thêm Avatar của quản trị viên. Như vậy với trường hợp Team Blog Profile thì tiện ích hồ sơ trông rất đơn điệu. Vấn đề mình nêu ở đây là gắn thêm Avatar cho các tác giả để tiện ích trở nên đẹp hơn. Ngoài ra có thể gắn thêm số đếm bài viết cho các tác giả. Bạn có thể xem Demo tại trang chủ của Thủ thuật Blogger. Để làm được như vậy bạn hãy thay toàn bộ đoạn code trên bằng đoạn code bên dưới:
<b:widget id='Profile1' locked='false' title='Các tác giả' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile styled by www.thuthuatblogger.info -->
<style>
.authorlist ul li {list-style:none;padding:0;margin:0}
.authorlist img {float:left;margin:0 10px 10px 0;width:50px;height:50px;border:solid #ddd 1px;padding:1px}
.authorlist .userUrl {font-weight:bold}
</style>
<script type='text/javascript'>function showpostcount(json){document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}
</script>
<div class='authorlist'>
<ul>
<b:loop values='data:authors' var='i'>
<li>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 1&quot;'>
<img src='URL_Avatar_Tác giả 1'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span>Quản trị viên</span><div style='clear:both;'/>
<b:else/>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 2&quot;'>
<img src='URL_Avatar_Tác giả 2'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span><script src='/feeds/posts/default/-/Tác giả 2?alt=json-in-script&amp;callback=showpostcount'/> bài viết</span><div style='clear:both;'/>
<b:else/>
<b:if cond='data:i.userUrl == &quot;URL_ProfileID_Tác giả 3&quot;'>
<img src='URL_Avatar_Tác giả 3'/>
<span class='userUrl'><a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a></span><br/>
<span><script src='/feeds/posts/default/-/Tác giả 3?alt=json-in-script&amp;callback=showpostcount'/> bài viết</span><div style='clear:both;'/>
<b:else/>
<a expr:href='data:i.userUrl' expr:title='data:i.display-name'><data:i.display-name/></a>
</b:if></b:if></b:if>
</li>
</b:loop>
</ul></div>
</b:if>
</div>
</b:includable>
</b:widget>
Ở đoạn code trên, bạn lần lượt thay URL dẫn đến ProfileID của các tác giả, thay URL tương ứng các Avatar của các tác giả. Lưu ý khi duyệt bài của các tác giả, quản trị viên nên đặt thêm nhãn theo tên tác giả cho bài viết để tiện quản lý bài viết của các tác giả đồng thời giúp tạo số đếm bài viết cho tiện ích này.

Một lần nữa với việc sử dụng lệnh điều kiện, mình đã giúp bạn tìm hiểu thêm sự bí ẩn của ngôn ngữ XML trong Template của blogspot.
More about

Thủ thuật yêu cầu: Gắn tem cho bài viết đang chờ duyệt

Người đăng: buonkhongem on Chủ Nhật, 31 tháng 7, 2011

Chắc hẳn một khi blogspot của bạn đã phát triển ổn định và có một chỗ đứng nhất định trong cộng đồng, hơn nữa bạn không có nhiều thời gian để viết bài trong khi bạn vẫn muốn duy trì bài viết đều đặn cho blogspot của mình; bạn sẽ nghĩ đến việc tìm cộng tác viên viết bài cho bạn. Từ nhu cầu này, nảy sinh việc cần phải gắn tem bài đang chờ duyệt (Pending Post Stamp) cho bài viết mới của cộng tác viên. Thủ thuật này mình viết theo yêu cầu của bạn Minh Quân tại trang ICTSOFT.

Tính năng của thủ thuật này là gắn tem Bài này đang chờ duyệt cho bất kỳ một bài viết nào đó của cộng tác viên, theo đó các bài được gắn tem khi được hiển thị ở trang index (trang chủ, trang nhãn và trang lưu trữ) sẽ được nhìn thấy song không thể click vào link dẫn đến nội dung bài viết. Trong trường hợp blogspot của bạn có gắn tiện ích Bài viết mới nhất (hoặc link bài viết xuất hiện trên kết quả các công cụ tìm kiếm) thì một khi link bài viết được click vẫn không thể nhìn thấy nội dung bài viết (bởi một lý do là bài viết đang được admin kiểm duyệt trước khi xuất bản chính thức); tuy nhiên bạn đọc vẫn có thể chém gió tại phần Comments của bài viết này. Định dạng này sẽ tạo sự thú vị cho trang bài viết đang được duyệt, theo đó người đọc có thể bàn tán, đưa ra quan điểm, ý kiến, cảm nghĩ của mình về bài viết sắp được xuất bản chính thức.

Xem Demo 1Demo 2.



Để thực hiện thủ thuật này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates (mở rộng mẫu tiện ích). Tìm đến dòng <b:include data='post' name='post'/> và thay nó bằng đoạn code bên dưới:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
Ở đoạn code trên bạn cần thay URL cho bài viết đang chờ duyệt.

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]></b:skin>.
.pendingpost-stamp {
z-index: 200;
width: 550px; // chỉnh chiều rộng tương thích với phần Main
height: 150px;
position: absolute;
color:#ed0000; // màu chữ của dòng tem thông báo ở kiểu trang index
text-align: right;
font: bold 15px Arial;
background:#d7d7ff;
opacity: 0.5;
filter: alpha(opacity=50);
margin:0;
padding:2px;
}
.pendingpost-message {
float:center;
color: #2B65EC; // màu chữ của dòng thông báo ở kiểu trang item
font: bold 15px Arial;
text-align:center
}
Đoạn code CSS này giúp vô hiệu hóa link ở các kiểu trang index (không thể click vào tiêu đề bài viết). Bạn có thể tùy biến CSS theo các chú thích ở trên.

Sau đó lưu Template là xong.

Trong trường hợp bạn cần dán tem cho một số bài viết đang chờ duyệt thì sử dụng code ở Bước 2 theo kiểu như sau:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-stamp'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if> </b:if> </b:if>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 1&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 2&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.url == &quot;URL_bài viết đang chờ duyệt 3&quot;'>
<div class='pendingpost-message'>BÀI NÀY ĐANG CHỜ DUYỆT</div>
<div style='display:none'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if></b:if></b:if>
</b:if>
Bạn cần thay các URL cho các bài viết đang chờ duyệt tương ứng nhé. Lưu ý một khi bất kỳ bài viết nào đó đã được bạn duyệt rồi thì bạn chỉ cần xóa URL của bài viết đang được duyệt ấy ra khỏi code thủ thuật hoặc làm ngược lại các bước trên để trở về trạng thái bình thường. Thủ thuật này không dùng Javascript nên rất nhẹ nhàng. Nếu bạn gặp khó khăn trong việc cài đặt, xin vui lòng để lại lời nhắn dưới đây.
More about

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

Người đăng: buonkhongem on Thứ Hai, 28 tháng 2, 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.
More about

Tạo khung thông tin tác giả blog kiểu trượt

Người đăng: buonkhongem on Thứ Hai, 17 tháng 1, 2011

Panel trượt chiều ngang là một dự án do Jon Phillips tại trang SpyreStudios.com phát triển. Kiểu panel trượt này có sử dụng thư viện jQuery. Người ta thường sử dụng Panel trượt để tạo một form liên hệ hoặc form đăng nhập, đôi khi chỉ để tạo bảng thông tin về tác giả hoặc website.

Sau khi nghiên cứu dự án này, tôi đã thử nghiệm và điều chỉnh về CSS để tạo một panel trượt chiều ngang làm bảng thông tin về tác giả áp dụng cho blogspot. Bạn có thể nhìn thấy Demo tại trang này. Sau đây là các bước thực hiện.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

/* Horizontal Panel Sliding Customized by Huynh Nhat Ha */
.panel {
position: fixed;
top: 100px;
right: 0;
display: none;
background: #DADADA;
border-bottom:1px solid #ccc;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-box-shadow: 1px 10px 25px 1px #000;
width: 330px;
height: auto;
padding: 30px 30px 60px 30px;
font-size:14px;
font-family:arial, verdana, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: normal;
text-align: left;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #000;
text-align: justify;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #660000;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #660000;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #FF5809;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #FF5809;
}
a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family:arial,verdana, sans-serif;
color:#fff;
padding: 10px 35px 10px 25px;
font-weight: 700;
background:#660000 url(http://img405.imageshack.us/img405/9196/plusg.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: arial,verdana,sans-serif;
color:#fff;
padding: 15px 75px 15px 45px;
font-weight: 700;
background:#660000 url(http://img405.imageshack.us/img405/9196/plusg.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-toprleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomrleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.active.trigger {
background:#660000 url(http://img694.imageshack.us/img694/4267/minus.png) 85% 55% no-repeat;
}
.columns{
clear: both;
width: 300px;
padding: 0px 0 10px 0;
line-height: 22px;
text-align: justify;
}
.colleft{
float: left;
width: 130px;
line-height: 20px;
}
.colright{
float: right;
width: 130px;
line-height: 20px;
}
ul{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

Tiếp tục đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

Bước 2. Đặt đoạn code sau đây vào trước dòng <div id='content-wrapper'>. Với một số Template có thể trước dòng <div class='content-inner'> hoặc <div class='tabs-outer'>.

<div class='panel'>
<h3><font color='#000' face='Arial' font-weigth='bold'>Khái lược về tác giả</font></h3>
<p><img alt='' src='URL_ảnh Avatar_Admin' style='float:left;margin-right:10px;padding: 5px;width:90px;height:90px'/>
Đây là đoạn text giới thiệu ngắn về tác giả Blog.</p>
<p></p>
<div style='clear:both;'></div>

<div class='columns'>
<div class='colleft'>
<h3><font color='#000' face='Arial'>Liên lạc </font></h3>
<ul>
<li><a href='http://huynh-nhat-ha.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/about-me.html' title='Giới thiệu'>Giới thiệu</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/projects.html' title='Dự án'>Dự án</a></li>
<li><a href='http://www.emailmeform.com/fid.php?formid=XXXXX' title='contact'>Liên hệ</a></li>
<li><a href='mailto:huynhathawave@yahoo.com' title='email'>Email</a></li>
</ul>
</div>

<div class='colright'>
<h3><font color='#000' face='Arial'>Theo dõi</font></h3>
<ul>
<li><a href='http://twitter.com/huynhatha' title='Twitter'>Twitter</a></li>
<li><a href='http://facebook.com/huynh-nhat-ha' title='Facebook'>Facebook</a></li>
<li><a href='http://www.google.com/profiles/huynh-nhat-ha#buzz' title='buzz'>Buzz</a></li>
<li><a href='http://www.myspace.com/'>MySpace</a></li>
<li><a href='http://huynh-nhat-ha.wordpress.com/'>Wordpress</a></li>
</ul>
</div>

</div>
<div style='clear:both;'></div>
</div>
<a class='trigger' href='#'>Tác giả</a>

Trong đoạn code trên, bạn cần thay URL cho hình ảnh Avatar của bạn, đặt đoạn text giới thiệu khái lược về tác giả, thay địa chỉ blogspot của bạn và các liên kết liên hệ, email, twitter, facebook, …

Lưu Template là OK.
More about

Tiện ích Về tác giả ở cuối bài viết Blogger

Người đăng: buonkhongem on Thứ Tư, 15 tháng 12, 2010

Tiện ích Về tác giả (About the Author widget) đặt ở cuối bài viết Blogger giúp người đọc dễ dàng nắm bắt thông tin sơ lược về tác giả đồng thời nâng cao tác quyền các bài viết trên blog. Nếu blog của bạn cho phép quyền đăng bài viết cho nhiều người thông qua gmail của họ thì chỉ có bạn là tác giả blog được hiển thị tiện ích này.

Nhờ tiện ích này mà người đọc có thể dễ dàng phân biệt được đâu là tác giả - Admin của blog nếu blog của bạn cho phép nhiều người được quyền đăng bài viết.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

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

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

.author-panel {
-moz-border-radius:5px;
background-color:#add8e6;
border: 1px solid #000;
margin:-30px 0 20px 0;
padding:5px;
}
.author-avatar img {
-moz-border-radius:5px;
background-color:#333;
width:60px; height:75px;
float:left;
margin:10px 10px 0;
}
.author-panel p {color:#fff;font-size:12px;text-align:justify;}

Bước 2. Đặt đoạn code dưới đây sau dòng <div class='post-footer'> hoặc trước dòng <div class='post-footer-line post-footer-line-3'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Tên tác giả&quot;'>
<div class='author-panel'>
<div class='author-avatar'><img alt='' src='URL_Avatar' /></div>
<h3>Về tác giả</h3>
<p>Thông tin về tác giả</p>
<p>Theo dõi:
<a href='http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXX' target='_blank'>Blogger</a> |
<a href='http://www.twitter.com/yourusername' target='_blank'>Twitter</a> |
<a href='http://www.facebook.com/yourusername' target='_blank'>Facebook</a>
</p>
</div>
</b:if></b:if>

Trong đoạn code trên, bạn cần thay đổi những dòng được đánh dấu màu đỏ, lần lượt là Tên tác giả (thường xuất hiện khi bạn đăng nhận xét), liên kết ảnh avatar của bạn, thông tin sơ lược về tác giả, ID của Blog, username trên Twitter và Facebook.

Lưu Template là OK.
More about