Kumpulan Macam-macam Widget Subscribe Email Keren untuk Blog

Widget Email Subscribe adalah widget yang digunakan untuk mengetahui update artikel dari suatu blog. Setiap kali blog yang anda ikuti memposting artikel baru maka secara otomatis anda akan mendapatkan pemberitahuan melalui email yang anda daftarkan.

Untuk pemilik blog, jika anda ingin memasang widget Subscribe email ini. Anda harus daftar di RSS FeedBurner secara gratis. Untuk cara daftarnya anda bisa mencarinya di google, setelah anda berhasil mendaftar, anda tinggal memasukan atau mengganti tulisan "ID FeedBurner Anda" dengan id milik anda kedalam kode yang akan saya berikan dibawah ini.

Sekarang anda tinggal mengikuti langkah-langkahnya :

Pertama anda masuk dulu ke blogger.com
Lalu pilih Template
Kemudian pilih Edit HTML
Cari kode ]]></b:skin> atau </style> tekan CTrl + F untuk memudahkan Lalu letakan kode berikut ini diatas kode ]]></b:skin> atau </style>

*Jika anda menemukan kode diatas di dalam blog anda, maka lewati langkahnya*

Dibawah ini ada beberapa kode CSS dan HTML, Silahkan anda Pilih salah satu sesuai dengan selera anda, untuk kode CSS diletakan diatas kode ]]></b:skin> atau </style>
Untuk meletakan kode HTML nya anda harus pilih Tata Letak >> Tambahkan Gadget >> HTML/Javascript, lalu pastekan salah satu kode HTML dibawah ini :

Kode CSS

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans&# 39;,sans-serif;} .widget_follow_subscribe .widget-detail{padding:36px 30px 40px} #subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700} .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px} .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center} .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none} .follow-subscribe-social ul li:last-child{margin:0} .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out} .follow-subscribe-social ul li a:hover{color:#fff} form.subscribe{margin-top:-7px} form.subscribe input{display:block;width:100%} .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff} .subscribe-email:focus{outline:0} form.subscribe .placeholder{color:#cacaca} form.subscribe input:-ms-input-placeholder{color:#cacaca} form.subscribe input::-webkit-input-placeholder{color:#cacaca} form.subscribe input:-moz-placeholder{color:#fafafa} form.subscribe input::-moz-placeholder{color:#fafafa} .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out} .subscribe-button:hover{background-color:#f1d640} .subscribe-button:focus{outline:0} .credit a{color: #A7A6A6; float: right; font-size: 8px;}

Kode HTML

<div id="subscribebox"> <div class="follow-subscribe-social"> <ul> <li><a href="Url Facebook Anda" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="Url Twitter Anda" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="Url Linkedin Anda" target="_blank"><i class="fa fa-linkedin"></i></a></li> <li><a href="Url Google Plus Anda" target="_blank"><i class="fa fa-google"></i></a></li> <li><a href="Url Pinterest Anda" target="_blank"><i class="fa fa-pinterest-p"></i></a></li> <li><a href="Url Dribbble Anda" target="_blank"><i class="fa fa-dribbble"></i></a></li> <li><a href="Url Instagram Anda" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <p>Subscribe to my Newsletter</p> <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='Url FeedBurner Anda'/> <input name='loc' type='hidden' value='en_US'/> <input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Email Anda'/> <input class="subscribe-button" type="submit" value="Subscribe" /> </form> </div> <div class="credit"> <a href="http://kotakwidget.blogspot.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

Kode CSS

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;} #subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;} #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;} #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} .credit a{color: #A7A6A6; float: right; font-size: 8px

Kode HTML

<div id="subscribe-box"> <center> Subscribe for our all latest news and updates</center> <div class="emailfield"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=ID FeedBurner Anda" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FeedBurner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" /> <input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" /> <input name="uri" type="hidden" value="Your Email" /> <input name="loc" type="hidden" value="en_US" /> <input class="submitbutton" type="submit" value="Subscribe Now" /> </form> </div> </div> <div class="credit"> <a href="http://kotakwidget.blogspot.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>

