Cara membuat widget Langganan Artikel terbaru/subscribe ~ blog capoenk

Cara membuat widget Langganan Artikel terbaru/subscribe. Mungkin sobat blogger sudah banyak melihat kotak langganan artikel terbaru atau kotak subscribe, pada kesempatan kali ini saya ingin membagikan Cara membuat widget Langganan Artikel terbaru/subscribe + social network Button yang tentunya agak sedikit berbeda, kerena pada kotak langganan artikel ini ada sedikit penambahan, yaitu social network button. Berikut ini Screenshotnya:

bagi sobat-sobat yang mungkin berminat untuk mempercantik tampilan blognya dengan widget ini, berikut cara-caranya:

Copy Script dibawah ini:

<br />
<style type="text/css">
    .mdbar{width:300px;float:left;background:#FFF 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfr3ITc3VHKklO86zT77RwNXdIbwrmjcInGQmA_7y2cZuh7z8oX0S8dUx_Zw5DSpCo04BKuU6O_B6qCERCG7A0mqZdVTFjwke4hXo6dNSeRGXBZHiY00dUS_Df7PPy62k1dK6AFWCxf6n/s1600/%5Bwww.gj37765.blogspot.com%5Dsidebartop.gif)
 top no-repeat;margin:0 0 10px;padding:10px;border:1px solid 
#DDD;}.mdbar .md-credit{}.mdbar .md-credit 
a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px 
white;color:#1E598E;text-decoration:none;}.mdbar 
h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjws3gwJWVtDxtcrJn-5sSN2B4XAYa7mGfu0w5dhmQ5AOM5VxeMsE4J_0cHQk29_0pfHIfiCKjji_Oqs2rufTVVMgTs_V2qgliI1RPhiy1WHSYUW21mErk_elRGOF34q6sQi59-jhysAPHC/s1600/%255Bwww.gj37765.blogspot.com%255DSUBSCRIBE.gif)
 no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 
0px;font-size:0px;font-family:Sans-serif, Arial, 
Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0
 1px 0 #fff;}.mdbar 
.count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica,
 
Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0
 0px 0 4px;margin:0;}.mdbar .count 
span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, 
Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px
 0px 0;}.mdbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 
0px 0;float:left;width:300px;font-family:Helvetica, 
Arial;font-size:12px;}.mdbar .subicons 
a{text-decoration:none;color:#333333;}.mdbar .subicons 
a:hover{text-decoration:underline;color:#333333;}.mdbar .subicons 
.rssicon{border-right:1px solid 
#e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjF2umvCVsxQjjdlRqq77wlWZe4IrMqS3YAVZ8Zl3YsPDHlbGJVvhGQ5YdMceVkQkP_syYqPX8Vy-3EjHRUc_f_Ob01RWfDmWv9MUi1Q7Kr7HqY-2piJAj9CPAT7UePMElrwKTrOJlh1EO/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
 no-repeat;background-position:0px 
5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons 
.googleicon{border-right:1px solid 
#e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjF2umvCVsxQjjdlRqq77wlWZe4IrMqS3YAVZ8Zl3YsPDHlbGJVvhGQ5YdMceVkQkP_syYqPX8Vy-3EjHRUc_f_Ob01RWfDmWv9MUi1Q7Kr7HqY-2piJAj9CPAT7UePMElrwKTrOJlh1EO/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
 no-repeat;background-position:0px 
-37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons 
.fbicon{border-right:1px solid 
#e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjF2umvCVsxQjjdlRqq77wlWZe4IrMqS3YAVZ8Zl3YsPDHlbGJVvhGQ5YdMceVkQkP_syYqPX8Vy-3EjHRUc_f_Ob01RWfDmWv9MUi1Q7Kr7HqY-2piJAj9CPAT7UePMElrwKTrOJlh1EO/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
 no-repeat;background-position:0px 
-79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons 
.twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjF2umvCVsxQjjdlRqq77wlWZe4IrMqS3YAVZ8Zl3YsPDHlbGJVvhGQ5YdMceVkQkP_syYqPX8Vy-3EjHRUc_f_Ob01RWfDmWv9MUi1Q7Kr7HqY-2piJAj9CPAT7UePMElrwKTrOJlh1EO/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
 no-repeat;background-position:0px 
-121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
 10px 0px 30px;margin:0 0 0 5px;}.mdbar .emailsub{border-bottom:0px 
solid #e6e6e6;padding:15px 0 0px 
0;float:left;width:100%;font-family:Helvetica, Arial;}.mdbar .emailsub 
.emailicon{background:url(http://www.fordfarmhouse.com/images/email.png)
 no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 
5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.mdbar
 .emailsub .emailupdatesform{margin:15px 0 5px 
5px;width:300px;float:left;}.mdbar .emailsub .emailupdatesform 
input.emailupdatesinput{background:#fff !important;float:left;border:1px
 solid #d2d2d2;padding:0px 8px 0px 
8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.mdbar
 .emailsub .emailupdatesform 
input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4
 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E
 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 
100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 
100%);background:-webkit-gradient(linear,left top,left 
bottom,from(#57ABFE),to(#F9780E));border:1px solid 
#F9780E;text-transform:none;font:bold 12px 
arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 
5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}

</style><br />
<br />
<div class="mdbar">
    <h2 class="title">
<br />
<br />
Subscribe Now!</h2>
<div class="count">
    <span class="bigcount"><a 
href="http://feeds.feedburner.com/Ibnoeinfo" rel="nofollow"><img 
alt="" height="26" 
src="http://feeds.feedburner.com/%7Efc/ibnoeinfo?bg=F2F2F2&fg=666&anim=1"
 style="border: 0;" width="88" /></a> </span>Get the 
latest articles... </div>
<div class="subicons">
    <div class="rssicon">
     <a href="http://feeds.feedburner.com/ibnoeinfo" rel="nofollow" 
target="_blank">  RSS</a></div>
<div class="googleicon">
     <a href="https://plus.google.com/u/0/112120349328854462468" 
rel="author" target="_blank"> G+</a></div>
<div class="fbicon">
     <a href="https://www.facebook.com/ibnoec" rel="nofollow" 
target="_blank">FB</a></div>
<div class="twittericon">
     <a href="https://www.twitter.com/ibnoecahyadie" rel="nofollow" 
target="_blank">Twitter</a></div>
</div>
<div class="emailsub">
    <div class="emailicon">
    <div style="color: #3a3a3a; font-family: Helvetica, Arial; 
font-size: 13px; font-weight: normal; margin: 0; padding: 0; text-align:
 justify; width: 245px;">
    Join the team and get updates by Submitting your email 
address:.</div>
</div>
<div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" 
method="post" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ibnoeinfo',
 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" 
target="popupwindow">
    <input class="emailupdatesinput" gtbfieldid="10" name="email" 
onblur="if (this.value == '') {this.value = 'Ketik email anda 
disini...';}" onfocus="if (this.value == 'Ketik email anda disini...') 
{this.value = '';}" type="text" value="Ketik email anda disini..." 
/><input name="uri" type="hidden" value="ibnoeinfo" /><input
 class="joinemailupdates" type="submit" value="Submit" 
/></form>
</div>
</div>
</div>

1.Login ke blog sobat.

2.Pada laman Dasbor Click Rancangan > Add Gadged > Pilih HTML/Javascript lalu pastekan Script yang sobat Copy tadi, dan langkah terakhir Save.

Catatan: