Code tạo popup đăng ký nhận bản tin qua Email cho blogspot

Đăng nhập blogger vào mẫu tìm thẻ </head> dán đoạn code này trước nó :

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>

Lưu ý nếu template có rùi thì bỏ qua bước này

Tiếp tục vào bố cục thêm tiện ich dán đoạn câu này vào và lưu lại :

<style>#backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color: transparent; background:rgba(0, 0, 0, 0.5);z-index:999; }#popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }#popupContactClose{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfKcQTvi1YOlYqT4FgSmsCKis4X46lz_dvTWot5g19qhCN-tas_0X0kIwGo2G-9pm3nn419iq4bI_DX_99VEfV0O1r815h1Ww5Rf17A_jSM2UvReaFfHN0HbdmvqyF3vrJD0BaoYDz8nO/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; text-indent: -99999px;}#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; line-height:30px; }#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }#btntfollowForm { padding: 15px; }#btntfollowForm img { border:none; }#btntfollowForm p { margin: 0 0 10px;}#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }#btntfollowForm input:not([type="checkbox"]):active,#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;} #btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }#btntfollowForm .button input:active,#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }.btntFollowFooter { color:#222; text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }.btntFollowFooter a { color: #222; text-decoration: none; }.btntFollowFooter a:hover { color: #fff; }</style><div id="backgroundPopup"><div id="popupContact"><a href="" id="popupContactClose">x</a><div id="btntfollowForm"><img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKqX7KEkeSC7M_Ql0dNDqeSpz4x6Au9iFg5OSK-NxuIdYyeHJqGo1m2lSVYTf2eNAZYBxUxsksa5xPjHk21MD5XvNEMpxE40Mbdd_xz0T6Qbz3qGzrL7meuItH_okgK52ovhep3LRbFap/s1600/Subscribe+Via+Email.PNG" /><div id="description"><img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpiT8Jrv-JU7-HXYY9ywZLEFFsqdIA1Yca43xznVP3188AuP8XgI68oIWmwMjXyI2kqbc3V7SMNLz5lzBypBE7N41BQo479EPOBo3LhFdYaZPeYr5WsIRoUtVbE5RWjN9fKSY5-3WAmMCH/s1600/Mail.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=yourfeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="yourfeed" /><input name="loc" type="hidden" value="en_US" /><div class="button"><input type="submit" value="Subscribe" /></div></form></div><div class="btntFollowFooter">Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.myadstalk.com/" rel="dofollow" target="_blank">Myadstalk</a></div></div></div> <script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript"></script><script type="text/javascript"> var popupStatus = 0;//this code will load popup with jQuery magic!function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; }}//This code will disable popup when click on x!function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; }}//this code will center popupfunction centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); }//CONTROLLING EVENTS IN jQuery$(document).ready(function(){ if ($.cookie("anewsletter") != 1) { //centering with css centerPopup(); //load popup loadPopup(); } //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); } });});</script>

Thay 2 chỗ được bôi đỏ bằng địa chỉ feed tương ứng

Thêm hộp đăng ký nhận bản tin có giao diện bao thư: (cái này ko phải popup nhá)

Trước tiên vào template chỉnh sửa tìm thẻ ]]></b:skin> (bạn có thể dùng ctrl+F tìm cho nhanh) rồi copy dán đoạn code này vào trước nó rồi lưu template lại

