HƯỚNG DẪN "BẬT KHIÊN" CHO THUMBNAIL BLOGSPOT

hey yo what's up 500 anh em. Mình là CTV mới của Chánh đức đây :v hôm nay mình sẽ chia sẻ các bạn một "típ" khá hay do mình tự nghĩ ra và thực hiện. Đó chính là "bật khiên" bảo vệ cho thumbnail của blogspot, chỉ là vài đoạn code nhỏ và rất đơn giản. Mong là sẽ được các bạn đón nhận!

Hình minh họa.

HƯỚNG DẪN THỰC HIỆN

- Các bạn tìm thumbnail và thêm đoạn code bên trong nó là được.

<div class='account_price' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysdurE9ZIUR0CDNkXviWdslMr8WNevOU-wJlgF2tTE9xEB0TSLZfNXmcJUwm7WzehybWNH19u6WZlypEphmX1wh26ES4LqF1DBaiWNlkWMU7Rnaiq_MkH8jenxxdOENB9j9AX7YbXYfo/s1600/Untitled-1.png) repeat scroll 0 0;bottom:0;color:#019875;height:25px;left:50%;line-height:25px;margin-left:-12.5px;position:absolute;text-align:center;width:25px;bottom:-15px;'/>

- Các bạn xem ảnh bên dưới cho dễ hình dung ra nhé!!

Vậy là xong. Còn nếu bạn muốn có viền xanh như mình thì chỉ cần thêm code dưới vào trên thẻ ]]></b:skin>là ổn.

.tenid{border: 3.5px solid #2383ED;}

*tenid thay bằng id của thumbnail.

LỜI KẾT

Đơn giản quá mà phải không :3 đây là code do mình tự viết nên nếu bạn nào có copy bài thì nhớ ghi nguồn hộ mình nha. Cảm ơn các bạn rất nhiều

Read More

CÁCH TẠO HIỆU ỨNG LOADING HIỆU ỨNG MÀU VỚI CSS3.

Lời đầu

Xin chào tất cả các bạn , mình là Đức đây, cũng 1 thời gian rất lâu rồi mình chưa đăng gì lên blog cả, nên hôm nay rảnh mình viết và đăng lên luôn, thời gian qua mình bận quá nên không đăng được, chắc các bác quên mình rồi =)). Bài viết hôm nay mình sẽ hương dẫn các bạn tạo hiệu ứng loading màu bằng CSS3 kết hợp với cả HTML5 nhé =)). Và mình chúc các bạn 1 kì nghỉ hè vui vẻ! 

HTML

Để tạo được hiệu ứng loading này các bạn copy cấu trúc HTML bên dưới nhé:

<div class="container"> <div class="row"> <div id="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </div>

CSS

Cái này chúng ta không cần sử dụng Javascript gì cả. Các bạn chỉ cần để ý các dòng CSS3 bên dưới này nhé:

#loader { bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px; } #loader { bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px; } #loader .dot { bottom: 0; height: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 87.5px; } #loader .dot::before { border-radius: 100%; content: ""; height: 87.5px; left: 0; position: absolute; right: 0; top: 0; transform: scale(0); width: 87.5px; } #loader .dot:nth-child(7n+1) { transform: rotate(45deg); } #loader .dot:nth-child(7n+1)::before { animation: 0.8s linear 0.1s normal none infinite running load; background: #00ff80 none repeat scroll 0 0; } #loader .dot:nth-child(7n+2) { transform: rotate(90deg); } #loader .dot:nth-child(7n+2)::before { animation: 0.8s linear 0.2s normal none infinite running load; background: #00ffea none repeat scroll 0 0; } #loader .dot:nth-child(7n+3) { transform: rotate(135deg); } #loader .dot:nth-child(7n+3)::before { animation: 0.8s linear 0.3s normal none infinite running load; background: #00aaff none repeat scroll 0 0; } #loader .dot:nth-child(7n+4) { transform: rotate(180deg); } #loader .dot:nth-child(7n+4)::before { animation: 0.8s linear 0.4s normal none infinite running load; background: #0040ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+5) { transform: rotate(225deg); } #loader .dot:nth-child(7n+5)::before { animation: 0.8s linear 0.5s normal none infinite running load; background: #2a00ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+6) { transform: rotate(270deg); } #loader .dot:nth-child(7n+6)::before { animation: 0.8s linear 0.6s normal none infinite running load; background: #9500ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+7) { transform: rotate(315deg); } #loader .dot:nth-child(7n+7)::before { animation: 0.8s linear 0.7s normal none infinite running load; background: magenta none repeat scroll 0 0; } #loader .dot:nth-child(7n+8) { transform: rotate(360deg); } #loader .dot:nth-child(7n+8)::before { animation: 0.8s linear 0.8s normal none infinite running load; background: #ff0095 none repeat scroll 0 0; }

