Cara membuat widget Email Subscription [4 style]

Cara membuat widget Email Subscription [3 simple style]. Dengan menambahkan widget ini, anda membuat sebuah widget yang membiarkan pembaca untuk berlangganan melalui email dan mendapatkan update post pada inbox mereka. Jadi setiap kali kita membuat post dan dipublikasikan, otomatis post tersebut akan dikirim ke email pelanggan berupa paragraf pembuka dan link yang menuju ke alamat url post tersebut. Jika Anda mendapatkan banyak pelanggan, Anda mungkin akan mendapatkan Page Rank tinggi dan banyak Backlinks. Jadi apakah anda tertarik untuk menggunakan widget ini ? Saat ini mari mulai tentang bagaimana menambahkan box Sederhana Berlangganan Via Email ini? Syarat utamanya anda harus memiliki akun feedburner terlebih dahulu. Jika belum punya akun feedburner, anda bisa daftar gratis DISINI. Maaf sebelumnya saya tidak memandu anda untuk membuat akun feedburner, sebenernya saya sudah membuat post tentang feedburner, ada 3 post tetapi terhapus dan tidak bisa dikembalikan. Jadi anda membuat akunnya sendiri ya ? :D

Baca juga : 5 Style Keren Email Subscription / Newsletter widget (part 2)

How To Add Simple Subscribe Via Email Box ?

Masuk ke blogger anda
Terus masuk ke layout
Add a gadget di tempat yang diinginkan
Pilih "Add HTML/JavaScript"
Copy dan paste kode email subcribe yang telah saya bagi menjadi 3 style seperti berikut ini:

Style pertama

<style>

.rb-email{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3UHbVfJPoS3YInPYgr9dx9gNPpLsSQ1BO1_2_SJ6suFSFfJOKXaVeWWjZy3y14N3cq_WPvGqQr7Cm1G1tAituurf4zXxKqkS4zU8HKsjWSYPWM1nmD-ecAOy11Jmkq8ZZwmkNWO0sHO4s/s1600/email.png) no-repeat 0px 12px ;

width:300px;

padding:10px 0 0 55px;

float:left;

font-size:1.4em;

font-weight:bold;

margin:0 0 10px 0;

color:#686B6C;

}

.rb-emailsubmit{

background:#9B9895;

cursor:pointer;

color:#fff;

border:none;

padding:3px;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

font:12px sans-serif;

}

.rb-emailsubmit:hover{

background:#E98313;

}

.textarea{

padding:2px;

margin:6px 2px 6px 2px;

background:#f9f9f9;

border:1px solid #ccc;

resize:none;

box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;

width:170px;

color:#666;}

</style>

<div class="rb-email">
Subscribe via Email

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'

method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YoyoSaorang', 'popupwindow', 'scrollbars=yes,width=400,height=400');return true'

style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='YoyoSaorang' />

<input name='loc' type='hidden' value='en_US' />

<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'

onfocus='if (this.value == "Enter your email...") {this.value = ""}'

type='text' value='Enter your email address here...' />

<input class="rb-emailsubmit" value="Submit" type="submit" />

</form>

</div>

Style kedua

<style>

.tbisubscribe {

padding: 0px;

padding-top:5px;

width: 250px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbimailbox {

border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;

-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

color: #666;

font: 11px "trebuchet ms", sans-serif;

padding: 7px 7px;

width: 160px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubmit {

font: bold 9px Tahoma, Geneva, sans-serif;

font-style: normal;

color: #ffffff;

background: #ff5714;

border: 0px solid #ffffff;

text-shadow: 0px -1px 1px #222222;

box-shadow: 2px 2px 5px #000000;

-moz-box-shadow: 2px 2px 5px #000000;

-webkit-box-shadow: 2px 2px 5px #000000;

border-radius: 10px 10px 10px 10px;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

padding: 9px 3px;

cursor: pointer;

margin: 0 auto;

}

.tbisubmit:active {

cursor: pointer;

position: relative;

top: 2px;

}

.tbisubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

</style>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

<div class='tbibox'>

<div class='tbisubscribe'>

<div style='color: #666666; font-weight: bold; font: 15px Oswald, cursive; margin: 0px 0px 0px 5px;'>Get Free Updates in your Inbox</div>

<div style='margin: 0px 0 0 6px;'>

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'

method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YoyoSaorang', 'popupwindow', 'scrollbars=yes,width=400,height=400');return true'

style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='YoyoSaorang' />

<input name='loc' type='hidden' value='en_US' />

<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'

onfocus='if (this.value == "Enter your email...") {this.value = ""}'

type='text' value='Enter your email...' />

<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>

</form>

</div>

</div></div>

Style ketiga

<style>

form.feedburner{

margin-bottom;5px;

display:block;

clear:both;

}

.RBstyle{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWhXKJUg3XX-OI1jYa5kCOXyTIIYDcX8OS-kSdHO18PrXzBCDPiblfboHLfmRDOEg_ULThRq3jjCqGwodrgPJ3LhAu-4Dx-w5-qGFnU6m5Hn8FvwMyy2mApLIUFtXu-j-7G-XkkD8mDQ/s1600/email.png) no-repeat scroll 4px center transparent;

padding:9px 20px 9px 35px;

color:#666;

font-weight:bold;

text-decoration:none;box-shadow: #B3B3B3 5px 5px 5px;

border:1px solid #D3D3D3;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 5px 5px 7px #CCC inset;

}

.RBsubmit{

color:#666;

font-weight:bold;

text-decoration:none;

padding:6px 20px;

border:1px solid #D3D3D3;

cursor: pointer;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-goog-ms-border-radius: 4px;

border-radius: 4px;

background: #fbfbfb;

background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

#emailwidget-outer {

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

-goog-ms-border-radius: 10px 10px 10px 10px;

border-radius: 10px;

background: none repeat scroll 0 0 transparent;

border: 1px solid #D3D3D3;

padding: 8px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

width:auto;

}

#emailwidget-outer:hover{

background: none repeat scroll 0 0 #FFF;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

}

#emailwidget-outer td{

padding:3px 0;

}

