• About
  • Policy
  • Contact

Phan Anh Buổi Sáng

  • Home
  • Kiến thức IT
    • PSD
    • Blogger
  • Translate
Google
Custom Search
Trang chủ » Blogspot » CSS » Javascript » Thủ Thuật Blogger » Tạo hộp đăng ký giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot

Tạo hộp đăng ký giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot

Unknown Labels: Blogspot, CSS, Javascript, Thủ Thuật Blogger Leave A Comment 05:35
Chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn mẫu hộp đăng ký với hiệu ứng ẩn, hiện, tự thay đổi màu nền tuyệt đẹp cho Blogspot. Mẫu này do mình lấy từ Đồng Việt Blog, sau đó chỉnh sửa CSS, Javascript và chia sẻ lại cho các bạn. Xem demo qua ảnh bên dưới, hoặc bấm ra trang chủ của mình để xem nhé.
Tạo hộp đăng ký giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot

Các bước thực hiện

Bước 1. Đăng nhập Blogger ➔ Chỉnh sửa HTML ➔ Mẫu.
Bước 2. Chèn đoạn CSS sau vào trước thẻ ]]></b:skin> trong template.
#sub-box {display:none;background:rgba(0,0,0,0.5);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {border:10px solid rgba(255, 255, 255, 0.2);width:600px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:0;top:0;display:none}
#closebox:before {font-family: FontAwesome;content:&quot;\f00d&quot;;padding:5px 8px;background:#fff;color:#2c3e50;font-weight:normal;font-size:14px;border-radius:0 0 0 10px}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box-blogttcn {width:600px;background-color:#55579e;}
#subscribe-box-blogttcn p {font-family:&#39;Roboto Condensed&#39;;font-size:24px;font-weight:700;color:#fff;line-height:20px;padding:15px 20px 0 20px;margin:0}
#subscribe-box-blogttcn span {color: #f4f4f4; font: 400 20px Roboto; width: 90%; padding-top: 6px; margin: auto; display: block;}
#subscribe-box-blogttcn .emailfield {padding:0px 20px 10px;}
#subscribe-box-blogttcn .emailfield input {background:rgba(0,0,0,.15);color:#fff;padding:10px;margin-top:10px;font-size:18px;font-family:&#39;Roboto&#39;,sans-serif;letter-spacing:-.7px;width:46%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box-blogttcn .emailfield input:focus {background:rgba(0,0,0,.35);outline:none;color:#fff}
#subscribe-box-blogttcn .emailfield .submitbutton {background:rgba(0,0,0,.15);color:#fff;text-transform:uppercase;font-weight:normal;font-size: 22px;border:none;outline:none;width:100%;cursor:pointer;transition:color .2s;transition:background .3s}
#subscribe-box-blogttcn .emailfield .submitbutton:active,#subscribe-box-blogttcn .emailfield .submitbutton:hover{background:#fff;color:#444!important;}
#subscribe-box-blogttcn .emailfield input::-webkit-input-placeholder{color:#f4f4f4}
#subscribe-box-blogttcn{animation:colorBackground 20s infinite;-webkit-animation:colorBackground 20s infinite;-moz-animation:colorBackground 20s infinite;-o-animation:colorBackground 20s infinite}
@keyframes colorBackground{0%{background-color:#55579e;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
@-webkit-keyframes colorBackground{0%{background-color:#fbcf61;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
@-moz-keyframes colorBackground{0%{background-color:#fbcf61;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
@-o-keyframes colorBackground{0%{background-color:#fbcf61;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
Bước 3. Chèn đoạn code sau vào trước thẻ </body> trong template.
<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box-blogttcn'>
<center><p> ĐĂNG KÝ NHẬN TIN QUA EMAIL</p><span>Hãy nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được các bài viết mới nhất từ Bác Sĩ Windows hoàn toàn miễn phí!!</span></center>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BlogThThutCngNgh-BcSWindows' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BlogThThutCngNgh-BcSWindows, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tên bạn&quot;;}' onfocus='if (this.value == &quot;Tên bạn&quot;) {this.value = &quot;&quot;;}' placeholder='Tên bạn' type='text' value='Tên bạn'/>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Địa chỉ Email&quot;;}' onfocus='if (this.value == &quot;Địa chỉ Email&quot;) {this.value = &quot;&quot;;}' placeholder='Địa chỉ Email' type='text' value='Địa chỉ Email'/>
<input name='uri' type='hidden' value='BlogThThutCngNgh-BcSWindows'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Đăng ký'/>
</form></div></div></div></div>
Bước 4. Chèn đoạn script sau vào trước thẻ </head> trong template.
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){if($.cookie(&quot;popup_facebook_box&quot;)!=&quot;yes&quot;){$(&quot;#sub-box&quot;).delay(5000).fadeIn(&quot;10000&quot;);$(&quot;#closebox, #boxclose&quot;).click(function(){$(&quot;#sub-box&quot;).stop().fadeOut(&quot;10000&quot;);});}});
</script>
Bước 5. Lưu template.
Đây là mẫu hộp đăng ký mà mình thấy ưng ý nhất. Nên áp dụng thêm một thẻ điều kiện nữa để hộp đăng ký chỉ hiển thị ở trang chủ hoặc trang bài viết,...
Nếu như có lỗi trong quá trình thực hiện thì hãy bình luận bên dưới để mình giúp đỡ nhé!

Bài viết liên quan

← Bài đăng mới hơn Bài đăng cũ hơn → Trang chủ
Powered by Blogger.

Các Bình Luận Gần Đây

Bài đăng phổ biến

  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Đôi lúc em tránh ánh mắt của anh. vì dường như lúc nào em cũng hiểu thấu lòng anh Demo Cover Download PSD loading...
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    Demo Click here Download Click here loading...
  • Damane PenTester
    Hi All, Damane PenTester A Little Tool Help You To Find Admin Panel And Zip files and shells in sitewebs Just Put The Traget And Choose One ...
  • [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog
    [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog B1 : Fake IP Th ổ Nhĩ Kì B2 : Vô Link RIP:  http://ouo.io/G9AbfU - Ch ọ n 9 năm - C...
  • Share CMND Tuyệt Đẹp
    Demo :  http://link4ad.net/bY9A8ZRf Download :  http://link4ad.net/tZNQeKqC Độc quyền share tại Minh Haku IT
  • Blog Minh Haku IT Hoạt Động Trở Lại !
    Thông Tin Mới ! Blog Minh Haku IT  đã hoạt động trở lại bình thường ! Mong các bạn tham gia ủng hộ ! Share rất nhiều thủ thuật ! Tuyển cộng ...
  • Share CMND Người Dân Tộc
    Demo :  http://link4ad.net/ssTSc3wk Download :  http://link4ad.net/NecR8DBe Độc quyền share tại  Minh Haku IT

Pageviews from the past week

Chuyên mục

Bài đăng phổ biến

  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Đôi lúc em tránh ánh mắt của anh. vì dường như lúc nào em cũng hiểu thấu lòng anh Demo Cover Download PSD loading...
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    Demo Click here Download Click here loading...
  • Damane PenTester
    Hi All, Damane PenTester A Little Tool Help You To Find Admin Panel And Zip files and shells in sitewebs Just Put The Traget And Choose One ...
  • [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog
    [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog
    [Share] TUT Rip Facebook Chất 2017 - Zoy Thủ Thuật Blog B1 : Fake IP Th ổ Nhĩ Kì B2 : Vô Link RIP:  http://ouo.io/G9AbfU - Ch ọ n 9 năm - C...
  • Share CMND Tuyệt Đẹp
    Share CMND Tuyệt Đẹp
    Demo :  http://link4ad.net/bY9A8ZRf Download :  http://link4ad.net/tZNQeKqC Độc quyền share tại Minh Haku IT
  • Blog Minh Haku IT Hoạt Động Trở Lại !
    Blog Minh Haku IT Hoạt Động Trở Lại !
    Thông Tin Mới ! Blog Minh Haku IT  đã hoạt động trở lại bình thường ! Mong các bạn tham gia ủng hộ ! Share rất nhiều thủ thuật ! Tuyển cộng ...
  • Share CMND Người Dân Tộc
    Share CMND Người Dân Tộc
    Demo :  http://link4ad.net/ssTSc3wk Download :  http://link4ad.net/NecR8DBe Độc quyền share tại  Minh Haku IT
Google
Custom Search
Support: Facebook | Twitter | Google+ | Giới thiệu
Copyright © 2015 • Phan Anh Buổi Sáng • All Right Reserved. Template by Template Việt