Membuat Widget Subscribe Di Blog

Widget Subscribe atau berlangganan sudah pada tahu kan? saya anggap sudah aja deh ya, lagi males ngetik soalnya sob, hehehe... kalau emang belum bisa lihat beberapa contoh gambar dibawah.

1. Masuk ke Blogger masing - masing.
2. Masuk ke Tata Letak > Tambah Gadget > pilih Edit HTML
3. Silahkan pilih tiga tampilan widget subscribe dibawah ini.
4. Jika telah selesai, Save atau Simpan

Widet Subscribe.1

Di bawah ini adalah skrip dari tampilan dari Widget subscribe.1

<style type='text/css'>
.social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
.emailform{margin:16px 0 0; display:block; clear:both;}
.emailtext{margin:10px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85gNccSNbr5M4ggYftFE9iMc1umzPvT4gEzQUkIZWZvCW2rmdXKNm8XgOLgexY-QpLVYmGVSkyxisPoQXGGZ2A7vKzoKJ5DD5F0eImENH3Tn5lhCk95dbP1ZB55jSvmZ-7Ckmkefodeg/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}
.emailtext:hover{background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85gNccSNbr5M4ggYftFE9iMc1umzPvT4gEzQUkIZWZvCW2rmdXKNm8XgOLgexY-QpLVYmGVSkyxisPoQXGGZ2A7vKzoKJ5DD5F0eImENH3Tn5lhCk95dbP1ZB55jSvmZ-7Ckmkefodeg/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}
.sub-button:hover{color:#444;border-color: #999;background:#ccc}
</style>
<center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=Deka' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsS_FR3RjBM1F-a9rF3UMksT3WjsdwFLrChBWzRyL4lfeVpTutbrtBQ3cipxSv9mlmp6dQzCMAIgt2BXmD5LrD20Us0_aqBhvRZjDLRk_0Bqvak3TWhiiOH50kJRaY5fuMBCe8J0n2-M/s1600/mail.png" border="0" title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/Deka Mulyana' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRVg8Vc1cuE9BGO0pJfL5SBeP7NVvpn-mryWnl-HXwL7tpNsSq8Mb_5UrgRqFblZNuJEs60u_uY3ZwzMmnogpth0OIqyzKXYtqa2jAKcU-Jfc1_VpD-12kHOV4ce_y9Fsr8JtYqAU_sw/s1600/rss.png" border="0" title='rss'/></a> </td>
<td> <a href='http://twitter.com/Dkmulyana' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxuFEwBC9m8-ZDecn-obY9i42-xu6PzxvW17xTrhA1zVe0rnH2ENlpWlLEptySmIzpF6M3DEZVg9Jg62Vo73b5Jx8SyakR7MD3fxYfumMREp3Wb1VGwoGpeFlpolJpCfT6GiZp4oK0WQ/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
<td> <a href='http://www.facebook.com/Ngapain.Lu.Liat.Liat.Profil.Gw' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWbYH1JrFCf1cJmlzd6Phw-Y_SvfyVN8MPivsRtpzH_3PqGrB1-FUNmcc0YeCmJXMWYmCZw3JGNjZuQphO39iOpfkBMQJ86IlPB8JmrEu4Vvb3MGFXPz3CljwSX3R5ERk9siiKEIhSMno/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
<td> <a href='http://www.youtube.com/judas335' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzDZ7n7jnxC8JPyo9tcGIgxJJNakpQWdfxzECokhlqVPEnY9zaPmpBavFatQPxIDPVJWcmwzkFUeetwIJZ-OTbKCggGSAeDSygoEvehQgH4JNFAiiYLmEutIqZNj1UNOeUMbr_NHKYMss/s1600/youtube.png"  border="0" title='youtube'/></a>
</td></tr></tbody></table> </div></center>
<center>
<div class='sub-box'>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
<small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</i></small>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maskolis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="maskolis" name="uri"/>
<input type="hidden" name="loc" value="fr_FR" />
<input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div></div></center>

Widet Subscribe.2

Di bawah ini adalah skrip dari tampilan dari Widget subscribe.2

<style type="text/css">.mdbar{width:280px;float:left;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW8UFNtGBnozLL4pPzURv7PYmWsIG7pe3YsVbM-YgIgE3mesVkHhFJBBOA5Je39n7__ofJI2L21uVfc8BkJftsObVC39pUafHHhluIapyULh5h48QzGyKlyNoDylELkVjM322Yqc-rL4EV/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/AVvXsEhTKn_2o-MVv3qLv6k59RgbpAE0uwCE7Xgxas6DI1siGBh09y4fZnawsOoloDK6K_nSjab0V_lmklnXG0WjslhYjVX-EfBQCON29dtdKA_HG0jbzdCjB1FV7DUuQVd9zCFlufgO_5u0IEL7/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:300px;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/AVvXsEiQ_q4iOnn_VqlLpQ5EINU137X2oEob5l4-2iiv7L5wDI_RNDIO_Yxwb-HiV9d8oq-2CxFcENchyncdxgqjZjHO-5euAjiRjO8H5pDvB4VGmIIM_GMnUApOOJUPVBGUatdQQ61UBT5YOtCQ/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/AVvXsEiQ_q4iOnn_VqlLpQ5EINU137X2oEob5l4-2iiv7L5wDI_RNDIO_Yxwb-HiV9d8oq-2CxFcENchyncdxgqjZjHO-5euAjiRjO8H5pDvB4VGmIIM_GMnUApOOJUPVBGUatdQQ61UBT5YOtCQ/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/AVvXsEiQ_q4iOnn_VqlLpQ5EINU137X2oEob5l4-2iiv7L5wDI_RNDIO_Yxwb-HiV9d8oq-2CxFcENchyncdxgqjZjHO-5euAjiRjO8H5pDvB4VGmIIM_GMnUApOOJUPVBGUatdQQ61UBT5YOtCQ/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/AVvXsEiQ_q4iOnn_VqlLpQ5EINU137X2oEob5l4-2iiv7L5wDI_RNDIO_Yxwb-HiV9d8oq-2CxFcENchyncdxgqjZjHO-5euAjiRjO8H5pDvB4VGmIIM_GMnUApOOJUPVBGUatdQQ61UBT5YOtCQ/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><div class="mdbar"><h2 class='title'>Subscribe Now!</h2><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/Cobasanasini"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/Cobasanasini?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" width="88" /></a> </span>Learn Free Pro Tricks daily </div><div class="subicons"><div class="rssicon">&nbsp;<a rel="nofollow" href="http://feeds.feedburner.com/RiidhTekhnologi" target="_blank">  RSS</a></div><div class="googleicon">&nbsp;<a href="https://plus.google.com/u/0/107552825092159555338" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &nbsp;<a href="https://www.facebook.com/gierki1" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/fhiverz45" target="_blank" rel="nofollow">Twitter</a></div></div><div class="emailsub"><div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding:0; margin:0;">Receive Our All Updates  In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</p></div><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Cobasanasini', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="_deejayHan_" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form><span class="md-credit" style="font-family: Arial, Helvetica, sans-serif;"></span></div></div> </div>

Widet Subscribe.3

Di bawah ini adalah skrip dari tampilan dari Widget subscribe.3

<style type="text/css">

#subscribe-box {

      overflow: hidden;

      margin: 10px 0 0 0;

      }

#subscribe-box a.subscribe-sec {

      display: inline-block;

      display: -moz-inline-stack;

      width: 40px;

      padding-top: 38px;

      zoom: 1;

      }


