Code hiệu ứng đóng mở blogspot khá đẹp mắt, với hiệu ứng đóng mở chuyên nghiệp làm cho các người khác vào blogger của chúng ta trở nên tò mò hơn. Với hiệu ứng đóng mở trang như thế này thì sau đây Bít Designer sẽ hướng dẫn cho các bạn làm điều đó
DEMON
Với các bạn có blog dung lượng file nặng thì nên áp dụng cách này. Cách này có thể tải blogger của bạn trong im lặng, để cho khách truy cập vào phải chờ đợi. Code tạo hiệu ứng đóng mở trang cho blogger khi vào bạn chỉ rê chuột vào. Ngoài Cách này các bạn có thể kết sử dụng cách hiệu ứng tải trang chuyên nghiêp khác.
1. Tới Blogger.com
2. Nhấn vào Template => Edit HTML
3. Tìm đoạn code <b: skin>
4. Rồi dán đoạn code vào bên dưới
Nếu có thắc mắc gì thì các bạn cứ bình luận nơi bài viết nhé
2. Nhấn vào Template => Edit HTML
3. Tìm đoạn code <b: skin>
4. Rồi dán đoạn code vào bên dưới
body::before,body::after{position:absolute;position:fixed;content:"";background:#404F6C;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;z-index:99999}body::before{border:10px solid #ccc;border-left:none;top:0;left:50%;right:0;bottom:0}body::after{top:0;left:0;border:10px solid #ccc;border-right:none;right:50%;bottom:0}body:hover::before{left:100%}body span.energyatas{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 -1px;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body span.energybawah{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 0;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover::after{right:100%}body:hover::before,body:hover::after{visibility:hidden}body:hover span.energyatas{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:0}body:hover span.energybawah{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:100%}body span.energy{width:35%;border-bottom:5px solid #ccc;border-top:5px solid #ccc;padding:10px;background:#000;border-radius:20px;font-size:20px;color:#fff;text-align:center;position:absolute;position:fixed;left:32%;right:45%;top:40%;bottom:45%;margin:0 0 0 0;z-index:123455543123445556888;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover span.energy{visibility:hidden;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;-webkit-transition:all .7s ease-out;transition:all .7s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;right:0;z-index:99999999}
5. Các Bạn Lưu Phần CSS Lại
6. Các Bạn Tới Phần <Body> Rồi Dán Đoạn Code Vào Bên Dưới Phần <Body>
Lưu ý Nhé : <data:blog.title/> Là Tên Blogger Của Bạn<span class='energyatas'></span><span class='energy'><data:blog.title/><br/><span style='font-size:11px;color:#fff'>Chào Mừng Bạn Đến Với Blogger Của Bít Designer</span></span><span class='energybawah'></span>
Nếu có thắc mắc gì thì các bạn cứ bình luận nơi bài viết nhé
