Thêm một trích dẫn động (Animated Quote) cho Blogger

Blockquote (khối trích dẫn) là một thành phần được sử dụng rất nhiều trong các bài đăng trên blog. Đôi khi viết blog có đôi lúc chúng ta cũng cần phải sử dụng thẻ quote để hiển thị một trích dẫn, ta có thể hiểu đơn giản rằng nội dung của thẻ quote có thể là codeview, một đoạn trích dẫn hoặc một chú thích nào đó. Như các bạn cũng đã biết đa phần thì các thẻ quote mặc định trên các website chủ yếu là được bao bọc trong dấu ngoặc kép truyền thống, trong khô khan không thu hút được cái nhìn của người đọc. Vì vậy, hôm nay mình sẽ chia sẻ cho bạn thủ thuật làm sao để thêm một trích dẫn động (Animated Quote) vào blog của blogger, nó sẽ làm cho blog/web của bạn trở nên sinh động thu hút được cái nhìn của đọc giả hơn.

Dưới đây là một số trích dẫn với các hiệu ứng HTML5 và CSS3 chuyển động liên tục như mờ dần,bay lên, bay xuống,... trong rất đẹp mắt phải không :D

• It is the mark of an educated mind to be able to entertain a thought without accepting it.li>
• Education is the most powerful weapon which you can use to change the world.
• The roots of education are bitter, but the fruit is sweet.
• It's fine to celebrate success but it is more important to heed the lessons of failure.
• You can't have a light without a dark to stick it in.
• If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.

Thêm một trích dẫn động vào Blogger

Để thêm một trích dẫn động (Animated Quote) vào bài viết của Blogger, trước tiên bạn tạo một bài viết mới và chuyển sang chế độ HTML (Create new post =>> HTML) và thêm đoạn mã sau:

<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>

Sau khi bạn chèn đoạn mã trên vào bài viết, tiếp theo bạn chèn đoạn mã vào nơi mà bạn muốn hiển thị các trích dẫn (thay nội dung muốn hiển thị của bạn tương ứng với các thẻ <li> trong đoạn code phía dưới)

<div id="words">
<ul class="word-container">
<li data-author="--- Aristotle" data-easeout="lightSpeedOut">It is the mark of an educated mind to be able to entertain a thought without accepting it.li>
<li data-author="--- Nelson Mandela " data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li>
<li data-author="---  Aristotle " data-easein="fadeInDown">The roots of education are bitter, but the fruit is sweet.</li>
<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">It's fine to celebrate success but it is more important to heed the lessons of failure.</li>
<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li>
<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>

Ngoài ra bạn cũng có thể thêm nó như một Widget để hiển thị trên trang chủ bằng cách:

- Vào Layout >> Add a Gadget >> HTML/JavaScriptAdd

- Thêm 2 đoạn code phía trên vào và Save lại

Vậy là xong, bạn vừa thêm thành công một trích dẫn động (Animated Quote) vào blog của bạn rồi đấy. Chúc bài viết của bạn trở nên sinh động, bắt mắt hơn,...thu hút được cái nhìn của người đọc hơn ^^