Trước hết mình xin được nói qua về thủ thuật này. Thủ thuật này mình lấy từ tham khảo code từ http://tooltipsy.com. Và thủ thuật này có tác dụng thay thế title "nguyên bản" bằng hiệu ứng toolip trượt ra sẽ gây chú ý hơn đối với độc giả của bạn. Không cần giới thiệu nhiều về cách thức hoạt động của hiệu ứng, mời bạn xem demo hình ảnh bên dưới để hiểu rõ hơn về thủ thuật này
Chèn code vào template
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTMLBước 2: Dán code bên dưới trước thẻ đóng </body>
<script type='text/javascript'>Bước 3: Dán code bên dưới trước thẻ skin
$(".hastip0").tooltipsy({offset:[0,10],show:function(b,a){a.css({left:parseInt(a[0].style.left.replace(/[a-z]/g,""))-50+"px",opacity:"0.0",display:"block"}).animate({left:parseInt(a[0].style.left.replace(/[a-z]/g,""))+50+"px",opacity:"1.0"},300);},hide:function(b,a){a.slideUp(100);},});
</script>
<script type='text/javascript'>
$(".hastip1").tooltipsy({offset:[10,0],show:function(b,a){a.css({left:parseInt(a[0].style.left.replace(/[a-z]/g,""))+50+"px",opacity:"0.0",display:"block"}).animate({left:parseInt(a[0].style.left.replace(/[a-z]/g,""))-50+"px",opacity:"1.0"},300);},hide:function(b,a){a.slideUp(100);},});
</script>
.tooltipsy{font-family:Arial;font-size:13px;text-align:justify;padding:10px;max-width:300px;color:#fff;background:#0F83A0;border:1px solid #5390ad;text-shadow:none}Bạn có thể tùy chỉnh kích cỡ khung toolip, màu sắc, màu viền, định dạng chữ theo ý muốn
Bước 4: Chèn code dưới sau thẻ <head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://trollvlhcv.googlecode.com/svn/trunk/tooltipsy.min.js' type='text/javascript'/>
Nếu trong template của bạn đã có jquery rồi thì xóa dòng được bôi màu đỏ đi sau đó save lại template
Làm cách nào để thay đổi title thành hiệu ứng toolip
Hiệu ứng này chỉ có tác dụng đối với link, ảnh, text có title vì thế bạn phải xác định cần cho hiệu ứng này có tác dụng ở đâu và để thêm hiệu ứng bạn phải sử dụng thuộc tính class="hastip0" hoặc class="hastip1".Ví dụ: Bạn muốn hiệu ứng này xuất hiện tại một đường link trong bài viết thì bạn thực hiện theo cú pháp sau
<a href="http://www.trollvl.com" target="blank" title="Blog chia sẻ - thủ thuật - hài hước" class="hastip0">TrollVL</a>Hoặc
Thì bạn sẽ được kết quả như sau
TrollVL
<a href="http://www.trollvl.com" target="blank" title="Blog chia sẻ - thủ thuật - hài hước" class="hastip1">TrollVL</a>Đối với từng thành phần trong template cũng vậy, bạn chỉ việc thêm thuộc tính class="hastip0" hoặc class="hastip1" cho đường link
Thì bạn sẽ được kết quả như sau
TrollVL
8 comments
Mình có 1 vấn đề nan giải và mình nghĩ bạn có thể khắc phục được hoặc bạn biết nguyên nhân từ đâu và nếu có thể bạn phúc đáp cho mình nhé .
Minh chèn code chèn ảnh và video vào khung comment của blogger nhưng không hiểu vì lí do gì có bài comment rất nhiều khoảng 100 lời comment nhưng chèn mọi thứ vẫn ok . nhưng đùng 1 cái qua bài sau có khi chỉ chèn khoảng 20 hình là tự nhiên có hiện tượng nuốt hết lời comment [ mất hết]khi xóa code đi thì lời bình lại có lại như cũ , thật sự mình kg hiểu tại sao nữa . Bạn có biết tại sao kg nếu có thể cho mình xin ý kiến nhé !cảm ơn bạn nhiều .
Đây là một trong những yếu điểm của thủ thuật Chèn ảnh, video vào comment. Vì thế mình khuyên bạn nên dùng comment đa cấp của bác Tiến Nguyễn như blog này, ưu điểm của nó là load vừa nhanh hơn nữa chèn ảnh,video không cần gõ cú pháp gì cả, cứ post link lên là tự nhận biết. Để thêm comment đa cấp với style giống mình bạn có thể tham khảo bài này :-d
http://nvvt.blogspot.com (Rê chuột vào thanh menu để xem) :cuoi
TTCN
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>