Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Kotak Berlangganan (Subscribe Box Email) Keren di Blogger

Cara Membuat Kota Berlangganan Subscribe Box Keren di Blogger




Cara Membuat Subscribe Box Email di Blogger

Kotak Subscriber menjadi salah satu item pendukung sekaligus pelengkap navigasi pada sebuah situs baik itu blog maupun website.

Kotak subscriber (berlangganan via email) yang terpasang pada sebuah situs memiliki berbagai manfaat positif terhadap perkembangan situs itu sendiri.

Salah satu manfaatnya ialah agar pembaca setia situs tidak ketinggalan update konten atau artikel terbaru pada situs 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.


Cara Membuat Widget Berlangganan (Subscribe Box) di Blogger



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: Silakan 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.