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 - Tạo CSS3 Buttons trong Blogger!

Tạo nút buttons đẹp cho blogger bằng css3

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}


5 Lưu mẫu của bạn và bạn đều được thực hiện với các chỉnh sửa mẫu! 


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

[button]tiêu đề của bạn[/button]

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
srcChèn nút URL / Link đây
colorNhắc đến nút Color. Tùy chọn: Options: redbrownbluegreenpurpleblack,orangefb
sizeĐiều chỉnh kích thước của các nút. Tùy chọn: nhỏ , vừa , lớn
relQuyế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.

[button size="large" color="blue" src="http://www.example.com"] <i class="fa fa-download"></i> Download [/button]


                                                              Download button shortcode
Chèn download link bên trong src thuộc tính. Thay http://www.example.com 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:

[button rel="nofollow" src="http://www.example.com"]DEMO[/button]

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.!Nguon http://iris-tips.blogspot.com

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công