/* SpicyTechTips Envelope Style Beautiful Subscription Widget-------------------------------------------------------------------------------------*/.widget.stt_newsletter_widget { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit6xt2mk8du_H-KON77LIk7v7xPKoeotBlV8pxm1eUDY8ZVJo0b0ITig-mQFtaq-gN2xoofY6c3H1PRXHx4nfHDqy5osV-7pzG_bFC8fYqYA5ObMIAGkuOaBUROLEP7TcOFnS9TAYEHNq9/s1600/subscription-envelope-bg.png)no-repeat; width: 250px; height: 158px; padding: 25px; margin-bottom: 30px;}.stt_newsletter_widget h3 { font-size: 18px; line-height: 22px; margin: 0 0 5px 0;}.stt_newsletter_widget h3 p { background: none; color: #444444; padding: 0; font-size: 18px; line-height: 2px; -webkit-box-shadow: 0 0 0 #222222; -moz-box-shadow: 0 0 0 #222222; box-shadow: 0 0 0 #222222;}.stt_newsletter_widget input[type="text"] { padding: 9px 10px 9px 10px; margin-bottom: 10px; width: 132px; display: inline; border-right: none; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;}.stt_newsletter_widget input[type="email"] { padding: 9px 10px 9px 10px; margin-bottom: 10px; width: 128px; display: inline; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;}.stt_newsletter_widget input[type="submit"] { background: #E53B2C; width: 90px; font-size: 13px; font-weight: bold; line-height: 21px; color: #FFFFFF; cursor: pointer; padding: 9px 12px; margin: 0; border: none; display: inline; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}.stt_newsletter_widget input[type="submit"]:hover { background: #222222;}.stt_newsletter_widget p { background: none ! important; margin-bottom: 17px;}

Tiếp tục vào phần bố cục thêm tiện ích vào dán đoạn code này vào rùi lưu tiên ích lại

<div class="row widget stt_newsletter_widget"><h3 class="widget-title">Subscribe To Our Newsletter</h3>Get our new updates. Learn Blogging Tips, Make Money Online Course, Awesome Blogger Widgets and Many More. Choose your preference below.<br /><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=arisvn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="email" type="text" /><input name="uri" type="hidden" value="arisvn" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Subscribe" /></form><div class="clear"><div style="text-align: right;"><a href="http://www.spicytechtips.com/" rel="nofollow" target="_blank"><span style="font-size: xx-small;">Blogger Widget</span></a></div></div></div>

Thay phần bôi đỏ bằng feed của bạn

Thêm mẫu nữa đơn giản và có thêm nút share mạng xã hội

Vào phần bố cục thêm tiện ích copy và dán đoạn code này vào rồi lưu tiện ích lại

<style type="text/css">/*<!CDATA[*/#soc-mega{width:300px;margin:auto;padding:0;}.soc-googleplus {height: 57px;width:300px;margin-top:-2px;}.soc-facebook {background:#ffffff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}.soc-gplusone {background-color: #ffffff;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}.soc-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}.soc-twitter {background-color: #ffffff;border: 1px solid #c7dbe2;border-top: 0;}.soc-twitter a.twitter-follow-button {display: block;}.soc-twitter iframe {margin: 9px 11px;} .soc-email{background:#0084CE ;width:100%;padding:10px 0 10px 0;float:left;font-size:18px;text-align:center;font-weight:bold;margin:0 0 20px 0;color:#ffffff; } .soc-emailsubmit{background:#787878;border:1px solid #989898;cursor:pointer;color:#fff; padding:3px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:14px sans-serif;}.soc-emailsubmit:hover{background:#303030;border:1px solid #989898;}.textarea{padding:2px;margin:6px 2px 6px 2px;background:#f9f9f9;border:1px solid #ccc;resize:none;box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px; width:170px;color:#666;} .social-widget{width:300px;border:1px solid #d7d7d7;}.social-widget img{padding:10px 10px 2px 5px;} /*]]>*/ </style><div id="soc-mega"><div class='social-widget'><a href='http://feeds.feedburner.com/arisvn' target='_blank'><img src="http://3.bp.blogspot.com/-2s-dIcOf860/UN18aeew9iI/AAAAAAAAAq8/iWLQCguyKEE/s1600/rss.png" alt="Subcribe to our RSS feeds" /></a> <a href='http://www.facebook.com/<a href='http://www.facebook.com/arisvnn' target='_blank'><img src="http://3.bp.blogspot.com/-XN61PbeLj9Y/UN18Xav8YLI/AAAAAAAAAqs/RitGLNDI_0c/s1600/fbook.png" alt="Join Us on Facebook" /></a> <a href='https://twitter.com/<a href='https://twitter.com/arisvnn' target='_blank'><img src="http://1.bp.blogspot.com/-WlrYBnt_sw8/UN18btqoflI/AAAAAAAAArE/d5ciYvTY3Y0/s1600/twit.png" alt="Follow us on Twitter" /></a> <a href='https://plus.google.com/<a href='https://plus.google.com/+NguyenAris' target='_blank'><img src="http://2.bp.blogspot.com/-BWfJNYrfvnU/UN18Yj-SHVI/AAAAAAAAAq0/3_IZROJpjeE/s1600/gplus.png" alt="Add to Circles" /></a> <a href='http://www.youtube.com/user/<a href='http://www.youtube.com/user/NguyenAris' target='_blank'><img src="http://4.bp.blogspot.com/-_JKenr0wlvo/UN2RkgZkD7I/AAAAAAAAAro/qxN9zzQaKU0/s1600/ytube.png" alt="Watch us on Youtube" /></a> </div> <div class="soc-twitter"> <a href="https://twitter.com/</div> <div class="soc-twitter"> <a href="https://twitter.com/arisvnn" class="twitter-follow-button" data-show-count="true">Follow @arisvnn</a> <script type="text/javascript">/*<![CDATA[*/!functionundefinedd,s,id){var js,fjs=d.getElementsByTagNameundefineds)[0];ifundefined!d.getElementByIdundefinedid)){js=d.createElementundefineds);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBeforeundefinedjs,fjs);}}undefineddocument,"script","twitter-wjs");/*]]>*/</script> </div> <div class="soc-email"> Get Free Tutorials via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="http://feedburner.google.com/fb/a/mailverify?uri= <script type="text/javascript">/*<![CDATA[*/!functionundefinedd,s,id){var js,fjs=d.getElementsByTagNameundefineds)[0];ifundefined!d.getElementByIdundefinedid)){js=d.createElementundefineds);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBeforeundefinedjs,fjs);}}undefineddocument,"script","twitter-wjs");/*]]>*/</script> </div><div class="soc-email">Get Free Tutorials via Email<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="http://feedburner.google.com/fb/a/mailverify?uri=arisvn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == "") {this.value = "enter email address here";}" onfocus="if undefinedthis.value == "enter email address here") {this.value = "";}" value="Enter email address here" type="text" /> <input type="hidden" value="arisvn" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="soc-emailsubmit" value="Submit" type="submit" /> </form> </div> </div><input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == "") {this.value = "enter email address here";}" onfocus="if undefinedthis.value == "enter email address here") {this.value = "";}" value="Enter email address here" type="text" /><input type="hidden" value="arisvn" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="soc-emailsubmit" value="Submit" type="submit" /></form></div></div>

Thay phần bôi đỏ bằng thông số tương ứng của bạn

Pin it

TÁC GIẢ : Unknown

Hi. I’m Designer and CEO/Founder of ThemeXpose. I’m Creative Web Designer, UI/UX Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.