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.
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
Menarik Untuk AndaLangsung 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 ('http://feedburner.google.com/fb/a/mailverify?uri=droidideblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');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.
Sumber:
Posts
