Cara Memasang Widget Messaging App Chat Langsung di Blogger

Apa Itu Messaging App?

Messaging App adalah aplikasi untuk mengirimkan pesan antar pengguna. Contohnya WhatsApp, Telegram, Line, Facebook Messanger, Skype, WeChat dan lain sebagainya. Kita sering menyebutnya dengan sebutan Aplikasi Chatting.

Pertanyaannya,
Penting nggak sih mencantumkan kontak langsung yang mengarah ke messaging app di blog?

Jawabannya,
Sangat Penting !

Apalagi jika kamu bikin blog dengan tujuan untuk mencari uang. Seperti menjual jasa maupun jual barang (online shop misalnya). Dengan adanya link chat langsung, pengunjung akan bisa langsung menghubungi kalian hanya dengan sekali klik saja. Itu artinya, pengunjung tidak perlu save nomor atau add username terlebih dahulu.

Cukup satu klik tombolnya, mereka akan dibawa ke link yang menuju chatting langsung. Dengan sekali klik, pengunjung bisa langsung Input Format Pemesanan Otomatis dan biasanya para penggiat online shop menerapkan format khusus untuk pemesanan.

Misalnya, mereka meminta calon pembeli untuk mengisi data sebagai berikut:

Nama :
Telepon :
Alamat :
Nama Barang :
Ukuran :

Nah, toko online kalian seperti itu kan. Karena ini sudah jadi standar semua toko online agar memudahkan dalam mengelola database pemesanannya. Biasanya kamu sering dibingungkan nggak sih kalau ada calon pembeli yang tidak menulis formatnya dengan benar? Memang hal sepele. Tetapi buat kita sangat penting, agar datanya tidak acak-acakan.

Sekarang kalian bisa membuat calon pembeli mengetikkan format dengan benar tanpa perlu meminta mereka menulisnya secara manual.

Tapi perlu kalian ketahui sebelumnya, bahwa custom message yang otomatis menulis pesan seperti itu baru cuma WhatsApp. Untuk Messaging App lainnya belum bisa.

Cara Membuat Tombol Link yang Langsung Mengarah ke Aplikasi Chat

# CSS

Langkah pertama, tambahkan dulu style-nya melalui pengaturan CSS. Bagi platform lain, silahkan masuk ke menu masing-masing ya. Berikut ini adalah platform Blogger/Blogspot.

Masuk ke Menu Tema, Lalu pilih Edit HTML.
Simpan kode berikut ini setelah atau di bawah <style>.

/* Tombol Menuju Chat Langsung ke Messaging App modified by elzeno.id */
:root {
    --elzenoKontak-WA: #25D366; /* Warna WhatsApp */
    --elzenoKontak-Line: #00C300; /* Warna Line */
    --elzenoKontak-Tele: #0088CC; /* Warna Telegram */
    --elzenoKontak-Messenger: #0084FF; /* Warna Messenger */    
    --elzenoKontak-WA-uname: "628123412xxxx"; /* Nomor WhatsApp */
    --elzenoKontak-WA-text: "Assalamu%27alaikum%20Wr.%20Wb.,%0ASaya%20menghubungi%20Anda%20*melalui*%20halaman%20di%20blog%20*elzeno.id*"; /* Pesan WhatsApp */
    --elzenoKontak-Line-uname:: "elzeno"; /* Username Line */
    --elzenoKontak-Tele-uname:: "@elzeno"; /* Username Telegram */
    --elzenoKontak-Messenger-uname: "elzeno88"; /* Username Messenger */
}
#elzenoKontak {text-align:center; width:100%; line-height:0px}
#elzenoKontak svg {width:55px;height:55px}
#elzenoKontak a {text-decoration:none}
#elzenoKontak .WA svg path {fill:var(--elzenoKontak-WA)}
#elzenoKontak .Line svg {width: 70px; height: 70px; margin-bottom: -20px; margin-left:20px} 
#elzenoKontak .Line svg path {fill:var(--elzenoKontak-Line)}
#elzenoKontak .Tele svg path {fill:var(--elzenoKontak-Tele)}
#elzenoKontak .Messenger svg path {fill:var(--elzenoKontak-Messenger)}
#elzenoKontak .WA, #elzenoKontak .Line, #elzenoKontak .Tele, #elzenoKontak .Messenger {display:inline-block; width:90px; text-align:center; margin:0 5px}
#elzenoKontak .onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    margin-top:5px;
}
#elzenoKontak .onoffswitch-checkbox {
    display: none;
}
#elzenoKontak .onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
#elzenoKontak .onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;
    color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; text-align: center;
    box-sizing: border-box;
}
#elzenoKontak .WA .onoffswitch-label {
    display: block; overflow: hidden;
    border: 2px solid var(--elzenoKontak-WA); border-radius: 20px;
}
#elzenoKontak .WA .onoffswitch-inner:before {
    content: var(--elzenoKontak-WA-uname);
    background-color: var(--elzenoKontak-WA); color: #FFFFFF;
    font-size:11px;
}
#elzenoKontak .WA .onoffswitch-inner:after {
    content: "WhatsApp";
    color: var(--elzenoKontak-WA);
    font-size:14px;
}
#elzenoKontak .WA:hover .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
#elzenoKontak .Line .onoffswitch-label {
    display: block; overflow: hidden;
    border: 2px solid var(--elzenoKontak-Line); border-radius: 20px;
}
#elzenoKontak .Line .onoffswitch-inner:before {
    content: var(--elzenoKontak-Line-uname);
    background-color: var(--elzenoKontak-Line); color: #FFFFFF;
    font-size:11px;
}
#elzenoKontak .Line .onoffswitch-inner:after {
    content: "Line";
    color: var(--elzenoKontak-Line);
    font-size:14px;
}
#elzenoKontak .Line:hover .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
#elzenoKontak .Tele .onoffswitch-label {
    display: block; overflow: hidden;
    border: 2px solid var(--elzenoKontak-Tele); border-radius: 20px;
}
#elzenoKontak .Tele .onoffswitch-inner:before {
    content: var(--elzenoKontak-Tele-uname);
    background-color: var(--elzenoKontak-Tele); color: #FFFFFF;
    font-size:11px;
}
#elzenoKontak .Tele .onoffswitch-inner:after {
    content: "Telegram";
    color: var(--elzenoKontak-Tele);
    font-size:14px;
}
#elzenoKontak .Tele:hover .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
#elzenoKontak .Messenger .onoffswitch-label {
    display: block; overflow: hidden;
    border: 2px solid var(--elzenoKontak-Messenger); border-radius: 20px;
}
#elzenoKontak .Messenger .onoffswitch-inner:before {
    content: var(--elzenoKontak-Messenger-uname);
    background-color: var(--elzenoKontak-Messenger); color: #FFFFFF;
    font-size:11px;
}
#elzenoKontak .Messenger .onoffswitch-inner:after {
    content: "Messenger";
    color: var(--elzenoKontak-Messenger);
    font-size:14px;
}
#elzenoKontak .Messenger:hover .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

Save dengan klik tombol Simpan.

Pengaturan

Silahkan kalian ganti tulisan yang berwarna BIRU dengan nomor atau username masing-masing.
Setelah itu ganti tulisan yang berwarna MERAH dengan tulisan yang akan terkirim ke WhatsApp saat memulai chatting.

Format Penulisan

Untuk tulisan yang dikirim harus sudah di encode. Seperti contoh diatas %20 merupakan tanda ganti untuk spasi. Berikut ini kode lainnya yang bisa digunakan:

%0A untuk baris baru (enter atau line break)
%25 untuk persen (%)
%26 untuk dan (&)
%3A untuk titik dua (:)
%3B untuk titik koma (;)
%3F untuk tanda tanya (?)
%27 untuk tanda petik (')
%20 untuk spasi ( )

Kode lainnya bisa kalian lihat di w3schools.com

Kalian juga bisa menggunakan format text bawaan pada WhatsApp. Misalnya:

* : *elzeno* untuk membuat huruf tebal (bold) elzeno
_ : _elzeno_ untuk membuat huruf miring (italic) elzeno
~ : ~elzeno~ untuk membuat huruf tercoret (strikethrough) ~~elzeno~~
''' : '''elzeno''' untuk membuat huruf dengan font monospace

# HTML

Selanjutnya adalah kode HTML yang digunakan untuk memanggil atau memunculkan tombol menuju chat langsung ke WhatsApp dan aplikasi lainnya. Kalian bisa pasang dan simpan kode ini dimana saja. Entah itu di widget, halaman post, atau halaman statis (page). Kalian juga tidak perlu untuk mengubah apapun karena kalian sudah mengaturnya pada CSS diatas.

<div id="elzenoKontak">
    <div class="WA">
        <a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#elzenoKontak .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--elzenoKontak-WA-text').replace('&quot;','').replace('&quot;',''))" title="WhatsApp" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
    <div class="Line">
        <a href="javascript:void(0)" onclick="window.open('http://line.me/ti/p/~'+getComputedStyle(document.querySelector('#elzenoKontak .Line .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Line" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M 12.91 6.57 c 0.232 0 0.42 0.19 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 h -1.17 v 0.75 h 1.17 c 0.232 0 0.42 0.188 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 h -1.59 c -0.23 0 -0.418 -0.19 -0.418 -0.42 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 h 1.59 c 0.23 0 0.418 0.19 0.418 0.42 c 0 0.232 -0.188 0.42 -0.42 0.42 h -1.17 v 0.75 h 1.17 Z m -2.57 2.01 c 0 0.18 -0.116 0.34 -0.288 0.398 c -0.043 0.014 -0.088 0.02 -0.133 0.02 c -0.14 0 -0.26 -0.06 -0.34 -0.167 L 7.95 6.62 v 1.96 c 0 0.23 -0.186 0.42 -0.42 0.42 c -0.23 0 -0.417 -0.19 -0.417 -0.42 V 5.4 c 0 -0.18 0.115 -0.34 0.286 -0.397 c 0.04 -0.015 0.09 -0.022 0.13 -0.022 c 0.13 0 0.25 0.07 0.33 0.17 L 9.5 7.37 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 c 0.23 0 0.42 0.19 0.42 0.42 v 3.18 Z m -3.828 0 c 0 0.23 -0.188 0.42 -0.42 0.42 c -0.23 0 -0.418 -0.19 -0.418 -0.42 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 c 0.23 0 0.418 0.19 0.418 0.42 v 3.18 Z M 4.868 9 h -1.59 c -0.23 0 -0.42 -0.19 -0.42 -0.42 V 5.4 c 0 -0.23 0.19 -0.42 0.42 -0.42 c 0.232 0 0.42 0.19 0.42 0.42 v 2.76 h 1.17 c 0.232 0 0.42 0.188 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 M 16 6.87 C 16 3.29 12.41 0.376 8 0.376 S 0 3.29 0 6.87 c 0 3.208 2.846 5.896 6.69 6.405 c 0.26 0.056 0.615 0.172 0.705 0.394 c 0.08 0.2 0.053 0.51 0.026 0.72 l -0.11 0.68 c -0.03 0.2 -0.16 0.79 0.7 0.43 c 0.86 -0.36 4.61 -2.72 6.29 -4.65 C 15.45 9.59 16 8.3 16 6.87"></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
    <div class="Tele">
         <a href="javascript:void(0)" onclick="window.open('https://telegram.me/'+getComputedStyle(document.querySelector('#elzenoKontak .Tele .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Telegram" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
    <div class="Messenger">
        <a href="javascript:void(0)" onclick="window.open('https://m.me/'+getComputedStyle(document.querySelector('#elzenoKontak .Messenger .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Messenger" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" ></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
</div>

# Demo/Preview

Itulah cara membuat link chat langsung menuju Messaging App ala elzeno. Kalian bebas untuk memakainya, tapi dengan catatan "TIDAK MENGUBAH APAPUN" kecuali diminta untuk diubah sesuai tutorial. Semoga bermanfaat dan terima kasih atas kunjungan Anda.

Sumber :
https://www.igniel.com/2017/12/tombol-chat-langsung-ke-aplikasi.html

Lanjut ke Link Tujuan

Anda mungkin tertarik artikel ini :

Terima kasih telah membaca artikel kami yang berjudul: Cara Memasang Widget Messaging App Chat Langsung di Blogger, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.

Dukung kami dengan memilih salah satu metode donasi di bawah ini:

Donasi via Saweria Donasi via Trakteer Donasi via PayPal

Dana / OVO / GoPay 0858 6878 6809

Posting Komentar

Cara Berkomentar bagi yang tidak memiliki blog:
1. Klik select profile --> pilih "Name/URL".
2. Isi nama Anda dan isi dengan alamat facebook Anda.
3. Klik "Lanjutkan".
4. Ketik komentar Anda.
5. Klik "Publish".
6. Centang "CAPTCHA" yang menyatakan bahwa Anda bukan robot.
7. Klik "Publish".

Blog Tutorial

Cara Memasang Widget Messaging App Chat Langsung di Blogger

Apa Itu Messaging App?

Cara Membuat Tombol Link yang Langsung Mengarah ke Aplikasi Chat

# CSS

Pengaturan

Format Penulisan

# HTML

# Demo/Preview

Posting Komentar

Download Font Arab Standar Al-Quran dan Font Kitab dengan Bahasa Melayu

Download Rumus Fungsi Terbilang Rupiah di Excel Indonesia

Cara Setting Page Layout Buku Saku (A6) Ms. Word Serta Membuat Cover dengan Photoshop

Download Font Aksara Jawa Hanacaraka Tanpa Instal Languages

Instal Sony Vegas Pro 13 + Crack (Full Version)

elzeno.id