Iris Tips
Iris TipsCreate CSS3 Tooltip with Shortcode for Blogger
CSS3 Tooltips là 1 hộp bong bóng được sử dụng để hiện thị thêm thông tin cho người đọc. Chúng có thể được sử dụng trong nhiều cách khác nhau ví dụ, để cung cấp phụ đề cho hình ảnh, hoặc mô tả dài hơn đối với các siêu liên kết, hoặc bất kỳ thông tin hữu ích bằng cách rê chuột trên các phần tử có chứa các class tooltip. Nhờ Blogger Shortcode Plugin bây giờ bạn có thể tạo Tooltips với đầy hiệu ứng màu sắc để tăng cường giao diện người dùng cho Blogspot của bạn.
1. Cài đặt Plugin Blogger Shortcode
Để sử dụng Shortcode này trước tiên bạn phải cài đặt Plugin Shortcode cho Blogger của bạn bằng cách làm theo các bước được chia sẻ qua bài viết dưới đây:2. Thêm CSS vào Blogger
Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code dưới đây vào trước thẻ ]]></b:skin> /*------ CSS3 Tooltip Shortcode Iris Tips-------------*/
.tooltip{outline:none;text-decoration:none!important;border-bottom:2px dotted #0080ff;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{max-width:300px;width:290px;padding:10px 20px;opacity:0;bottom:170%;margin-left:-120px;visibility:hidden;z-index:10;position:absolute;font-family:Arial;font-size:12px;font-style:normal;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-90px}.tooltip span b{width:15px;height:15px;margin-left:20px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{color:#fff;background:#222222 url(http://test.stcnetwork.org/wp-content/themes/swag/assets/images/patterns/overlay2-20.png);border:1px solid #ffffff}.tooltip span b{background:#222222 url(http://test.stcnetwork.org/wp-content/themes/swag/assets/images/patterns/overlay2-20.png);border-bottom:1px solid #ffffff;border-left:1px solid #ffffff} .tooltip:before {content: "\f05a";font-family: FontAwesome;padding:0px 5px;}
/*
.tooltip > span{background:orange;border:1px solid #ff0}.tooltip span b{margin-top:-19px;top:10px;background:orange;border-top:1px solid #ff0;border-right:1px solid #ff0;border-bottom:1px solid orange;border-left:1px solid orange}
*/
Mặc định màu nền là màu đen và pops up sẽ hiện lên phía trên hyperlink.
Bạn có thể tùy chỉnh theo ý bạn thích, ví dụ như hiện pops up bên dưới hyperlink và màu nền là màu cam thì bạn thay đổi như sau
1 Đổi bottom thành top
2 Bỏ ký tự /* và */ trong dòng CSS trên
3 Nếu thích màu khác bạn có thể thay orange thành màu bạn chọn (thay 4 chỗ)
4 Bạn cũng có thể thay đường viền màu cam thành màu khác bằng cách thay ff0 thành mã màu khác (thay 3 chỗ)
3. Cuối cùng là cú pháp sử dụng Shortcode
[tooltip url="ADD LINK HERE" title="ADD TITLE HERE"]Add HTML Text Here[/tooltip] Ví dụ
[tooltip url="http://iris-tips.blogspot.com/2015/05/gioi-thieu-plugin-blogger-shortcode.html" title="Blogger Shortcode Plugin"]
Blogger Shortcodes is a Plugin developed by STCnetwork.org that helps bloggers embed widgets and tools anywhere in blogger with
a simple one line code
[/tooltip] Kết quả
Bạn cũng có thể thêm hình ảnh vào tooltips. Ví dụ
[tooltip url="http://iris-tips.blogspot.com/2015/05/gioi-thieu-plugin-blogger-shortcode.html" title="Blogger Shortcode Plugin"]
<strong><u>What is Blogger Shortcode Plugin?</u></strong><br/>
<img src="http://lh6.ggpht.com/-oPBnxfpw5i0/VR5qysG9f8I/AAAAAAAAOmA/Fli69O0Ne2s/image%25255B51%25255D.png?imgmax=800">
Blogger Shortcodes is a Plugin developed by STCnetwork.org that helps bloggers embed widgets and tools anywhere in blogger with
a simple one line code
[/tooltip] Kết quả
Bạn có thể chèn bất kỳ code HTML nào (ngoại trừ hyperlink) vào tooltips.
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by mbt/Iris Tips
Mẹo nhỏ khi bình luận