Widget Berlangganan artikel untuk Blogger

Assalamu'alaikum Wr Wb

Postingan Kali ini saya akan memberikan tutorial bagaimana cara membuat widget berlangganan artikel seperti facebook alias gayung kata orang sunda hehe.... 

Seperti yang saya akan jelaskan pada postingan ini, berlangganan artikel melalui email akan memudahkan untuk membaca artikel pada blog yang anda sukai setiap kali blog tersebut melakukan update artikel tanpa perlu mengunjunginya setiap waktu. Jadi anda tidak perlu repot - repot bukan?

Widget ini memiliki tampilan yang elegan dan sangat indah seperti facebook. Bar dan tombol bersinar ketika mereka aktif (mouse ditekan pada Widget itu).

Demo  live widget ini dapat dilihat dengan mengklik tombol di bawah.

Live Demo

Langsung saja berikut Widget Box Berlangganan untuk Blogger yang bisa anda coba untuk memperindah tampilan blog anda.

• Cara ADD TOMBOL Sharing Sosial Widget
• Pergi ke Blogger Dashboard → Tata Letak → Elemen Halaman. 
• Tambah Gadget HTML / JavaScript. 
• Paste di bawah kode di dalamnya.

<center>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RamaBantenRB', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">

<h1>Berlangganan artikel</h1>

<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Sign up and receive our free Newsletter &nbsp;</span></font></center><br/>

<input type="hidden" value="RamaBantenRB" name="uri" />

<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />

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

<input type="submit" value="Subscribe" class="login-submit" />

</form>

</center>

<style>

a.tt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}

a.tt span{ display: none; }

a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.tt:hover span.top{

display: block;

padding: 30px 8px 0;

background: url(bubble.gif) no-repeat;

}

a.tt:hover span.middle{ /* different middle bg for stretch */

display: block;

padding: 0 8px;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

}

::-moz-focus-inner {

padding: 0;

border: 0;

}

:-moz-placeholder {

color: #bcc0c8 !important;

}

::-webkit-input-placeholder {

color: #bcc0c8;

}

:-ms-input-placeholder {

color: #bcc0c8 !important;

}

.input {

font: 12px/20px "Lucida Grande", Verdana, sans-serif;

color: #404040;

background: #ebc9a2;

}

.input {

font-family: inherit;

font-size: 12px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.login {

padding: 18px 20px;

width: 80%;

background: #3f65b7;

background-clip: padding-box;

border: 1px solid #172b4e;

border-bottom-color: #142647;

border-radius: 5px;

background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);

background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);

background-image: -o-radial-gradient(cover, #437dd6, #3960a6);

background-image: radial-gradient(cover, #437dd6, #3960a6);

-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);

box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);

}

.login > h1 {

margin-bottom: 20px;

font-size: 24px;

font-weight: bold;

text-align: center;

color: #fff;

text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;

}

.login-input {

display: block;

width: 90%;

height: 37px;

margin-bottom: 20px;

padding: 0 9px;

color: white;

text-shadow: 0 1px black;

background: #2b3e5d;

border: 1px solid #15243b;

border-top-color: #0d1827;

border-radius: 4px;

background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));

background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));

background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));

background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);

}

.login-input:focus {

outline: 0;

background-color: #32486d;

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);

}

.lt-ie9 .login-input {

line-height: 35px;

}

.login-submit {

display: block;

width: 100%;

height: 37px;

margin-bottom: 15px;

font-size: 14px;

line-height: 10px;

font-weight: bold;

color: #294779;

text-align: center;

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

background: #adcbfa;

background-clip: padding-box;

border: 1px solid #284473;

border-bottom-color: #223b66;

border-radius: 4px;

cursor: pointer;

background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);

background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);

background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);

background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);

-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);

box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);

}

.login-submit:active {

background: #a4c2f3;

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

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

}

.login-help {

text-align: center;

}

.login-help > a {

font-size: 11px;

color: #d4deef;

text-decoration: none;

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

}

.login-help > a:hover {

text-decoration: underline;

}

</style>

Demikian artikel mengenai Cara Membuat Widget Berlangganan Artikel Pada Blog. Semoga artikel ini dapat berguna dan bermanfaat untuk sobat blogger yang membutuhkan. Salam Blogger

Facebook Twitter Google+ Linkedin Digg