Định dạng và Hiển thị ngày tháng Blogspot với Timeago: a jQuery plugin

Nếu bạn không muốn hiển thị định dạng ngày tháng như mặt định khi xuất bản các bài viết khi sử dụng blogspot (Ví dụ: Ngày 05 tháng 02 năm 2015), mà muốn nó hiển thị với dạng: 1 giây trước, 2 phút trước, 5 giờ trước,... mà bạn thường thấy trên các trang mxh như facebook, twitter,.. Với Timeago a jQuery Plugin bạn sẻ dễ dàng làm được điều đó một cách dể dàng. Rất đơn giản, chỉ cần làm theo các bước dưới đây

1. Vào Blogger > Mẫu > Chỉnh sửa HTML
2. Tìm </head> hoặc </body> và thêm đoạn mã sau vào trước nó

<script src='http://code.jquery.com/jquery-latest.js'/>
<script src='https://nhatchanh.googlecode.com/svn/blogspot/timeago.js'/>
<script>
jQuery(document).ready(function($){
  $("abbr.timeago").timeago()
});
</script>

3. Tiếp theo, tìm đoạn mã tương tự như đoạn dưới đây (có thể không gióng chính xác)

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

4. Thay thế nó bằng đoạn mã sau:

<abbr class="timeago" expr:title="data:post.timestampISO8601"><data:post.dateHeader/></abbr>

5. Lưu mẫu của bạn lại
6. Cuối cùng là bước quan trọng nhất, kiểm tra kết quả

Hiển thị Tooltip bằng jQuery và CSS

Thông thường, Tooltip được sử dụng để trình bày một lượng nhỏ nội dung được ẩn đi (chủ yếu là để giải thích một cái gì đó), mà khi người dùng di chuyển con trỏ chuột qua (hoặc nhấp chuột) thì sẻ được hiển thị.

Hôm nay, xin chia sẽ một plugin hiển thị tooltip khá hay được tìm thấy trên google, với các tính năng chính như responsive hiển thị tốt trên thiết bị di động, bạn cũng có thể định dạng tooltip bằng các thẻ html như in đậm, in nghiêng,... Việc cài đặt  và sử dụng rất đơn giản, chỉ cần copy mã css, javascript vào template và gán thuộc tính title="nhập tooltip của bạn" và rel="tooltip" vào bất kỳ thẻ nào trong mã html của bạn

CSS Tooltip

Bạn có thể xây dựng kiểu hiển thị cho riêng mình hoặc sử dụng đoạn mã css dưới đây:

/******* TOOLTIP*******/
#tooltip {
 font:.9em/1.6 Tahoma,Sans-serif;
 text-shadow: 0 1px rgba( 0, 0, 0, .5 );
 color: #fff;
 background: #000;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 border-top: 1px solid #fff;
 -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
 -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
 box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
 position: absolute;
 z-index: 100;
 padding: 2px 5px 2px;
}
 #tooltip:after {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #333;
  border-top-color: rgba( 0, 0, 0, .9 );
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  margin-left: -10px;
 }
  #tooltip.top:after {
   border-top-color: transparent;
   border-bottom: 10px solid #333;
   border-bottom-color: rgba( 0, 0, 0, .9 );
   top: -17px;
   bottom: auto;
  }
  #tooltip.left:after {
   left: 10px;
   margin: 0;
  }
  #tooltip.right:after {
   right: 10px;
   left: auto;
   margin: 0;
  }

JavaScript Tooltip

<script>
/******* TOOLTIP*******/
$( function()
{
    var targets = $( '[rel~=tooltip]' ),
        target    = false,
        tooltip = false,
        title    = false;

    targets.bind( 'mouseenter', function()
    {
        target    = $( this );
        tip        = target.attr( 'title' );
        tooltip    = $( '<div id="tooltip"></div>' );

        if( !tip || tip == '' )
            return false;

        target.removeAttr( 'title' );
        tooltip.css( 'opacity', 0 )
               .html( tip )
               .appendTo( 'body' );

        var init_tooltip = function()
        {
            if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                tooltip.css( 'max-width', $( window ).width() / 2 );
            else
                tooltip.css( 'max-width', 340 );

            var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                pos_top     = target.offset().top - tooltip.outerHeight() - 17;

            if( pos_left < 0 )
            {
                pos_left = target.offset().left + target.outerWidth() / 2 - 17;
                tooltip.addClass( 'left' );
            }
            else
                tooltip.removeClass( 'left' );

            if( pos_left + tooltip.outerWidth() > $( window ).width() )
            {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 17;
                tooltip.addClass( 'right' );
            }
            else
                tooltip.removeClass( 'right' );

            if( pos_top < 0 )
            {
                var pos_top     = target.offset().top + target.outerHeight();
                tooltip.addClass( 'top' );
            }
            else
                tooltip.removeClass( 'top' );

            tooltip.css( { left: pos_left, top: pos_top } )
               .animate( { top: '+=10', opacity: 1 }, 50 );
        };

        init_tooltip();
        $( window ).resize( init_tooltip );

        var remove_tooltip = function()
        {
            tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
            {
                $( this ).remove();
            });

            target.attr( 'title', tip );
        };

        target.bind( 'mouseleave', remove_tooltip );
        tooltip.bind( 'click', remove_tooltip );
    });
});
</script>

Cách sử dụng: 

Chỉ cần thêm thuộc tính title="nội dung tooltip" và rel="tooltip" vào bất kỳ thẻ html mà bạn muốn hiển thị tooltip

Ví dụ:
<abbr title="User Experience" rel="tooltip">UX</abbr>

Xem Demo

Cách sử dụng cho blogspot

Chèn mã CSS vào trước thẻ đóng </b:skin> và đoạn Javascript vào trước thẻ </body> trong template của bạn

Lưu ý: Trong template phải khai báo thư viện jQuery
Nếu chưa có chèn đoạn mã dưới đây trước thẻ </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>