Cara Membuat Stylish Email Subscribtion Dengan Sosial Media Buttons

Cara Membuat Stylish Email Subscribtion Dengan Sosial Media Buttons - Hy sobat blogger, apa kabar? pada kesempatan kali ini saya akan berbagi sebuah widget keren untuk blog anda. Mungkin widget yang akan saya bagikan ini sudah banyak yang berbagi di blog tetangga, tapi saya telah membuat widget yang lebih menarik dengan tambahan tombol sosial media.

Cara Membuat Stylish Email Subscribtion Dengan Sosial Media Buttons, baiklah untuk lebih jelasnya anda dapat melihat demonya dibawah ini.

Note! Demo tidak mendukung silde effect transition, karna template yang saya gunakan tidak mendukung. Jika template anda lebih baik, maka slide sosial media lebih menarik! :) good luck..

live demo

Cara Membuat Stylish Email Subscribtion Dengan Sosial Media Buttons

1. Masuk ke Dashboard Blogger > Pilih Tata Letak

2. Tambahkan widget HTML/Javascript

3. Selanjutnya paste kode berikut dalam konten box tersebut

 <style> #nbl-social{float:left; background:#fff;margin:0 0 25px 0}
#nbl-social-profiles{float:left;margin:8px 0 0 0; padding-left: 20px;}#nbl-
social-profiles ul{list-style:none;float:left;margin:0 7px}#nbl-social-profiles ul li
{list-style-type: none;border:0 none;float:left;margin:0;padding:0}#nbl-social-profiles ul l
i a{display:block;float:left;height:32px;margin:0 10px 0;text-indent: -999em;width:32px}#nbl-social
-profiles a.social{background:url("http://4.bp.blogspot.com/-kiwGN-a19cA/VIB5ZhTSxcI/AAAAAAAADkw/nj7l3_bnokc/s1600/soc.png") no
-repeat scroll 0 0 transparent}#nbl-social-profiles a.facebook{background-position: -79px -0px;width:32px;height:32px;margin:0 
10px 0 0}#nbl-social-profiles a.facebook:hover{background-position: -79px -74px;width:32px;height:32px}#nbl-social-profiles a.tw
itter{background-position: -5px -111px;width:32px;height:32px}#nbl-social-profiles a.twitter:hover{background-position: -
42px -0px;width:32px;height:32px}#nbl-social-profiles a.youtube{background-position: -42px -37px;width:32px;height:32px;ma
rgin:0 0 0 10px}#nbl-social-profiles a.youtube:hover{background-position: -5px -37px;width:32px;height:32px}#nbl-social-pro
files a.rss{background-position: -42px -74px;width:32px;height:32px}#nbl-social-profiles a.rss:hover{background-position: -7
9px -37px;width:32px;height:32px}#nbl-social-profiles a.googleplus{background-position: -5px -0px;width:32px;height:32px}#n
bl-social-profiles a.googleplus:hover{background-position: -5px -74px;width:32px;height:32px}.optin-text{margin-left:
 15px; color: #000;float:left;font-size:13px;line-height:22px;margin:10px 0;margin-top: 10px;padding:0 8px}#optin-sid
 ebar{background:#fff;padding:0 0 10px 0;text-align:center}#optin-sidebar h4{font-weight:bold;margin:10px 0 2
 0px}#optin-sidebar input[type="text"]{background:#fff;border:1px solid #AAA;font-size:13px;margin:0 0 10p
 x 0;height: 25px;padding:5px;width:85%;color:#555}#optin-sidebar input{box-shadow:0 2px 2px #AAA;-moz-box-shadow
 :0 2px 2px #AAA;-webkit-box-shadow:0 2px 2px #AAA}#optin-sidebar input.email{}#optin-sidebar input[type="submit"]{backgrou
 nd:url("http://3.bp.blogspot.com/-5wcFZIZJkN0/VIB5Zjgby-I/AAAAAAAADko/3FYE_NnvoPQ/s1600/Red.png") repeat scroll 0 0 trans
 parent;color:#FFF;cursor:pointer;font-family:arial;font-size:16px;font-weight:bold;height:40px;margin-top:5px;padding:8px
 0;text-transform:capitalize;width:88%;border:0}#optin-sidebar input[type="submit"]:hover{background:none repeat scroll 0 
 0 #333} #optin-single{background:none repeat scroll 0 0 #F7F7F7;border-bottom: 1px solid #DDD;float:left;padding:15px 0;
 margin:15px 0;text-align:center;width:100%}#optin-single p{float:left;margin:0 10px 0 18px;padding:5px 0 0}#optin-singl
 e input[type="text"]{background:#fff;border:1px solid #AAA;font-size:13px;margin:0;padding:2px;width:30%;color:#555;flo
 at:left}#optin-single input{box-shadow:0 2px 2px #AAA;-moz-box-shadow:0 2px 2px #AAA;-webkit-box-shadow:0 2px 2px
 #AAA}#optin-single input.email{background:#FFF}#optin-single input[type="submit"]{background:u
 rl("http://2.bp.blogspot.com/-OB93q7XRC90/VIB5ZFWhkvI/AAAAAAAADkk/sboB95B9BfI/s1600/NBL.png") repeat sc
 roll 0 0 transparent;color:#FFF;cursor:pointer;font-family:arial;font-size:16px;font-weight:bold;height:3
 7px;padding:5px;text-transform:capitalize;border:0;float:left;margin-left:10px}#optin-single input[type="submi
 t"]:hover{background:none repeat scroll 0 0 #333}</style> <div id="nbl-social">   <div id="nbl-social-profiles">     
 <ul>       <li>         <a class="social facebook" href="https://www.facebook.com/SemuaTutorialku" title="Facebook FanPage" 
 target="_blank" rel="nofollow">           Facebook         </a>       </li>       <li>         <a class="social twitter"
 href="https://twitter.com/SemuaTutorialku" title="Twitter Profile" target="_blank" rel="nofollow">           Twitter    
 </a>       </li>       <li>         <a class="social googleplus" href="https://plus.google.com/+SemuaTutorialku" 
 title="GooglePlus" target="_blank" rel="nofollow">           GooglePlus         </a>       </li>       <li>       
 <a class="social rss" href="http://feeds.feedburner.com/SemuaTutorialku" title="RSS" target="_blank" rel="nofollow"> 
 Rss         </a>       </li>       <li>         <a class="social youtube" href="http://www.youtube.com/user/SemuaTutorialku"
 title="YouTube Channel" target="_blank" rel="nofollow">           Youtube         </a>       </li>     </ul>   </div></div>
 <div class="optin-text"><strong>    Get Latest Updates In your Inbox</strong>   </div>   <div id="optin-sidebar">     
 <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SemuaTutorialku', 'popupwindow', 
 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post"
 action="http://feedburner.google.com/fb/a/mailverify">             <input name="uri" 
 value="SemuaTutorialku" type="hidden" />       <input value="en_US" name="loc" type="hidden" />    
 <input id="email" class="email" name="email" onfocus="this.value=&#39;&#39;" value="Your Email Address" 
 placeholder="Your Email Address" type="text" /> 
<input value="Get Started Here!" id="submit" name="submit" type="submit" />     </form>   </div>
 

4. Selanjutnya simpan widget
5. Selesai

Kustom:
Ganti ID SemuaTutorialku dengan ID masing-masing sosial media miliki anda.

Semoga bermanfaat..