Tạo ra Đường Phân Cách CSS3 với nút Back To Top bằng Shortcode ~ Iris Tips

Horizontal 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.

DEMO

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:

Giới thiệu Plugin Blogger Shortcode

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