Tombol LIVE Chat Media Social di Blog

Posted by at
Disini saya akan sharing sedikit ttg cara membuat Tombol LIVE Chat Media Social.
Langsung aja kita coba..

"Untuk sementara ini baru Whatsapp aja yg bisa secara langsung mengirimkan pesan."

1. CSS

Edit HTML Yg ada di bagian Template di Blogger.
Copy kode CSS di bawah ini, lalu Pastekan tepat di bawah <style>


:root {
    --wenxploitKontak-WA: #25D366; /* Warna WhatsApp */
    --wenxploitKontak-Tele: #0088CC; /* Warna Telegram */
    --wenxploitKontak-Messenger: #0084FF; /* Warna Messenger */
    --wenxploitKontak-WA-uname: "6285000000xxx"; /* Nomor WhatsApp */
    --wenxploitKontak-WA-text: "Hai,%20saya%20menghubungi%20*melalui*%20halaman%20kontak%20di%20blog%20*wenxploit.site*"; /* Pesan WhatsApp */
    --wenxploitKontak-Tele-uname: "wenxploit"; /* Username Telegram */
    --wenxploitKontak-Messenger-uname: "WenDev.89"; /* Username Messenger */
}
#wenxploitKontak {text-align:center; width:100%; line-height:0px}
#wenxploitKontak svg {width:55px;height:55px}
#wenxploitKontak a {text-decoration:none}
#wenxploitKontak .WA svg path {fill:var(--wenxploitKontak-WA)}
#wenxploitKontak .Tele svg path {fill:var(--wenxploitKontak-Tele)}
#wenxploitKontak .Messenger svg path {fill:var(--wenxploitKontak-Messenger)}
#wenxploitKontak .WA, #wenxploitKontak .Line, #wenxploitKontak .Tele, #wenxploitKontak .Messenger, #wenxploitKontak .BBM {display:inline-block; width:90px; text-align:center; margin:0 5px}
#wenxploitKontak .onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    margin-top:5px;
}
#wenxploitKontak .onoffswitch-checkbox {
    display: none;
}
#wenxploitKontak .onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
#wenxploitKontak .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;
}
#wenxploitKontak .WA .onoffswitch-label {
    display: block; overflow: hidden;
    border: 2px solid var(--wenxploitKontak-WA); border-radius: 20px;
}
#wenxploitKontak .WA .onoffswitch-inner:before {
    content: var(--wenxploitKontak-WA-uname);
    background-color: var(--wenxploitKontak-WA); color: #FFFFFF;
    font-size:11px;
}
#wenxploitKontak .WA .onoffswitch-inner:after {
    content: "WhatsApp";
    color: var(--wenxploitKontak-WA);
    font-size:14px;
}
#wenxploitKontak .WA:hover .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
#wenxploitKontak .Tele .onoffswitch-label {
    display: block; overflow: hidden;
    border: 2px solid var(--wenxploitKontak-Tele); border-radius: 20px;
}
#wenxploitKontak .Tele .onoffswitch-inner:before {
    content: var(--wenxploitKontak-Tele-uname);
    background-color: var(--wenxploitKontak-Tele); color: #FFFFFF;
    font-size:11px;
}
#wenxploitKontak .Tele .onoffswitch-inner:after {
    content: "Telegram";
    color: var(--wenxploitKontak-Tele);
    font-size:14px;
}
#wenxploitKontak .Tele:hover .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
#wenxploitKontak .Messenger .onoffswitch-label {
    display: block; overflow: hidden;
    border: 2px solid var(--wenxploitKontak-Messenger); border-radius: 20px;
}
#wenxploitKontak .Messenger .onoffswitch-inner:before {
    content: var(--wenxploitKontak-Messenger-uname);
    background-color: var(--wenxploitKontak-Messenger); color: #FFFFFF;
    font-size:11px;
}
#wenxploitKontak .Messenger .onoffswitch-inner:after {
    content: "Messenger";
    color: var(--wenxploitKontak-Messenger);
    font-size:14px;
}
#wenxploitKontak .Messenger:hover .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

2. HTML

Copy kode di bawah ini dimana maunya Tombol LIVE Chat nya mau di tampilkan


<div id="wenxploitKontak">

<div class="WA">
        <a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#wenxploitKontak .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--wenxploitKontak-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="Tele">
         <a href="javascript:void(0)" onclick="window.open('https://telegram.me/'+getComputedStyle(document.querySelector('#wenxploitKontak .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('#wenxploitKontak .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>

Labels:

0 comments:

Posting Komentar

Katakan Unek-unek mu