Cara membuat email subcribe animasi v.1

Postingan saya kali ini menjelaskan bagaimana . Cara membuat email subcribe animasi di blog kesayangan anda. Tujuan saya membagi script ini agar sobat sobat bloger yang masih konsisten dalam mendesign blog lebih kreativ dalam menangani pendesaian blognya. Saya merasa keterangan dan script ini dapat membantu anda dalam mewujudkan misi anda untuk mempercantik blog anda. Pembuatan script Subcribe & Social ini memakan waktu dua hari, tapi pribadi saya menganggap ini adalah suatu pembelajaran yang berguna buat saya agar dapat menilai ataupun menghargai para karya karya yang telah susah payah untuk diciptakan. Script Subcribe & Social ini tergolong ringan lodingnya. Oke tanpa basa basi panjang lebar lagi silahkan anda simak keterangan script dan lihat demo dibawah ini.

Referensi Artikel

• Widget subscribe bubble blue
• Widget subscribe minimalis
• Flying navigasi with subscribe
• cara membuat widget subscribe blog
• cara membuat widget subscribe v4
• Widget subscribe V5
• cara membuat widget subscribe v3
• cara membuat widget subscribe v2
• cara membuat widget subscribe v1

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda kemudian save, saatnya anda beralih ke "TATA LETAK " pada dashboard anda untuk memasang kode htmlnya.

/*****************************************
Name : Subscribe ANIMASI
By : Rivai Silaban | Blog Design
Update : 09 mei 2013
******************************************/
#RS_box{ background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrujzNrsbQ3OlZMFcV9OyRUNSIHZG6pIKkRMBFSJNCCrEnaktBbmbh_2kUfnE8hPjl0fNSNySLG_7NlrSUC9Yxk148n39hrq_dVLgngMCXtpAajNf-Jpb_kzZ3Gkl_ACHeAFVvU3BNXQ/s1600/bg-red-1.png) repeat-x;
width:280px;
border:1px solid rgb(9, 149, 223);
border-radius:3px;
padding:3px 0;
border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #A21009;

}
.RS_blog{
color:#111;
font-size:14px;
line-height:20px;
padding:1px 20px 10px;
text-align:center;
text-transform:uppercase;
}
.email_box{-moz-border-radius:4px;-webkit-border-radius:4px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9rxCv3fq-9EesYRqrxKGesgJunMzZ4qSTN2Bs9rLHPYuUmin9suOYLY0LY-HD5tzXkVMKUVhqnmNs1XirpQTRv-SYxla9AnmBj8Pra90J1Mor6AjE_Ma38Z2KadBaQmjkXeuXkpetbtQ/s1600/bg-red-2.png) repeat-x;
border:1px solid #990000;
border-radius:4px;
color:#333333;
margin:0 0 5px;
padding:10px 1px;
width:90%;
}
.buttonrs_email{
background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-weight:700;
padding:10px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100%;
background-color: #940A0A;
border-color: #FF0000;
}
.buttonrs_email:hover,.buttonrs_email:focus{
background-color: #CC0000;
color: #000000;
}
a.RS-image{margin-right: 1px;height:45px;width:45px; border: 2px solid rgb(209, 22, 22);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112); }
a.RS-image:hover { opacity: .3; }
.RS_form{clear:both;display:block;margin:10px 0}
.buttonrs_email:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px; background-color:#3E0600;}

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<!-- Rivai Silaban | BLOG DESIGN Subscribe box start -->
<div id="RS_box">
<div class="RS_blog"><br/>
<a href="https://www.facebook.com/rivaisilaban" target="_blank" class="RS-image" title="Add facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43AXioQJP0asO7vR3JKfpFK8VQQOBOmQXaLzVUEEtiuNu02QuclJuDXhOU_-uoxR6_SXmVJLX0-Z5_HC0kofvXLqaXgQCzoHi7OO8XHAV7HgaxiW-3ePsqK5viNa57r8tD0N7UN6JHMA/s1600/FB-1.png" /></a>
<a href="https://twitter.com/Rivai_Silaban" target="_blank" class="RS-image" title="Follow twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRG_EfRJDH1sSuOAqKCow8-w2rtC4C52MxsaF8LzEVqpKlRgpmH2pQA8v05rdpY3kgIctbovNGvD7LRwsqRxCRfjwXhWe0qOcHToV2f0tv5tQtn02vMdyxUDSoM4AH55Sg1MESmI1xbeg/s1600/T-1.png" /></a>
<a href="https://plus.google.com/108560124605502700357" target="_blank" class="RS-image" title="Invite google plouse"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCd7BwzfkSRnuIuawSA_Ld98pmSdL_BPquhPl-CN_t3tfrXY9HOmOnLXaRtENYZAhbmSmnkMHm9_vjr-iYw1hfD2lDQSMr_OMvbn1WGJWkK3lA8pOsg25gfDow5pd1eSjScnPWS7lZX4/s1600/G-1.png" /></a>
<a href="https://www.youtube.com/channel/UCxLE683fC-YfQnRRWaPtWjQ" target="_blank" class="RS-image" title="Se you tube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QVkS2fJNMbApGf0RWp-xtF0DR3Ay6mx4He7FCluij9WwQRtnVTdBt2oLTE3l6zJek343Rr-UcvEaPrgXs6jF5dHsgsDBZqdXuTC-vlOmnrgD1T03xnlRDPsyLlfgD3tm_tnMOtaRodw/s1600/Y-2.png" /></a><div style="margin:-55px 2px 0px -20px; float:left; "> <a href="http://feeds.feedburner.com/RivaiSilaban " target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRtaB53-mB_9KxDOA6t8QmniGixZE28rDLP3RnX34V-upP9ZOoOZ90RHDOBngTL8E0VN_Tgz45SvLH0xoqMI9s-4xtwkViQOK7ysL1Xq0_qMLbUUscuKQfo7eU5p8mzP0K3q9JKaA7C4/s1600/RSS2.gif" title="RSS" width="180" height="180" border="0" style="margin-top:-20px;"/></a></div>
<p style="float:right; margin:-90px -10px -20px 2px; font-family:Geneva, Arial, Helvetica, sans-serif; color:#000000; text-transform:none; text-align: right; z-index: inherit;" >
Berlangganan Artikel saya via Email<br/>
dapatkan artikel terbaru langsung dari<br/>
<b>[&nbsp;&nbsp; <a href="http://rivai-silaban.blogspot.com/" title="Rivai Blog" target="_blank">BLOG DESIGN </a> &nbsp;&nbsp;]</b> <br/>
Geratis hanya untuk anda !!
</p>
<div class="RS_form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER" class="RS_form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="ID FEEDBURNER" />
<input name="loc" type="hidden" value="en_US" /><input class="email_box" name="email" placeholder="Daftarkan email anda disini !"/>
<input class="buttonrs_email" title="" type="submit" value="++ Subscribe Now ++ " /></form></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN Subscribe box End -->

Keterangan Code

• Untuk tulisan warna HIJAU adalah text widget
• Tulisan kode warna MERAH ganti dengan link feedburner sosial media anda
  

Kesimpulan

Widget subscribe dan social media yang mempunyai tampilan animasi dan memiliki tampilan yang menarik .

Bila anda mengalami kesulitan dalam pemasangan widget ini atau barangkali ada kode yang error silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Widget subscribe bubble blue
09 Mei 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:31 PM