Cara Membuat Tombol Berlangganan (Subscribe Email) Keren di Blogger

Cara mudah membuat dan memasang kotak berlangganan keren di blog. Cara membuat tombol berlangganan di blog. Cara membuat tombol subscribe keren. Cara membuat subscribe email feedburner.
Daftar Isi [Tampilkan]
Cara Membuat Kotak Subcription Box Keren di Blogger



Kotak Subscriber menjadi salah satu item pendukung sekaligus pelengkap navigasi blog. Kotak subscriber (langganan email) mempunyai fungsi utama agar pembaca setia kita tidak ketinggalan update konten atau artikel di blog kita.

Saat pembaca setia kita telah melakukan subscribe dengan cara memasukkan alamat email pada form subscribe yang tersedia.

Maka secara otomatis ketika blog kita telah menerbitkan sebuah konten atau artikel baru, mereka para pembaca setia akan mendapatkan notifikasi khusus berupa pemberitahuan lewat email yang sebelumya telah dimasukkan.

Selain itu ada manfaat lain yang didapatkan jika kita memasang kotak subscriber di blog misalnya pengunjung blog cenderung akan lebih stabil daripada biasanya.

Baca Juga: Cara Membuat Halaman Link Partner di Blogger

Hal ini dikarenakan pengunjung yang melakukan subscribe adalah merupakan pengunjung lama yang sebelumnya memang pernah berkunjung ke blog kita.

Kotak subscribe berlangganan ini sebenarnya telah didukung dan disediakan oleh developer Blogger sendiri.

Namun kebanyakan orang tidak menyukai desainnya yang terlalu simpel dan sederhana sehingga mereka enggan menggunakan fitur bawaan tersebut.

Mereka lebih memilih untuk membuat kotak subscribe sendiri yang dinilai lebih menarik dibanding kotak subscribe bawaan Blogger.

Selain itu pembuatan kotak subscribe ini cukup mudah untuk dilakukan, bahkan untuk Blogger pemula sekalipun.

Langsung saja, berikut tutorial cara membuat kotak subscriber langganan keren di Blogger

1. Login ke akun Blogger masing-masing.
Klik menu Tema/Template

2. Kemudian klik Edit HTML

3. Cari kode ]]></b:skin> atau kode  pembungkus </style>

4. Lalu tempelkan kode berikut ini tepat diatasnya ]]></b:skin> atau </style>.

/* Subscribe Box */ #subscribe-css{position:relative;padding:20px 0;background:#292929;overflow:hidden;border-top:4px solid #eee;font-family:"Poppins", Arial, sans-serif;} .subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%} .subscribe-form{clear:both;display:block;overflow:hidden} form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden} .subscribe-css-email-field{background:#fff;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:none;border-radius:4px;font-family:"Poppins", Arial, sans-serif;} .subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:4px;transition:all .6s} .subscribe-css-email-button:hover{background:#37b185;} #subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;} #subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s} #subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase} #subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none} #subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s} #subscribe-css:hover p.subscribe-note span:before{width:100%;}

5. Selanjutnya tambahkan juga markup berikut ini.

<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=droidideblog' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=droidideblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value=' droidideblog'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

6. Letakkan kode markup diantara tag pembungkus <body>kode markup</body>.

Catatan: Silahkan ganti nama ID Droidideblog sesuai dengan kode ID feedburner kalian.

7. Kemudian Simpan Tema dan selesai.

Baca Juga: Cara Membuat Halaman Kontak Form Blogger (Responsive)

Selamat sekarang kalian telah memasang kotak berlangganan di blog masing-masing. Semoga bermanfaat tutorial tentang Cara Membuat Kotak Subcription Box Keren di Blogger. Share juga informasi ini pada yang lain. Terimakasih.


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel