GoTutMembuat Tombol Chat langsung
/* Tombol Menuju Chat Langsung ke Messaging App Ala Igniel
Dilarang keras mengubah nama atribut yang ada di dalam kode ini */
:root {
--ignielKontak-WA: #25D366; /* Warna WhatsApp */
--ignielKontak-Line: #00C300; /* Warna Line */
--ignielKontak-Tele: #0088CC; /* Warna Line */
--ignielKontak-Messenger: #0084FF; /* Warna Messenger */
--ignielKontak-BBM: #000000; /* Warna BBM */
--ignielKontak-WA-uname: "62817203312"; /* Nomor WhatsApp */
--ignielKontak-WA-text: "Hai,%20saya%20menghubungi%20*melalui*%20halaman%20kontak%20di%20blog%20*www.irinmedia.blogspot.com*"; /* Pesan WhatsApp */
--ignielKontak-Line-uname: "irinmedia"; /* Username Line */
--ignielKontak-Tele-uname: "irinmedia"; /* Username Telegram */
--ignielKontak-Messenger-uname: "irinmedia"; /* Username Messenger */
--ignielKontak-BBM-uname: "222xxxx"; /* Pin BBM */
}
#ignielKontak {text-align:center; width:100%; line-height:0px}
#ignielKontak svg {width:55px;height:55px}
#ignielKontak a {text-decoration:none}
#ignielKontak .WA svg path {fill:var(--ignielKontak-WA)}
#ignielKontak .Line svg {width: 70px; height: 70px; margin-bottom: -20px; margin-left:20px} #ignielKontak .Line svg path {fill:var(--ignielKontak-Line)}
#ignielKontak .Tele svg path {fill:var(--ignielKontak-Tele)}
#ignielKontak .Messenger svg path {fill:var(--ignielKontak-Messenger)}
#ignielKontak .BBM svg path {fill:var(--ignielKontak-BBM)}
#ignielKontak .WA, #ignielKontak .Line, #ignielKontak .Tele, #ignielKontak .Messenger, #ignielKontak .BBM {display:inline-block; width:90px; text-align:center; margin:0 5px}
#ignielKontak .onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
margin-top:5px;
}
#ignielKontak .onoffswitch-checkbox {
display: none;
}
#ignielKontak .onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
#ignielKontak .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;
}
#ignielKontak .WA .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--ignielKontak-WA); border-radius: 20px;
}
#ignielKontak .WA .onoffswitch-inner:before {
content: var(--ignielKontak-WA-uname);
background-color: var(--ignielKontak-WA); color: #FFFFFF;
font-size:11px;
}
#ignielKontak .WA .onoffswitch-inner:after {
content: "WhatsApp";
color: var(--ignielKontak-WA);
font-size:14px;
}
#ignielKontak .WA:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#ignielKontak .Line .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--ignielKontak-Line); border-radius: 20px;
}
#ignielKontak .Line .onoffswitch-inner:before {
content: var(--ignielKontak-Line-uname);
background-color: var(--ignielKontak-Line); color: #FFFFFF;
font-size:11px;
}
#ignielKontak .Line .onoffswitch-inner:after {
content: "Line";
color: var(--ignielKontak-Line);
font-size:14px;
}
#ignielKontak .Line:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#ignielKontak .Tele .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--ignielKontak-Tele); border-radius: 20px;
}
#ignielKontak .Tele .onoffswitch-inner:before {
content: var(--ignielKontak-Tele-uname);
background-color: var(--ignielKontak-Tele); color: #FFFFFF;
font-size:11px;
}
#ignielKontak .Tele .onoffswitch-inner:after {
content: "Telegram";
color: var(--ignielKontak-Tele);
font-size:14px;
}
#ignielKontak .Tele:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#ignielKontak .Messenger .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--ignielKontak-Messenger); border-radius: 20px;
}
#ignielKontak .Messenger .onoffswitch-inner:before {
content: var(--ignielKontak-Messenger-uname);
background-color: var(--ignielKontak-Messenger); color: #FFFFFF;
font-size:11px;
}
#ignielKontak .Messenger .onoffswitch-inner:after {
content: "Messenger";
color: var(--ignielKontak-Messenger);
font-size:14px;
}
#ignielKontak .Messenger:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#ignielKontak .BBM .onoffswitch-label {
display: block; overflow: hidden;
border: 2px solid var(--ignielKontak-BBM); border-radius: 20px;
}
#ignielKontak .BBM .onoffswitch-inner:before {
content: var(--ignielKontak-BBM-uname);
background-color: var(--ignielKontak-BBM); color: #FFFFFF;
font-size:11px;
}
#ignielKontak .BBM .onoffswitch-inner:after {
content: "BBM";
color: var(--ignielKontak-BBM);
font-size:14px;
}
#ignielKontak .BBM:hover .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
bisa di masukan di halaman Post contact ataupun widget
<div id="ignielKontak">
<div class="WA">
<a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#ignielKontak .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--ignielKontak-WA-text').replace('"','').replace('"',''))" 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('#ignielKontak .Line .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" 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('#ignielKontak .Tele .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" 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('#ignielKontak .Messenger .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" 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('#ignielKontak .BBM .onoffswitch-inner'), ':before').getPropertyValue('content').replace('"','').replace('"',''))" 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>
Sumber : https://www.igniel.com/2017/12/tombol-chat-langsung-ke-aplikasi.html
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.
Older Posts
Older Posts
Comments