Tombol Link chat ke applikasi messaging pada blogger ~ Jasa Pembuatan SoftWare

Messaging App adalah aplikasi untuk mengirim pesan. Seperti WhatsApp, Line, Telegram, Facebook Messenger, BBM, dan sebagainya. Aplikasi Messaging sangat membantu pembaca untuk menghubungi Contact Person Pengiklan. Hampir semua website yang berupa Jasa/Service, maupun Jual Beli pasti selalu mencantumkan kontak person yang bisa di hubungi. Dengan adanya link chat ke applikasi messaging, pengunjung akan bisa mudah menghubungi pengiklan hanya dengan sekali klik tanpa perlu simpan nomor atau menambah username terlebih dulu, mereka akan diantarkan ke link yang menuju chat.

Langkah-langkah memasang Tombol Link chat ke applikasi messaging pada Blog :
1. buka Blogger ⏩Template ⏩Edit HTML, Kemudian cari kode ]]></b:skin> kemudian temukan kode <style> atau kode <style type='text/css'>.
2. copykan kode CSS berikut ini dibawah kode yang anda temukan.

 /* Tombol Link chat ke applikasi messaging PiratesCode */
:root {
    --pccontact-WA: #2cda6d; /* Warna WhatsApp */
    --pccontact-Line: #00d500; /* Warna Line */
    --pccontact-Tele: #008fd5; /* Warna Telegram */
    --pccontact-Messenger: #2d9bff; /* Warna Messenger */
    --pccontact-BBM: #000000; /* Warna BBM */
    --pccontact-WA-usrname: "6281200000xxx"; /* Nomor WhatsApp */
    --pccontact-WA-text: "Assalamualaikum.Wr.Wb,%20saya%20telah%20menghubungi%20*anda%20melalui*%20halaman%20kontak%20pada%20website*"; /* Pesan WhatsApp */
    --pccontact-Line-usrname: "userLINEanda"; /* Username Line */
    --pccontact-Tele-usrname: "userTELEGRAManda"; /* Username Telegram */
    --pccontact-Messenger-usrname: "userMESSENGERanda"; /* Username Messenger */
    --pccontact-BBM-usrname: "222xxxx"; /* Pin BBM */
}
#pccontact {text-align:center; width:100%; line-height:0px}
#pccontact svg {width:55px;height:55px}
#pccontact a {text-decoration:none}
#pccontact .WA svg path {fill:var(--pccontact-WA)}
#pccontact .Line svg {width: 70px; height: 70px; margin-bottom: -20px; margin-left:20px} #pccontact .Line svg path {fill:var(--pccontact-Line)}
#pccontact .Tele svg path {fill:var(--pccontact-Tele)}
#pccontact .Messenger svg path {fill:var(--pccontact-Messenger)}
#pccontact .BBM svg path {fill:var(--pccontact-BBM)}
#pccontact .WA, #pccontact .Line, #pccontact .Tele, #pccontact .Messenger, #pccontact .BBM {display:inline-block; width:90px; text-align:center; margin:0 5px}
#pccontact .onoffswitch {    position: relative; width: 90px;    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;    margin-top:5px;}
#pccontact .onoffswitch-checkbox {    display: none;}
#pccontact .onoffswitch-inner {    display: block; width: 200%; margin-left: -100%;    transition: margin 0.3s ease-in 0s;}
#pccontact .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;}
#pccontact .WA .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-WA); border-radius: 20px;}
#pccontact .WA .onoffswitch-inner:before {    content: var(--pccontact-WA-usrname);    background-color: var(--pccontact-WA); color: #FFFFFF;    font-size:11px;}
#pccontact .WA .onoffswitch-inner:after {    content: "WhatsApp";    color: var(--pccontact-WA);    font-size:14px;}
#pccontact .WA:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .Line .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-Line); border-radius: 20px;}
#pccontact .Line .onoffswitch-inner:before {    content: var(--pccontact-Line-usrname);    background-color: var(--pccontact-Line); color: #FFFFFF;    font-size:11px;}
#pccontact .Line .onoffswitch-inner:after {    content: "Line";    color: var(--pccontact-Line);    font-size:14px;}
#pccontact .Line:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .Tele .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-Tele); border-radius: 20px;}
#pccontact .Tele .onoffswitch-inner:before {    content: var(--pccontact-Tele-usrname);    background-color: var(--pccontact-Tele); color: #FFFFFF;    font-size:11px;}
#pccontact .Tele .onoffswitch-inner:after {    content: "Telegram";    color: var(--pccontact-Tele);    font-size:14px;}
#pccontact .Tele:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .Messenger .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-Messenger); border-radius: 20px;}
#pccontact .Messenger .onoffswitch-inner:before {    content: var(--pccontact-Messenger-usrname);    background-color: var(--pccontact-Messenger); color: #FFFFFF;    font-size:11px;}
#pccontact .Messenger .onoffswitch-inner:after {    content: "Messenger";    color: var(--pccontact-Messenger);    font-size:14px;}
#pccontact .Messenger:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .BBM .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-BBM); border-radius: 20px;}
#pccontact .BBM .onoffswitch-inner:before {    content: var(--pccontact-BBM-usrname);    background-color: var(--pccontact-BBM); color: #FFFFFF;    font-size:11px;}
#pccontact .BBM .onoffswitch-inner:after {    content: "BBM";    color: var(--pccontact-BBM);    font-size:14px;}
#pccontact .BBM:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}

Format Penulisan
Tulisan yang dikirim harus sudah di-encode. Dalam contoh diatas, %20 merupakan tanda ganti untuk spasi. Berikut kode lain yang bisa digunakan:
%0A untuk baris baru (enter / line break).

%25 untuk persen (%)

%26 untuk dan (&)

%3A untuk titik dua (:)

%3B untuk titk koma.

%3F untuk tanda tanya (?)

Kode lainnya bisa kamu lihat di w3schools.com

Selain itu, anda juga dapat menggunakan format text bawaan pada WhatsApp. Contohnya:
*: *piratescode* untuk membuat huruf tebal (bold) piratescode

_: piratescode untuk membuat huruf miring (italic) piratescode

~: ~piratescode~ untuk membuat huruf tercoret (strikethrough) ~~piratescode~~

```: ```piratescode``` untuk membuat huruf monospace piratescode

untuk memanggil perintah tombol menuju chat langsung ke WhatsApp dan aplikasi lainnya. Tambahkan kode HTML ini dimanapun yang anda inginkan. Bisa di widget, postingan, atau halaman statis. Tanpa mengubah kode apapun, karena kode tersebut sudah diatur pada kode CSS sebelumnya.

 <div id="pccontact">
    <div class="WA">
        <a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#pccontact .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--pccontact-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('#pccontact .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('#pccontact .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('#pccontact .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 class="BBM">
        <a href="javascript:void(0)" onclick="window.open('http://pin.bbm.com/'+getComputedStyle(document.querySelector('#pccontact .BBM .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="BBM" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M5.45,10.28C6.4,10.28 7.5,11.05 7.5,12C7.5,12.95 6.4,13.72 5.45,13.72H2L2.69,10.28H5.45M6.14,4.76C7.09,4.76 8.21,5.53 8.21,6.5C8.21,7.43 7.09,8.21 6.14,8.21H2.69L3.38,4.76H6.14M13.03,4.76C14,4.76 15.1,5.53 15.1,6.5C15.1,7.43 14,8.21 13.03,8.21H9.41L10.1,4.76H13.03M12.34,10.28C13.3,10.28 14.41,11.05 14.41,12C14.41,12.95 13.3,13.72 12.34,13.72H8.72L9.41,10.28H12.34M10.97,15.79C11.92,15.79 13.03,16.57 13.03,17.5C13.03,18.47 11.92,19.24 10.97,19.24H7.5L8.21,15.79H10.97M18.55,13.72C19.5,13.72 20.62,14.5 20.62,15.45C20.62,16.4 19.5,17.17 18.55,17.17H15.1L15.79,13.72H18.55M19.93,8.21C20.88,8.21 22,9 22,9.93C22,10.88 20.88,11.66 19.93,11.66H16.5L17.17,8.21H19.93Z" ></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>

Tags: Blogger

Jasa Pembuatan SoftWare

Pages

18 July 2018