Giúp cho blogger của bạn đẹp từ những shortcode bằng việc tạo ra các nút bottons cực đẹp
Buttons shortcode được hiểu là 1 biểu tượng bằng hình ảnh, tạo ra các nút buttons cho blog của bạn đồng nghĩa với việc bạn đã tạo nên 1 đa màu sắc cho blog của bạn
tôi thử lấy vidu về 1 blog về ''Thủ thuật'' demo như Kenhshare.net tôi viết ra 1 số các bài viết vê chia sẻ cộng đồng vậy nếu mà tôi để liên kết từ text demo hoặc share hoặc download thì chắc chắn sẽ không đẹp và cuốn hút người đọc vì thế tôi thay nó bằng buttons được thiết kế dạng css3 màu sắc thì khỏi bàn
Bạn có thể tạo ra các buttons và chèn liên kết đi kèm, hầu như nút bottons này đều tương thích với các loại trình duyệt,biểu tượng và liên kết
1. Cài đặt buttons shortcode trong blogger
Để sử dụng nút shortcode trước tiên bạn phải cài đặt plugin shortcode cho blog blogger của bạn bằng cách làm theo 7 bước dễ dàng click vào liên kết phía dưới :
Đọc: Các bước cài đặt Blogger shortcode Plugin
Nếu blog của bạn đã có các cấu trúc đó rồi thì các bạn có thể bỏ và chuyển qua bước 2
2. Thêm Nút Color Themes
Theo mặc định tôi đã tạo ra chủ đề 9 màu cho các nút shortcode sử dụng nền CSS3 gradient. Đầu tiên chúng thêm những phong cách bên trong mẫu của bạn.
1 Vào Blogger > Template > Sao lưu mẫu của bạn
2 Nhấn vào Edit HTML
3 Tìm kiếm các mã này ]]></b:skin>
4 Chỉ cần ở trên nó dán mã CSS sau
/*-------Buttons Shortcode---------------- */ a.sc-button i{padding-right:3px}a.sc-button.large{padding:8px 20px;font-size:18px}a.sc-button.medium{padding:5px 14px;font-size:15px}a.sc-button.small{padding:1px 6px;font-size:12px}a.sc-button{padding:4px 14px;margin-bottom:0;font-size:14px;display:inline-block;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333;text-shadow:0 1px 1px rgba(255,255,255,0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe5e5e5',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border:1px solid #bbb;border-bottom-color:#a2a2a2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);text-decoration:none;font-family:oswald}a.sc-button:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position .3s linear;-moz-transition:background-position .3s linear;-o-transition:background-position .3s linear;transition:background-position .3s linear}a.sc-button.green{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#84FF00;background-image:-moz-linear-gradient(top,#84FF00,#58AA00);background-image:-webkit-gradient(linear,0 0,0 100%,from(#a7be2c),to(#95aa27));background-image:-webkit-linear-gradient(top,#84FF00,#58AA00);background-image:-o-linear-gradient(top,#84FF00,#58AA00);background-image:linear-gradient(to bottom,#84FF00,#58AA00);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#84FF00',endColorstr='#58AA00',GradientType=0);border-color:#95aa27 #95aa27 #5e6c19;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.green:hover{background-color:#58AA00}a.sc-button.blue{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.blue:hover{background-color:#2f96b4}a.sc-button.purple{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FD9CF8;background-image:-moz-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-o-linear-gradient(top,#FD9CF8,#CE00CF);background-image:linear-gradient(to bottom,#FD9CF8,#CE00CF);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FD9CF8',endColorstr='#CE00CF',GradientType=0);border-color:#CE00CF #CE00CF #FD9CF8;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.purple:hover{background-color:#CE00CF}a.sc-button.orange{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffab44f',endColorstr='#fff89406',GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.orange:hover{background-color:#f89406}a.sc-button.red{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FE1A0E;background-image:-moz-linear-gradient(top,#FE1A0E,#AC0905);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FE1A0E),to(#AC0905));background-image:-webkit-linear-gradient(top,#FE1A0E,#AC0905);background-image:-o-linear-gradient(top,#FE1A0E,#AC0905);background-image:linear-gradient(to bottom,#FE1A0E,#AC0905);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE1A0E',endColorstr='#AC0905',GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.red:hover{background-color:#AC0905}a.sc-button.black{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#363636;background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:linear-gradient(to bottom,#444,#222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);border-color:#222 #222 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.black:hover{background-color:#222} a.sc-button.brown{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FEAA33;background-image:-moz-linear-gradient(top,#FEAA33,#9F5E02);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FEAA33),to(#9F5E02));background-image:-webkit-linear-gradient(top,#FEAA33,#9F5E02);background-image:-o-linear-gradient(top,#FEAA33,#9F5E02);background-image:linear-gradient(to bottom,#FEAA33,#9F5E02);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEAA33',endColorstr='#9F5E02',GradientType=0);border-color:#9F5E02 #9F5E02 #FEAA33;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.brown:hover{background-color:#9F5E02} a.sc-button.fb{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#6080C6;background-image:-moz-linear-gradient(top,#6080C6,#3a5795);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6080C6),to(#3a5795));background-image:-webkit-linear-gradient(top,#6080C6,#3a5795);background-image:-o-linear-gradient(top,#6080C6,#3a5795);background-image:linear-gradient(to bottom,#6080C6,#3a5795);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6080C6',endColorstr='#3a5795',GradientType=0);border-color:#3a5795 #3a5795 #6080C6;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.sc-button.fb:hover{background-color:#3a5795}
3. Cuối cùng Bắt đầu Thêm Nút sử dụng shortcode!
Để thêm một nút bên trong bài, bình luận của bạn hoặc sidebar widget HTML / JavaScript, hãy sử dụng shortcode dưới đây
Tùy chỉnh các nút bottons
Sau đây là danh sách đầy đủ các thuộc tính hỗ trợ bởi Buttons shortcode
Following is the complete list of attributes supported by Buttons Shortcode
| Đặc tính | Định nghĩa |
|---|---|
| src | Chèn nút URL / Link đây |
| color | Nhắc đến nút Color. Tùy chọn: Options: red, brown, blue, green, purple, black,orange, fb |
| size | Điều chỉnh kích thước của các nút. Tùy chọn: nhỏ , vừa , lớn |
| rel | Quyết định có thêm một nofollow vào một liên kết hay không |
Bây giờ ví dụ bạn muốn tạo một nút Download với một biểu tượng Download, nền màu xanh và kích thước lớn. Sau đó, bạn sẽ sử dụng thuộc tính bên trong shortcode trong các định dạng sau đây.
Chèn download link bên trong src thuộc tính. Thay http://chubangaiti.blogspot.com/2016/09/buttons-shortcode-tao-css3-buttons.html của bạn..
Thay fa-download hoặc có thể vào đây để chọn buttons FontAwesome Icon class.
Nofollow Buttons!
đây là lựa chọn để quyết định xem bạn muốn thêm một thuộc tính liên kết nofollow với nút hay không. Bạn có thể nofollow nút demo và các nút truyền thông xã hội và tạo thuộc tính Nofollow này để quyết định PageRank của bạn vào một liên kết hay không. Bất cứ khi nào bạn muốn nói với các robot mà bạn đang liên kết một trang web, nhưng bạn không giới thiệu nó và không phải bạn muốn vượt qua PR để nó qua một backlink, sau đó chỉ cần thêm rel thuộc tính trong shortcode trong định dạng này:
Nếu trong trường hợp bạn muốn giới thiệu liên kết và tương tác PR của bạn với liên kết sau đó chỉ đơn giản là bỏ thuộc tính rel
Chúc các bạn thành công.!
Nhận Xét:
0 comments: