Cara Membuat Kotak Subscribe Blogger

---

Layanan Subscribe pada situs/blog merupakan layanan berlangganan suatu situs atau blog yang berbasis email atau notifikasi browser. Layanan Subscribe berbasis email biasanya pada blog menggunakan FeedBurner Email Subscription sedangkan layanan berbasis notifikasi browser menggunakan jasa pihak ketiga sebagai feed collector karena blogspot sampai artikel ini diterbitkan belum menyediakan widget default untuk subscribe langsung berbasis notifikasi browser.

Pembahasan pada artikel ini hanya sebatas layanan subscribe berbasis email untuk layanan subscribe berbasis notifikasi browser ada pada artikel yang lain. Sengaja pembahasan mengenai layanan subscribe terbagi dalam dua artikel untuk mempermudah dan mempersingkat pembahasan artikel agar pembahasan tidak terlalu panjang.

Secara default ketika pertama kali membuat blog, layanan subscribe berbasis email belum dapat di terapkan kecuali pengembang blog menggunakan kustom template yang memang sudah memasang layanan subscribe dengan tampilan yang sudah disesuaikan dengan tema yang dibuat tersebut. Pada tema standar bawaan blogspot ataupun tema kustom untuk dapat bisa menggunakan layanan subscribe di blognya maka dibutuhkan layanan pengumpul feed (Feed Collector Content). Layanan pengumpul feed konten bisa menggunakan pihak ketiga atau menggunakan Feed Collector Content dari Google. Saran saya menggunakan Feed Collector Content dari Google karena lebih bisa diandalkan (jarang offline) dan sudah terintegrasi dengan layanan blogspot.

Kelebihan utama dari layanan FeedBurner adalah layanan tersebut bersifat gratis dan terintegrasi dengan seluruh layanan google, selain itu bisa di kustomisasi dan bisa dialihfungsikan sebagai layanan subscribe suatu blog, seperti yang kita ketahui penggunaan blogspot memiliki keterbatasan dalam hal populasi data dan database berbeda dengan blog yang menggunakan hosting berbayar. Walaupun menggunakan engine blogger tapi apabila menggunakan hosting berbayar pemilik blog (Blog Developper) bisa menggunakan database untuk populasi data pada domainnya sendiri, sedangkan apabila menggunakan blogspot maka dibutuhkan pihak ketiga untuk bisa mempopulasi data kemudian mengolah data tersebut secara system (otomatis).

Populasi Data
Populasi data adalah suatu cara yang digunakan untuk menyimpan data secara terstruktur (database) pada alokasi tertentu yang nantinya data yang diperoleh dapat diolah sesuai dengan kebutuhan dari data yang akan digunakan. Contoh, penggunaan populasi data adalah Login Form dimana suatu situs membutuhkan input dari pengguna berupa username dan password yang akan digunakan, data yang di input oleh pengguna akan disimpan pada database server. Nah kemampuan seperti inilah yang tidak ada pada blogspot (situs yang bersifat statis).

Feed Collector
Sama halnya dengan Login Form, untuk membuat Subscribe Form dibutuhkan populasi data untuk bisa menyimpan alamat email yang di input pengunjung apabila pengunjung tersebut ingin mendaftar untuk mendapatkan notifikasi pada situs/blog yang sedang dikunjunginya, agar bisa memasang layanan subscribe pada blog maka disiasati dengan menggunakan layanan pihak ketiga milik google yaitu layanan FeedBurner. Layanan FeedBurner menyediakan fasilitas subscribe yang dapat dimodifikasi untuk bisa diaplikasikan pada blog. Tidak hanya pada blog yang menggunakan blogspot akan tetapi bisa juga digunakan pada situs ataupun blog berbasis WordPress dan lainnya.

Layanan FeedBurner
Penggunaan FeedBurner untuk pendistribusian feed lebih kompatibel untuk semua jenis perangkat lunak subscriber. Pengguna FeedBurner juga dapat menganalisis traffic dalam berlangganan feed, seperti melihat jumlah subscriber, dari mana mereka berada dan apa yang mereka sukai. Layanan lain dari FeedBurner akan dibahas pada artikel lain secara lengkap beserta cara mengoptimalkannya.

Menggunakan layanan FeedBurner cukup mudah apalagi untuk blog berbasis blogspot, pemilik blog cukup mengaktifkan FeedBurner dengan menekan tombol Activated pada dashboard situs FeedBurner, untuk pengguna blogspot nama blog akan langsung terlihat apabila pemilik blog sudah login dengan menggunakan akun blogspot. Sedangkan untuk pengguna selain blogspot maka cukup mengetikan alamat URL Feed dari situs/blog yang akan dikaitkan kemudian prosesnya masih sama tinggal klik Activated dan situs/blog tersebut langsung terkait dengan FeedBurner.

