Cara Memasang Widget berlangganan Email di Blogger




Cara Memasang Widget berlangganan Email di Blogger
Cara Memasang Widget Berlangganan Email di Blogger
 
Selamat pagi bro,  kembali lagi saya untuk berbagi artikel mengenai tentang cara pasang widget berlangganan email di blogger, tentu jika di blog anda blum belum mempunyai wiget berlangganan silah kan anda mengikuti cara memasang nya.
Mengenai fungsi dari langganan email pasti anda sudah pada tau kan..jadi saya rasa tidak harus untuk menjelaskannya lagi..
Jadi jika anda tertarik dengan tampilan widget seperti contoh di bawah ini anda bisa mengikuti step by stepnya bro. Yuk langsung saja menuju ke TKP.

# Terdapat Dua cara untuk membuat Widget Berlangganan

Cara Memasang Widget berlangganan Email di Blogger


  1. Pertama , pastikan sobat udah masuk di dasbhor sobat sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode ]]></b:skin> dengan cara mudah anda tekan CTRL + F untuk pencarian
  4. Salin dan tempel kan kode di bawah ini di atas kode merah
    <style> #sidebar-subscribe-box{width:270px;border:1px solid #aaa;border-radius:3px;padding:3px 0} .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase} .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto} .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%} .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;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%} .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff} .sidebar-subscribe-box-email-button: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} #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%} a.social-icons{margin-right: 5px;height:45px;width:45px;} a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);} </style>
  5. Lalu sobat cari kode <div id='footer-wrapper'>
  6. Setelah ketemu copy code di bawah ini dan di letakan di bawahnya code  yang bewarna merah di atas
    <div id="sidebar-subscribe-box"> <div class="sidebar-subscribe-box-wrapper"> <br/> <a class="social-icons" href="https://facebook.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-facebook_zpsdf5baadf.png" /></a> <a class="social-icons" href="https://twitter.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-twitter_zps60281630.png" /></a> <a class="social-icons" href="https://plus.google.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-Googleplus_zpsd06b0bc1.png" /></a> <a class="social-icons" href="https://instagram.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-instagram_zps2dfebd6c.png" /></a><p> Berlangganan Via Email</p>
    <div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=mizipedia" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mizipedia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="mizipedia" />
    <input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukan Email Anda Disini"/>
    <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
    </div></div></div>
  7. Terakhir anda klik Save/Simpan. Keterangan utuk ganti kode Berwarna ada di bagian paling bawah.
CARA KEDUA 
1. Pertama anda buka dulu browser google atau apa yang anda suka.  
2. Kemudian anda klik Disini untuk masuk, dan anda masuk ke halaman Javascript. Dan langsung buka "tata letak", lihat contoh seperti gambar di bawah ini. 
3. Dan akan muncul tampilan halaman seperti di gambar di bawah ini dan anda bisa klik "Tambahkan Gadget".  
4. Kemudian akan terbuka tab baru dan anda cari saja tulisan "HTML/JavaScript", kemudian anda klik HTML lihat seperti gambar di bawah ini. 
5. Jika sudah muncul halaman JavaScript tinggal anda ambil code HTML yang sudah saya sediakan, lihat gaambar contoh seperti  di bawah ini. 
6. Jika sudah anda ambil kode script di bawah ini, kemudian anda copy code nya dan ande paste kan di ke JavaScript lihat seperti contoh gambar di atas. berikut ini kode HTMl  
<style> #sidebar-subscribe-box{width:270px;border:1px solid #aaa;border-radius:3px;padding:3px 0} .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase} .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto} .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%} .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;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%} .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff} .sidebar-subscribe-box-email-button: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} #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%} a.social-icons{margin-right: 5px;height:45px;width:45px;} a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);} </style><div id="sidebar-subscribe-box"> <div class="sidebar-subscribe-box-wrapper"> <br/> <a class="social-icons" href="https://facebook.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-facebook_zpsdf5baadf.png" /></a> <a class="social-icons" href="https://twitter.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-twitter_zps60281630.png" /></a> <a class="social-icons" href="https://plus.google.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-Googleplus_zpsd06b0bc1.png" /></a> <a class="social-icons" href="https://instagram.com/mizipedia"><img src="http://i1354.photobucket.com/albums/q685/harryodek/harryhermanan-instagram_zps2dfebd6c.png" /></a><p> Berlangganan Via Email</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=mizipedia" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mizipedia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="mizipedia" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukan Email Anda Disini"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>
7. Yang terakhir anda Klik Save/ simpan

Note:a. Warna Orange anda ganti dengan ID Facebook, Twitter, Google Plus, dan Instagram anda.b. Warna Merah anda ganti dengan ID Feedburner anda.(apabila anda belum punya id feedburner langsung saja mendaftar ya.)c. Warna Biru  ganti dengan kalimat anda sendiri.
Apabila anda ingin memindahkan letak widgetnya ke bawah ke kiri atau kekanan, anda tinggal kembali ke "Tata Letak" dan anda geser widgetnya ke atas atau ke bawah sesuai dengan posisi yang kalian inginkan. 
Demikian tutorial dari saya pagi ini..semoga bermanfaat..terimaksih sudah berkunjung di blog jelek saya ini. Selamat sukses. 

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect