Pop up Email Subscribe box untuk Blogger - ini adalah widget blogger menggunakan jquery. Formulir berlangganan ini dibuat dengan CSS3 dan jquery. Dalam tutorial ini saya berbagi cara menambahkan pop up email subscription box untuk blog anda.
Dengan menambahkan widget ini, Anda dengan mudah meningkatkan pembaca blog Anda. Ini adalah cara yang baik untuk meningkatkan pembaca blog anda. Saya berharap Pop up Email Subscribe box untuk Blogger dapat membantuan Anda untuk meningkatkan pembaca blog anda. Sekarang mari kita mulai tutorial.
pergi ke dashboard blogger > Template > Edit HTML dan copy-paste code CSS ini sebelum kode tag
</style>
#sub-box {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:8px solid #fff;width:600px;height:250px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:"Close";padding:5px 8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;font-family:Open sans;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:600px;height:250px;background-color:#02BA74;}
#subscribe-box p {font-family:'Open Sans';font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans';width:96.3%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
dan Save Template.
sekarang pergi ke Layout > Add a gadget > HTML/Javascript dan tambahkan code di bawah ini.
<script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // Pengaturan cookie 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() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // cookie 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('popup_facebook_box') != 'yes'){ $('#sub-box').delay(3000).fadeIn('fast'); $('#closebox, #boxclose').click(function(){ $('#sub-box').stop().fadeOut('fast'); }); } }); </script> <div id='sub-box'> <div id='boxclose'> </div> <div id='boxview'> <div id='closebox'> </div> <div id='subscribe-box'> <center><p>Subscribe for Latest Update</p></center> <div class='emailfield'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=#link' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=#link, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/> <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/> <input name='uri' type='hidden' value='#link'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now!'/> </form> </div></div>
Note:
#link ganti dengan nama feedburner Anda.
Sekarang refresh halaman dan lihat hasilnya. Jika Anda menemukan masalah apapun maka memberitahu saya bagian komentar dan jika Anda berpikir posting kami adalah membantu maka jangan lupa untuk berbagi dengan orang lain. Terima kasih...
2 komentar
test
replay