</style>

<div style='align:center;float:center;text-align:center;'><div id='emailwidget-outer'>

<div id='emailwidget'>

<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>

<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 16px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>

<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri= YoyoSaorang', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='Realcombiz'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='RBstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>

Style keempat

<style>

.ujangyoyo-email{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsapEoMP5l5HZUtbK9NgrvF6lD6IZ2Ki84FUmXLHOTgyRqLRp624XNkAKTHFNBZgYD_0cKexo0rx4OnvUkaFhc_oWCootT69-ouOh8nrVPnith_cJEqJc708fA0tBNwlJF12aC0oKGBM/s1600/shinemat-email-icon.jpg) no-repeat 25px 1px ;

width: auto;

float: left;

font-family: Arial;

font-size: 1.2em;

font-weight: bold;

margin: -1px 10px -5px -20px;

color: #686B6C;

}

.ujangyoyo-emailsubmit{

background: #131313;

border: 1px solid #000000;

cursor: pointer;

color:#ffffff;

padding: 4px;

text-shadow: 0 -1px 1px #080000;

-moz-border-radius: 6px;

border-radius: 6px;

font:15px "Arial";

font-weight: bold;

}

.ujangyoyo-emailsubmit:hover{

background: #3C3B3B;

border:1px solid #000000;

-moz-box-shadow: 0 0 5px #3A3A3A;

box-shadow: 0 0 5px #3A3A3A;

}

.ujangyoyo-textarea{

padding: 4px;javascript:void(0)

margin: 6px 2px 6px 2px;

background: #f9f9f9;

border: 1px solid #BFBBBB;

resize: none;

-moz-box-shadow: 0 0 5px #3A3A3A;

box-shadow: 0 0 5px #3A3A3A;

font-size: 13px;

width: 160px;

color: #FF7D00;

}

.ujangyoyo-textarea:hover{

border-color: #000000;

-moz-box-shadow: 0 0 5px #3A3A3A;

box-shadow: 0 0 5px #3A3A3A;

}

.ujangyoyo a{

padding: 3px 3px 3px 3px;

display: inline-block;

background: #F4F1F1;

border: solid 1px #C9C9C9;

border-radius: 4px;

-moz-border-radius: 4px;

}

.ujangyoyo a:hover {

border-color: #727171;

-moz-box-shadow: 0px 0px 3px #7C7C7C;

box-shadow: 0px 0px 3px #7C7C7C;

}

.ujangyoyo-followbox{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwJmlw_qLFrJjv-9WhIMCsigkc9OEa5KtTCGLATATb3cbv_IfUpAgcH0KQ3LbSBJ3zZD3fci6eXmsLFC_KXuby9GtftXTb7mG-8S2C8bx3XKqc6gisW9wZFFZzZjwViobcgfBGDYbDhM/s1600/fb-twitter-shinemat.png) no-repeat 237px 53px ;

padding: 5px;

border: 1px solid #C9C9C9;

-moz-border-radius: 8px;

border-radius: 8px;

color: #686B6C;

}

.ujangyoyo-followbox:hover{

background: #F5FCFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7rUEL0u00BPnQjZhHsu0Ugra8M5CSgZFqS6vaJDh0ZLWMQcXvDORjFgDTD6hCr0feoth99TVg-PtiSj-JugcJXpOXug1Otlh5LeAxEJ8HuG1UhWfnvDbL6cbczhVMsIRnudEHYBcC50/s1600/fb-twitter-shinemat-hover.png) no-repeat 237px 53px ;

padding: 5px;

border: 1px solid #727171;

-moz-border-radius: 8px;

border-radius: 8px;

-moz-box-shadow: 0px 0px 3px #7C7C7C;

box-shadow: 0px 0px 3px #7C7C7C;

}

</style>

<center>

<div class="ujangyoyo-email">

Subscribe via Email

<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" 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 gtbfieldid="3" class="ujangyoyo-textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" /><input type="hidden" value="YoyoSaorang" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="ujangyoyo-emailsubmit" value="Submit" type="submit" />

</form></div><br /><br /><br />

<b><font size="2" face="Arial" color="#686B6C">...and receive awesome posts to your mail inbox</font></b>

</center>

Langkah terakhir, click "SAVE TEMPLATE". and You have Done !

Costumalisasi:

Angka berwarna biru adalah ukuran widget
Huruf berwarna hijau adalah judul widget dan/atau kalimat pendukung.
Kata berwarna orange adalah kalimat dalam kotak tempat memasukan email
Huruf berwarna merah adalah username feedburner

Last Words

Bagaimana? sangat mudah sekali bukan? Saya mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara membuat widget Email Subscription [3 simple style]. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan.

Sekian post tentang Cara membuat widget Email Subscription [3 simple style]. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!

Cara membuat widget Email Subscription [4 style]

How To Add Simple Subscribe Via Email Box ?

Costumalisasi:

Last Words

Related Posts

Popular Posts

Label

Cari

Donasi

Artikel Pilihan