Membuat Kotak Berlangganan/Subscribe Keren di BLog

Pada Postingan Sebelumnya saya telah share bagaimana Cara Membuat Daftar Isi Keren di Blog, nah, pada kesempatan ini, saya akan share tentang Cara Membuat Kotak Berlangganan/Subscribe Keren di Blog. Contoh Kotaknya seperti yang ada pada Blog ini. Fungsi dari Kotak berlangganan adalah untuk pembaca blog anda yang ingin mendapatkan info terbaru atau postingan terbaru anda secara berlangganan melalui email. Langsung saja deh, buat sobat Free Download dan Tutorial yang ingin mempunyai Kotak berlangganan seprti yang ada di blog saya, berikut langkah-langkahnya.

Cara Membuat Kotak Berlangganan/Subscribe Keren di Blog :

1. Login ke akun Blogger anda
2. Klik Tata Letak > Tambah Gadget Pilih HTML/Javascript
3. Copy dan Paste Kode Script dibawah ini.
   

   <style>.latesthackbar{width:300px;float:left;}.mbt1 {text-align: right;font-size: 10px;}.latesthacks h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZuOp8NR4Z3fGuYvH7AgAw0_lWOFFAZJ8AUdC8ipfiw1FL352xsilUGYKZ0ZWNX-dizIA5n7uU63oShjGjglVAXbE7we4i_Bt8Hz6zWWp2sAdBtTWwxh1pKZw0evA9KESmyWRobBe2Jo/s1600/latesthackSUBSCRIBE.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;} ul.social {    list-style: none;    overflow: hidden;}.social li {    float: left;    background: none !important;    padding: 0 !important;    margin: 0 8px;}.social li a {    display: block;    width: 50px;    height: 40px;    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcR3deR19AH1usAahPfAU8a-2qddyz1fhypThSMYdAun137mMYIsgmWL7ggpRMWZagWZdWNyNLouh01mgJTraiEW51lob8SNhRBtg8Zs9draRgsX6c-XGh0x56jAm2YclX8mus0eIXRo/s1600/social.png") no-repeat transparent;    text-indent: -99999em !important;-webkit-transition: ease-in 0.15s all;    -moz-transition: ease-in 0.15s all;    -o-transition: ease-in 0.15s all;    -ms-transition: ease-in 0.15s all;    transition: ease-in 0.15s all;}.social li a:hover {    padding: 0 !important;}.social li.rssicon a {    background-position: 0 0;border-right: 1px solid #e6e6e6;}.social li.twicon a {    background-position: -50px 0;border-right: 1px solid #e6e6e6;}.social li.fbicon a {    background-position: -100px 0;border-right: 1px solid #e6e6e6;}.social li.gicon a {    background-position: -150px 0;}.social li.rssicon a:hover {    background-position: 0 -50px;border-right: 1px solid #e6e6e6;}.social li.twicon a:hover {    background-position: -50px -50px;border-right: 1px solid #e6e6e6;}.social li.fbicon a:hover {    background-position: -100px -50px;border-right: 1px solid #e6e6e6;}.social li.gicon a:hover {    background-position: -150px -50px;}.latesthacks{width: 300px; float: left;}.latesthacks .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;}    .latesthacks .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;}    .latesthacks .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}    .latesthacks .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}    .latesthacks .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAheLSeZHwROSCUgN9QkqE1os2FpMqf3Tkfv8pt_SrMuyaIHbxcTY6pX2YrXzS7esVhFQrmA3TduOdW-dcUSP9pdT-c_5YYQxscpUnwzxiVBmvB6DrKw5_ye78ARlAelmPhTygpP_SpTI/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }.emailbutton{background:#f7f8f9;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;}.emailbutton:hover{background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important;}.email{clear:both;width:100%;margin:10px 0;}.emailform{position:relative;width:300px;margin:0 auto;}.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-family:georgia;font-style:italic;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;font-size:14px;color:#666;}.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:0;display:block;line-height:16px;}.emailbutton{padding:8px !important;}.emailform, .emailinput{width:98% !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto;}</style><div class="latesthackbar"><div class="latesthacks"><h2 class='title'>Subscribe Now!</h2><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/BlogOfRudy"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/BlogOfRudy?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" width="88" /></a></span>  Learn Pro Tricks daily </div><div class="subicons"><ul class="social"><li class="rssicon"><a href="http://feeds.feedburner.com/BlogOfRudy" rel="nofollow" target="_blank">Rss</a></li><li class="twicon"><a href="http://twitter.com/@RudiHartoyo" rel="nofollow" target="_blank">Twitter</a></li><li class="fbicon"><a href="http://facebook.com/rudihartoyo91" rel="nofollow" target="_blank">FaceBook</a></li><li class="gicon"><a href="https://plus.google.com/110015152091049984697" rel="nofollow" target="_blank">Google +</a></li></ul></div> <div class="emailsub"> <div class="emailicon"><p style=" width:240px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding:0; margin:0;">Receive Updates In Your Inbox by submitting your Email ID below.</p></div>     <div class="email"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogOfRudy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"> <input type="hidden" value="BlogOfRudy" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <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="emailinput" /> <input type="submit" class="emailbutton" value="SignUp" title='' /></form></div></div></div><div class="mbt1"></div></div>

4. Keterangan :
• Warna Merah, ganti dengan akun Feedburner Anda
• Warna Orange, ganti dengan akun Twitter Anda
• Warna Hijau, ganti dengan akun Facebook anda
• Warna Biru, Ganti dengan akun Google Plus (g+) anda
5. Setelah semua selesai, Klik Simpan dan lihat hasilnya si blog anda.

Sekian Tutorial tentang Cara Membuat Kotak Berlangganan/Subscribe Keren di BLog, Semoga Bermanfaat.

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post