#subscribe-box a.subscribe-sec:hover {

      color: #660000;

      }

</style>


<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value='';" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>


<p><div id="subscribe-box">

<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwrnr0oGKll25TC7gQncBBQR8DqxSWdaaVOxK1nCLHirJNIMV-2NYnylvTzZft68b4ehGaH5SFAWyrCKvAN1Z4rxiJvl3SufOPfdLCfyX23CItG0jbQgv9bQFIMAe1dm2b_zQ3Zd6-bRUy/s1600/delicious.png) center top no-repeat"></a>

<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFHZkvRDAUF497RXyckmxcEJ8O9NllPp7PEExuqq2mBrCh4s7PCXB28w5ut60_NVixUzZcXXUyjKo7arEuqd39Yc8A7ZJidZr9JqwV52N4AOOmTCubq48jyiE4kwf39GXg9zEkfmyIJUqp/s1600/twitter.png) center top no-repeat"></a>

<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_vJjR2kO8l2Ky3D1fKG14ljMxHpiA9VeXxzICw-6eTWrtKGF2gmU00UILcZuDajtgTMq3FgvEIwOkWgaq0hqwlA23qeBO5pFO6glX8XcoIix0O8l94Y2ySEL07WOQ3WeevCm8lpwUaNz/s1600/digg.png) center top no-repeat"></a>

<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXiRGKhlW22xSxJ0DqN-4Whl3bVxStA6ytAWgidnsfAloAecZ1P-cOmIiTJMNeExG3qSAsXg18rS-epYk3z8dXcWZwzKetBHT2InEXQX7sMuYE1RbA5g8RzDm4tAzufck0JU5EXBMA1Fx/s1600/facebook.png) center top no-repeat"></a>

<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrekaSJJOlw9yWgKSMZ4-vPZ5EHeVeHpTi-ZveMujEOqHV-_qvOrsjs5L5QbmAuGpZ4FGnEfw4jK7sn7mBK_q73J-hcjyn7Mzh4wsXo3VnWyob9_7F2XxVEbNTej-4p9zoYrcOCyHkSJBA/s1600/stumbleupon.png) center top no-repeat"></a>

<a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0WLUbiVUaaHDl3ZRb9qM01jBvrfxCPh22jAnV0TtIu97GGKCELeROzjB56qkRav-LzEOC8XXw_l8RdvLmhnJpkA4uoZC-1wL_cs-y2FEP6l8sluLBzfSHh6HXlkcYmu-R2OL05-Kpn9P/s1600/rss.png) center top no-repeat"></a>

</div></p>

Keterangan :

** Teks yang berwarna biru, silahkan kalian ganti dengan alamat URL kalian masing - masing, seperti Facebook, Twitter, Feedburner, dll.

Kalau misalkan ada yang ga fungsi tolong di comment ya...

Source :
- http://riidh-tekhnologi.blogspot.com/2012/10/cara-membuat-kotak-subscribe-yang-keren.html
- http://blogpemula-tutorial.blogspot.com/2012/05/membuat-berlangganan-subscribe-kotak.html