Kode CSS

#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9; background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbeVzdmGQmctnfR4Mfv-xJgkdLWvB4tC5UZ_wqMEhXNGQ-HjnLeoDa2J2qb2pabQWXSpvBqc6n0qsG9jxXz2cZPfzL2zXLpHrwdAyVrhwz9ZicjM0K2Z0Crw2VNYi7MjGZLhkcPgTLRgqP/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRezzFJ6AlpZBMqJpgC6IyDi9SpqEAQAwrJBBIaruGt4M-LFYLqFucgSjinvHjnSmu3hd6U2qbZF_oOMPLLCEnBiRBXFmtKg6Zs5tWhAKmQvSsCuUSq4s4XmwIBBIrTl-ZdyL7Ygl8ahe/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiXT3x_zNmpqULjHZJrh_fZtlm94yTuI39wmHetYrUhdYRzjm2QvrdmuULPVMD8RDjObSR2jKGysG_lA1YzlDZ0x5IC7B_APeUMMaSAG35Kr9O_60Jz3vbsBRgWZqe0gP5IvVa89eWwxHA/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}

kode HTML

<center> <div align="center" id="truebloggertricks-Subscribe-wrapper"> <div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;"> <h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;"> GET FREE EMAIL UPDATES</h3> <div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;"> Join us for free and get valuable content delivered right through your inbox.</div> <br /> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br /> <input class="email" id="truebloggertricks_Subscriber_email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="Url FeedBurner" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form> </div> </div> </center> </div>

Kode CSS

