Selasa, 19 Desember 2017

Menyapa Pengunjung Menggunakan Widget Welcome Note Dibawah Judul Artikel

Menyapa kepada setiap pengunjung yang datang untuk membaca artikel kita adalah suatu hal yang sangat sopan menurut saya.

Apalagi jika kita menggunakan Widget Welcome Note yang bertugas untuk menyapa pengunjung diwaktu yang tepat, seperti mengucapkan Selamat Pagi, Selamat Siang, Selamat Datang dan lain sebagainya.

Teman-teman bisa lihat Contoh dari Widget Welcome Note yang saya gunakan diatas, posisinya tepat berada dibawah Judul artikel.

Menyapa Pengunjung Menggunakan Widget Welcome Note Dibawah Judul Artikel

Saya Pernah mampir ke sebuah blog yang menggunakan Welcome Alert untuk menyapa pengunjung.

Saat itu saya langsung di kejutkan dengan Munculnya Windows Baru seperti sebuah notifikas peringatan yang isinya adalah sebuah sambutan kepada pengunjung.

Pengunjung harus mengikuti arahan dari Notifikasi tersebut dengan menekan tombol ok. Tapi sayangnya Welcome Alert itu tidak hanya muncul sekali, karena hampir disetiap loading page akan muncul Welcome Alert ini.

Menurut saya, jika seorang blogger menggunakan Welcome Alert untuk menyambut pengunjung, hal ini justru dapat mengganggu pengunjung. Kalau menurut teman-teman bagaimana?

Tekan Tombol Demo dibawah ini agar kamu bisa melihat salah satu contoh dari Welcome Alert yang cukup mengganggu bagi pengunjung. Dan menurut saya Fungsi Welcome Alert ini memang tidak cocok untuk menyapa pengunjung.



Saya tidak melarang teman-teman untuk berkreasi dalam Modifikasi atau Re-design blog yang sedang kamu kembangkan demi memanjakan pengunjung. Tapi jangan sampai menyulitkan pengunjung untuk membaca artikelnya juga yah teman-teman.

Kamu harus selalu ingat dengan istilah Content is King.

Ohya, sebenarnya Welcome Alert yang saya maksud diatas itu juga saya terapkan kedalam script anti klik kanan yang sudah pernah saya bahas di blog ini.

Baca juga: Script Anti Klik Kanan


Jika saat ini kamu masih menggunakan fungsi Welcome Alert untuk Menyapa setiap pengunjung yang datang, coba deh kamu bayangkan jika pengunjung yang datang adalah seorang pembaca yang awam.

Apakah pengunjung tersebut akan mengikuti setiap arahan yang ada pada Welcome Alert tersebut demi membaca artikel yang mereka butuhkan atau justru akan langsung meninggalkan blog kamu tanpa basa basi?

Saya tidak akan memberikan jawaban dari pertanyaan ini yah teman-teman. Kamu bisa menggunakan logika kamu atau bisa juga memanfaatkan kemampuan kamu dalam bereksperimen.

Saran dari saya sih lebih baik teman-teman meninggalkan cara lama dan mulai menggunakan Widget Welcome Note yang akan saya share di artikel kali ini.

Widget Welcome Note ini sebenarnya menggunakan JavaScript yang fungsinya hanya untuk menentukan timing/waktu. Saya Pastikan bahwa JavaScript ini tidak akan menambah beban pada loading blog.

Berikut ini adalah tabel dari fungsi JavaScript yang digunakan untuk menjalankan Widget Welcome Note dibawah Judul Artikel.

Waktu Keterangan
00.00 sampai 04.59 memberikan sambutan Terima Kasih Telah Berkunjung
05.00 sampai 11.00 memberikan sambutan Selamat Pagi
11.01 sampai 15.00 memberikan sambutan Selamat Siang
15.01 sampai 18.00 memberikan sambutan Selamat Sore
18.01 sampai 00.00 memberikan sambutan Selamat Malam

Silahkan ikuti beberapa langkah ini jika kamu tertarik untuk memasang Widget Welcome Note dibawah Judul Artikel seperti yang saya gunakan pada blog ini.

  • Pastikan kamu sudah masuk ke dashboard blog.
  • Buka Template dan pilih Edit HTML.
  • Setelah Halaman Edit HTML terbuka dengan sempurna, cari kode tag Kondisional seperti ini <b:if cond='data:view.isPost'>.
  • PARSE terlebih dulu kode JavaScript dibawah ini.
  • <div id="welltime">
    <div class="blink"><script>var _0x3836=["\x67\x65\x74\x48\x6F\x75\x72\x73","\x54\x45\x52\x49\x4D\x41\x20\x4B\x41\x53\x49\x48\x20\x53\x55\x44\x41\x48\x20\x4D\x41\x4D\x50\x49\x52\x20\DI WWW.KANGWIRA.COM","\x53\x45\x4C\x41\x4D\x41\x54\x20\x50\x41\x47\x49","\x53\x45\x4C\x41\x4D\x41\x54\x20\x53\x49\x41\x4E\x47","\x53\x45\x4C\x41\x4D\x41\x54\x20\x53\x4F\x52\x45","\x53\x45\x4C\x41\x4D\x41\x54\x20\x4D\x41\x4C\x41\x4D","\x77\x72\x69\x74\x65"];var _0xcc10=[_0x3836[0],_0x3836[1],_0x3836[2],_0x3836[3],_0x3836[4],_0x3836[5],_0x3836[6]];function greeting(){Now=  new Date();Hour= Now[_0xcc10[0]]();if(Hour< 5){msg= _0xcc10[1]}else {if(Hour< 11){msg= _0xcc10[2]}else {if(Hour< 15){msg= _0xcc10[3]}else {if(Hour< 18){msg= _0xcc10[4]}else {if(Hour< 24){msg= _0xcc10[5]}}}}};return (msg)}document[_0xcc10[6]](greeting())
        </script></div>
    </div>
  • Letakkan Kode JavaScript diatas sebelum kode <div itemprop='description articleBody'>.
  • Biasanya akan ada 2 kode articleBody seperti contoh diatas, pilih saja articleBody yang kedua
  • Setelah itu Salin CSS dibawah ini dan letakkan sebelum kode </style> yang mana saja terserah kamu.
  • #welltime{padding:10px;margin-bottom:5px;background:#9A12B3;color:#ffffff;text-align:center;font-size:110%;font-weight:bold}
    .blink{animation-duration:0.3s;animation-name:kangwirablink;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}
    @keyframes kangwirablink{from{opacity:1}to{opacity:0.2}}
  • Simpan Template, lalu Lihat hasilnya.

Perhatikan yang saya tandai pada panel JavaScript dan CSS diatas. Kamu bisa rubah kalimat dan warna background atau warna text nya sesuai dengan keinginan kamu.

Ohya Jika kamu memasang JavaScript iklan otomatis di tengah artikel, silahkan simpan Kode JavaScript dari Widget Welcome Note ini sebelum kode Iklan Otomatis yang kamu gunakan.

Simpan kembali perubahan template, dan lihat hasilnya.

Nah mudah bukan cara menerapkan Widget Welcome Note yang saya share ini?

Baca juga: Menampilkan Adsense didalam Artikel Blog [worked]


Jangan sungkan untuk bertanya melalui kolom komentar dibawah ini teman-teman. Dan jangan lupa berikan Pendapat, Kritik dan Saran jika ada kekurangan pada artikel kali ini.

Supaya gak Ketinggalan Tutorial lainnya, silahkan kamu isi kan email kamu dikolom Berlangganan Gratis dibawah ini yah teman-teman.

6 komentar:

  1. Cieee sama visitor aja perhatian banget sampai disapa. Mantap kang wira :D

    BalasHapus
    Balasan
    1. Ahaha.. Kan supaya lebih Mesra sama visitor teh :p

      Hapus
  2. keren kang postingannya (y)
    mohon izin buat dipasang di blog yaaa

    BalasHapus
    Balasan
    1. iya mas akmal silahkan, jangan lupa kasih sumber yaa :D

      Hapus
  3. Wa ini persis seperti blog punya agan ya, saya tadi tertarik melihat seperti itu, ijin pasang ke blog ya

    BalasHapus
    Balasan
    1. iya mas.. saya juga pakai Welcome Note dan saya simpan di bawah judul artikel

      Hapus