-->

Cara Membuat Tombol SMS dan Chat Whatsapp di Blog

Cara Membuat Tombol SMS dan Chat Whatsapp di Blog untuk olshop

Daftar Isi [Tutup]
    Membuat fungsi chat dan sms di artikel pada blog cara ini sangat cocok untuk anda yang sedang design template olshop khususnya diblogger, jika menggunakan plugin lagi dari web-web yang menyediakan fungsi tersebut tapi biasanya hal itu memperlambat kinerja blog.



    Tombol chat whatsapp dan messaging ini ketika di klik maka akan langsung membuka aplikasi whatsapp jika yang diklik whatsapp atau pesan maka yang terbuka pesan. dan tentu saja langsung terdapat isi pesan yang langsung bisa dikirim ke yang punya olshop atau blog tersebut. untuk itu kamu bisa merubah terlebih dahulu Nomor Telepon dengan punya anda jangan lupa lagi untuk whatsapp silahkan pasang yang sudah terdaftar

    Berikut ini cara pemasangannya di template anda(Blogger - Template - Edit HTML)

    agar Icon disamping teks muncul ditemplate anda harus ada font-awesome.css, jika belum ada silahkan salin dibawah </head>
    <script type='text/javascript'>
    //<![CDATA[
    //CSS Ready
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
    loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
    //]]>
    </script>

    Tahap Pertama

    silahkan salin css dibawah ini dan letakkan diatas </head>
    <style type="text/css">
    /*<![CDATA[*/
    .tantan{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;}.tantan:active:focus,.tantan:focus{outline:0;}.tantan:focus,.tantan:hover{color:#333;text-decoration:none;outline:0;}.tantan: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);}.tantan-sayang{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px;}#bajumantan{margin-top:30px;background:#e2e2e2;padding:15px 15px 5px;border-radius:3px!important;text-align:center;}#carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden;}#bajumantan h4{font-size:16px;font-weight:600;text-transform:uppercase;color:#f36f36;margin:0;line-height:1;}#bajumantan p{font-size:14px;font-weight:400;color:#444;display:block;margin:10px 0;line-height:2.2;}#bajumantan a{margin-bottom:10px;margin-right:10px;}.kasih{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.3s ease-out;}.kasih{background-color:#4b4d4f;}.kasih:hover{background-color:#909aa5;color:#fff;}
    /*]]>*/
    </style>


    Tahap Kedua

    kode html dibawah ini bisa anda letakkan sesuai keinginan anda letaknya, jika ingin dibawah artikel bisa diletakkan dibawah atau diatas kode <data:post.body/> ,biasanya ada 3 silahkan pilih salah satu.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id="bajumantan"><a class="tantan kasih tantan-sayang" href="https://api.whatsapp.com/send?phone=6285822266832&amp;text=Saya Mau donasi ke blog MantanKode"><i class='fa fa-whatsapp'></i> WhatsApp</a><a class="tantan kasih tantan-sayang" href="sms://+6285822266832?body=Saya Mau donasi ke blog MantanKode"><i class='fa fa-phone'></i> Message</a></div>
    </b:if>

    Yang Perlu diubah:
    tanda merah
    6285822266832

    Tahap Ketiga / Terakhir

    simpan template dan lihat disalah satu artikel anda, jika ada error silahkan komentar dibawah.

    Terima Kasih semoga bermanfaat jangan lupa dishare atau bookmark :D

    Show comments
    Hide comments


    MANTANKODE.NET Kebijakan Komentar, Silahkan berkomentar sesuai ketentuan perundang-undangan!
    Baca Kebijakan Berkomentar kami sebelum berkomentar.

    Notification

    Donasi yang anda berikan akan digunakan untuk, pengembangan blog ini.

    Kesehatan admin dan lebih semangat berbagi tips dan informasi.

    Yang telah membantu saya ucapkan terima kasih

    Donasi: Trakteer

    Done
    Night Mode