Minggu, 28 Februari 2016
Fasilitas yang biasa diberikan seorang penulis kepada pengunjung blog yang saya maksud disini ialah sebuah widget yang sanggup menunjukkan aneka macam kemudahan bagi pengunjungnya.
Contohnya menyerupai pada artikel saya sebelumnya yaitu Widget Social Profile yang tampilannya biasa kau lihat pada sidebar artikel Kang Wira, atau Widget Subscribe Box Menarik menyerupai yang akan saya bahas kali ini.
Sebenarnya masih banyak sekali kemudahan / 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 perihal Manfaat Memasang Widget Subscribe Box di Blog. Mungkin sebagian besar Blogger yang berpengalaman sudah sangat tahu manfaat Subscribe Box ini.
Coba perhatikan klarifikasi dibawah ini.
Manfaat Memasang Subscribe Box
Sebenarnya ada banyak manfaat yang sanggup kau dapatkan sehabis kau memasang subscribe box didalam blog, contohnya ialah pengunjung akan gampang mendapat artikel terbaru secara up to date dikarenakan telah terdaftar kedalam list subscribe, dan secara otomatis pengujung tersebut akan mendapat pemberitahuan secara up to date setiap kau publikasikan artikel baru.Baca juga : Cara Membuat Space Iklan 125x125 di Sidebar
Dari situ kau sanggup lihat bahwa pembaca artikel yang pernah tiba keblog kau akan sering kembali untuk membaca artikel terbaru alasannya pembaca tersebut akan eksklusif mendapat pemberitahuan melalui email ketika artikel kau telah terbit.
Selain itu kau akan melihat bahwa trafik blog yang kau 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
Makara saya sarankan menciptakan akun Google Feedburner terlebih dulu sebelum memasang Widget Subscribe Box yang Menarik ini kedalam blog kamu. Untuk melihat tampilannya secara langsung, silahkan kau tekan tombol DEMO dibawah ini.
D E M O
Tertarik Memasang Widget ini ?
Apabila kau tertarik untuk memasang Subscribe Box dengan style menyerupai pada tombol Demo diatas, kau sanggup ikuti beberapa langkah dibawah ini.
- Pastikan kau 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}<div id="newsletter"> <form action="https://feedburner.google.com/fb/a/mailverify?uri=kangwira" class='subscribe-form'method='post' onsubmit='window.open ('https://feedburner.google.com/fb/a/mailverify?uri=kangwira', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 kau 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>Ohya, Widget ini juga wajib memanggil css Font Awesome, jadi kau harus menempatkan link Font Awesome kedalam template kamu.
Caranya mudah, kau cukup salin aba-aba FontAwesome dibawah ini dan letakkan sempurna dibawah aba-aba <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 goresan pena kangwira dan Kang Wira yang ditandai pada Kolom HTML diatas ialah ID Feedburner yang kau sanggup ketika mendaftarkan blog kau ke Feedburner.
Sebagai percobaan, silahkan kau masukkan email kau kedalam kolom text dan klik tombol Berlangganan Sekarang.
Jika muncul jendela gres yang berisi halaman konfirmasi dari Feedburner, berarti widget kau sudah bekerja dengan baik.
Namun jikalau widget Subscribe Box ini tidak bekerja dengan baik didalam template kamu, kau sanggup tanyakan di kolom komentar dibawah artikel ini.
Jangan lupa untuk Berlangganan artikel blog ini dengan mengisi alamat email kau di kolom Berlangganan Gratis dibawah ini.
Semoga bermanfaat.
Share This :
comment 0 Comment
more_vert