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