Lời cuối

Mình mong là qua bài viết này các bạn sẽ học hỏi nhiều về CSS hơn, bài viết đã kết thúc rồi, mình chúc các bạn 1 ngày thật vui và may mắn <3 

Ảnh demo.

Read More

CÁCH LÀM NÚT SHARE VỚI HIỆU ỨNG VÒNG TRÒN BẰNG CSS.

Ảnh minh họa.

Xin chào tất cả các bro :)), mình là Nguyễn Chánh Đức đây. Sau 1 thời gian bị em Duy Phương hối đăng bài mới nên hôm nay mình sẽ làm theo yêu cầu em đấy. Và mình xin chia sẻ cho các bạn cách làm nút share bằng css và html. Cái này nó chỉ phụ thuộc là vào Font Awesome thôi. Các bạn nhìn mình hướng dẫn và làm theo nhé!

Các bước tiến hành

Các bạn muốn làm được nút share này thì các bạn phải cài Font Awesome nhé! Các bạn chỉ cần thêm dòng CODE này trong thẻ head.

<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

Bước tiếp theo các bạn tạo các biểu tượng mạng xã hội theo cấu trúc như sau: 

<div id="circle"> <i class="icon1 fa fa-share-alt fa-lg"></i> <i class="icon2 fa fa-share-alt fa-lg"></i> </div> <div id="sub"> <div id="circle"> <i class="icon1 fa fa-facebook fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Facebook</a></span> </div> <div id="circle"> <i class="icon1 fa fa-twitter fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Twitter</a></span> </div> <div id="circle"> <i class="icon1 fa fa-google-plus fa-lg"></i> <i class="icon2 fa fa-plus fa-lg"></i> <span><a href="#">Google +</a></span> </div> </div>

Bước cuối cùng là các bạn cho biểu tượng thêm 1 chút hiệu ứng, muốn cho hiệu ứng thì các bạn thêm CSS sau:

/* ///// MAIN CIRCLE ///// */ #circle { width: 80px; height: 80px; border-radius: 50%; background: #747392; position: absolute; z-index:2; top: 25px; left: 25px; box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22); cursor: pointer; } #circle:after { content:''; width: 10px; height: 10px; position: absolute; border-radius: 50%; background: rgba(81, 80, 122, 0.6); left: 35px; top: 35px; } #circle i { font-size: 40px; color: #fff; position: absolute; top: 24px; left: 24px; z-index: 1; } #circle i.icon1 { opacity: 1; } #circle i.icon2 { opacity: 0; top: 25px; left: 22px; } /* ANIMATION */ #circle, #circle i, #circle:after { -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1); transition: all .2s cubic-bezier(.4, 0, .2, 1); } /* HOVER */ #circle:hover { background: #626186; box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .30); } #circle:hover:after { width: 80px; height: 80px; left: 0; top: 0; } #circle:hover > i { -webkit-transform: rotate(720deg); transform: rotate(720deg); } #circle:hover > i.icon1 { opacity: 0; } #circle:hover > i.icon2 { opacity: 1; } /* ///// SUB CIRCLES ///// */ #sub { width: 150px; height: 50%; z-index: 1; position: absolute; visibility:hidden; } #sub #circle { width: 50px; height: 50px; top: 0; left: 40px; opacity: 0; transition: 0.2s opacity; } #sub #circle:nth-child(1) { top: 120px; background: #95507f; } #sub #circle:nth-child(2) { top: 180px; background: #4e935c; } #sub #circle:nth-child(3) { top: 240px; background: #9f4b49; } #sub #circle:nth-child(1):after { background: rgba(126, 53, 108, 0.6); } #sub #circle:nth-child(2):after { background: rgba(49, 124, 61, 0.6); } #sub #circle:nth-child(3):after { background: rgba(135, 43, 45, 0.6); } #sub #circle:after { left: 20px; top: 20px; } #sub #circle i { font-size: 20px; top: 18px; left: 16px; } #sub #circle i.icon1 { opacity: 1; } #sub #circle i.icon2 { opacity: 0; } /* HOVER */ #sub #circle:hover:after { width: 50px; height: 50px; left: 0; top: 0; } #circle:hover + #sub #circle:nth-child(1) { opacity:1; transition-delay:0.05s; } #circle:hover + #sub #circle:nth-child(2) { opacity:1; transition-delay:0.1s; } #circle:hover + #sub #circle:nth-child(3) { opacity:1; transition-delay:0.15s; } #sub #circle:hover > i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #sub #circle:hover > i.icon1 { opacity: 0; } #sub #circle:hover > i.icon2 { opacity: 1; } #circle:hover + #sub { visibility:visible; } #sub:hover { visibility:visible; } #sub:hover > #circle { opacity:1; } /* ///// SUB TITLES ///// */ #circle span a{ display: block; margin-right: -150px; margin-top: 16px; color: rgba(0, 0, 0,0.7); font-family: 'Comfortaa', sans-serif; text-transform: uppercase; font-weight: 400; text-align: left; padding-left: 60px; font-size: 1.1em; letter-spacing: 0.25em; opacity: 0; -webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2); transition: all .4s cubic-bezier(.4, 0, .2, 2); text-decoration-line: none; } /* HOVER */ #sub #circle:hover > span a{ opacity: 1; padding-left: 65px; } 

Kết bài

Bài viết tới đây là kết thúc rồi, mình xin chúc các bạn có 1 kì nghỉ hè và đi du lịch vui vẻ! Cảm ơn các bạn đã theo dõi, xin chào các bạn hẹn gặp lại các bạn trong các bài viết sau.

Liên hệ tại đây.

Read More

CÁCH TẠO MẪU DỰ BÁO THỜI TIẾT BẰNG CSS3.

Ảnh minh họa.

Lời đầu

Xin chào tất cả các bạn, hôm nay mình xin hướng dẫn các bạn làm mẫu dự báo thời tiết đẹp bằng CSS3 nhé. Mời các bạn tham khảo bài viết, chúc các bạn 1 ngày vui vẻ!

Hướng dẫn cách làm

HTML

<div class="weather-wrapper"> <div class="weather-card madrid"> <div class="weather-icon sun"></div> <h1>33º</h1> <p>Hải Dương</p> </div> <div class="weather-card london"> <div class="weather-icon cloud"></div> <h1>33º</h1> <p>Sài Gòn</p> </div> </div>

CSS 

Sau đó, chúng ta sẽ tạo 1 hiệu ứng động bằng CSS bên dưới:

*, *:before, *:after { box-sizing: border-box; } .weather-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .weather-card { margin: 20px 20px; border-radius: 20px; position: relative; overflow: hidden; width: 270px; height: 270px; background-color: white; box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1); -webkit-animation: appear 500ms ease-out forwards; animation: appear 500ms ease-out forwards; } .weather-card h1 { position: absolute; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 80px; color: #B8B8B8; bottom: 0; left: 35px; opacity: 0; -webkit-transform: translateX(150px); -ms-transform: translateX(150px); transform: translateX(150px); -webkit-animation: title-appear 500ms ease-out 500ms forwards; animation: title-appear 500ms ease-out 500ms forwards; } .weather-card p { position: absolute; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 28px; color: #d2d2d2; bottom: 0; left: 35px; -webkit-animation: title-appear 1s ease-out 500ms forwards; animation: title-appear 1s ease-out 500ms forwards; } .weather-icon { position: relative; width: 50px; height: 50px; top: 0; float: right; margin: 40px 40px 0 0; -webkit-animation: weather-icon-move 5s ease-in-out infinite; animation: weather-icon-move 5s ease-in-out infinite; } .sun { background: #FFCD41; border-radius: 50%; box-shadow: rgba(255, 255, 0, 0.1) 0 0 0 4px; -webkit-animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite; animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite; } @-webkit-keyframes light { from { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px; } to { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px; } } @keyframes light { from { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px; } to { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px; } } .cloud { margin-right: 60px; background: #e1e1e1; border-radius: 20px; width: 25px; height: 25px; box-shadow: #e1e1e1 24px -6px 0 2px, #e1e1e1 10px 5px 0 5px, #e1e1e1 30px 5px 0 2px, #e1e1e1 11px -8px 0 -3px, #e1e1e1 25px 11px 0 -1px; } .cloud:after { content: ""; position: absolute; border-radius: 10px; background-color: transparent; width: 4px; height: 12px; left: 0; top: 31px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation: rain 800ms ease-in-out infinite alternate; animation: rain 800ms ease-in-out infinite alternate; } @-webkit-keyframes rain { from { box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px; } to { box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px; } } @keyframes rain { from { box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px; } to { box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px; } } @-webkit-keyframes weather-icon-move { 50% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes weather-icon-move { 50% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .inspiration { color: #aeaeae; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 24px; text-align: center; } .inspiration a { color: #FA565F; font-weight: 400; -webkit-animation: all 300ms ease-in-out; animation: all 300ms ease-in-out; } @-webkit-keyframes appear { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes appear { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes title-appear { from { opacity: 0; -webkit-transform: translateX(150px); transform: translateX(150px); } to { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes title-appear { from { opacity: 0; -webkit-transform: translateX(150px); transform: translateX(150px); } to { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } }

Tổng kết

Ảnh demo.

Bài viết đến đây là kết thúc rồi, mình mong là các bạn sẽ chỉnh lại 1 số CSS cho hoàn chỉnh và hợp với Blog các bạn. Chúc các bạn 1 ngày vui vẻ và hạnh phúc!

Các bạn muốn xem demo trực tiếp thì click tại đây nhé!

Read More

CÁCH TẠO WIDGET LIÊN HỆ KÈM THEO FORM CONTACT TUYỆT ĐẸP.

Ảnh minh họa.

Xin chào các bạn, mình là Nguyễn Chánh Đức,  đã lâu mình không đăng 1 thủ thuật nào lên blog, hôm nay mình sẽ hướng dẫn các bạn tạo 1 form contact kèm theo liên hệ, cái Css và Html này là mình nhặt đước và edit lại phần CSS và chia sẻ lên đây cho các bạn tham khảo, các bạn theo dõi bài viết nhé. Demo tại bài viết mình luôn nhé, các bạn cuộn xuống lower sẽ thấy!

Các bước tiến hành

 Bước 1: Các bạn vào bố cục -> thêm tiện ích -> HTML.
Bước 2: Các bạn thêm phần CSS, HTML này vào nhé.

<style scoped="scoped" type="text/css"> .contact-form-bacsiwindows-v form{position:relative;background:linear-gradient(-225deg,#403f7e 0%,#5753C9 60%,#7c8bf0 100%);padding:100px 120px 50px 60px;width:700px;max-width:100%;border-radius:20px;max-width:100%} .form-body{width:1080px;margin:0 auto;padding:100px 0;position:relative;max-width:100%} #ContactForm1_contact-form-name{text-transform:capitalize} .contact-form-bacsiwindows-v{width:100%;margin:0 auto;padding:0;background:#e9eef3} #ContactForm1_contact-form-email-message::-webkit-input-placeholder,#ContactForm1_contact-form-email::-webkit-input-placeholder,#ContactForm1_contact-form-name::-webkit-input-placeholder{text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.7)} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{margin:0 0 .5em;width:50%;float:right;height:auto;padding:10px 15px;background:rgba(255,255,255,.1);color:#fff;box-sizing:border-box;font-family:Roboto,sans-serif;transition:.15s;font-size:14px;letter-spacing:.5px;border:1px solid transparent} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid rgba(255,255,255,.8);outline:none} #ContactForm1_contact-form-error-message img{display:none} #ContactForm1_contact-form-email-message{width:100%;height:auto;margin:0;padding:10px 12px;background:rgba(255,255,255,.1);border:1px solid transparent;color:#fff;box-sizing:border-box;font-size:14px;font-family:Roboto,sans-serif;transition:.15s;letter-spacing:.5px} #ContactForm1_contact-form-submit{height:35px;float:right;color:#FFF;padding:0 30px;margin:2em 0 0;cursor:pointer;border-radius:0;font-weight:700;background:transparent;border:2px solid white;outline:0} #ContactForm1_contact-form-submit:hover{background-color:#fff;color:#7c8bf0} #ContactForm1_contact-form-submit:focus,#ContactForm1_contact-form-submit:active{position:relative;top:2px} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{color:#fff;padding:16px 0;display:inline-block;clear:both} h2.contact-label{color:#fff;position:absolute;margin:0;top:30px;font-size:28px;font-weight:700} h2.contact-label span{display:block;font-size:16px;font-weight:400;letter-spacing:1px} .r-contact-bacsiwindows{background:white;position:absolute;right:5%;top:50%;transform:translate(0,-50%);padding:30px 40px;border-radius:20px;box-shadow:0 10px 55px rgba(0,0,0,.15);max-width:100%} .r-contact-bacsiwindows .r-contact{} .r-contact-bacsiwindows .contact-u,.r-contact-bacsiwindows .contact-u a{font-size:20px;margin:15px 0;font-weight:400;color:#9498be} .r-contact-bacsiwindows .contact-u i{background:#7b89ee;width:45px;line-height:45px;text-align:center;border-radius:100%;margin:0 10px 0 0;color:#fff} .r-contact-bacsiwindows .contact-u .fb{background:#0084ff} .r-contact-bacsiwindows .contact-u .email{background:#df5644} .r-contact-bacsiwindows .contact-u .support{background:#81c596} .form-body cap.cap{color:#fff;line-height:1.5;margin:0 0 2em;display:block} </style> <div class="contact-form-bacsiwindows-v"><div class="form-body"><form name="contact-form"><h2 class="contact-label"><span>liên hệ</span>với chúng tôi</h2><cap class="cap">Hãy điền thật ngắn gọn, chính xác và dễ hiểu nội dung cần tư vấn/liên hệ vào biểu mẫu dưới đây, chúng tôi sẽ cố gắng trả lời sớm nhất có thể (không quá 48 giờ), cảm ơn và chúc bạn một ngày tốt lành!</cap><input id="ContactForm1_contact-form-name" name="name" placeholder="Tên của bạn" size="30" style="width:49%;float:left" type="text" value=""><input id="ContactForm1_contact-form-email" name="email" placeholder="Địa chỉ Email" size="30" type="text" value=""><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Nội dung cần liên hệ" rows="7"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="SEND"><div style="width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><div class="r-contact-bacsiwindows"><div class="r-contact"><div class="contact-u"><i class="fa fa-phone" aria-hidden="true"></i>0868.102.208</div><div class="contact-u"><i class="fa fa-envelope-open-o" aria-hidden="true"></i> nguyenchanhduc0908@gmail.com</div><div class="contact-u"><i class="fa fa-commenting-o" aria-hidden="true"></i><a href="https://fb.com/ducidol0908" target="_blank">Nguyễn Chánh Đức</a></div><div class="contact-u"><i class="fa fa-question-circle" aria-hidden="true"></i> 10/24 (Thứ 2 -&gt; Chủ nhật)</div></div></div></div></div>

Bước 3: Lưu bố cục lại, hưởng thụ thôi!

Tổng kết

 Bài viết đến đây cũng kết thúc rồi, nếu thấy hay thì share lên Facebook hoặc Google+ trên bài viết nhé. Cảm ơn các bạn đã theo dõi bài viết, chúc các bạn 1 ngày vui vẻ!Code by: BacSiWindows.

Read More