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 của fandung. 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.

1.Bloglist ( bài viết mới nhất ):
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ì no Javascript . Ngoài ra, nó rất đơn giản và dễ dùng.
Đăng nhập Blogger, vào Page Elements >> Add a Gadget chọn Blog List.

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

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

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

Cho tên miền tùy chỉnh
Bạn cần thay namkna bằng tên blogspot của bạn. Nhấn Add rồi tiếp tục nhấn ADD TO LIST và dán vào URL sau đây.

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


Cứ như vậy lần lượt đến

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


rồi đến

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


và

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


cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích Bài viết mới nhất thì dừng lại, rồi nhấn SAVE để lưu tiện ích.
Sao đó tìm đoạn code tương tự:
Từ

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

Đến thẻ đóng của widget bloglist:

</b:widget>

Và thay thế tất cả 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/AVvXsEh2hxBVSN4i7gIsoJmf-HpZi0Q4M8BlBeuurywxKtz6GGbkz9x0nbtPjD8Bm75MySl0AF8DewD3x_lNz3BIlqgbSrMVvlYZQDifYuQHTWHQ0AphLDzxCTZcbuB7zdbZucDjGBZWlmkf1eQ/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>

Thế là xong. Thủ thuật trên sẽ giúp các bạn nhiều thứ.
Hiển thị mặc định ảnh không có trong bài viết
Thêm nhiều bài viết. Không tối đa. Load nhanh
Hiển thị tooltips với css sau đây , css này sử dụng cho 2 thủ thuật luôn:

.tooltips {position:relative}
.tooltips span {display: none}
.tooltips:hover span {display: block;background: #212121;padding: 10px;border: 1px dashed #ccc;position:absolute;color: #ccc;width: 240px;z-index: 100;top: 0;left: -340px}

Nên chỉnh lại chỗ hiển thị tooltips các bạn nhé.
2.Popuplar posts:
Tìm đoạn:

<!-- (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>

Lưu ý: css tooltips dùng chung các bạn nhé. Các bạn nên save temp trước khi làm nhầm tránh xảy ra biến cố. Ban quản trị không chịu trách nhiệm
Thủ thuật sử dụng bài viết của duypham.info và thuthuatblogger.info xin cảm ơn 2 bác đã giúp yolks có ý tưởng này

Chủ đề: