Halaman

    Social Items

Cara Membuat Tombol Chat Whatsapp dan SMS ke Admin

Memiliki Tombol chat Whatsapp dan SMS ke admin blog sangat bermanfaat untuk yang membuat blog untuk keperluan jualan atau online shop.

Dengan adanya tombol ini, customer ga perlu lagi susah payah menyalin atau mengetik ulang no hp penjual, jadi hal ini tentu saja sangat membantu customer yang ingin bertanya langsung ke penjual.

Berikut onbloging kasih tutorialnya supaya kamu dapat membuat Tombol Chat Whatsapp dan SMS ke Admin

Cara Membuat Tombol Chat Whatsapp dan SMS ke Admin


1. Login Blogger -> Tema -> Edit HTML -> Cari kode </head> -> Salin kode di bawah ini dan letakan tepat di atas kode tersebut


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}
.btn-purple{background-color:#8E24AA;border-bottom:2px solid #6A1B9A;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}
.btn-purple:active,.btn-purple:focus,.btn-purple:hover{background-color:#6A1B9A;color:#fff}
#cara_belanja{margin-top:30px;background:#F3E5F5;padding:15px 15px 5px;border-radius:3px!important;}
#carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden}
#cara_belanja h4{font-size:16px;font-weight:600;color:#8E24AA;margin:0;line-height:1}
#cara_belanja p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}
#cara_belanja a{margin-bottom:10px;margin-right:10px}
#cara_belanja svg{width:24px;height:24px;vertical-align:-15%;}
/*]]>*/
</style>
</b:if>

2. Simpan tema

Cara Penerapannya


Silahkan salin kode di bawah ini dan letakan di bawah postingan kamu

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='cara_belanja'>
<span id='carabelanja'/>
  <h4>Cara Belanja Di Onbloging</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam, ligula non faucibus iaculis, sapien tortor varius nibh, eu ultrices nisi metus nec ex. Suspendisse sit amet maximus massa. Maecenas consectetur sit amet turpis eget pretium. Phasellus laoreet vestibulum quam at mollis. Aliquam at imperdiet ex, sed placerat lectus. Integer eget nulla dapibus, dignissim quam in, semper est. Nullam blandit rutrum lorem, vel efficitur sapien blandit nec. Donec blandit enim at augue imperdiet malesuada id ut quam. Suspendisse pretium vel augue at ultricies. In auctor luctus egestas. Etiam ut tristique odio. Ut quis ex vel eros fermentum hendrerit in eu mi. Nulla nisl eros, pulvinar a lorem non, sollicitudin ornare eros. Praesent erat lorem, ornare viverra mattis sed, sagittis sed ligula. Sed sodales nec eros eu consectetur.</p>
<a class='btn btn-purple btn-lg' expr:href='&quot;https://api.whatsapp.com/send?phone=6281212716xxx&amp;text=Saya%20pesan%20&quot; + data:post.title'><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' fill='#fff'/>
</svg> Pesan Sekarang</a>
<a class='btn btn-purple btn-lg' expr:href='&quot;sms://+6281212716xxx?body=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
    <path d='M17.25,18H6.75V4H17.25M14,21H10V20H14M16,1H8A3,3 0 0,0 5,4V20A3,3 0 0,0 8,23H16A3,3 0 0,0 19,20V4A3,3 0 0,0 16,1Z' fill='#fff'/>
</svg> SMS Sekarang</a>
  </div>
</b:if>

Sebelum disimpan, Silahkan edit pada text yang sudah saya beri tanda sesuai no hp kamu dan text yang kamu inginkan.



sumber www.kompiajaib.com

Cara Membuat Tombol Chat Whatsapp dan SMS ke Admin

Cara Membuat Tombol Chat Whatsapp dan SMS ke Admin

Memiliki Tombol chat Whatsapp dan SMS ke admin blog sangat bermanfaat untuk yang membuat blog untuk keperluan jualan atau online shop.

Dengan adanya tombol ini, customer ga perlu lagi susah payah menyalin atau mengetik ulang no hp penjual, jadi hal ini tentu saja sangat membantu customer yang ingin bertanya langsung ke penjual.

Berikut onbloging kasih tutorialnya supaya kamu dapat membuat Tombol Chat Whatsapp dan SMS ke Admin

Cara Membuat Tombol Chat Whatsapp dan SMS ke Admin


1. Login Blogger -> Tema -> Edit HTML -> Cari kode </head> -> Salin kode di bawah ini dan letakan tepat di atas kode tersebut


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}
.btn-purple{background-color:#8E24AA;border-bottom:2px solid #6A1B9A;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}
.btn-purple:active,.btn-purple:focus,.btn-purple:hover{background-color:#6A1B9A;color:#fff}
#cara_belanja{margin-top:30px;background:#F3E5F5;padding:15px 15px 5px;border-radius:3px!important;}
#carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden}
#cara_belanja h4{font-size:16px;font-weight:600;color:#8E24AA;margin:0;line-height:1}
#cara_belanja p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}
#cara_belanja a{margin-bottom:10px;margin-right:10px}
#cara_belanja svg{width:24px;height:24px;vertical-align:-15%;}
/*]]>*/
</style>
</b:if>

2. Simpan tema

Cara Penerapannya


Silahkan salin kode di bawah ini dan letakan di bawah postingan kamu

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='cara_belanja'>
<span id='carabelanja'/>
  <h4>Cara Belanja Di Onbloging</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam, ligula non faucibus iaculis, sapien tortor varius nibh, eu ultrices nisi metus nec ex. Suspendisse sit amet maximus massa. Maecenas consectetur sit amet turpis eget pretium. Phasellus laoreet vestibulum quam at mollis. Aliquam at imperdiet ex, sed placerat lectus. Integer eget nulla dapibus, dignissim quam in, semper est. Nullam blandit rutrum lorem, vel efficitur sapien blandit nec. Donec blandit enim at augue imperdiet malesuada id ut quam. Suspendisse pretium vel augue at ultricies. In auctor luctus egestas. Etiam ut tristique odio. Ut quis ex vel eros fermentum hendrerit in eu mi. Nulla nisl eros, pulvinar a lorem non, sollicitudin ornare eros. Praesent erat lorem, ornare viverra mattis sed, sagittis sed ligula. Sed sodales nec eros eu consectetur.</p>
<a class='btn btn-purple btn-lg' expr:href='&quot;https://api.whatsapp.com/send?phone=6281212716xxx&amp;text=Saya%20pesan%20&quot; + data:post.title'><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' fill='#fff'/>
</svg> Pesan Sekarang</a>
<a class='btn btn-purple btn-lg' expr:href='&quot;sms://+6281212716xxx?body=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
    <path d='M17.25,18H6.75V4H17.25M14,21H10V20H14M16,1H8A3,3 0 0,0 5,4V20A3,3 0 0,0 8,23H16A3,3 0 0,0 19,20V4A3,3 0 0,0 16,1Z' fill='#fff'/>
</svg> SMS Sekarang</a>
  </div>
</b:if>

Sebelum disimpan, Silahkan edit pada text yang sudah saya beri tanda sesuai no hp kamu dan text yang kamu inginkan.



sumber www.kompiajaib.com