Cara Membuat Kotak Iklan di Blog

Membuat kotak iklan berupa banner diblog adalah salah satu peluang usaha untuk mendapatkan penghasilan uang dari pemasang iklan. Terutama bagi blog yang telah memiliki banyak pengunjung dan tingkat kepopuleran pada mesin pencarian.

Namun tidak menutup kemungkinan bagi blog yang masih tergolong baru untuk mendapatkan tawaran dari pihak pengiklan dan tertarik untuk memasang iklan mereka diblog Anda.

Selain itu, Anda juga dapat mencari sendiri pihak pengiklan dengan memberikan penawaran kepada website lain  atau pebisnis online untuk memasang iklan mereka diblog Anda. Jika mereka bersedia, Anda akan mendapatkan penghasilan langsung dari pengiklan saat iklan mulai terpasang dengan harga yang sudah disepakati tentunya.

Agar para pihak pengiklan tertarik untuk memasang iklan diblog Anda, sebaiknya kotak iklan dibuat sedemikian rupa agar banyak orang teratarik, seperti tata letak dan susunannya.

Jika Anda tertarik kali ini saya akan memberikan tutorial untuk membuat kotak iklan yang berukuran 125x125 pixel dengan jumlah kotak iklan 4 buah dan nantinya terletak pada sidebar. Atau Anda bisa membuat ukuran dan penempatan yang berbeda atau disesuaikan dengan tema yang digunakan.

1. Masuk Blogger > Tema > Edit HTML > Lalu letakan kode berikut sebelum tag </head> atau ]]></b:skin>.

/* Kotak Iklan */

.kotak_iklan {text-align:center;}

.kotak_iklan img {margin:0 5px 5px 0;padding:5px;text-align:center;border:1px solid #ddd;}

.kotak_iklan img:hover {border:1px solid #aaa;}

.kotak_iklan img.noborder {border:0;}

2. Simpan Template

3. Pilih menu Tata Letak > Tambah Gadget > Pilih HTML/JavaScript > Lalu tambahkan kode berikut pada kolom widget baru.

<div class="kotak_iklan">

<a href="url iklan yang dituju" title="judul iklan"><img class="noborder"> src="url gambar" alt="alt gambar" width="125" height="125"/></a>

<a href="url iklan yang dituju" title="judul iklan"><img class="noborder"> src="url gambar" alt="alt gambar" width="125" height="125"/></a?

<a href="url iklan yang dituju" title="judul iklan"><img class="noborder"> src="url gambar" alt="alt gambar" width="125" height="125"/></a>

<a href="url iklan yang dituju" title="judul iklan"><img class="noborder"> src="url gambar" alt="alt gambar" width="125" height="125"/></a>

Silahkan ganti tulisan yang diblok, dengan deskripsi sesuai blog Anda.

4. Jika sudah, simpan template kembali lalu lihat hasilnya.

Sekian dulu sobat, semoga tutorial ini dapat membantu dan bermanfaat.

Cara Memasang Widget Komentar Terbaru Disqus

Hari ini saya tertarik untuk memasang widget komentar terbaru atau recent comment yang di implementasikan dari sistem komentar disqus. Widget ini menampilkan daftar komentar terbaru dan terbaik dari pengunjung atau admin sendiri.

Widget recent comment juga mempermudah admin untuk menanggapi komentar pengunjung yang masuk tanpa harus membuka dasbor blogger. Sebuah blog dengan trafik komentar yang tinggi akan memberikan kesan yang baik dari pengunjung.

Saya sendiri suka membaca komentar yang bersifat membangun dan mungkin penyelesaian dari sebuah masalah baik itu di blog sendiri ataupun orang lain. Dengan begitu pengetahuan kita juga akan bertambah.

Jika sobat tertarik dengan widget ini silahkan ikuti langkah berikut dan pastikan juga blog Anda sudah menggunakan sistem komentar dari Disqus.

Cara Memasang Widget Komentar Terbaru Disqus

1. Tambahkan kode script berikut pada widget yang di inginkan.

<style scoped="scoped" type="text/css">

#RecentComments {display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px}#RecentComments ul.dsq-widget-list {text-align:left;max-height:400px;overflow:auto;padding:10px}#RecentComments img.dsq-widget-avatar {margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}#RecentComments p.dsq-widget-meta {clear:both;font-size:80%;margin-top:5px;font-weight:400}#RecentComments p.dsq-widget-meta a  {display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa}#RecentComments p.dsq-widget-meta a:hover {color:#ff675c}#RecentComments li.dsq-widget-item {margin:0;padding:6px 10px 6px 0;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}#RecentComments li.dsq-widget-item:last-child {border-bottom:none}#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600}#RecentComments a.dsq-widget-user:hover {color:#999}#RecentComments span.dsq-widget-comment {display:block;clear:both;margin-top:5px}#RecentComments .dsq-widget-comment p {display:inline-block;font-size:92%;margin:0;font-weight:400;color:#444;max-width:100%;line-height:1.6em}#RecentComments .dsq-widget-item pre {position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s;}#RecentComments .dsq-widget-item pre:hover {background:#ffe4ad}#RecentComments .dsq-widget-item pre code {color:#908575;font-size:82%}#RecentComments .dsq-widget-item pre:before {content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}#RecentComments .dsq-widget-item pre:after {content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}

</style>

<div id="RecentComments" class="dsq-widget">

<script defer="defer" type="text/javascript">

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://nubietheme.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");

//]]>

</script>

<script type="text/javascript">

//<![CDATA[

$("#RecentComments a").filter(function (){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

</div>

2. Silahkan ganti nubietheme.disqus.com dengan URL forum disqus Anda (shorname.disqus.com).

Konfigurasi Widget :

Name	Default Value	Description
num_items	18	Jumlah item yang ingin di tampilkan
hide_mods	0	Set angka 1 untuk menyembunyikan komentar moderator
excerpt_length	120	Kutipan dari komentar
hide_avatars	0	Set angka 1 jika Anda tidak ingin menampilkan avatar
avatar_size	32	Ukuran avatar pengguna

3. Buka Blogger > Tata Letak > Tambahkan widget baru HTML/Javascript, kemudian masukan kode script dalam widget dan klik tombol Simpan.

Sekian dulu artikelnya sobat semoga bisa bermanfaat, apabila ada kesalahan saya minta maaf atau silahkan berkomentar di bawah ini.

Baca juga :
- Cara Memasang Komentar Disqus di Blog
- Pengertian dan Manfaat Disqus

Cara Memasang Tombol Share Melayang di Blog

Mungkin di antara sobat sudah banyak yang tahu tentang tombol share jenis melayang. Ada banyak cara untuk memasangnya, salah satunya adalah dengan menggunakan aplikasi dari situs SumoMe.

Fitur yang di tawarkan cukup banyak seperti Share Artikel, Pop Up Subscribe Email, Notification Bar, Share Gambar dan lainya. Semua itu bisa di dapatkan secara gratis atau pun berbayar dengan fitur yang lebih memuaskan.

Oya, aplikasi ini juga telah mendukung kebutuhan berbagai ukuran layar (responsive) serta ringan dalam kecepatan loadingnya.

Cara Memasang Tombol Share Melayang di Blog 

1. Mendaftar di website SumoMe  http://www.sumo.com/register kemudian masukan nama URL blog, alamat email, dan kata sandi. Jika sudah silahkan klik tombol Sign Up.

2. Pada halaman selanjutnya, silahkan copy kode script yang tersedia seperti pada gambar berikut.

Jika sudah di copy, buka dasbor Blogger > Tema > Edit HTML > Cari kode </head> dengan menggunakan Ctr + F. Selanjutnya letakan kode script tadi di atas kode </head> dan Simpan Template.

Selanjutnya klik tombol Visit Your Site yang ada di bawahnya, pada langkah ini Anda akan di arahkan menuju blog Anda.

3. Pada halaman blog Anda sekarang muncul Badge SumoMe yang ada di pojok kanan atas dan pilih menu gambar mahkota.

4. Selanjutnya akan muncul jendela baru dengan tampilan aplikasi dari SumoMe dan pilih menu Sumo Store.

5. Pada tampilan Sumo Store, scroll ke bawah menuju menu Sharing kemudian pilih yang Share Free.

6. Terakhir, tekan tombol FREE untuk memunculkan tombol share melayang.

7. Selesai dan sampai tahap ini tombol share melayang sudah muncul di sebelah kiri.

Setelah berhasil memasang tombol share melayang di blog, Anda dapat mengaturnya kembali sesuai keinginan agar dapat berfungsi secara maksimal.

Mengatur Tampilan Tombol Share Melayang SumoMe

1. Buka kembali menu Badge SumoMe yang bergambar mahkota lalu pilih menu Share.

2. Pada menu sebelah kiri pilih Setting. Nah, disini Anda bisa mengatur jumlah media sosial yang akan di tampilkan atau di tambahkan.

Untuk mengatur tata letak tombol share melayang pilih menu Layout dan untuk menu lainya, Anda bisa mengexplore sendiri lebih lanjut supaya hasilnya lebih sesuai & optimal.

Cara Menyembunyikan Menu Badge di SumoMe.

Anda dapat menyembunyikan atau menampilkan tombol Badge Sumo yang ada di sisi kanan blog.

1. Klik menu badge Sumo yang bergambar mahkota, lalu pilih icon setting yang bergambar gear.

2. Pada sidebar pilih menu Badge, kemudian pada "Badge Location" pilih Hidden dan tekan tombol SAVE.

Sekarang Menu Badge SumoMe sudah tidak terlihat lagi, hanya Admin blog yang dapat melihat.

Sekian dulu artikel dari saya tentang Cara Memasang Tombol Melayang di Blog semoga bermanfaat. Apabila ada kesalahan atau kekeliruan dalam penulisan saya minta maaf atau silahkan berkomentar.

Cara Memasang Komentar Disqus di Blog

Disqus adalah sebuah sistem jaringan yang mendukung layanan diskusi bagi para pengguna di dunia maya yang dapat di integrasikan ke berbagai platform termasuk blogspot.

Tampilan yang menarik dan form komentar yang terlihat stylis adalah salah satu kelebihan disqus. Sobat juga bisa berkomentar dan membalas komentar pada disqus tanpa harus masuk ke blog.

Nah, buat sobat yang tertarik untuk memasang komentar disqus di blog atau  wordpress silahkan ikuti langkah berikut.

Cara Memasang Komentar Disqus di Blog

1. Masuk halaman Disqus, kemudian mendaftar atau masuk dengan Twiteer, Facebook dan Google.

2. Jika sudah masuk halaman disqus, silahkan klik GET STARTED.

3. Selanjutnya pilih i want to install Disqus on my site.

4. Pada kolom Website Name masukan judul disqus sobat yang di inginkan. Kemudian pada kolom Category pilih "Living" atau sesuaikan dengan niche blog sobat. Jika sudah klik tombol Create Site.

5. Silahkan langsung Klik menu pada nomer 2. Install Disqus, lalu pilih platform Blogger.

6. Selanjutnya klik pada nomer (1) Add to my Blogger.

7.  Pada kolom "Pilih sebuah blog" pilih nama blog yang akan di pasang widget disqus. Lalu klik tombol Menambah Widget.

Setelah itu secara otomatis sobat akan di bawa pada halaman Blogger >> Tata Letak untuk memastikan widget disqus benar-benar telah terpasang, jika sudah Simpan setelan dan lihat hasilnya.

Jika sobat sebelumnya memiliki banyak komentar di blogger, dan ingin memindahkanya ke disqus silahkan klik Discussion > Import pada pilihan nomor (2) di atas. Lihat pada langkah ke-6.

Sekian dulu artikel Cara Memasang Komentar disqus di Blog semoga bermanfaat. Apabila ada kesalahan penulis mohon maaf atau silahkan berkomentar.

Baca juga :
Pengertian dan Manfaat Disqus
Cara Memasang Komentar Terbaru Disqus 

Cara Membuat Google Custom Search Engine di Blog

Kebanyakan setiap blog sudah menggunakan widget search engine, namun belum semuanya menyertakan Google custom search dengan alasan masing-masing.

Salah satu fungsi dasar sebuah search engine adalah membantu pengunjung menemukan informasi yang di carinya. Agar fungsinya lebih optimal yaitu dengan menyertakan Google custom search pada blog supaya hasil pencarian lebih relevan dan berkualitas.

Selain itu Anda juga dapat menambahkan Google Adsense  ke dalam search engine  tersebut untuk mendapatkan uang. Dengan catatan blog Anda sudah memiliki iklan Adsense.

Cara Membuat  Google Custom Search Engine di Blog

1. Kunjungi halaman Google Custom Search, klik Sign in to Custom Search Engine.

 

2. Kemudian pilih New search engine.

3. Pada kolom Site to search masukan URL blog Anda, kemudian pada  Name of the search engine masukan nama search engine Anda. Jika sudah klik tombol CREATE.

4. Selajutnya klik Control Panel.

5. Klik Search engine ID, salin kodenya dan simpan ke notepade. Setelah itu klik Advanced.

6. Pada menu Search engine encoding, pilih West European Lattin-1 (ISO-8859-1).

7. Selanjutnya buka menu Look and feel, pilih Result only atau sobat bisa memilih sendiri jenis layout sesuai keinginan. Jika sudah silahkan klik Save and Get Code.

8. Langkah selanjutnya copy kode script yang telah di sediakan seperti pada gambar berikut. Kemudian buat Laman baru di Blogger, paste kode tadi ke dalam editor HTML lalu Publikasikan dan catat alamat URL-nya.
Sebagai contoh, penulis membuat laman baru dengan judul "Search Result" maka secara otomatis alamat URL-nya adalah "namablog.com/p/search-result.html".

9. Buka blogger > Tema > Edit HTML > cari kode HTML "Search Box". Berikut adalah contoh search box yang penulis gunakan.

<form action="/search" id="search-usnih" method="get">

<table>

<tbody>

<tr>

<td class="search-boxdesk1" >

<input id="search-boxdesk1" name="q" onblur="if (this.value=='')this.value=this.defaultValue;" onfocus="if (this.value==this.defaultValue)this.value='';" value="search article..." type="text">

<input name="max-results" value="8" type="hidden">

</td>

<td class="search-button1">

<input id="search-button1" value="fl" type="submit"> 

</tr>

<tbody>

</table>

</form>

10. Perhatikan kode HTML berikut.

<form action="/search" id="search-usnih" method="get">

11. Silahkan ganti dengan kode HTML di bawah ini.

<form action="namablog.com/p/search-result.html" target="_blank">

Jangan lupa ganti tulisan yang bercetak biru dengan alamat URL laman yang di buat tadi, seperti pada langkah ke-8 di atas.

12. Setelah itu tambahkan kode HTML berikut.

<input type="hidden" name="cx" value="partner-pub-005952719079255310544:24zawqltmqm"/>

<input type="hidden" name="cof" value="FORID:10"/>

<input type="hidden" name="ie" value="ISO-8859-1"/>

Ganti tulisan yang tercetak biru dengan Search engine ID blog Anda yang tersimpan dalam notepad tadi atau lihat kembali langkah ke-5 di atas.

13. Hasil akhir akan seperti ini.

<form action="namablog.com/p/search-result.html" target="_blank">

<input type="hidden" name="cx" value="partner-pub-005952719079255310544:24zawqltmqm"/>

<input type="hidden" name="cof" value="FORID:10"/>

<input type="hidden" name="ie" value="ISO-8859-1"/>

<table>

<tbody>

<tr>

<td class="search-boxdesk1">

<input id="search-boxdesk1" name="q" onblur="if (this.value=='')this.value=this.defaultValue;" onfocus="if (this.value==this.defaultValue)this.value='';" value="search article..." type="text">

<input name="max-results" value="8" type="hidden">

</td>

<td class="button1">

<input id="button1" value="fl" type="submit">

</td>

</tr>

</tbody>

</table>

</form>

14. Terakhir simpan template dan silahkan lihat hasilnya.

Selesai, sampai pada tahap ini sobat sudah berhasil menyertakan Google Custom Search Engine pada blog.

Baca juga : Cara Membuat Kotak Email Berlangganan di Blog

Itulah sobat, artikel membuat Google Custom Search Engine di Blog semoga bermanfaat. Apabila ada kekeliruan atau kesamaan, penulis mohon maaf.

Cara Membuat Contact Form Material Design di Blog

Pada dasarnya platform Blogger sudah menyediakan Widget contact form, namun design dan tampilan masih sangat minimalis sehingga terlihat kurang menarik dan profesional.

Pada moment ini, penulis akan berbagi artikel cara membuat material design untuk contact form tanpa adanya javascript khusus yang responsive. Mengingat Google sangat menganjurkan penggunaan material design untuk membangun sebuah web ataupun perangkat mobile.

Nah, buat sobat yang tertarik dengan widget ini silahkan ikuti langkah berikut ini :

Cara Membuat Material Design Contact Form di Blog

1. Buka dasbor blogger > Laman > Buat Laman baru.
2. Masukan kode berikut pada kolom Laman baru dan pilih mode HTML.

<style scope="scoped">

.datainput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.data input textarea:focus~label,.datainput textarea:valid~label{top:-20px;font-size:14px;color:#07acec}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07acec;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{width:50%}.highlight{position:absolute;height:50%;widht:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-20px;font-size:13px;color:#07acec}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{color:#fff!important;background:#07acec;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.6),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}

input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19}

input#ContactForm_contact-form-error-message{float:right;background:#d32f2f;color:#fff;font-size:13px;font-weight:700;border-radius:3px}input#ContactForm_contact-form-success-message{float:right;background:#4caf50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}

</style>

<form name="contact-form">

<div class="datainput">

<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value=""/>

<span class="highlight"></span>

<span class="bar"></span>

<label>Name</label>

</div>

<div class="datainput">

<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value=""/>

<span class=highlight"></span>

<span class="bar"></span>

<label>Email</label>

</div>

<div class="datainput">

<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>

<span class="highlight"></span>

<span class="bar"></span>

<label>Message</label>

</div>

<input id="ContactForm1_contact-form-submit" type="button" value="send"/>

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if  (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload !=null) { window['blogger_templates-experiment_id'] = "templatesV1";window['blogger_blog_id'] = '458698678969352428';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x458698678969352428','//nubietheme.com/','458698678969352428');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId':'458698678969352428', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

3. Jangan lupa untuk mengganti semua tulisan dengan markup biru dengan ID blog Anda.
4. Simpan template.

Demo

Untuk mengecek apakah contact form bekerja dengan fungsinya, silahkan sobat mencobanya sendiri dengan mengirim sebuah pesan. Jika pesanya sukses terkirim, sobat akan mendapatkan email pemberitahuan dari "Blogger Contact Form". Untuk lebih jelasnya, silahkan lihat contoh pada gambar berikut :

Penulisan pesan pada contact form :

Contoh Penulisan pada Contact form

Email pemberitahuan dari "Blogger Contact Form".

Sekian dulu sobat artikel dari penulis cara membuat material design contact form, semoga bermanfaat dan apabila ada kekeliruan atau kesalahan, penulis mohon maaf.

Cara Membuat Kotak Email Berlangganan di Blog

Salah satu widget blog yang menjadi sumber visitor adalah email berlangganan (subscribe email). Mengapa? karena widget ini memungkinkan pengunjung untuk dapat berlangganan artikel terbaru melalui email tanpa harus membuka halaman blog tersebut. Dengan cara memasukan alamat email dan password pada kotak "Email berlangganan" kemudian submit.

Jadi setiap blog melakukan update artikel baru, pelanggan akan mendapatkan pemberitahuan melalui email submitnya. Apalagi jika yang berlangganan banyak tentu trafik blog akan meningkat.

Selain fungsi di atas, widget ini juga akan menambah daya tarik sendiri buat pengunjung. Nah, buat sobat yang tertarik dengan widget ini, boleh ikuti langka-langkah berikut.

Cara Membuat Kotak Email Berlangganan di Blog

1. Masuk dasbor blogger pilih Tema klik Edit HTML, kemudian letakan kode CSS berikut sebelum kode ]]><b:skin> atau </style>

#nubz-two {background:#4d9fd6;color:#fff;padding:20px;margin:0}

#nubz-two h4 {background:transparent;color:#fff;padding:0;border:0;margin:0 0 20px 0}

#nubz-two form {margin:0;}

#nubz-two input {font-size:15px;margin-bottom:15px;box-sizing:border-box;background-color:#fff;border:2px solid #fff;color:#333;padding:9px 11px;width:100%}

#nubz-two input[type="submit"]{background:rgba(255,255,255,.2);color:#fafafa;margin:0;width:100%;border:none;cursor:pointer;font-size:15px;padding:12px 20px;font-weight:700;transition:all .3s;}

#nubz-two input[type="submit"]:hover{background:#79beed}

2. Masukan kode berikut pada widget HTML/JavaScript baru Anda.

<div class="widget nubz-widget" id="nubz-two">

<div class="widget-wrap">

<div class="nubz">

<h4 class="widget-title widgettitle">Email Berlangganan</h4>

<form action='https://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=nubietheme/KZPo','.popupwindow','scroollbars=yes,width=550,height=520');return true">

<p>Berlangganan artikel terbaru dari blog ini langsung via email</p>

<input type="text" name="email" placeholder="Alamat Email"/> 

<input type="hidden" value="nubietheme/KZPo" name="uri"/> 

<input name='loc' type='hidden' value='en _US'/>

<input type='submit' value='Subscribe'/>

</form></div></div></div> 

3. Silahkan ganti dengan ID feedburner blog Anda, untuk tulisan yang di blok warna biru.
4. Simpan template dan lihat hasilnya.

Baca juga : Cara mendaftarkan Blog pada Feedburner

Untuk sementara proses pembuatan kotak email berlangganan selesai, namun untuk mengaktifkanya Anda masih butuh kode ID feedburner yang bisa di dapatkan di Google Feedburner.

Cara Mendapatkan Kode ID Feedburner dan Mengaktifkan Email Berlangganan.

1. Masuk pada feedburner.google.com, kemudian klik nama feed blog Anda atau daftarkan dengan cara isikan nama url blog pada kolom yang tersedia, kemudian klik tombol Next dan ikuti langkahnya.

2. Selanjutnya klik tab Publicize kemudian pilih menu Email Subscription.

  

 

Selanjutnya akan terlihat kode form subscription yang ada di samping menu dan tulisan yang bercetak biru adalah ID feedburner blog Anda.

Copy dan paste kode tersebut pada form HTML kotak email berlangganan Anda. Silahkan baca kembali langkah ke-3 di atas.

3. Jika sudah klik tombol ACTIVE yang ada di bawahnya untuk mengaktifkan.

NB : Anda juga bisa langsung memasukan semua kode form di atas ke dalam widget HTML/JavaScript tanpa CSS style seperti di atas. Hanya saja tampilanya masih biasa atau default, namun dengan fungsi sama.

#Hasil kotak email berlangganan dengan style CSS.

#Hasil kotak email berlangganan tanpa style atau default blogger.

4. Untuk mengetahui apakah kotak email berlangganan sudah aktif atau terintegrasi oleh ID feedburner, Anda dapat mengeceknya dengan cara memasukan URL feed pada Browser. URL tersebut ada di kode form (lihat gambar pada langkah ke-2 di atas). Sebagai contoh http://feedburner.google.com/fb/a/mailverify?uri=nubietheme/KZPo. Jika berhasil akan terlihat seperti gambar berikut.

Dan sebaliknya jika email belum aktif akan tampak seperti gambar berikut.

Sekian dulu sobat artikel dari saya "cara membuat kotak email berlangganan di blog" dan semoga dapat bermanfaat, apabila ada kekeliruan dan kesalahan penulis mohon maaf.