Cara Membuat Chat Whatsapp Keren Dan Elegan Pada Blogger

Cara Membuat Chat Whatsapp Keren Dan Elegan Pada Blogger


Pelajar Design - Pada tutorial kali ini saya akan membahas bagaimana Cara Membuat Chat Whatsapp Keren Dan Elegan Pada Blogger. Pada umumnya Chat Whatsapp berfungsi untuk mengirim Pesan Text, Gambar, Video, File dan lain-lain, biasanya Chat Whatsapp ini dipasang pada Website Atau Blog jual beli.

Namun tidak hanya pada Website Atau Blog jual beli, sekarang sudah ada beberapa Website Atau Blog seperti Pelajar Design yang memakai Chat Whatsapp ini agar pengunjung yang kebingungan atau tidak paham bisa menanyakan langsung pada si penulis.

Sebenarnya ada banyak cara yang bisa digunakan agar pengunjung dapat melakukan komunikasi dengan Admin Blog, salah satunya dengan membuat halaman Contact Form. Sehingga memudahkan pengunjung atau pembaca untuk melakukan interaksi atau komunikasi dengan Admin Blog.

Saat ini Whatsapp (WA) sangatlah populer, dimana pengguna Android di dunia rata-rata menggunakan Whatsapp sebagai alat komunikasi.

Hampir semua Website Atau Blog mencantumkan kontak yang bisa dihubungi pada Website Atau Blog nya. Agar pengunjung bisa berkomunikasi dengan Admin, faktanya sudah banyak Website Atau Blog yang memasang Chat Whatsapp pada Website Atau Blog nya.

Tombol Whatsapp yang dipasang pada Website Atau Blog biasanya bersifat Redirect langsung menuju pada kontak nomor yang telah diatur.

Dengan begitu siapa saja yang ingin berkomunikasi atau menanyakan sesuatu seputar Tutorial yang dibahas atau mengajak untuk berbisnis dapat menekan ikon Chat Whatsapp tersebut lalu mengisi pesan dan secara otomatis pembaca yang mengklik ikon Whatsapp tersebut akan diarahkan pada Aplikasi Whatsapp dan melakukan Chatting dengan Admin.

# Apa Itu Whatsapp?

Whatsapp merupakan sebuah Aplikasi Chatting yang bisa digunakan untuk mengirim pesan seperti SMS tanpa dikenai biaya pulsa sedikitpun karena menggunakan internet.

# Cara Menggunakan Whatsapp

Cara menggunakan Whatsapp pun sangatlah mudah, kalian hanya tinggal menginstal Aplikasi Whatsapp lalu kalian harus mendaftarkan nomor ponsel yang kalian gunakan untuk menjalankan Whatsapp.

Whatsapp Sendiri bisa kalian jalankan pada berbagai platform seperti Android, BlackBerry, BlackBerry OS, BlackBarry 10, Web-Based, IOS, Windows Phone.

Aplikasi Whatsapp dirilis pada bulan januari tahun 2009. Dan faktanya pada tahun 2014 Whatsapp resmi dimiliki oleh Facebook, kalian bisa buktikan sekarang dengan membuka Aplikasi Whatsapp. Maka akan muncul tulisan From Facebook pada bagian bawah Aplikasi Whatsapp.

# Kelebihan Dan Kekurangan Whatsapp

Dibalik kepopuleran Whatsapp, ada kelebihan dan kekurangannya.

- Kelebihan Whatsapp

  1. Tidak menggunakan pulsa
  2. Mudah digunakan
  3. Bisa membatalkan kirim pesan
  4. Informasi pribadi aman
  5. Bisa membuat Grup
  6. Chat dapat di Backup

- Kekurangan Whatsapp

  1. Boros kouta (Tergantung penggunaan)
  2. Baterai yang boros
  3. membutuhkan koneksi internet
  4. Whatsapp Web tidak dapat melakukan Voice Call
Kode ini saya rubah sedikit agar tampilannya menarik dan enak dipandang. Tampilannya hampir sama seperti kolom Chatting pada Whatsapp umumnya.

Cara ini sudah saya coba pada Template Viomagz V.3.3 dan hasilnya 100% Work. Jika kalian menggunakan Template lain, silahkan sesuaikan sendiri.


Cara Membuat Chat Whatsapp Keren Dan Elegan Pada Blogger

1. Masuk ke Blogger.com.
2. Pilih menu TEMA > Edit HTML.
3. Kemudian simpan kode dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>.

#whatsapp-chat,.nabil-live{background:white;position:fixed;z-index:100;right:30px}
#whatsapp-chat{width:350px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);-moz-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);box-shadow:0 8px 25px -5px rgba(45,62,79,.15);bottom:80px;overflow:hidden;}
#btn-chat,#tooltip i,.nabil-live svg{vertical-align:middle}
.nabil-live{color:white;background:linear-gradient(45deg,#029abd 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);bottom:25px;line-height:30px;font-size:16px;padding:0;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;-webkit-box-shadow:0 1px 5px rgba(154,154,154,.2);-moz-box-shadow:0 1px 5px rgba(154,154,154,.2);box-shadow:0 1px 5px rgba(154,154,154,.2);}
.nabil-live .svg{margin:0;position:absolute;top:0;padding:10.5px 15px;-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;right:-2px;background-color:white;color:#31c73a;width:18px;height:18px;line-height:18px;overflow:hidden;text-align:center;z-index:10}
.box-live,.goomwhats,.info-avatar{position:relative}
.box-live a,.info-chat{color:white}
.box-live{padding:4px 20px}
.box-live span{margin-right:40px;font-size:13px}
.info-chat{padding-top:12px;text-align: left;}
.info-chat span.chat-label{font-size:15px;font-weight:700}
.info-chat span.chat-text{font-size:13px;line-height:1.3;color:#d7ffee}
.info-avatar{width:48px;height:48px;float:left;margin:5px 15px 0 0}
.info-avatar img{-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;width:100%;height:auto}
.informasi{padding:15px;overflow:hidden;position:relative;background:linear-gradient(45deg,#029abd 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);z-index:1;-webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);-moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);}
.goomwhats{color:#444;padding:5px 15px;background-color:white;font-size:14px;display:flow-root}
.goomwhats a{color:#3bc743}
.boxmsg{margin:8px 0 0;float:left;width:74%;display:block}
.goophone{position:absolute;right:45px;top:10px;font-size:13px;z-index:10}
.goophone a{color:#e6f9d2;margin-left:15px}
.goophone a svg,a.close-chat svg{width:16px;height:auto;fill:#e6f9d2}
.jamwa{display:block;float:right;font-size:11px;color:#717171}
.jamwa div{display:inline-block}
#btn-chat{float:right;margin-top:18px}
.first-msg{background-color:#e6ddd4;position:relative;padding:20px 20px 20px 10px}
.first-msg::before{display:block;position:absolute;content:"";left:0;top:0;height:100%;width:100%;z-index:0;opacity:.08;background-image:url(https://goomsite.github.io/img/wa-min.webp)}
#tooltip:after,.box-msg:before{content:''}
.box-msg{background:#e4fec8;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.13);-moz-box-shadow:0 1px 5px rgba(0,0,0,.13);box-shadow:0 1px 5px rgba(0,0,0,.13);color:#333;font-size:14px;line-height:1.7;-webkit-border-radius:0 7.5px 7.5px;-moz-border-radius:0 7.5px 7.5px;border-radius:0 7.5px 7.5px;position:relative;margin-left:-100px;padding:10px 20px;text-align: left;z-index:1;display:inline-block}
.box-msg:before{position:absolute;border-width:17px;border-style:none solid solid none;border-color:#e4fec8 #e4fec8 transparent transparent;top:0;left:-16px}
.box-msg span{display:block}
.box-msg span.chat-nama{font-size:13px;line-height:18px;color:rgba(0,0,0,.4)}
.box-msg span.chat-cript{margin-bottom:0px}
#tooltip{text-align:center;color:white;background:#333;position:absolute;z-index:100;padding:10px 20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-size:90%;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.6);-moz-box-shadow:0 1px 10px rgba(0,0,0,.6);box-shadow:0 1px 10px rgba(0,0,0,.6);}
#tooltip i{display:inline-block;margin:5px}
#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333;position:absolute;left:50%;bottom:-10px;margin-left:-10px}
#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;top:-20px;bottom:auto}
#tooltip.left:after{left:10px;margin:0}
#tooltip.right:after{right:10px;left:auto;margin:0}
.formtamv *{outline:0;text-decoration:none}
.formtamv .focus{-webkit-box-shadow:inset 0 0 0 1px #fbaf03;-moz-box-shadow:inset 0 0 0 1px #fbaf03;box-shadow:inset 0 0 0 1px #fbaf03;}
.formtamv label{position:relative;display:block;width:100%;margin:0;padding:0}
.formtamv label>input,.formtamv label>select,.formtamv label>textarea{position:relative;z-index:1;border:none;background:#f1f1f1;-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);width:100%;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;padding:14px 15px 0}
.formtamv label>i{position:absolute;z-index:0;display:inline-block;vertical-align:top;width:40px;text-align:center;font-size:20px;height:auto;background:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;top:3px;left:0;color:rgba(0,0,0,.2)}
.formtamv label small{position:relative;display:block;margin-top:10px;z-index:3}
.formtamv label small>a.tooltip{margin-left:10px;font-size:20px;vertical-align:middle;display:inline-block;color:rgba(0,0,0,.4)}
.formtamv label small>a.tooltip:hover{color:rgba(0,0,0,.6)}
.formtamv label small a{font-weight:700}
.formtamv select::-ms-expand{display:none}
.formtamv select{-moz-appearance:none;-webkit-appearance:none;appearance:none}
.formtamv select option{font-size:18px;background:#edf8f5;color:rgba(0,0,0,.7);text-shadow:none}
.formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button,.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.nomor_whatsapp[type=number]{-moz-appearance:textfield}
.formtamv label> :focus{background:none}
.formtamv label textarea{min-height:20px;resize:none;margin-bottom:8px}
.formtamv label .validasi{position:absolute;z-index:2;right:0px;background:#fbaf03;color:white;padding:5px 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.1);-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;;visibility:hidden;opacity:0;display:inline-block!important}
.formtamv label .validasi.show{visibility:visible;opacity:1;bottom:100%}
.formtamv label .validasi:after{position:absolute;top:100%;right:26px;content:"";border:8px solid;border-color:#fbaf03 transparent transparent}
a.close-chat{position:absolute;top:10px;right:13px;color:#c3ffc7;font-size:18px;z-index: 10;}
.nime{position:absolute;display:block;width:10px;height:10px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;background-color:#05d436;right:-2px;bottom:8px}
.nime:after,.nime:before{content:"";position:absolute;width:24px;height:24px;opacity:0;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;top:-8px;left:-8px;background:#05d436}
.nime:before{-webkit-animation:nime 2s ease-out infinite;animation:nime 2s ease-out infinite}
.nime:after{z-index:1;-webkit-animation:nime 2s .4s ease-out infinite;animation:nime 2s .4s ease-out infinite}
@-webkit-keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
5%{opacity:1}
100%{opacity:0}}
@keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
5%{opacity:1}
100%{opacity:0}}
@keyframes showhide{from{transform:scale(.5);opacity:0}}
@keyframes showchat{from{transform:scale(0);opacity:0}}
.hide,.show{animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.postmeta a,.sidebar-wrapper{font-size:14px;overflow:hidden}
.hide{display:none}
.show{display:block}
.postmeta{display:none}
.postmeta a{background:#737373;padding:10px 20px;color:white;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;margin:20px 0;text-transform:uppercase}
.sidebar-wrapper{position:sticky;width:360px;top:0;float:right;margin-top:10px;word-wrap:break-word}
.sidebar-wrapper{position:sticky;width:360px;top:0;float:right;margin-top:10px;word-wrap:break-word}

4. Lalu letakkan kode dibawah ini SETELAH kode </footer>.

<div class='hide' id='whatsapp-chat'>
    <div class='home-chat'>
        <!-- Info Contact Start -->
        <div class='informasi'>
            <div class='info-avatar'><img alt='avatar' src='https://1.bp.blogspot.com/-9qss8FlSl4w/Xpltq9-oA8I/AAAAAAAAGGI/iMx7JIvKIMwjeSeWIUy_1BffAt5nixHSQCLcBGAsYHQ/s320/Admin.png' title='avatar'/>
                <span class='nime'/>
            </div>
            <div class='info-chat'>
                <span class='chat-label'>Admin : </span>
                <span class='chat-text'>Silahkan kirim pesan kepada Riko Maelano untuk lebih lanjut...</span>
            </div>
        </div>
        <div class='goophone'>
            <a href='tel:+6289614879811' title='call us'><svg viewBox='0 0 384 384'>
                    <path d='M353.188,252.052c-23.51,0-46.594-3.677-68.469-10.906c-10.719-3.656-23.896-0.302-30.438,6.417l-43.177,32.594 c-50.073-26.729-80.917-57.563-107.281-107.26l31.635-42.052c8.219-8.208,11.167-20.198,7.635-31.448 c-7.26-21.99-10.948-45.063-10.948-68.583C132.146,13.823,118.323,0,101.333,0H30.813C13.823,0,0,13.823,0,30.813 C0,225.563,158.438,384,353.188,384c16.99,0,30.813-13.823,30.813-30.813v-70.323C384,265.875,370.177,252.052,353.188,252.052z'>
                    </path>
                </svg></a>
            <a href='mailto:rikomaelano22@gmail.com' title='sent to mail'>
                <svg viewBox='0 0 512 512'>
                    <path d='M10.688,95.156C80.958,154.667,204.26,259.365,240.5,292.01c4.865,4.406,10.083,6.646,15.5,6.646     c5.406,0,10.615-2.219,15.469-6.604c36.271-32.677,159.573-137.385,229.844-196.896c4.375-3.698,5.042-10.198,1.5-14.719     C494.625,69.99,482.417,64,469.333,64H42.667c-13.083,0-25.292,5.99-33.479,16.438C5.646,84.958,6.313,91.458,10.688,95.156z'>
                    </path>
                    <path d='M505.813,127.406c-3.781-1.76-8.229-1.146-11.375,1.542c-46.021,39.01-106.656,90.552-152.385,129.885 c-2.406,2.063-3.76,5.094-3.708,8.271c0.052,3.167,1.521,6.156,4,8.135c42.49,34.031,106.521,80.844,152.76,114.115     c1.844,1.333,4.031,2.01,6.229,2.01c1.667,0,3.333-0.385,4.865-1.177c3.563-1.823,5.802-5.49,5.802-9.49V137.083     C512,132.927,509.583,129.146,505.813,127.406z'>
                    </path>
                    <path d='M16.896,389.354c46.25-33.271,110.292-80.083,152.771-114.115c2.479-1.979,3.948-4.969,4-8.135     c0.052-3.177-1.302-6.208-3.708-8.271C124.229,219.5,63.583,167.958,17.563,128.948c-3.167-2.688-7.625-3.281-11.375-1.542     C2.417,129.146,0,132.927,0,137.083v243.615c0,4,2.24,7.667,5.802,9.49c1.531,0.792,3.198,1.177,4.865,1.177     C12.865,391.365,15.052,390.688,16.896,389.354z'>
                    </path>
                    <path d='M498.927,418.375c-44.656-31.948-126.917-91.51-176.021-131.365c-4-3.26-9.792-3.156-13.729,0.24     c-9.635,8.406-17.698,15.49-23.417,20.635c-17.563,15.854-41.938,15.854-59.542-0.021c-5.698-5.135-13.76-12.24-23.396-20.615     c-3.906-3.417-9.708-3.521-13.719-0.24c-48.938,39.719-131.292,99.354-176.021,131.365c-2.49,1.792-4.094,4.552-4.406,7.604     c-0.302,3.052,0.708,6.083,2.802,8.333C19.552,443.01,30.927,448,42.667,448h426.667c11.74,0,23.104-4.99,31.198-13.688     c2.083-2.24,3.104-5.271,2.802-8.323C503.021,422.938,501.417,420.167,498.927,418.375z'>
                    </path>
                </svg>
            </a>
        </div>
    </div>
    <div class='first-msg'>
        <div class='box-msg'>
            <span class='chat-nama'>Pelajar Design</span>
            <span class='chat-cript'>Hallo!</span>
            <span>Ada yang bisa saya bantu?</span>
            <div class='jamwa'>
                <div id='hours'/>:<div id='minutes'/>
            </div>
        </div>
    </div>
    <div class='goomwhats'>
        <div class='poptamv' id='konsultasi'>
            <div class='formtamv formWA'>
                <div class='boxmsg'>
                    <label><textarea class='pesan wajib' placeholder='Type a message'/></label>
                </div>
                <div id='btn-chat'>
                    <a class='submit' href='javascript:void;'>
                        <svg height='24' viewBox='0 0 24 24' width='24'>
                            <path d='M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z' fill='#263238' fill-opacity='.45'/>
                        </svg></a>
                </div>
            </div>
        </div>
    </div>
    <a class='close-chat' href='javascript:void' title='close'><svg viewBox='0 0 413.348 413.348'>
            <path d='m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z'>
            </path>
        </svg></a>
</div>
<div class='nabil-live'>
    <div class='box-live'>
        <a href='javascript:void' title=''>
            <span>Chat with WhatsApp</span>
            <span class='svg'>
                <svg viewBox='0 0 418.135 418.135'>
                    <path d='M198.929,0.242C88.5,5.5,1.356,97.466,1.691,208.02c0.102,33.672,8.231,65.454,22.571,93.536   L2.245,408.429c-1.191,5.781,4.023,10.843,9.766,9.483l104.723-24.811c26.905,13.402,57.125,21.143,89.108,21.631   c112.869,1.724,206.982-87.897,210.5-200.724C420.113,93.065,320.295-5.538,198.929,0.242z M323.886,322.197   c-30.669,30.669-71.446,47.559-114.818,47.559c-25.396,0-49.71-5.698-72.269-16.935l-14.584-7.265l-64.206,15.212l13.515-65.607   l-7.185-14.07c-11.711-22.935-17.649-47.736-17.649-73.713c0-43.373,16.89-84.149,47.559-114.819   c30.395-30.395,71.837-47.56,114.822-47.56C252.443,45,293.218,61.89,323.887,92.558c30.669,30.669,47.559,71.445,47.56,114.817   C371.446,250.361,354.281,291.803,323.886,322.197z' style='fill:#7AD06D;'/>
                    <path d='M309.712,252.351l-40.169-11.534c-5.281-1.516-10.968-0.018-14.816,3.903l-9.823,10.008   c-4.142,4.22-10.427,5.576-15.909,3.358c-19.002-7.69-58.974-43.23-69.182-61.007c-2.945-5.128-2.458-11.539,1.158-16.218   l8.576-11.095c3.36-4.347,4.069-10.185,1.847-15.21l-16.9-38.223c-4.048-9.155-15.747-11.82-23.39-5.356   c-11.211,9.482-24.513,23.891-26.13,39.854c-2.851,28.144,9.219,63.622,54.862,106.222c52.73,49.215,94.956,55.717,122.449,49.057   c15.594-3.777,28.056-18.919,35.921-31.317C323.568,266.34,319.334,255.114,309.712,252.351z' style='fill:#7AD06D;'/>
                </svg>
            </span>
        </a>
    </div>
</div>

5. Letakkan script dibawah ini DIATAS kode </body>.

<script>
//<![CDATA[
var _0x59a8=['\x5cw+','fromCharCode','toString','||||this|jQuery|function|var|feed|entry||div|||||attr|||title|find||class|||removeClass|addClass|||||img|no|label||href|document|each|if|on|click|header|fixed|recent|content|default|return|related|parents|show|formWA|sidebar|link|replace|jpg|val|AM|scroll|span|text|focus|validasi||console|||log|The|time|is|PM|menu|close|scrollTop|url|posts|alt|for|length|html|indexOf|else|src|li|h3|style|wajib|trim|whatsapp|clock|no_image|window|data|parent|id|type|com|mqdefault|s72|s1600|chat|getElementById|innerHTML|open|https|css|position|sticky|goom|HTML|widget|ajax|feeds|json|in|script|max|results|get|dataType|jsonp|success|ul|alternate|rel|break|category|term||www|youtube|embed|media|thumbnail|first|rmg|clr|kirimWA|send|0A|Number|screen|width|height|submit|hide|new|Date|getMinutes|getSeconds|getHours|hours|minutes|setInterval|1e3|goomsite|github|io|non|webp|month_format|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec|outerHeight|50|match|tag|icon|search|wrap|author|name|void|web|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera|Mini|test|navigator|userAgent|konsultasi|62|89614879811|Admin|Hallo|pesan|phone|960|540|toolbar|location|directories|status|menubar|scrollbars|yes|resizable|copyhistory|top|left|addEventListener|load|waFix|input|textarea|keypress|event|keyCode|trigger|placeholder| Tidak Boleh Kosong |appendTo|keyup|select|change|poptamv|nabil|live'];(function(_0x2384a6,_0x59a802){var _0x2b0afd=function(_0x5858e6){while(--_0x5858e6){_0x2384a6['push'](_0x2384a6['shift']());}};_0x2b0afd(++_0x59a802);}(_0x59a8,0xf9));var _0x2b0a=function(_0x2384a6,_0x59a802){_0x2384a6=_0x2384a6-0x0;var _0x2b0afd=_0x59a8[_0x2384a6];return _0x2b0afd;};var _0xc3f1=['6\x201r(){7\x20e=2m\x202n,o=e.2o(),n=(e.2p(),e.2q()),t=\x22U\x22;12>n&&(11.14(\x2215\x2016\x2017\x20\x22+n+\x22:\x22+o+\x22\x20U\x22),n=n,t=\x22U\x22),12==n&&(11.14(\x2215\x2016\x2017\x20\x22+n+\x22:\x22+o+\x22\x2018\x22),t=\x2218\x22),24==n&&(11.14(\x2215\x2016\x2017\x20\x22+(n-12)+\x22:\x22+o+\x22\x20U\x22),n=12,t=\x22U\x22),n>12&&(11.14(\x2215\x2016\x2017\x20\x22+(n-12)+\x22:\x22+o+\x22\x2018\x22),n-=12,t=\x2218\x22),10>o&&(o=\x220\x22+o),10>n&&(n=\x220\x22+n),A.1D(\x222r\x22).1E=n,A.1D(\x222s\x22).1E=o+\x22:\x22+t}1r(),2t(1r,2u);$(\x22.P-19-1a\x22).D(\x22E\x22,6(){$(\x22.P-19\x22).q(\x22P-1a\x22)}),$(\x22.P-19-1F\x22).D(\x22E\x22,6(){$(\x22.P-19\x22).p(\x22P-1a\x22)});7\x201s=\x221G://2v.2w.2x/v/2y.2z\x22;7\x202A=[,\x222B\x22,\x222C\x22,\x222D\x22,\x222E\x22,\x222F\x22,\x222G\x22,\x222H\x22,\x222I\x22,\x222J\x22,\x222K\x22,\x222L\x22,\x222M\x22];$(6(){7\x20e=$(A).1b(),o=$(\x22.F-G\x22).2N();$(1t).V(6(){7\x20s=$(A).1b();$(A).1b()>=2O?$(\x22.F-G\x22).1H(\x221I\x22,\x221J\x22):$(\x22.F-G\x22).1H(\x221I\x22,\x221J\x22),s>o?$(\x22.F-G\x22).q(\x22V\x22):$(\x22.F-G\x22).p(\x22V\x22),s>e?$(\x22.F-G\x22).p(\x22w-V\x22):$(\x22.F-G\x22).q(\x22w-V\x22),e=$(A).1b()})});$(\x22.H-1K\x20.1L\x20.1M-I\x22).B(6(){7\x20e=$(4).k(\x22W\x22).g(\x221u-x\x22),t=($(4).k(\x22W\x22).g(\x221u-w\x22),$(4).1v().g(\x221w\x22)),a=$(4).k(\x22W\x22).g(\x221u-1x\x22);a.2P(\x22H\x22)&&$.1N({1c:\x22/1O/1d/J/-/\x22+e+\x22?1e=1P-1Q-1R&1S-1T=3\x22,1x:\x221U\x22,1V:\x221W\x22,1X:6(e){1f(7\x20a=\x22\x22,r=\x22<1Y>\x22,n=0;n<e.8.9.1g;n++){1f(7\x20i=0;i<e.8.9[n].Q.1g;i++)C(\x221Z\x22==e.8.9[n].Q[i].20){a=e.8.9[n].Q[i].z;21}7\x20l=e.8.9[n].j.$t,s=e.8.9[n].22[0].23,d=e.8.9[n].I.$t,c=$(\x22<b>\x22).1h(d);C(d.1i(\x22//25.26.1y/27/\x22)>-1)7\x20f=e.8.9[n].28$29.1c,o=f;1j\x20C(d.1i(\x22<v\x22)>-1)7\x20h=c.k(\x22v:2a\x22).g(\x221k\x22),o=h;1j\x207\x20o=1s;r+=\x27<1l><b\x20m=\x222b\x22><a\x20z=\x22\x27+a+\x27\x22><v\x201e=\x22\x27+l+\x27\x22\x201k=\x22\x27+o+\x27\x22\x20j=\x22\x27+l+\x27\x22/></a></b><b\x20m=\x22H-2Q\x22><a\x20m=\x222R\x20\x27+s+\x27\x22\x20z=\x22/2S/x/\x27+s+\x27\x22\x20j=\x22\x27+s+\x27\x22></a></b><b\x20m=\x22H-I\x22><1m\x20m=\x22H-j\x22><a\x20z=\x22\x27+a+\x27\x22\x20j=\x22\x27+l+\x27\x22>\x27+l+\x27</a></1m></b><b\x20m=\x222c\x22/></1l>\x27}r+=\x22</1Y>\x22,$(\x22.H-1K\x20.1L\x20.1M-I\x22).B(6(){7\x20e=$(4).1v().g(\x221w\x22);e==t&&($(4).1h(r),$(4).1v().q(\x22H\x22),$(4).k(\x22.2b\x22).B(6(){$(4).g(\x221n\x22,6(e,t){K\x20t.R(\x22/J.S\x22,\x22/1z.S\x22)}).g(\x221n\x22,6(e,t){K\x20t.R(\x221A-c\x22,\x221B\x22)})}))})}})}),$(\x22#L-1d\x22).B(6(){7\x20e=$(4).X();$.1N({1c:\x22/1O/1d/J/-/\x22+e+\x22?1e=1P-1Q-1R&1S-1T=3\x22,1x:\x221U\x22,1V:\x221W\x22,1X:6(e){1f(7\x20t=\x22\x22,a=\x27<b\x20m=\x22L-2T\x22>\x27,r=0;r<e.8.9.1g;r++){1f(7\x20n=0;n<e.8.9[r].Q.1g;n++)C(\x221Z\x22==e.8.9[r].Q[n].20){t=e.8.9[r].Q[n].z;21}7\x20i=e.8.9[r].j.$t,l=(e.8.9[r].22[0].23,e.8.9[r].2U[0].2V.$t,e.8.9[r].I.$t),s=$(\x22<b>\x22).1h(l);C(l.1i(\x22//25.26.1y/27/\x22)>-1)7\x20d=e.8.9[r].28$29.1c.R(\x22/J.S\x22,\x22/1z.S\x22),c=d;1j\x20C(l.1i(\x22<v\x22)>-1)7\x20f=s.k(\x22v:2a\x22).g(\x221k\x22).R(\x221A-c\x22,\x221B\x22),c=f;1j\x207\x20c=1s;a+=\x27<1l><b\x20m=\x22L-v\x22><a\x20z=\x22\x27+t+\x27\x22><v\x201e=\x22\x27+i+\x27\x22\x201k=\x22\x27+c+\x27\x22\x20j=\x22\x27+i+\x27\x22/></a></b><b\x20m=\x22L-I\x22><1m\x20m=\x22L-j\x22><a\x20z=\x22\x27+t+\x27\x22\x20j=\x22\x27+i+\x27\x22>\x27+i+\x22</a></1m></b></1l>\x22}a+=\x27</b><b\x20m=\x222c\x22/>\x27,$(\x22#L-1d\x22).1h(a),$(4).k(\x22.L-v\x22).B(6(){$(4).g(\x221n\x22,6(e,t){K\x20t.R(\x22/J.S\x22,\x22/1z.S\x22)}).g(\x221n\x22,6(e,t){K\x20t.R(\x221A-c\x22,\x221B\x22)})})}})});6\x202d(e){7\x20t=!0;C(5(\x22#\x22+e+\x22\x20.1o\x22).B(6(){\x22\x22!=$.1p(5(4).T())&&\x22J\x22!=$.1p(5(4).T())||5(4).q(\x22Y\x22)}),5(\x22#\x22+e+\x22\x20.1o\x22).B(6(){K\x22\x22==$.1p(5(4).T())?(t=!1,5(4).M(\x22x\x22).k(\x22.Z\x22).q(\x22N\x22),5(4).Y(),!1):\x22J\x22==$.1p(5(4).T())?(t=!1,5(4).M(\x22x\x22).k(\x22.Z\x22).q(\x22N\x22),!1):2W\x200}),t===!0){7\x20i=\x22\x22,a=\x221G://2X.1q.1y/2e\x22;C(/2Y|2Z|30|31|32|33|34|35\x2036/i.37(38.39)&&(a=\x221q://2e\x22),\x223a\x22===e)7\x20s=3b,r=3c,n=\x223d\x22,o=\x223e\x22,l=(5(\x22#\x22+e+\x22\x20.j-I\x22).X(),5(\x22#\x22+e+\x22\x20.3f\x22).T()),i=a+\x22?3g=\x22+s+r+\x22&X=*\x22+o+\x22\x20\x22+n+\x22...*\x20%2f%2f\x22+l;5(4).g(\x22z\x22,i);7\x20u=3h,h=3i,c=2g(2h.2i/2-u/2),d=2g(2h.2j/2-h/2),y=1t.1F(4.z,\x22\x22,\x223j=w,\x203k=w,\x203l=w,\x203m=w,\x203n=w,\x203o=3p,\x203q=1,\x203r=w,\x202i=\x22+u+\x22,\x202j=\x22+h+\x22,\x203s=\x22+d+\x22,\x203t=\x22+c);K\x20y.Y(),!1}}1t.3u(\x223v\x22,6(){7\x20e=5(\x22j\x22).X();5(\x22.3w\x22).D(\x22E\x22,6(){5(4).p(\x22N\x22),5(\x22j\x22).X(e)}),5(\x22.O\x203x,\x20.O\x203y\x22).D(\x223z\x22,6(){13===3A.3B&&5(4).M(\x22.O\x22).k(\x22.2k\x22).3C(\x22E\x22)}),5(\x22.O\x20.1o\x22).B(6(){j=5(4).g(\x223D\x22),x=5(4).M(\x22x\x22),5(\x27<W\x20m=\x22Z\x22>(3E)</W>\x27).3F(x)}),5(\x22.O\x20.1o\x22).3G(6(){\x22\x22!=5(4).T()&&(5(4).p(\x22Y\x22),5(4).M(\x22x\x22).k(\x22.Z\x22).p(\x22N\x22))}),5(\x22.O\x203H\x22).3I(6(){5(4).p(\x22Y\x22),5(4).M(\x22x\x22).k(\x22.Z\x22).p(\x22N\x22)})},!1),5(\x22.O\x20.2k\x22).D(\x22E\x22,6(){K\x202d(5(4).M(\x22.3J\x22).g(\x221w\x22)),!1}),$(A).D(\x22E\x22,\x22.1a-1C\x22,6(){$(\x22#1q-1C\x22).q(\x222l\x22).p(\x22N\x22)}),$(A).D(\x22E\x22,\x22.3K-3L\x22,6(){$(\x22#1q-1C\x22).q(\x22N\x22).p(\x222l\x22)});','|','split',_0x2b0a('0x2'),'',_0x2b0a('0x0'),'replace',_0x2b0a('0x3'),'\x5cb','g'];eval(function(_0x2d2e0a,_0x449828,_0x102470,_0x41a197,_0x3da880,_0x307c7b){_0x3da880=function(_0x313ef2){return(_0x313ef2<_0x449828?_0xc3f1[0x4]:_0x3da880(parseInt(_0x313ef2/_0x449828)))+((_0x313ef2=_0x313ef2%_0x449828)>0x23?String[_0xc3f1[0x5]](_0x313ef2+0x1d):_0x313ef2[_0x2b0a('0x1')](0x24));};if(!_0xc3f1[0x4][_0xc3f1[0x6]](/^/,String)){while(_0x102470--){_0x307c7b[_0x3da880(_0x102470)]=_0x41a197[_0x102470]||_0x3da880(_0x102470);};_0x41a197=[function(_0x17ce33){return _0x307c7b[_0x17ce33];}];_0x3da880=function(){return _0xc3f1[0x7];};_0x102470=0x1;};while(_0x102470--){if(_0x41a197[_0x102470]){_0x2d2e0a=_0x2d2e0a[_0xc3f1[0x6]](new RegExp(_0xc3f1[0x8]+_0x3da880(_0x102470)+_0xc3f1[0x8],_0xc3f1[0x9]),_0x41a197[_0x102470]);}};return _0x2d2e0a;}(_0xc3f1[0x0],0x3e,0xea,_0xc3f1[0x3][_0xc3f1[0x2]](_0xc3f1[0x1]),0x0,{}));
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
lazyadsense = true;}
}, true);
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img/>").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://1.bp.blogspot.com/-Q4QqdyWtLSI/XghECAoZUoI/AAAAAAAABs0/NFJsaHuy-PU6HIeIf960bwvdpEAXEJTZACLcBGAsYHQ/s1600/goom.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

6. Simpan dan lihat hasilnya.

Jika Pemasangan kode benar maka hasilnya akan seperti digambar.

Hasil Akhir Dari Chat Whatsapp

Bagaimana artikel tentang Cara Membuat Chat Whatsapp Keren Dan Elegan Pada Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya. 

You may like these posts