Saturday 26 October 2013

Cara membuat widget Email Subscription


Email_Subcribe_Style
Cara membuat widget Email Subscription . 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


Bagaimana caranya nih ?

  • 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:
simple+subsciption+box
Style pertama
<style>
.rb-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLky6_klWB5ujsJN6jj2-unTHVN7321EITC8YS91Z0ZUXK89tE9JwpfGuU7Lj2MKgfa0o0JJSHgg0li1D85rf39t7AV-6NOJWQ2lPI-S9mmYqT8KFNKoAa-Pr-BDoOtUvQDqd2PaAH3nV/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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Ridwanzenalm&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=400,height=400&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Ridwanzenalm' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email address here...' />
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div> 

subscribe
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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Ridwanzenalm&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=400,height=400&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Ridwanzenalm' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
</div></div>

email_subcriber_3
Style ketiga
<style>
form.feedburner{
margin-bottom;5px;
display:block;
clear:both;
}
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-d02qF4GrtxP0dAoAppuHcJh85uC7xAG-Q7JuopztnGYcNZdOKAZt5nBsqTaqkLlBGUjjhZQv6eVAnKMmU89TQQRqHmitGxw2qxe2-0xWA2NhFqwtsdB3e_tkTn1VmEsjZ4PZWTISS54/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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,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(&apos;http://feedburner.google.com/fb/a/mailverify?uri= Ridwanzenalm&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

email_subcriber_4
Style keempat


<style>
.ujangyoyo-email{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu6S1H2LPO0-QtTm3n_VZYmyE2MJDcW1LyRvreql-Ercfrd7xvQkDGRZ655UmqJQHcovXSgBCxLb-PV3eYdVmCQjzVF2mvh-NbHO6utci_IlBd0iYYXBn15PoWTzoRQpalj2bJq6q7Ecc/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/AVvXsEg74IfF8pMzuFANPbgf0vYzSft3NF8xMxBDLzQ_FEP3VXuHm_Njw-p0iS1kbFZxgOJtgt0PDHPFWo_61P5p2XZkFkqzaDH5ucKLOc042MhPsPk5qxjVtkZ39WwucvEXaPf9ak5XaPep_5Y/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/AVvXsEiXC0bSEOjkfTdLfZnaYg4AuxlMdl1tgmlHC44XeLt5fFPhjCyz8cgE6REtl-ZfP9qOnATdqcm94aPBCXGd0inpX9RAI86_g7Q-kQJMtZ-1iUyl_BlfBcEdndnbi6RSh5N8FoJIAFMDrnc/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=Ridwanzenalm', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="ujangyoyo-textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /><input type="hidden" value="Ridwanzenalm" 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

ads

Ditulis Oleh : Unknown Hari: 07:14 Kategori:

No comments:

Post a Comment

 

Followers

Statistik

Flag Counter