Iris Tips
Iris TipsHorizontal Divider Line With Back-To-Top Button
Tiếp tục Series Blogger Shortcode hôm nay Iris Tips sẽ giới thiệu cho các bạn một tiện ích khác của plugin này. Đó là tạo ra Đường Phân Cách với nút Back To Top bằng Shortcode.
1. Nói sơ qua về tiện ích
Bình thường để tạo dải phân cách bạn thường dùng thẻ <hr/>. Điều này rất tốt nếu như bài viết của bạn quá dài thẻ <hr/> sẽ giúp ngắt bài viết của bạn ra thành từng phần nhỏ, giúp cho đọc giả dễ dàng đọc bài viết hơn. Bằng cách tận dụng sức mạnh của Series Blogger Shortcode Iris Tips sẽ nâng cấp thẻ <hr/> bằng CSS3 và kết hợp với nút Back to top.Nút Back to top sẽ chỉ hiện khi bạn cuộn thanh scrollbar xuống, và sẽ biến mất khi bạn cuộn lên.
Có 10 màu sắc cho các bạn lựa chọn đó là:
- black (đen), fblack (đen nhạt)
- red (đỏ), fred (đỏ nhạt)
- green (xanh lá), fgreen (xanh lá nhạt)
- pink (hồng), fpink (hồng nhạt)
- yelow (vàng), fyellow (vàng nhạt)
Bạn có thể thấy chi tiết ở Demo bên dưới.
2. 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:3. Thêm CSS
Bạn vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>/*------- Shortcode Divider -------*/
.sc-divider{margin:10px 0;height:20px;padding:0}.sc-divider hr{margin:0;position:relative;height:2px;border-bottom:2px solid;border-top:0;border-right:none;border-left:0}hr.fgreen{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0));background-image:-moz-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0));background-image:-ms-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0));background-image:-o-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0))}.sc-divider a.fgreen{border-color:#70CF0A;color:#70CF0A}hr.green,.sc-divider a.green{border-color:#70CF0A;color:#70CF0A}hr.fred{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0));background-image:-moz-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0));background-image:-ms-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0));background-image:-o-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0))}.sc-divider a.fred{border-color:#fc402c;color:#fc402c}hr.red,.sc-divider a.red{border-color:#fc402c;color:#fc402c}hr.fblue{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0));background-image:-moz-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0));background-image:-ms-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0));background-image:-o-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0))}.sc-divider a.fblue{border-color:#29b7ff;color:#29b7ff}hr.blue,.sc-divider a.blue{border-color:#29b7ff;color:#29b7ff}hr.fpink{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0));background-image:-moz-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0));background-image:-ms-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0));background-image:-o-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0))}.sc-divider a.fpink{border-color:#FF8377;color:#FF8377}hr.pink,.sc-divider a.pink{border-color:#FF8377;color:#FF8377}hr.fblack{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));background-image:-ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0))}.sc-divider a.fblack{border-color:#000;color:#000}hr.black,.sc-divider a.black{border-color:#000;color:#000}hr.fyellow{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0));background-image:-moz-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0));background-image:-ms-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0));background-image:-o-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0))}.sc-divider a.fyellow{border-color:#fdce09;color:#fdce09}hr.yellow,.sc-divider a.yellow{border-color:#fdce09;color:#fdce09}
/*------- Shortcode Back To Top----------*/
.sc-top,.sc-top:visited{text-align:right;padding-top:6px;text-decoration:none;display:block;font-weight:400;font-family:oswald,arial;font-size:11px!important}.sc-top:hover{color:#666}a.sc-top:after{font-family:FontAwesome;content:'\f077';padding-left:5px}4. Cú pháp sử dụng
Để thêm dải phân cách đầy màu sắc bằng Shortcode bạn sử dụng[divider/]Cú pháp mặc định sẽ là màu black faded. Để thêm màu khác bạn sử dụng
[divider color="yellow"/]Hoặc bạn cũng có thể thêm
[divider color="fyellow"] Iris Tips [/divider]10 mã màu bạn có thể tham khảo ở phần đầu bài viết.
Thật đơn giản phải không nào.
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 Iris Tips
Mẹo nhỏ khi bình luận