5 Style Keren Email Subscription / Newsletter widget

Hari ini saya telah mengumpulkan beberapa buah widget newsletter atau email subcribe sederhana dari berbagai blog. Menyediakan Newsletter menggunakan Feedburner atau layanan lainnya adalah cara yang bagus untuk terlibat dengan pengguna melalui media email. Orang bisa berlangganan ke blog Anda dan mereka akan mendapatkan update email secara teratur jika mereka menyukai blog Anda dan ingin mendapatkan update secara teratur.

Mereka hanya tinggal memasukan alamat email dan kemudian memverifikasinya dengan pergi ke email mereka dan klik link kecil dan lalu ia menjadi pelanggan Anda, tetapi sekarang hal yang datang adalah bagaimana membuat orang berlangganan update email Anda. Nah yang cara mudah adalah dengan menggunakan kotak widget bergaya keren yang dapat mengalihkan perhatiannya.

Baca juga : Cara membuat widget Email Subscription [4 simple style].

Widget ini membantu blog Anda dalam mendapatkan pageview dan kunjungan harian yang tinggi. Tidak hanya membantu meningkatkan trafik, tetapi itu juga memberikan dukungan dalam mendapatkan persetujuan dari BuySellAds dan Google AdSense atau pada jaringan iklan lainnya. Widget dibawah terdiri dari kode CSS dan HTML saja, tanpa adanya javascript yang memberatkan blog.

Cara Pemasangan

Pada sidebar :

Masuk ke akun blogger anda
Lalu pilih blog dan masuk ke bagian Layout
Add new widget
Pilih HTML/Javascript

Di bawah postingan :

Masuk ke akun blogger anda
Lalu pilih blog dan masuk ke bagian Template
Tekan tombol CTRL + F dan cari kode <data:post.body/> atau <div class='post-body entry-content'>
Simpan kode widget di bawahnya.

Berbagai style widget Email subcribe / newsletter

Style Pertama dari bloggeryard

<style>#mailbox {width: 99%; background:hsla(0,0%,95%,0.4); border:1px solid hsla(0,0%,67%,0.19); border-radius:10px 10px 10px 10px;box-shadow: 0px 0px 30px #ccc inset;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcorOTVK0Mylc6wLlcTKGLp864cyc2AhFYdRN10p6BHv-GjV38oNSNaKfaDf89GglX6gNA-fBVTI2FLScNOzKKBTDy93Lq50Yf7-n7yLY58PV4IJsh6co8yhMCbcquuRNfvJe-SKdwwNf/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;}#mailboxh3 {text-align:center;margin:10px; font-weight:bold;color: rgb(15, 15, 15);text-shadow: 1px 1px 0px #ccc,2px 2px 0px #ccc,3px 3px 0px #ccc,4px 4px 0px #ccc; font-size:1.5em; letter-spacing:1px;}#mailboxheader { border-bottom:1px solid #ccc; border-top:1px solid #ccc;margin: 0 10px 0 0;width: 99%; text-align:justify;}.mailbox-form { padding:20px;}#mailboxheader img { padding-right:10px;margin-left: 5px;width: 72px;}.mailbox-name { background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmZEt4OIjGg4U2B00e-gwZnUs6ZN0OxoGCBd3fq6O7BhSzfcpwq1aQQJwM6pU9VnAxdBtr3uhvV_xIzWmRv5rfwtdQGztCF0CE59eSe2ve5QIbBqChkkSGgkafTtCFVMUVoHTkk2SIFA/s320/name.png) no-repeat 7px 8px; border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:75%; height:24px;10px 0 5px 16px; padding:5px 15px 5px 28px; margin:8px 0 0 16px; vertical-align:top; display:inline-block;}.mailbox-email { background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixkdVyj4cTxSkbn58y1iuBg-ounotJpm4sg3rc2H2Iq8nH5aimGHAbQafU1-1rzbtofVTpE9ZB0oT-8SlwdM9xLj9prkd2l3OsW24NwyR7JFSxjly4kho6GAknjk6AIvKjllF4HXqO4Yc/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:75%; height:24px; margin:5px 0 5px 16px; padding:5px 15px 5px 28px; vertical-align:top; display:inline-block;}.mailbox-name:hover,.mailbox-email:hover { border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}.mailbox-submit { float:right; -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) ); background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf'); background-color:#ededed; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding: 6px 16px;margin: 2px 16px 0 2px; text-decoration:none; text-shadow:1px 1px 0px #ffffff;}.mailbox-submit:hover { background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) ); background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed'); background-color:#dfdfdf;}.mailbox-submit:active { position:relative;top: 1px;}</style> <link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css'/><div id='mailbox'> <div id='mailboxh3'> Mailcribe To Our Newsletter </div> <div id='mailboxheader'> <a href='http://goo.gl/6rQJK'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlUiVGYKrI4v_k0JHl87zAksWQWJE5l-GodZ2T8hZIi6eGWOHQJ8eG9soDnY1AE1TY-Jt8OM0Ar9GP6_76Uxo_cBYid6Nt18DlR3jpId64ggVFry9dhbP-rtEKGSVGVmQt8djhX9tZvEc/s1600/mail-icon.png' style='float:left;'/></a> <p style='padding: 0 4px 0 0;font-size: 13.4px;'> Sign Up Now To Get Free Our Post About Search Engine Optimization, Blogging Tutorials, Blogger Tips, and Much More. It's 100% Free! </p> </div> <form action='http://feedburner.google.com/fb/a/mailverify?uri=YoyoSaorang’ class='mailbox-form' method='post' target='_new'> <input class='mailbox-name' name='name' onblur='if (this.value == '') {this.value = 'Your Name';}' onfocus='if (this.value == 'Your Name') {this.value = '';}' value='Your Name'/> <input class='mailbox-email' name='email' onblur='if (this.value == '') {this.value = 'Your Email Adress';}' onfocus='if (this.value == 'Your Email Address') {this.value = '';}' value='Your Email Address'/> <input class='mailbox-submit' type='submit' value='Sign Up!'/> </form><p style='font-family:times new roman;margin-top:10px;font-size:15px;padding:15px 0 15px 0;'> <b>We Hate Spam! </b> </p></div>

