Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger

Tiện ích bài viết mới nhất từ Bloglisst hoặc Popular Posts của blogger đã không còn xa lạ với chúng ta nữa. Các tiện ích này hầu như chỉ được tùy biến đơn điệu và chưa trang trí gì được . Namkna từng giới thiệu cách Làm đẹp tiện ích Popular Posts với hiệu ứng tooltip Tại đây. Hôm nay namkna sẽ thêm style mới với hiệu ứng (tooltips) vào cho 2 tiện ích này càng vượt trội hơn.

Ảnh Demo.

Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Ttải về (Download Template Full Version).

Mã CSS dùng chung:

Mã này dùng chung cho cả 2 thủ thuật bài viết mới nhất và recent post mà mình sẽ giới thiệu bên dưới.

Thêm vào như sau: Đăng nhập (login) vào Blog => Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Bạn hãu chọn một trong 2 kiểu bên dưới và thêm nó vào trước thẻ ]]></b:skin>
Kiểu 1:

.tooltips{z-index:2;color:#3b5998;display:inline-block;cursor:pointer}
.tooltips span{display:none;position:absolute;width: 240px;background: #ffffe0;border: #555 1px solid;padding:4px 5px 5px 5px;margin: 7px 0px 0px 0px;color:#333;font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;font-size: 13px;z-index: 2;border-radius:3px;opacity:0.8}
.tooltips:hover span{display:block;color: #333;}
.tooltips span:before,.tooltip span:after{content:"";position:absolute;z-index:1000;top:-57px;left:10%;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffe0;border-top:0}
.tooltips span:before{border-top-color:#ffffe0;top:-8px}

Kiểu 2

.tooltips{position:relative;display:block}
.tooltips span{visibility:hidden;position:absolute;bottom:30px;left:50%;z-index:999;width:230px;margin-left:-127px;padding:10px;border:2px solid #0F83A0;opacity:.9;background-color:#A6CED8;background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));-moz-border-radius:4px;border-radius:4px;-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.tooltips:hover{border:0;}
.tooltips:hover span{visibility:visible}
.tooltips span:before,.tooltip span:after{content:"";position:absolute;z-index:1000;bottom:-7px;left:15%;margin-left:-8px;border-top:8px solid #A6CED8;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:0}
.tooltips span:before{border-top-color:#0F83A0;bottom:-10px}

- Lưu mẫu lại và tiến hành làm các bước bên dưới.

1. Bài viết mới nhất (Bloglist)

Với cách tùy biến gọn gàng và đẹp mắt , với tốc độ vượt trội vì không dùng Javascript . Ngoài ra, nó rất đơn giản và dễ dùng.

View Demo

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Bố cục (Layout)
3- Chọn Thêm tiện ích (Add a Gadget) => Chọn Danh sách blog (Blog list):

- Tiếp theo tùy chọn như sau:

+ Tại mục Tiêu đề (Title), bạn hãy đề là Bài viết mới nhất.

+ Tick chọn vào các mục Tiêu đề của mục gần đây nhất (Title of most recent item), Đoạn trích của mục gần nhất (Snippet of most recent item), Hình thu nhỏ của đoạn gần đây (Thumbnail of most recent item).

Blog list - Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger

- Nhấn Thêm vào danh sách (Add to list).

Sau đó dán lần lượt các URL bên dưới vào mục Thêm bằng URL (Add by URL):

http://namkna.blogspot.com/feeds/posts/default/?start-index=1
http://namkna.blogspot.com/feeds/posts/default/?start-index=2
http://namkna.blogspot.com/feeds/posts/default/?start-index=3
http://namkna.blogspot.com/feeds/posts/default/?start-index=4
http://namkna.blogspot.com/feeds/posts/default/?start-index=5

- Nếu bạn muốn hiển thị bao nhiêu bài viết thi hãy nhập vào bấy nhiêu dòng, Nếu muốn hay thêm các đoạn code như sau vào:

http://namkna.blogspot.com/feeds/posts/default/?start-index=n

- Nhớ thay n thành số kế tiếp nha.
- Sau khi nhập xong hãy bấm Lưu (Save )lại.

4- Vào Mẫu (Template) => Chỉnh sửa HTML (Edit HTML) không cần chọn mở rộng tiện ích mẫu. Tìm đoạn code tương tự sau:

<b:widget id='BlogList1' locked='false' title='Bài viết mới nhất' type='BlogList'/>

- Và thay thế thành:

<b:widget id='BlogList1' locked='false' title='Bài mới nhất' type='BlogList'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'><data:title/></h2>
  </b:if>

  <div class='widget-content'>
   <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
     <b:loop values='data:items' var='item'>
      <li expr:style='data:item.displayStyle'>
       <div class='blog-content'>
        <div class='item-content'>
         <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
          <b:if cond='data:item.itemThumbnail'>          
           <img class='item-thumbnail' expr:alt='data:item.itemTitle' expr:src='data:item.itemThumbnail.url' height='40px' width='40px'/>
<b:else/>
           <img alt='no image' class='item-thumbnail' height='40px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9X_bkipfz3HAcia48M8nPouNC-odgL4-WyP7261G140Pbnu_pNJhcHpoURAiIOLWHjI_5iBQ6KrhaK9rCic8EzGYMNsrzyvnf5CuRLbkg-787xzayXe6gnjqqPLAMRnhKwwON0cBLD1A/s288/noimage.png' width='40px'/>
          </b:if>
         </b:if>
         <b:if cond='data:showItemTitle == &quot;true&quot;'>
          <span class='item-title'>
           <b:if cond='data:item.itemUrl != &quot;&quot;'>
           <a class='tooltips' expr:href='data:item.itemUrl'><data:item.itemTitle/><span><data:item.itemSnippet/></span></a>
           <b:else/>
           <span><data:item.itemSnippet/></span>           </b:if>
          </span>
         </b:if>
        </div>
       </div>
       <div style='clear: both;'/>
      </li>
     </b:loop>
    </ul>

    <b:if cond='data:numItemsToShow != 0'>
     <b:if cond='data:totalItems &gt; data:numItemsToShow'>
      <div class='show-option'>
       <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
        <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
       </span>
       <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
        <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
       </span>
      </div>
     </b:if>
    </b:if>
   </div>
  </div>
 </b:includable>
</b:widget>

2.Bài đăng phô biến (Popuplar posts)

Tiện ích này được mình nang cấp từ tiện ích Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến mà mình đã giới thiệu trước đây Tại đây.

View Demo

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Bố cục (Layout)

3- Bấm vào Thêm tiện ích (Add widget) => Chọn Bài đăng phổ biến (popular post)

- Nếu blog của bạn đã có tiện ích Bài đăng phổ biến (popular post) thi hãy bỏ qua bước 3 này nha.

4- Tiếp theo bạn bấm vào chỉnh sửa (Edit) tiện ích vừa tạo hoặc có sẵn để định cấu hình của bài đăng phổ biến như sau:

5- Lưu chỉnh sửa lại lại/

6- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets).

- Tìm đoạn sau:

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
  <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
    </div>
  </b:if>
  <div class='item-title'>
    <a expr:href='data:post.href'><data:post.title/></a>
  </div>
  <div class='item-snippet'>
    <data:post.snippet/>
  </div>
</div>

- Và thay thế tất cả thành đoạn code :

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
  <div class='item-title'>
    <b:if cond='data:post.thumbnail'>
      <img border='0' class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' height='38px' width='38px'/>
    </b:if>
    <a class='tooltips' expr:href='data:post.href'><data:post.title/><span><data:post.snippet/></span></a>
  </div>
</div>

7- Lưu mẫu của bạn lại.

Nhận xét

Trang Anh Namlúc 14:25:00 GMT+7 Thứ Ba, 5 tháng 3, 2013
Nhận xét này đã bị tác giả xóa.
Trả lờiXóa
Trả lời
Trang Anh Namlúc 14:26:00 GMT+7 Thứ Ba, 5 tháng 3, 2013
không được bạn ơi, sau mình sửa tới sữa lui mà không được.
blog mình là: Học Để Thi
mong bạn giúp đở
Trả lờiXóa
Trả lời
Hoang Anlúc 08:41:00 GMT+7 Thứ Hai, 2 tháng 12, 2013
Bạn ơi, làm sao để chèn popular post ngay dưới bài viết (phía trên comment) vậy!? going như trang của bạn nè
Trả lờiXóa
Trả lời

Thêm nhận xét

Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger

Mã CSS dùng chung:

1. Bài viết mới nhất (Bloglist)

2.Bài đăng phô biến (Popuplar posts)

Đăng bởi: Namkna

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1