body { background: #e6ed3; margin: 0 auto 0; color: #444; font-family: 'PT Sans', arial, sans-serif; font-size: 13px; font-weight: 400; text-align: center; } #subscribebox { background:#576269; padding:20px; font-family: 'PT Sans', sans-serif; width:450px;} .widget_follow_subscribe .widget-detail { padding: 36px 30px 40px 30px;} #subscribebox p { color: white; font-size: 15px; text-align: center; font-weight: 700; } .follow-subscribe-social { margin: 0 0 15px; padding: 0 0 14px; border-bottom: #858585 solid 1px; } .follow-subscribe-social ul { list-style: none; margin: 0; padding: 0; text-align: center; } .follow-subscribe-social ul li { display: inline; margin: 0 25px 0 0; border-bottom: none; } .follow-subscribe-social ul li:last-child { margin: 0; } .follow-subscribe-social ul li a { font-size: 17px; color: #cacaca; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .follow-subscribe-social ul li a:hover { color: #fff; } form.subscribe { margin-top: -7px; } form.subscribe input { display: block; width: 100%; } .subscribe-email { height: 45px; border: none; margin: 0 0 10px; font-family:Poppins; font-size: 0.928571em; background-color: rgba(255,255,255,0.8); text-align: center; color:#666666; } .subscribe-email:focus { outline: 0; } /* ===== Placeholder color ===== */ form.subscribe .placeholder { /* Internet Explorer 9 */ color: #cacaca; } form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #cacaca; } form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */ color: #cacaca; } form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fafafa; } form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fafafa; } .subscribe-button { height: 45px; font-weight: 700; font-family:'Poppins; font-size:16px; color: #fff; text-transform: uppercase; border: none; background-color:#0CC388; -webkit-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; } .subscribe-button:hover { background-color: #f1d640; } .subscribe-button:focus { outline: 0; } .post-subscribe{text-align:center;font-family:Dancing Script;font-size:33px;color:#fff;margin: 5px;}

Kode HTML

<center> <div id="subscribebox"> <div class="follow-subscribe-social"> <ul> <li><a href="Url Facebook Anda" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="Url Twitter Anda" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="Url Linkedin Anda" target="_blank"><i class="fa fa-linkedin"></i></a></li> <li><a href="Url Google Plus Anda" target="_blank"><i class="fa fa-google"></i></a></li> <li><a href="Url Pinterest Anda" target="_blank"><i class="fa fa-pinterest-p"></i></a></li> <li><a href="Url Dribbble Anda" target="_blank"><i class="fa fa-dribbble"></i></a></li> <li><a href="Url Instagram Anda" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div class='post-subscribe'>Subscribe to my Newsletter</div> <form class="subscribe" action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name='uri' type='hidden' value='Url FeedBurner Anda'/> <input name='loc' type='hidden' value='en_US'/> <input class="subscribe-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email Address" /> <input class="subscribe-button" type="submit" value="Subscribe" /> </form> </div> </center>

Kode CSS

body { background: #e6ed3; margin: 0 auto 0; color: #444; font-family: 'PT Sans', arial, sans-serif; font-size: 13px; font-weight: 400; text-align: center; } #subscribe-box { width:450px; background-color:#0CC388; font-family: 'PT Sans', sans-serif; margin-top:20px } #subscribe-box p { font-size:22px; color:#fff; line-height:20px; padding:10px 20px 0 20px; margin:0; } #subscribe-box .emailfield { padding:0px 20px 10px; } #subscribe-box .emailfield input{ background:#f9f9f9; color:#bbb; padding:10px; margin-top:10px; font-size:13px; width:95%; border:0; transition:all 0.4s ease-in-out; } #subscribe-box .emailfield input:focus { background:#fff; outline:none; color:#888; } #subscribe-box .emailfield .submitbutton { background:#444; color:#fff; text-transform:uppercase; font-weight:700; font-size:18px; font-family: 'PT Sans', sans-serif; border:none; outline:none; width:100%; cursor:pointer; border-radius:3px; transition:all 0.4s ease-in-out; } #subscribe-box .emailfield .submitbutton:active { outline:none; border:none; background:#fff; color:#e25734; } #subscribe-box .emailfield .submitbutton:hover{ background:#ff0000; color:#fff; } .post-subscribe{ text-align:center; font-family:Dancing Script; font-size:27px; color:#fff; margin: 5px; } .sub-post{ text-align:center; font-family:Poppins; font-size:12px; color:#fff; margin: 5px; } .name-email { border: none; font-family:Poppins; background-color: rgba(255,255,255,0.8); color:#666666; } .name-email:focus { outline: 0; }

Kode HTML

<center> <div id='subscribe-box'> <center><br /><div class='post-subscribe'>Subscribe</div><div class='sub-post'>for our all latest news and updates</div></center> <div class='emailfield'> <form action='https://feedburner.google.com/fb/a/mailverify' action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'> <input class="name-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Name'/> <input class="name-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Email Address'/> <input name='uri' type='hidden' value='Url FeedBurner Anda'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now'/> </form><br /> </div></div> <br /><br />

Kode CSS

#wp-subscribe { width:300px; padding: 26px; background: #f47555; } #wp-subscribe h4.title {font-family:Handlee; font-size: 22px; color: #FFFFFF; line-height: 1; text-align: center; text-transform: uppercase; margin-bottom: 0; } #wp-subscribe h4.title span { display: inline-block; font-weight: bold; font-size: 38px; margin-top: 15px; } #wp-subscribe p { color: #FFFFFF; margin: 0; text-align: center; } #wp-subscribe p.text { font-family:Poppins;font-size:13px;margin: 5px 0; opacity: 0.8; } #wp-subscribe input { border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height: 45px; } #wp-subscribe .email-field { margin-top: 10px } #wp-subscribe input.email-field, #wp-subscribe input.name-field { color: #FFFFFF; background: #d56144; } #wp-subscribe input::-webkit-input-placeholder { color: inherit; opacity: 0.8; } #wp-subscribe input:-moz-input-placeholder { color: inherit; opacity: 0.8; } #wp-subscribe input::-moz-input-placeholder { color: inherit; opacity: 0.8; } #wp-subscribe input::-ms-input-placeholder { color: inherit; opacity: 0.8; } #wp-subscribe input:focus::-webkit-input-placeholder { color: transparent !important } #wp-subscribe input:focus::-moz-input-placeholder { color: transparent !important } #wp-subscribe input:focus:-moz-input-placeholder { color: transparent !important } #wp-subscribe input:focus::input-placeholder { color: transparent !important } #wp-subscribe input.submit { background: #FFFFFF; color: #f47555; margin-top: 20px; font-size: 18px; text-transform: uppercase; font-weight: 500; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); cursor: pointer; } #wp-subscribe p.footer-text { margin-top: 10px; font-family:Poppins;font-size: 9px; } .your-email { border: none; font-family:Poppins; background-color: rgba(255,255,255,0.4); color:#aca9a8; } .submitbutton { background:#fff; color:#f47555; text-transform:uppercase; font-weight:700; font-size:18px; font-family: 'PT Sans', sans-serif; border:none; outline:none; width:100%; cursor:pointer; border-radius:3px; transition:all 0.4s ease-in-out; } .submitbutton:active { outline:none; border:none; background:#fff; color:#e25734; } .submitbutton:hover{ background:#d23f1a; color:#fff; }

Kode HTML

<center><br /> <div class="wp-subscribe" id="wp-subscribe"> <h4 class="title">Get more stuff like this<br/> <span>in your inbox</span></h4><br /> <p class="text">Subscribe to our mailing list and get interesting stuff and updates to your email inbox.</p><br /> <div class='emailfield'><form action='https://feedburner.google.com/fb/a/mailverify' action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'> <input class="your-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Email Address'/><br /><br /> <input name='uri' type='hidden' value='Url FeedBurner Anda'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Sign Up Now'/> </form> <div class="clear"></div> <p class="footer-text">we respect your privacy and take protecting it seriously</p></div></center>

Kode CSS

/* Subscribe Email */ #subscribe-box {width:auto;height:auto;background-color:#fff;} #subscribe-box p {font-family:'Open Sans';font-size:13px;color:#333;line-height:20px;padding:10px 20px 0 20px;margin:0;text-align:center;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background:#f5f5f5;color:#aaa;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans';width:91%;border:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0);transition:all 0.4s ease-out;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;border:none;color:#444;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);} #subscribe-box .emailfield .submitbutton {background:#aaa;color:#fff!important;text-transform:uppercase;font-weight:bold;outline:none;width:99%;cursor:pointer;border-radius:3px;border:none;transition:all 0.4s ease-out;} #subscribe-box .emailfield .submitbutton:hover, #subscribe-box .emailfield .submitbutton:active {background:#888;outline:none;color:#fff;} #subscribe-css {margin:0;padding:0;float:right;display:block;position:relative;} .subscribe-wrapper {background:#444;width:260px;height:200px;color:#fff;font-size:14px;font-family:'Open Sans';line-height:20px;padding:40px 20px 10px 20px;text-align:center;border-radius:3px;} .subscribe-wrapper p {margin:0;margin-bottom:30px;} .subscribe-form {clear:both;display:block;margin:10px 0;overflow:hidden;} form.subscribe-form {clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden;} .subscribe-css-email-field {background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZGlST0dCnFrlilfK40VSJk4qrQHcgN3vnrecY-ACk0TjeI5y1eHx7zdCbu0NYCx8lGWBho-eSMI-p3olD7IY6kNTE2mcZ81fZyUwER61WUdnYkMUkrq6SEgA-J0Ij_astx1GE-H6UzrnM/s1600/sprites.png) no-repeat 1px -27px;color:#fff;margin:0 0 15px;padding:12px 40px;width:100%;border:none;} .subscribe-css-email-button {background:#FF8830;color:#fff;cursor:pointer;font-weight:700; padding:10px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .5s ease-in;border-radius:3px;transition:all 0.3s ease-out;} .subscribe-css-email-button:hover {background:#FF7A35;color:#fff;}

Kode HTML

<div id='subscribe-css'> <div class='subscribe-wrapper'> <p>Sign up here with your email</p> <div class='subscribe-form'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='Url FeedBurner Anda'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address' title='Enter your email address'/><input class='subscribe-css-email-button' title='Subscribe Now' type='submit' value='Subscribe Now'/></form> </div> </div> </div>

Kode HTML

Kode HTML

Kode HTML

Kode HTML

.hbzemailform { margin: 120px auto 5px; width: 215px; } #hbzemailbox { background: #FEFEFE none repeat scroll 0% 0%; border: medium none; font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif; margin-right: 5px; box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186); padding: 7px; box-sizing: content-box; height: 12px; vertical-align: top; display: inline-block; } #hbzemailbutton { background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%; box-shadow: 0px 0px 2px rgb(182, 37, 32) inset; border: medium none; color: #FFF; cursor: pointer; font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif; padding: 6px; border-radius: 5px; height: 27px; display: inline-block; } #hbzemailbutton:hover { background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%; } .hbzsocial-icons { margin: 20px 0 0; overflow: hidden; display: block; text-align: center; } .hbzsocial-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; padding: 0px } .hbzsocial-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; } .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHW6RhC6Gn3ECgKj_kT5sG7frrW2kfvLfwECQnrxaG47NoxJvDounBCUuNW_mW_aV-DxPudtPwHah4c14BQYoOMEY4yPRltt6t1IUycR5Ye_hWTR2poJGmbU50tu8fG7R4E2GlDVTjG7kF/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; } .hbzsocial-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; } .hbzsocial-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; } .hbzsocial-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; } .hbzsocial-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; } .hbzsocial-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; } .hbzsocial-icons ul li a:hover { background-color: #333; } .hbzsocial-like { display: block; text-align: center; } .hbzsocial-like tbody, .hbzsocial-like tbody tr { display: block; } .hbzfb-likes { display: inline-block; padding-bottom: 15px; margin-right: 5px; } .hbztw-follow { display: inline } </style> <div> <div class='hbzsignup-form'> <div class='hbzform-inner'> <p>Sign Up for Email Updates</p> </div> <div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Url FeedBurner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='Url FeedBurner Anda'/> <input name='loc' type='hidden' value='en_US'/> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/> <input id='hbzemailbutton' title='' type='submit' value='Sign up'/> </form> </div> </div> <div class="hbzsocial-icons"> <ul> <li class="social-facebook"><a href="Url Facebook Anda" target="_blank" title="Facebook">Facebook</a></li> <li class="social-twitter"><a href="Url Twitter Anda" target="_blank" title="Twitter">Twitter</a></li> <li class="social-gplus"><a href="Url Google Plus Anda" target="_blank" title="Google+">Google+</a></li> <li class="social-pinterest"><a href="Url Pinterest Anda" target="_blank" title="Pinterest">Pinterest</a></li> <li class="social-rss"><a href="Url RSS Anda" target="_blank" title="RSS">RSS</a></li> </ul> </div> <table class='hbzsocial-like'> <tbody> <tr> <td class='hbzfb-likes'> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="Url Facebook Anda" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"> </div> </td> <td class='hbztw-follow'> <a href="Url Twitter Anda" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @ID Twitter Anda</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </td> </tr> <tbody> </table> </div>

Keterangan : Semua Tulisan yang saya beri warna "MERAH", Anda ganti dengan ID atau Url Millik anda.

Silahkan anda pilih sesuai dengan niche blog anda, semua widget diatas saya kumpulkan dari berbagai sumber.
Jangan lupa cek juga widget-widget lainnya, siapa tahu widget yang anda cari-cari ada disini.

Sekian dari saya, mohon maaf bila ada kekurangan.

"Salam Satu Widget"

weblogpedia

Kumpulan Macam-macam Widget Subscribe Email Keren untuk Blog

Topik Hidayat 5:39 PM - Add Comment

Label:

Kumpulan Macam-macam Widget Subscribe Email Keren untuk Blog

Topik Hidayat 5:39 PM - Add Comment

Label:

Share this