Style colorfull based from hackinguniversity and edited by me (more smaller)

Cocok dipasang dibawah postingan dengan ukuran minimal post 600px

<style type='text/css'> .newsletter_box{display:block;width:600px;position:relative;height:130px;background:#FFF 17px 29px no-repeat url(http://i.imgur.com/5zAio.png);border:1px solid #E0E0E0;margin:10px auto}.newsletter_header{background:url(http://i.imgur.com/59wbz.png) repeat-x;height:18px}.newsletter_box .news_title{display: block;font-size: 18px;color: #929083;position: absolute;top: 88px;left: 10px;font-family: Segoe UI;}.newsletter_box p{display:block;width:180px;font-size:13px;color:#929083;position:absolute;top:28px;left:135px;line-height:18px;border-left:5px solid #ebebeb;padding:10px 0 10px 15px}.newsletter_box .newsletter_form{display:block;width:325px;position:absolute;top:22px;left:355px}.newsletter_box .newsletter_form label{display:none}.wpmlerror{display:block!important;width:150px!important;position:absolute!important;top:30px!important;left:100px!important;text-align:left;margin:0!important;padding:0!important}.feedbutton .button{display:block;position:absolute;right:165px;top:52px;font-size:12px;font-family:Tahoma;border:0;padding:8px 15px}.feedbutton input{color:#FFF;background:#00a5f0}.feedbutton input:hover{color:#FFF;background:#F06;-webkit-transition:ease-in .3s}.feedbutton input:active{color:#FFF;background:#A5E919}.feednewsletter input.emailfield{width:210px;background:#EDEDE5;display:block;position:absolute;right:95px;top:17px;border:0;padding:7px}</style>
<section class="newsletter_box round-me" id="gonewsletter"><div class="newsletter_header"></div><section class="news_title"><strong>NEWS</strong>LETTER</section><section><p>Sign up with your email to get updates about new posts on how to's tuts and other articles.</p></section><section class="newsletter_form"><div class="feednewsletter"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=yoyosaorang', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" name="email" class="emailfield" /><span class="feedbutton"><input type="submit" value="Subscribe" class="button" /></span><input type="hidden" value="Your Name" name="uri" /><input type="hidden" name="loc" value="en_US" /></form></div></section></section>

Paper newsletter from labstrike

<style type="text/css"> #Newsletter3-Box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOu_VFpjkzYy6aXTf2KjzEtXUE57ptF9Pibwo3WNs5jkC8IWt7DZfX5SQF0H3KIU6My3ij61BtDVWIoOSF0Vc7gVOlk8ZFKx45D50I1iNPBPF9TAw7YiE_GU-SNXb05IGLl1gLM6kFweI/s1600/Newsletter-4.png)no-repeat scroll center center transparent; height: 311px; width: 349px; } form#Newsletter3-Form { display: block; margin: 0; padding-left: 71px; padding-top: 63px; } form#Newsletter3-Form #s { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 28px; margin-top: 37px; vertical-align: top; width: 235px; outline:0px; position: relative; left: 43px; } form#Newsletter3-Form #d { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 28px; margin-top: 22px; vertical-align: top; width: 235px; outline:0px; position: relative; left: 43px; } form#Newsletter3-Form #sbutton { background: transparent; border: none; cursor: pointer; height: 28px; position: relative; left: 179px; top: 41px; width: 90px; } </style> <div id="Newsletter3-Box"> <form id="Newsletter3-Form" action='http://feedburner.google.com/fb/a/mailverify?uri=YoyoSaorang’ class='mailbox-form' method='post' target='_new'> <input id="d" name="name" value="Enter Your Name" onfocus='if (this.value == "Enter Your Name") {this.value = ""}' onblur='if (this.value == "") {this.value = "Enter Your Name";}'/> <input type="email" id="s" name="email" value="Enter Your E-Mail" onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}' onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/> <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm27RKlaiAne-C9_rngABIaFDOrC0ww37GR-zTVcFWh5iQE-TyFx541b4oDsr5FELaTJ9hru1v5_IVoIJzmHshNxIVKM6aifYQmhTWFA1DMx31ubA_HcTWnwyo4o1_vtE1m08olDI42RM/s1600/blank.gif" id="sbutton"/> </form> </div>

Envelope newsletter from labstrike

<style type="text/css"> #LS-Newsletter4-Box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCObY39Q4wMzEAhvggbHHjQmZzi8BbrYq7ubdaeYhkf7D3c_d4DMWDJVF9uX95fOmHDA9uzUkMDsGGpgutr2ol7Ju894WeLA_pPiS12MClQ2lkzVHcjIVktc3AJmKR6RXqqnrS7mJ503U/s1600/Newsletter-5.png)no-repeat scroll center center transparent; height: 299px; width: 408px; } form#LS-Newsletter4-Form { display: block; margin: 0; padding-left: 71px; padding-top: 63px; } form#LS-Newsletter4-Form #s { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 28px; margin-top: 37px; vertical-align: top; width: 275px; outline:0px; position: relative; left: -25px; } form#LS-Newsletter4-Form #d { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 28px; margin-top: 38px; vertical-align: top; width: 275px; outline:0px; position: relative; left: -25px; } form#LS-Newsletter4-Form #sbutton { background: transparent; border: none; cursor: pointer; height: 43px; position: relative; left: -36px; top: 25px; width: 144px; border-radius: 5px; } </style> <div id="LS-Newsletter4-Box"> <form id="LS-Newsletter4-Form" action='http://feedburner.google.com/fb/a/mailverify?uri=YoyoSaorang’ class='mailbox-form' method='post' target='_new'><input id="d" name="name" value="Enter Your Name" onfocus='if (this.value == "Enter Your Name") {this.value = ""}' onblur='if (this.value == "") {this.value = "Enter Your Name";}'/> <input type="email" id="s" name="email" value="Enter Your E-Mail" onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}' onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/> <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm27RKlaiAne-C9_rngABIaFDOrC0ww37GR-zTVcFWh5iQE-TyFx541b4oDsr5FELaTJ9hru1v5_IVoIJzmHshNxIVKM6aifYQmhTWFA1DMx31ubA_HcTWnwyo4o1_vtE1m08olDI42RM/s1600/blank.gif" id="sbutton"/> </form> </div>

Simple newsletter from labstrike

<style type="text/css"> #LS-Newsletter5-Box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPgaV0Y99gbAxFpAGkKG_09ncka5ZU5hSX-20CIFHVndPY9RPwoNRMK7vpINGzqF3STAzrVfZpARGuacAXRT0e0Ld5h-Q0zVjlDniqFrP40m4vSEj-8OiUuljXJF2lj1KH9oz8ped1fs/s1600/Newsletter-3.png)no-repeat scroll center center transparent; height: 230px; width: 355px; } form#LS-Newsletter5-Form { display: block; margin: 0; padding-left: 71px; padding-top: 63px; } form#LS-Newsletter5-Form #s { background: transparent; border: none; color: #444242; font-family: georgia; font-size: 15px; font-style: italic; height: 28px; margin-top: 118px; vertical-align: top; width: 235px; outline:0px; position: relative; left: -35px; } form#LS-Newsletter5-Form #sbutton { background: transparent; border: none; cursor: pointer; height: 32px; position: relative; left: 206px; top: -31px; width: 55px; border-radius: 0px 25px 25px 0px; } </style> <div id="LS-Newsletter5-Box"> <form id="LS-Newsletter5-Form" action='http://feedburner.google.com/fb/a/mailverify?uri=YoyoSaorang’ class='mailbox-form' method='post' target='_new'> <input type="email" id="s" name="email" value="Enter Your E-Mail" onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}' onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/> <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm27RKlaiAne-C9_rngABIaFDOrC0ww37GR-zTVcFWh5iQE-TyFx541b4oDsr5FELaTJ9hru1v5_IVoIJzmHshNxIVKM6aifYQmhTWFA1DMx31ubA_HcTWnwyo4o1_vtE1m08olDI42RM/s1600/blank.gif" id="sbutton"/> </form> </div>

Last Word

Sekian post tentang 5 Style Keren Email Subscription / Newsletter widgetSaya harap Anda menyukainya dan menggunakannya di blog Anda. Jika Anda ingin berbagi post ini di blog Anda maka silakan cantumkan link ke posting asli disini. Jika Anda punya masalah maka dapat meninggalkan komentar di bawah ini dan mari kita bahas bersama-sama. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Jadi tetap terhubung dengan kami dan jangan lupa untuk berlangganan lewat Email/Facebook/Twitter.. Happy Blogging friends!