Kotak Subscribe
Pembahasan pada artikel ini adalah Kotak Subscribe blog ala CodeFlare Blogspot untuk contoh bisa dilihat seperti di bawah ini.

Don't waste your time !

Join Us
before nights gone

RSS Feed Twitter Facebook

Kotak subscribe dengan tampilan dinamis yang menggunakan efek 3D terbaru akan terlihat unik dan menarik apabila dipasang pada blog anda. Pemasangan kotak subscribe ini cukup mudah dan tanpa ribet, ok buat yang tertarik memasang kotak subscribe ini silakan disimak cara pemasangannya, seperti berikut ini.

Cara Membuat Layanan Subscribe/Langganan Artikel
Untuk membuat layanan Subscribe di blog kita diberi banyak pilihan layanan. Namun yang paling terkenal dan paling disarankan oleh blogspot adalah layanan dari FeedBurner. Mengapa demikian, karena FeedBurner juga milik Google yang artinya telah terkoneksi dengan seluruh layanan Google.

Jadi langkah pertama yang harus anda lakukan untuk membuat Subscribe adalah mengaktifkan akun FeedBurner anda. Bisa anda pelajari dengan membaca artikel

• Jika telah memiliki akun FeedBurner, selanjutnya login. Pilih blog yang telah anda daftarkan dan pilih Publicize lalu Email Subscriptions.





• Pada halaman Email Subscriptions, klik Activate.





• Kini anda telah disediakan script HTML. Script ini bisa langsung anda copy ke blog anda dan letakkan dimana saja anda inginkan. Namun saya sarankan untuk tidak mengcopy dulu. Kita akan melakukan pengaturan agar layanan Subscribe anda terlihat profesional.





• Pilihlah Communication Preferences. Pada pengaturan ini anda bisa merubah alamat email pengirim (selain dari email yang anda daftarkan), Kata-kata untuk email aktivasi pada pelanggan anda, serta isi pesan yang akan muncul saat pertama kali pelanggan anda meminta berlangganan. Bahasanya berbahasa Inggris, olehnya itu rubahlah kedalam bahasa Indonesia dengan kata-kata anda sendiri. Setelah itu klik Save.





• Selanjutnya adalah Email Branding. Pada pengaturan ini, aturlah judul setiap email Subscribe anda sesuai keinginan, misal jika anda belangganan artikel di blog ini, judul email yang akan terkirim bertuliskan bloGoooblok ~. Pada laman ini anda juga bisa merubah tampilan feed anda, silahkan diutak-atik sesuai kebutuhan, lalu klik Save.





• Terakhir adalah Delivery Options. Pada laman ini, anda diberi kuasa mengatur jadwal pengiriman artikel kepada pelanggan anda. Jika menyasar pembaca dari Indonesia, aturlah Timezone-nya Jakarta, dan jadwal pengiriman sesuai keinginan anda, bisa dikirim dipagi hari atau malam hari.





• Barulah setelah selesai, kembali ke Subscription Management lalu mengcopy script yang diberikan ke blog anda. Ada dua cara yang bisa dilakukan, mengcopy script langsung ke blog atau mengaktifkan widget dari FeedBurner. Saran saya lebih baik mengcopy script saja agar anda bisa melakukan modifikasi, seperti layanan Subscribe pada bloGoooblok ~ ini sudah diperbaharui agar sesuai keinginan.

Cara Membuat Kotak Subscribe Blog
Setelah selesai mengkaitkan blog dengan FeedBurner maka langkah selanjutnya adalah memasang kode script kotak subscribe pada blog anda, silakan disimak cara pemasangan kotak subscribe pada langkah dibawah ini :

[warning title="Warning message" icon="exclamation-triangle"] Peringatan ! Sebelum memasang Code box ala CodeFlare Blogspot sebaiknya melakukan proses Backup kode Template yang Anda gunakan untuk menghindari hal-hal yang tidak diinginkan. [/warning]

• Seperti biasa silakan Anda login terlebih dahulu ke akun Blogger.
• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  
  
  
  
  
  
  
  
  


• Taruh kode berikut ini pada kotak widget blog
  
  
  <link rel="stylesheet" href="https://codeflareblogspot.github.io/code/subscribe-form.css"/>
  
  <center>
  <div style="width:300px;height:300px;">
  <div id="cf-subscribe-form" class="cf-subscribe-form" style="opacity:0;">
  <div class="borderSubsForm">
  <div class="textSubsNote"><div id="wavetext" class="wavetext">Don't waste your time !</div>
  <i class="fa fa-shield"></i> Join Us <i class="fa fa-shield"></i><br />
  before nights gone
  </div>
  <div style="position:relative;text-align:center;top:15px;">
  <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="Javascript:subsMyForm();" target="popupwindow">
  <input class="email" id="email" name="email" style="" type="text" placeholder="example@email.com"/>
  <input name="uri" type="hidden" value="CF" />
  <input name="loc" type="hidden" value="en_US" />
  <input class="subscribe" name="submit" type="submit" value="" />
  </form>
  </div>
  <div class="other-social-bar">
  <div class="other-follow">
  <span class="my-rss"><a id="myrssID" href="#" rel="nofollow" target="_blank" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i> RSS Feed</a></span>
  <span class="my-twitter"><a id="mytwitterID" href="#" rel="author" target="_blank" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i>
  Twitter</a></span>
  <span class="my-gplus"><a id="mygplusID" href="#" rel="author" target="_blank" title="Facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i>
  Facebook</a></span>
  </div></div></div></div></div>
  </center>
  
  
  
  <script>
  //<![CDATA[
  var rssSubsID = "codeflare";
  var twitterSubsID = "codeflare1";
  var gplusSubsID = "codeflarepage";
  var tmptxtCFSubs = "";
  var txtCFSubs = "";
  function setWaveText(){
  txtCFSubs = document.getElementById("wavetext").innerText;
  if(txtCFSubs == ""){txtCFSubs = "Don't waste your time !";}
  document.getElementById("wavetext").innerText = "";
  if(typeof jQuery == "undefined"){
  for(var i in txtCFSubs) {
  if(txtCFSubs[i] == " "||txtCFSubs[i] == "undefined"){tmptxtCFSubs +="<span> </span>";}else{tmptxtCFSubs +="<span>"+txtCFSubs[i]+"</span>";}}
  document.getElementById("wavetext").innerHTML = tmptxtCFSubs;
  }else{
  for(var i in txtCFSubs) {
  if(txtCFSubs[i] === " ") {$(".wavetext:first").append( $("<span>").html(" ") );}else{$(".wavetext:first").append( $("<span>").text(txtCFSubs[i]) );}}
  }}
  function defaultSetSubsForm(){
  document.getElementsByClassName("cf-subscribe-form")[0].style.opacity = "1";
  var elWidth = document.getElementsByClassName("cf-subscribe-form")[0].offsetWidth;
  var el1 = document.getElementsByClassName("other-follow")[0];
  var list = el1.getElementsByTagName("li");
  var el2 = document.getElementsByClassName("textSubsNote");
  if(elWidth >= 260){
  for (var i=0;i<list.length;i++){list[i].style.fontSize="12px";}
  el2[0].style.fontSize="20px"
  }else{
  for (var i=0;i<list.length;i++){list[i].style.fontSize="10px";}
  el2[0].style.fontSize="18px";
  }
  var setRssID = rssSubsID;var setTwitterID = twitterSubsID;var setGplusID = gplusSubsID;
  document.getElementById("myrssID").setAttribute("href","http://feeds.feedburner.com/"+setRssID);
  document.getElementById("mytwitterID").setAttribute("href","https://twitter.com/"+setTwitterID);
  document.getElementById("mygplusID").setAttribute("href","https://www.facebook.com/"+setGplusID);
  }
  function subsMyForm(){
  var setRssID = rssSubsID;
  window.open('http://feedburner.google.com/fb/a/mailverify?uri='+setRssID, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true
  }
  window.onload=setTimeout(defaultSetSubsForm,3000);setWaveText();
  //]]>
  </script>
  
  KETERANGAN :
  Ganti nama akun yang ada pada kode diatas dengan nama akun anda.
  
  var rssSubsID = "nama akun blog yang terdaftar pada FeedBurner";
  var twitterSubsID = "nama akun twitter";
  var gplusSubsID = "nama akun facebook page";
  


• Klik Save dan lihat hasilnya

Demikian sekiranya informasi yang dapat penulis berikan, apabila ada kata-kata yang kurang berkenan dan informasi yang kurang lengkap, penulis mohon maaf dan harap dimaklumi. Jangan lupa untuk melihat artikel lainnya yang berkaitan dengan pembahasan artikel ini karena bisa jadi ada tips dan trik yang mungkin tidak tertulis pada artikel ini namun tertulis di artikel lainnya yang masih berkaitan. Semoga bermanfaat.

Keyword

Subscribe, Blog, Blogspot, Blogger, Berlangganan, Langganan, Kreatif, Unik, 3D, CSS, HTML, Javascript, Form, Perspektif, Animasi, Animated

Incoming Search Term

Cara Membuat Kotak Subscribe Unik dan Menarik, Kotak Subscribe Blogspot, Kotak Subscribe 3D CSS, Tombol Langganan Blogspot, Tombol Subscribe Blogger Terbaru