Home Home » Widget

TIỆN ÍCH VỀ TÁC GIẢ Ở CUỐI BÀI VIẾT BLOGGER

09:12 |


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.
Theo thuthuatblogger

Cool Popular Posts

08:41 |
Bài viết hướng dẫn bạn tạo Popular Posts có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự.
popular posts


Trong bài viết này mình sẽ áp dụng cho Popular Posts có id là PopularPosts1.

Bước 1: Thêm đoạn mã dưới đây vào sau thẻ <b:skin><![CDATA[ trong template của bạn.
/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/
Bước 2: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
Bước 3: Vào Chỉnh sửa HTML (không chọn Mở rộng Mẫu Tiện ích) và tìm trong template từ khóa <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>. Thay thế nó bằng đoạn mã dưới đây.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBT7ZLEsegowz6DowvBcT1h6dchKw21NpG6YaduLjPvsLtU3QhsZ_JAOmME85_nu4OrnO_F1UkLoUxgag21BTH-fXtR68H00i5nkMiXIlgxQsTCDYq0CoBVf5eA1oG53sUL9zObgcnkmD/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBT7ZLEsegowz6DowvBcT1h6dchKw21NpG6YaduLjPvsLtU3QhsZ_JAOmME85_nu4OrnO_F1UkLoUxgag21BTH-fXtR68H00i5nkMiXIlgxQsTCDYq0CoBVf5eA1oG53sUL9zObgcnkmD/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
 </b:widget>
Bước 4: Quay trở lại Bố cục và chọn Chỉnh sửa widget Popular Posts. Chọn Hiển thị tối đa 5 bài đăng, các thông số còn lại lựa chọn theo ý bạn.
popular posts setup

Để dễ dàng cho mọi người thay đổi màu nền mình đã sử dụng Trình thiết kế Mẫu của Blogger. Bạn vào Thiết kế → Trình thiết kế Mẫu → Nâng cao → PopularPosts Backgrounds và thay đổi lần lượt background color1, background color2, background color3, background color4, background color5 theo ý muốn.

popular posts background setup