5 Gadget Email ubscribe Keren
"Salam Tokek Kesel"
Thanks : Ujangyoyo
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.
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.
<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/AVvXsEgWh7bU3XviDBj829L3u4UPsprcvLyIyUOpwLgP4e1gSAa6O0SpQ3iIfC-WcvE7uZaSdf-0Yuno3eAfwrxr83A46xMWeLLQZUOzxX5c4elky0S_z0mGoDerRTPXaD9g_LwJKvi3FxGb2A87/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/AVvXsEguYIJzMmjpll7yipaRi5SP9jYIQ_8NDaLLw7ddlYCbaCLiRinA3nZSa3xueeUG0aGo-W-d2QSqR6dxU6bV8jQEINje2oCQBlT6IhAS2q8rfhAlani75oEmIE3s7xlJ3dZA6lB_VmwIv1E/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/AVvXsEjBOw37s4IGwol_nDi1KE2FrkyhTR4VqPxFLglGb9QWk4YpIQOf-vqttvrxbTtxV1JzMqdlifeA6Zp_eiB0J9vkXyTGC47L-8CtQUf61_xjoAdcjIup4sbq0d1lo3sgyQEewff3OJkLdfg/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/AVvXsEgNDMKJIvITQiGgyj-bNShUzqgyasKDjIzxF_gSfF8NGzYrVMkcVl24VusVsl2YtL1oqofwXdAynnimDQQQlaIEtU41v1g9Oxy7yr3A2zWU6-c9zi3MnFNdmjru7XRBZeK4hZkGo-Txn9E/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=TokekKesel’ 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>
2. Full Color Hackinguniversity
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=TokekKesel', '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>
3. Paper Newlatter Lab Strike
<style type="text/css"> #Newsletter3-Box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyFQ0JxAI8fhLX8YYLWEKh_YItfnaNVMKDc8MrkNgOawcY4Ad7K3ykhWhysKJQSEJstN-Xa-PgeQa7gzJmeTDd3Wjk4NF75X_pUJEaGYLnjb4X5hJBvnnAHknJKZwvOFT5ppTqj5LrOz8/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=TokekKesel’ 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/AVvXsEgzP9NGz7pqe6Bpux8Ekc7S1xtAzk2HS7eWeIIEq-MD2SeIHI_M_C9tXFQ_OyvIMnbr3rMBUGoIx74HvjehysUmWnijuwYTy8FG-olRHwVPNgjmeagXk1jHhOOlMVGpWqDzMgYBi6X2qfo/s1600/blank.gif" id="sbutton"/> </form> </div>
4. Envelope Newsletter Lab Strike
<style type="text/css"> #LS-Newsletter4-Box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCnQG4mY7UATLmZOarennLbJZNRPo9KrQWhrkBmWCcNTX8X0f8ZLtb0Emk4q0uS-KQ2Vl5PYqRHlodHT1prV-XVHzR5M40cnrXSqgl4UvDG2YwDTQZ-y_PX2uLKYJuPyDpPDaaz0soEE/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=TokekKesel’ 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/AVvXsEgzP9NGz7pqe6Bpux8Ekc7S1xtAzk2HS7eWeIIEq-MD2SeIHI_M_C9tXFQ_OyvIMnbr3rMBUGoIx74HvjehysUmWnijuwYTy8FG-olRHwVPNgjmeagXk1jHhOOlMVGpWqDzMgYBi6X2qfo/s1600/blank.gif" id="sbutton"/> </form> </div>
5. Lab Strike
<style type="text/css"> #LS-Newsletter5-Box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhbR8Cu-xVCoEPHCGV5FOlPUFFnTCrqg5Jh1Ut7YQ6udHc0MQglczgWhyjMT6bBWJcbYkLOPujE4ahBbRbshv7TPpJH3JdDSXqcA5zriHqW9dEoUxplQgpfPodZMW3xnvy37nQszG4jk/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=TokekKesel’ 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/AVvXsEgzP9NGz7pqe6Bpux8Ekc7S1xtAzk2HS7eWeIIEq-MD2SeIHI_M_C9tXFQ_OyvIMnbr3rMBUGoIx74HvjehysUmWnijuwYTy8FG-olRHwVPNgjmeagXk1jHhOOlMVGpWqDzMgYBi6X2qfo/s1600/blank.gif" id="sbutton"/> </form> </div>