Tạo ghi chú ngắn code Tooltip sử dụng CSS3 cho Blogspot

Loading...

Thời gian trước đây có một số bài viết, thủ thuật mà IT Việt 360 giới thiệu tới bạn đọc có liên quan và sử dụng tới Tooltip để làm hiệu ứng. Nhưng để làm được thì trước đây chủ yếu dùng Javascipt để tạo nên những hiệu ứng này. Còn hôm nay, tối ưu hơn nhiều đó là việc sử dụng CSS3 để làm được việc này, như vậy chúng ta sẽ không phải lo lắng đến việc sử dụng nhiều JS làm tăng thời gian tải của Web, Blog mình nữa.
Bạn sẽ thấy kết quả rõ hơn và hiểu hơn về thủ thuật này qua link demo trực tiếp. Còn bạn muốn thực hiện theo như thế thì theo dõi và làm theo các bước ở dưới đây.

XEM DEMO

Để làm được thủ thuật này các bạn thực hiện những bước sau:
Bước 1. Cài đặt Blogger shortcode Plugin

Để sử dụng Tooltip shortcode trước tiên bạn phải cài đặt plugin shortcode cho blog blogspot của bạn bằng cách làm theo 7 bước dễ dàng đã được chia sẻ ở liên kết dưới đây:

Đọc: Giới thiệu Blogger Shortcode Plugin cần được quan tâm (sử dụng nhiều)
Bỏ qua bước này nếu bạn đã thêm Blogger Shortcode Plugin vào template blogspot của bạn

Bước 2. Thêm trang điểm màu sắc cho ToolTip

Dưới đây mình đã tạo ra hai giao diện chủ đề cho tooltips. Một là màu vàng và thứ hai là với nền đen. Bạn có thể tùy chỉnh màu nền tooltip theo sự lựa chọn của bạn bằng cách làm theo các hướng dẫn dưới đây:
1. Vào bảng điều khiển Blogger -> Mẫu (Template) > Chỉnh sửa HTML (Edit HTML)
2. Tìm đến ]]></b:skin>
3. Dán code dưới đây ngay trên nó
/*------ CSS3 Tooltip Shortcode -------------*/
.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}
*/
Thực hiện các tuỳ chỉnh nếu bạn muốn:

Mặc định nền tooltip là màu đen và nó bật lên ở đầu các liên kết. Nếu bạn muốn hiển thị tooltip ở dưới cùng của liên kết thay vì sau đó làm thay đổi đơn giản này để mã CSS ở trên:

XEM DEMO 2

Thay bottom bằng Top
Hủy bỏ các màu vàng nổi bật biểu tượng / * và * /
Để thay đổi nền cam thay màu da cam với một màu của sự lựa chọn của bạn hoặc mã thập lục phân của nó.
Để thay đổi màu đường viền của tooltip cam thay ff0 với một mã màu thập lục phân của sự lựa chọn của bạn.
5. Lưu mẫu của bạn và làm tất cả!

Bước cuối cùng thêm Tooltips shortcode
Bây giờ bất cứ khi nào bạn muốn thêm một số thông tin vào một liên kết sau đó sử dụng shortcode trong định dạng mẫu này:
[tooltip url="ADD LINK HERE" title="ADD TITLE HERE"]Add HTML Text Here[/tooltip]

Ví dụ, bạn thêm mã dưới đây vào nội dung bài viết soạn thảo ở dưới dạng HTML

[tooltip url="http://www.seophongvu.com/dao-tao-seo.html" title="Đào tạo SEO Phong Vũ"]Dựa trên 4 năm kinh nghiệm trong lĩnh vực phát triển tìm kiếm và thực hành chuyên sâu, chúng tôi biết làm thế nào để có kết quả tốt trong thị trường tìm kiếm! Lớp học SEO của chúng tôi được lựa chọn vì được cập nhật liên tục các chủ đề và phương pháp học.[/tooltip] 

Bây giờ cho phép tạo ra một tooltip trong đó có một tiêu đề, một số mô tả và hình ảnh. Bạn sẽ tạo shortcode trong định dạng này:

[tooltip url="http://www.seophongvu.com/dao-tao-seo.html" title="Đào tạo SEO Phong Vũ"] <img src="link hình ảnh" />Dựa trên 4 năm kinh nghiệm trong lĩnh vực phát triển tìm kiếm và thực hành chuyên sâu, chúng tôi biết làm thế nào để có kết quả tốt trong thị trường tìm kiếm! Lớp học SEO của chúng tôi được lựa chọn vì được cập nhật liên tục các chủ đề và phương pháp học.[/tooltip]

Còn khá nhiều tiện ích hay nữa mà bạn sẽ tuỳ chỉnh được theo ý của mình bằng cách thay đổi CSS ở trên.
Nếu bạn gặp khó khăn gì về các bước thực hiện thủ thuật này thì comment lại nhé!

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger