Rabu, 12 Juli 2017

Cara Membuat Widget Subscribe Box yang Menarik di Blog

Blogger yang baik memang selalu memberikan banyak fasilitas didalam blognya.

Fasilitas yang biasa diberikan seorang penulis kepada pengunjung blog yang saya maksud disini adalah sebuah widget yang dapat memberikan berbagai kemudahan bagi pengunjungnya.

Contohnya seperti pada artikel saya sebelumnya yaitu Widget Social Profile yang tampilannya biasa kamu lihat pada sidebar artikel Kang Wira, atau Widget Subscribe Box Menarik seperti yang akan saya bahas kali ini.

Cara Membuat Widget Subscribe Box yang Menarik di Blog

Sebenarnya masih banyak sekali fasilitas / kemudahan yang diberikan penulis kepada pembacanya, tapi coba kita bahas soal Widget Subscribe Box yang Menarik dulu yah.

Sebelum pada point tutorialnya, saya mau sedikit menjelaskan tentang Manfaat Memasang Widget Subscribe Box di Blog. Mungkin sebagian besar Blogger yang berpengalaman sudah sangat tahu manfaat Subscribe Box ini.

Coba perhatikan penjelasan dibawah ini.

Manfaat Memasang Subscribe Box

Sebenarnya ada banyak manfaat yang bisa kamu dapatkan setelah kamu memasang subscribe box didalam blog, misalnya adalah pengunjung akan mudah mendapatkan artikel terbaru secara up to date karena telah terdaftar kedalam list subscribe, dan secara otomatis pengujung tersebut akan mendapatkan pemberitahuan secara up to date setiap kamu publikasikan artikel baru.

Baca juga : Cara Membuat Space Iklan 125x125 di Sidebar


Dari situ kamu bisa lihat bahwa pembaca artikel yang pernah datang keblog kamu akan sering kembali untuk membaca artikel terbaru karena pembaca tersebut akan langsung mendapatkan pemberitahuan melalui email saat artikel kamu telah terbit.

Selain itu kamu akan melihat bahwa trafik blog yang kamu kelola pun setidaknya terlihat lebih stabil.

Subscribe Box kali ini memanfaatkan layanan Feedburner yang merupakan layanan management umpan web, yang terdiri dari RSS feed dan alat pengelola untuk blogger dan podcaster, dan aplikasi publikasi lain yang berbasis web.

Baca juga: Maksimalkan Fitur ini untuk Promosi Blog


Jadi saya sarankan membuat akun Google Feedburner terlebih dulu sebelum memasang Widget Subscribe Box yang Menarik ini kedalam blog kamu. Untuk melihat tampilannya secara langsung, silahkan kamu tekan tombol DEMO dibawah ini.

D E M O

Tertarik Memasang Widget ini ?


Apabila kamu tertarik untuk memasang Subscribe Box dengan style seperti pada tombol Demo diatas, kamu bisa ikuti beberapa langkah dibawah ini.
  • Pastikan kamu sudah login kedalam dashboard Blog kamu.
  • Buka Menu Tema dan pilih Edit HTML
  • Cari Kode </style> dan salin CSS dibawah ini
  • input{height:38px;font-size:14px;width:100%;box-sizing:border-box;border-radius:3px;border-width:1px;border-style:solid;border-color:transparent}
    input[type="text"]{padding:2px 12px;margin-bottom:8px;border-color:#c9c9c9;box-shadow:inset 0 1px 3px rgba(0,0,0,0.25)}
    input[type="submit"]{color:#fff;font-weight:bold;font-family:'Open Sans',sans-serif;border-color:#1c385c;box-shadow:inset 0 1px 0 #7fade7;text-shadow:0 -1px #34629f;background:linear-gradient(to top,#3e74bb 0,#4887dd 100%)}
    #newsletter{min-width:250px;max-width:720px;height:100%;margin:0 auto;background:#fff;position:relative;border:1px #ccc solid;border-radius:6px;z-index:20}
    #newsletter:before{display:block;content:"";height:5px;width:100%;top:-20px;right:-20px;left:-20px;border-top-right-radius:4px;border-top-left-radius:4px;background:repeating-linear-gradient(-225deg,#4782ce,#4782ce 12px,#fff 12px,#fff 24px,#ea222e 24px,#ea222e 36px,#fff 36px,#fff 48px)}
    #newsletter .seal{position:absolute;top:-1px;right:0}
    #newsletter .seal:before,#newsletter .seal:after{display:block;content:"";border:1px solid #dcdcdc;border-radius:50%;position:absolute}
    #newsletter .seal:before{width:50px;height:50px;top:8px;right:8px}
    #newsletter .seal:after{width:60px;height:60px;top:3px;right:3px}
    #newsletter .seal i{position:absolute;font-size:24px;color:#afafaf;top:20px;right:22px;transform:rotate(12deg)}
    #newsletter form{padding:24px 20px 20px}
    #newsletter form .title{font-size:24px;font-weight:100;color:#4783ce;margin-bottom:5px}
    #newsletter form label{display:block;font-size:16px;line-height:24px;color:#818181;margin-bottom:20px}
    .shadow{width:240px;height:30px;margin:0 auto;box-shadow:10px 10px 15px rgba(0,0,0,0.4);border-radius:50%;position:relative;top:-30px;z-index:10}
  • Simpan Tema, lalu buka menu Tata Letak
  • Tambahkan Gadget baru dan pilih HTML/JavaScript
  • Berikan Judul Berlangganan
  • Isi kolom text kosong dengan kode HTML dibawah ini
  • <div id="newsletter">
      <form action="https://feedburner.google.com/fb/a/mailverify?uri=kangwira" class='subscribe-form'method='post' onsubmit='window.open (&apos;https://feedburner.google.com/fb/a/mailverify?uri=kangwira&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <div class="seal">
          <i class="fa fa-envelope-o"></i>
        </div>
        <div class="title">
          Berlangganan Gratis
        </div>
        <label for="email">
          Kirim alamat email kamu, saya pastikan kamu tidak ketinggalan artikel terbaru Kang Wira
        </label>
          <input name='uri' type='hidden' value='Kang Wira'/><input name='loc' type='hidden' value='en_US'/>
        <input autocomplete='off' class='subscribe-css-email-field' name='email' type="text" placeholder="Masukkan Email Kamu disini" />
        <input class='subscribe-css-email-button' title='' type="submit" value="Berlangganan Sekarang" />
      </form>
    </div>
    <div class="shadow"></div>
  • Simpan Widget dan lihat hasilnya

Ohya, Widget ini juga wajib memanggil css Font Awesome, jadi kamu harus menempatkan link Font Awesome kedalam template kamu.

Caranya mudah, kamu cukup salin kode FontAwesome dibawah ini dan letakkan tepat dibawah kode <head> yang ada didalam Menu Edit HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

PERHATIAN
Perhatikan pada tulisan kangwira dan Kang Wira yang ditandai pada Kolom HTML diatas adalah ID Feedburner yang kamu dapat saat mendaftarkan blog kamu ke Feedburner.

Sebagai percobaan, silahkan kamu masukkan email kamu kedalam kolom text dan klik tombol Berlangganan Sekarang.

Jika muncul jendela baru yang berisi halaman konfirmasi dari Feedburner, berarti widget kamu sudah bekerja dengan baik.

Namun jika widget Subscribe Box ini tidak bekerja dengan baik didalam template kamu, kamu bisa tanyakan di kolom komentar dibawah artikel ini.

Jangan lupa untuk Berlangganan artikel blog ini dengan mengisi alamat email kamu di kolom Berlangganan Gratis dibawah ini.
Semoga bermanfaat.