Helloo xin chào mấy ông, nay rảnh quá lại vọc cái nút demo và nút download cho blogspot gửi mấy ông đây, lưu ý dùm chỉ dành cho gà nhé, mấy pro né dùm.
Ai có kiểu nào hay hơn thì chia sẻ cùng nhau nhé, giữ lại không giàu được hơn đâu kaakkakakk. OK CHIẾN THÔI NÀO
Tạo nút Demo và Download cho blogspot kiểu 1
Bước
1:ok bắt tay nào, các ông mở phần chỉnh sửa "Mẫu" và chọn chỉnh sửa "HTML". Rồi tìm dùm tui đến thẻ "</style>" và dán đoạn code dưới đây vào đằng trước
thẻ vừa tìm là ok.
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#3498DB;} .download {background-color:#1ABC84;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
Thế là đã xong Bước 1 quá dễ dàng.
Bước 2: Mấy ông chỉ cần dán đoạn code sẽ xuất hiện nút "DEMO" và "DOWNLOAD" vào vị trí theo ý muốn của mấy ông là được.
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li> </br> </br> <li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li> </ul> </div>
Tạo nút Demo và Download cho blogspot kiểu 2
Bước 1: Mấy ông đăng nhập vào Blogger
Bước 2: Chọn phần Dashboard> Template> Edit HTML
Bước 3: Tìm đoạn code: ]]></b:skin> - ( Ctrl + F tìm cho dễ )
Bước 4: Rồi các ông dán đoạn mã sau lên trước code ]]></b:skin> vừa tìm được
/* Button Demo and Download by leetblogger.com ----------------------------------------------- */ .buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}
Bước 5: Lưu template lại
Đây là code để hiện nút Demo và Download mấy ông chèn vào bài viết nơi muốn cái nút đó hiển thị là xong thôi kakaa
<div style="text-align: center;margin: 10px 0;"><a class="buttonx" href="http://codeseo.net/ " target="_blank">Demo</a><a class="buttonx" href=" http://codeseo.net/" target="_blank">Download</a></div>
Tạo nút Demo và Download cho blogspot kiểu 3
Bước 1: Mấy ông tìm code ]]></b:skin> chứa trong template
Bước 2: Rồi Coppy đoạn code sau đây và dán lên trước thẻ ]]></b:skin>
/* CSS Simple Button Flat UI by Libra Yanada */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#3b3f48; padding:6px 14px; font-size:14px; margin:0 3px; color:#fff!important; border-radius:3px; border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out; } .btn.down { background:#3b3f48; color:#fff!important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#fc4f3f; color:#fff; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#fff; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; }
Lưu template lại
Bước 3: Coppy đoạn code này vào nơi các ông muốn cái nút đó xuất hiện và nhớ thay url download vào là xong
<div id="wrap"> <a class="btn down" href="#" rel="nofollow" target="_blank">Button 1 <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href="#" rel="nofollow" target="_blank">Button 2 <i class="fa fa-file"></i></a></div>
Tạo nút Demo và Download cho blogspot kiểu 4
Bước 1: Mấy ông coppy và chèn đoạn mã sau lên trước thẻ ]]></b:skin> ( ctrl + F tìm cho nhanh nhé )
/* CSS Simple Button */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#fff ; padding:10px 14px; font-size:14px; margin:0 3px; color:#fff !important; border-radius:3px;border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out;border:#F20000 3px solid } .btn.down { background:#fff ; color:#F20000 !important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#333; color:#fff ; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#F20000 ; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; } .quickedit{ display:none; }
Bước 2: Lưu teamplate lại
Bước 3: Chèn mã sau vào bài viết, nơi mà mấy ông muốn xuất hiện nút Demo và Download
<div id="wrap"> <a class="btn down" href=" Links Demo " rel="nofollow" target="_blank"> Demo <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href=" Links Download" rel="nofollow" target="_blank">Download <i class="fa fa-file"></i></a></div>
Tổng Kết: trên đây là những gì tôi chia sẻ cho mấy ông, hy vọng mấy ông sẽ thành công, mọi góp ý hay thắc mắc cứ cmt xuống dưới. Biết tôi sẽ trả lời đầy đủ.
Vịt - ngunglammau.info