Panduan Seting BlogHost

KOTAK PENCARIAN

KETERANGAN
Silahkan sesuaikan Kode Berikut

<div class='pignation-search'>
 <div class='container'>
 <div class='box-left'>
   <h3>Search Your Domain Here</h3>
<span>You can find .com, .org, .net and all other top level domain from here.</span>
</div>
 <div class='box-right'>
<form action='/search' class='searchform cf' method='get'>
  <input id='q' name='q' placeholder='Is it me you’re looking for?' type='text'/>
  <button type='submit'>Search <i aria-hidden='true' class='fa fa-search'/></button>
</form>
</div>
</div>
</div>

FITUR 4

KETERANGAN
Silahkan Di Sesuaikan Kode Berikut

<div class='bas-wrapper1'>
<div class='content-wrapper'>
<h1 class='heading-title'>One Of The Best And Splendid</h1>
<p>In Home Villa theme search, user can manually draw lines on map, all ads/listings in that area show up as a result.</p>
<div class='postinfo'>
<div class='infopay'>
<span class='icon icon1 wow animated zoomIn delay-2'>
<i class='fa fa-credit-card'/>
</span>
<h2>Buy Property</h2>
<h3>Real Estate Bootstrap 4 Template best theme for elit, seddo eiumod tempor dolor sit.</h3>
</div>
<div class='infopay'>
<span class='icon icon2 wow animated zoomIn delay-3'>
<i class='fa fa-wrench'/>
</span>
<h2>Sale Propert</h2>
<h3>Real Estate Bootstrap 4 Template best theme for elit, seddo eiumod tempor dolor sit.</h3>
</div>
<div class='infopay'>
<span class='icon icon3 wow animated zoomIn delay-4'>
<i class='fa fa-users'/>
</span>
<h2>TEAM MANAGEMENT</h2>
<h3>Real Estate Bootstrap 4 Template best theme for elit, seddo eiumod tempor dolor sit.</h3>
</div>
<div class='infopay'>
<span class='icon icon4 wow animated zoomIn delay-5'>
<i class='fa fa-shopping-bag'/></span>
<h2>Mortgage Property</h2>
<h3>Real Estate Bootstrap 4 Template best theme for elit, seddo eiumod tempor dolor sit.</h3>
</div>
</div>
</div>
</div>

KETERANGAN
Silahkan di sesuaikan Sesuai Kebutuhan
NOTE: Untuk merubah icon yang saya tandai Hijau silahkan lihat Panduannya DISINI ( Jika diperlukan )

FITUR INFO

KETERANGAN
Silahkan di sesuaikan Kode berikut

<div class='box-wrapper2'>
<div class='container'>
<div class='box-text'>
  <h2>Web Search</h2>
<p>Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s.</p>
</div>
<div class='left'>
<h3>Lorem text of the printing and typesetting industry.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut nim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
<div class='button_amp'><a href='#'>Read More</a></div>
</div>
<div class='right'>
  <img alt='HostWay' src='https://2.bp.blogspot.com/-1oZcAO6K68A/XJT8tp5qN6I/AAAAAAAAIL4/bQOUxYyjlOsePrFPuklHqEeHpqdIIhGoACLcBGAs/s1600/b.png'/>
</div>
</div>
</div>

FITUR 4 HOME

KETERANGAN Silahkan di sesuaikan Kode Berikut

<div class='box-wrapper4'>
<div class='container'>
<div class='box-text'>
  <span>Include All</span>
  <h2>WHAT WE DO</h2>
</div>

<!-- Information 1 -->
<div class='box-info2'>
  <img src='https://3.bp.blogspot.com/-_IgJCHthTgo/XJT-IHfo78I/AAAAAAAAIMM/73aXzSO_WW0zEbdiXuQDUIX2I8JaXGzQwCLcBGAs/s1600/ic.png'/>
   <h1>Data Protection</h1>
   <p>Mirum est notare quam littera g It long established to that a reader</p>
  </div>
<!-- Information End 1 -->

<!-- Information 2 -->
<div class='box-info2'>
  <img alt='' src='https://3.bp.blogspot.com/-0VoZXBo8Ud4/XJT-zEhCYQI/AAAAAAAAIMU/kjRSkKFat5omfEn-r9t0snF3XDY2ahzWwCLcBGAs/s1600/ic2.png'/>
   <h1>Optimization</h1>
   <p>Mirum est notare quam littera g It long established to that a reader</p>
  </div>
<!-- Information End 2 -->

<!-- Information 3 -->
<div class='box-info2'>
  <img alt='' src='https://4.bp.blogspot.com/-BT3_RJIvLBg/XJT_EfKBC_I/AAAAAAAAIMc/GaqgWeWWfn45WTt6tiOxjJs8VOAFdt4VQCLcBGAs/s1600/ic3.png'/>
   <h1>Data Analysis</h1>
   <p>Mirum est notare quam littera g It long established to that a reader</p>
  </div>
<!-- Information End 3 -->

<!-- Information 4 -->
<div class='box-info2'>
  <img alt='' src='https://4.bp.blogspot.com/-rcYuTqy5iB8/XJT_izKqvjI/AAAAAAAAIMk/mu4DhqJditQps3Li9H4_H7gQNCvvbSt-QCLcBGAs/s1600/ic4.png'/>
   <h1>Data Enctyption</h1>
   <p>Mirum est notare quam littera g It long established to that a reader</p>
  </div>
<!-- Information End 4 -->

</div>
</div>

KETERANGAN
SilahkanUbah dan sesuaikan
        Link gambar atau logo
        Silahkan sesuaikan
       Silahkan Uraikan

PRICE TABEL

KETERANGAN
Silahkan Sesuaikan Kode Berikut

<div class='box-wrapper5'>
<div class='container'>
<div class='box-text' id='box-price'>
  <h2>DIFFERENT HOSTING PLATFORMS</h2>
<p>Each type of hosting service we provide is further optimized</p>
</div>
<div id='price'>
  <!--price tab-->
  <div class='plan'>
<div class='entry-title'>
        <div class='price'>$25<span>pm</span>
        </div>
      </div>
    <div class='plan-inner'>
<div class='pricing-tag pricing-tag--free'>Free</div>
      <div class='pricing-content'>
        <ul>
          <li>BASIC PLAN</li>
          <li>10GB Storage Space</li>
          <li>50GB Bandwidth</li>
          <li>10 Free Sub-Domains</li>
          <li>100 E-mail Accounts</li>
<li>Control Panel &amp; FTP</li>
        </ul>
      </div>
      <div class='btn'>
        <a href='#'>Read More</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->

  <!--price tab-->
  <div class='plan basic'>
<div class='entry-title'>
        <div class='price'>$50<span>pm</span>
        </div>
      </div>
    <div class='plan-inner'>
<div class='pricing-tag pricing-tag--premium'>Premium</div>
  <div class='pricing-content'>
        <ul>
          <li>BASIC PLAN</li>
          <li>10GB Storage Space</li>
          <li>50GB Bandwidth</li>
          <li>10 Free Sub-Domains</li>
          <li>100 E-mail Accounts</li>
<li>Control Panel &amp; FTP</li>
        </ul>
      </div>
      <div class='btn'>
        <a href='#'>Read More</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->

  <!--price tab-->
  <div class='plan standard'>
      <div class='entry-title'>
        <div class='price'>$75<span>pm</span>
        </div>
      </div>
    <div class='plan-inner'>
<div class='pricing-tag pricing-tag--standard'>Standard</div>
  <div class='pricing-content'>
        <ul>
          <li>BASIC PLAN</li>
          <li>10GB Storage Space</li>
          <li>50GB Bandwidth</li>
          <li>10 Free Sub-Domains</li>
          <li>100 E-mail Accounts</li>
<li>Control Panel &amp; FTP</li>
        </ul>
      </div>
      <div class='btn'>
        <a href='#'>Read More</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->

  <!--price tab-->
  <div class='plan ultimite'>
      <div class='entry-title'>
        <div class='price'>$100<span>pm</span>
        </div>
      </div>
    <div class='plan-inner'>
<div class='pricing-tag pricing-tag--ultimite'>ultimite</div>
  <div class='pricing-content'>
        <ul>
          <li>BASIC PLAN</li>
          <li>10GB Storage Space</li>
          <li>50GB Bandwidth</li>
          <li>10 Free Sub-Domains</li>
          <li>100 E-mail Accounts</li>
<li>Control Panel &amp; FTP</li>
        </ul>
      </div>
      <div class='btn'>
        <a href='#'>Read More</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->
</div>
</div>
</div>

KETERANGAN
Silahkan sesuaikan Yang saya tandai
       Untuk Harga
       Paket
       Link Tujuan

TESTIMONIAL

KETERANGAN
Untuk Seting Testimoni Masih Di Dalam Tema Edit HTML, Silahkan Tekan CTRL+F Kemudian Ketikan TESTIMONIALS Lalu Enter Jika ketemu kode berikut silahkan di sesuaikan

<div class='box-wrapper6' id='testimonial'>
<div class='container'>
<div class='box-text'>
<h2>TESTIMONIALS</h2>
</div>
<div class='testimonial-slider'>
<figure class='snip1157'>
<blockquote>Calvin: You know sometimes when I&#39;m talking, my words can&#39;t keep up with my thoughts... I wonder why we think faster than we speak. Hobbes: Probably so we can think twice</blockquote>
<img alt='sq-sample3' src='https://1.bp.blogspot.com/-LTLF9XEpzm0/XkoB6rZR9NI/AAAAAAAABIs/7Fq_K_YUv84NIm-zmwR2wIS8SvgdILEFQCLcBGAsYHQ/s1600/Admin.png'/>
<div class='author'>
<h5>Client Testi 1 <span>/ General director</span></h5>
<h4>Mauris volutpat nulla a enim efficitur elementum poritor at </h4>
</div>
</figure>
<figure class='snip1157'>
<blockquote>Thank you. before I begin, I&#39;d like everyone to notice that my report is in a professional, clear plastic binder...When a report looks this good, you know it&#39;ll get an A. That&#39;s a tip kids. Write it down.</blockquote>
<img alt='sq-sample27' src='https://1.bp.blogspot.com/-LTLF9XEpzm0/XkoB6rZR9NI/AAAAAAAABIs/7Fq_K_YUv84NIm-zmwR2wIS8SvgdILEFQCLcBGAsYHQ/s1600/Admin.png'/>
<div class='author'>
<h5>Client Testi 2<span>/ General director</span></h5>
<h4>Mauris volutpat nulla a enim efficitur elementum poritor at </h4>
</div>
</figure>
<figure class='snip1157'>
<blockquote>My behaviour is addictive functioning in a disease process of toxic co-dependency. I need holistic healing and wellness before I&#39;ll accept any responsibility for my actions.</blockquote>
<img alt='sq-sample17' src='https://1.bp.blogspot.com/-LTLF9XEpzm0/XkoB6rZR9NI/AAAAAAAABIs/7Fq_K_YUv84NIm-zmwR2wIS8SvgdILEFQCLcBGAsYHQ/s1600/Admin.png'/>
<div class='author'>
<h5>Client Testi 3<span>/ General director</span></h5>
<h4>Mauris volutpat nulla a enim efficitur elementum poritor at </h4>
</div>
</figure>
</div>
<div class='testimonial-img'>
<img alt='HostWay' src='https://1.bp.blogspot.com/-OE98E7UVvMQ/Xkn-36tcukI/AAAAAAAABIA/Q4ailCbuFWgSpS-yI_muM33ar-c0jl-CACLcBGAsYHQ/s1600/WP-Hosting.webp'/>
</div>
</div>
</div>

KETERANGAN
Silahkan di sesuaikan
       Testi dari Pelanggan
       Orange Link Gambar/Logo Pelanggan
       Nama Pelanggan
       Jabatan/Lainnya
       Text Lainnya

MEMBUAT HALAMAN CONTACT US

KETERANGAN
Silahkan Masuk Ke Blogger Pilih Halaman, Buat Halaman Baru Lihat Gambar Di Bawah



KETERANGAN
Silahkan Buka Folder Halaman yang saya Kirim atau bisa Copy Kode Di Bawah Ini

<div style="text-align: justify;">
<div style="text-align: left;">
Untuk menghubungi Admin Silahkan Melalui Contact Form Di Bawah ini...</div>

</div>
<form id="contact-form" name="contact-form">
<input box-sizing:border-box="" id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input box-sizing:border-box="" id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea box-sizing:border-box="" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> 


<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'GANTI-DENGAN ID-BLOG-NADA';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dGANTI-DENGAN ID-BLOG-NADA','https://www.hendikiddrock.com/','GANTI-DENGAN ID-BLOG-NADA');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'GANTI-DENGAN ID-BLOG-NADA', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#contact-form{margin:auto;max-width:100%}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-sizing:border-box; rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-sizing:border-box; rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-sizing:border-box; rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{display:block;height:40px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#34495e;border:0px;border-radius:3px;text-align:center;letter-spacing:.5px;}
#ContactForm1_contact-form-submit:hover{background:#00008B;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border{background:#00008B;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross{line-height:40px;margin-left:5px;}
.post-body input{width:initial}
@media only screen and (max-width:100%px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

KETERANGAN
Silahkan ubah yang saya Tandai Orange Dengan ID Blog Anda Masing Masing, ID Blog bisa di lihat pada saat anda Membuat Halaman Kontak Atau Lainnya, ID Blog Seperti Gambar Berikut


Jika sudah Ganti Semua Tulisan GANTI-DENGAN-ID-BLOG-ANDA dengan ID Blog Silahkan Klik Perbarui/Publis Pada Kanan Atas Layar Warna Orange, Dan Lihat Hasilnya Test Apakah Work Atau Tida Contact Form Bloggernya, Jika Tidak Kemungkinan Ada ID Yg belum Terganti Atau Ada Kode yang Terhapus.

MEMBUAT GALLERY

Membuat Gallery Sama seperti membuat Halaman CONTACT US di atas, Hanya berbeda Kode saja, Silahkan Buka Folder Gallery Pada File yang saya Kirim, Kemudian Copy seluruh Kode Paste Ke dalam Kotak Halaman, Pastikan Mode HTML Bukan Compose sama seperti CONTACT US

<!-- Blog Basic -->
<div class="col-1">
<div class="promotion-box">
<div class="promotion-image">
<img src="https://i0.wp.com/penasihathosting.com/wp-content/uploads/2016/05/review-niagahoster-1.jpg" class="lazyload" alt="Jasa Pembuat Blog Blogspot Murah" scale="0"/>
</div>
<div class="promotion-description">
<p>Promo Pembuatan Blog</p>
<div class="promotion-date">

<div class="promotion-date-detail">
<div class="promotion-box-label text-secondary">Pengerjaan Max 5 Hari kerja</div>

</div>
</div>
<div class="promotion-code">
<div class="promotion-code-detail">
<div class="promotion-box-label text-secondary">RP 750.000</div>
</div>
</div>
</div>
<div class="promotion-cta">
<a target="_blank" href="#">Selengkapnya</a>
</div>
</div>
</div>

<!-- Blog Basic -->
<div class="col-1">
<div class="promotion-box">
<div class="promotion-image">
<img src="https://i1.wp.com/makinrajin.com/blog/wp-content/uploads/2017/11/yayay.jpg?resize=750%2C410&ssl=1" class="lazyload" alt="Jasa Pembuat Blog Blogspot Murah" scale="0"/>
</div>
<div class="promotion-description">
<p>Promo Pembuatan Blog</p>
<div class="promotion-date">

<div class="promotion-date-detail">
<div class="promotion-box-label text-secondary">Pengerjaan Max 5 Hari kerja</div>

</div>
</div>
<div class="promotion-code">
<div class="promotion-code-detail">
<div class="promotion-box-label text-secondary">RP 750.000</div>
</div>
</div>
</div>
<div class="promotion-cta">
<a target="_blank" href="#">Selengkapnya</a>
</div>
</div>
</div>

<!-- Blog Basic -->
<div class="col-1">
<div class="promotion-box">
<div class="promotion-image">
<img src="https://i0.wp.com/penasihathosting.com/wp-content/uploads/2016/05/review-niagahoster-1.jpg" class="lazyload" alt="Jasa Pembuat Blog Blogspot Murah" scale="0"/>
</div>
<div class="promotion-description">
<p>Promo Pembuatan Blog</p>
<div class="promotion-date">

<div class="promotion-date-detail">
<div class="promotion-box-label text-secondary">Pengerjaan Max 5 Hari kerja</div>

</div>
</div>
<div class="promotion-code">
<div class="promotion-code-detail">
<div class="promotion-box-label text-secondary">RP 750.000</div>
</div>
</div>
</div>
<div class="promotion-cta">
<a target="_blank" href="#">Selengkapnya</a>
</div>
</div>
</div>

<!-- Blog Basic -->
<div class="col-1">
<div class="promotion-box">
<div class="promotion-image">
<img src="https://i0.wp.com/penasihathosting.com/wp-content/uploads/2016/05/review-niagahoster-1.jpg" class="lazyload" alt="Jasa Pembuat Blog Blogspot Murah" scale="0"/>
</div>
<div class="promotion-description">
<p>Promo Pembuatan Blog</p>
<div class="promotion-date">

<div class="promotion-date-detail">
<div class="promotion-box-label text-secondary">Pengerjaan Max 5 Hari kerja</div>

</div>
</div>
<div class="promotion-code">
<div class="promotion-code-detail">
<div class="promotion-box-label text-secondary">RP 750.000</div>
</div>
</div>
</div>
<div class="promotion-cta">
<a target="_blank" href="#">Selengkapnya</a>
</div>
</div>
</div>

KETERANGAN
Silahkan di sesuaikan
        Link Gambar
        Judul
        Keterangan
        Harga
        Link Tujuan

NOTE: Untuk menambahkan Bagian Silahkan tambahkan kode Berikut Tepat Di Atas Kode <style>

<div class="col-1">
<div class="promotion-box">
<div class="promotion-image">
<img src="LINK-GAMBAR-DISINI" class="lazyload" alt="Jasa Pembuat Blog Blogspot Murah" scale="0"/>
</div>
<div class="promotion-description">
<p>Promo Pembuatan Blog</p>
<div class="promotion-date">
<div class="promotion-date-detail">
<div class="promotion-box-label text-secondary">Pengerjaan Max 5 Hari kerja</div>
</div>
</div>
<div class="promotion-code">
<div class="promotion-code-detail">
<div class="promotion-box-label text-secondary">RP 750.000</div>
</div>
</div>
</div>
<div class="promotion-cta">
<a target="_blank" href="#">Selengkapnya</a>
</div>
</div>
</div>

WA LIVE CHAT

KETERANGAN
Masih Di Tema Edit HTML, Silahkan Cari Nomor 81294381600 ( Tanpa Nol ) Lalu Ganti Dengan Nomor Anda Masing Masin Kodenya Seperti berikut
HTML

<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://raw.githubusercontent.com/themeindocom/img-host/master/Admin.png' title='avatar'/>
<span class='nime'/>
</div>
<div class='info-chat'>
<span class='chat-label'>Admin</span>
<span class='chat-text'>Welcome to WayTheme, if you have anything to ask please via our WhatsApp</span>
</div>
</div>
<div class='goophone'>
<a href='tel:+6281294381600' 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'/>
</svg></a>
<a href='mailto:themeindocom@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 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 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 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'/>
</svg>
</a>
</div>
</div>
<div class='first-msg'>
<div class='box-msg'>
<span class='chat-nama'>Hendi Appstore</span>
<span class='chat-cript'>Hi there!</span>
<span>Hello, Can I help you?</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'/></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>

CONTOH SCRIPT

<script>
//<![CDATA[
konsultasi"===e)var s=62,r=81294381600,n="Admin",o="Hello",l=(jQuery("#"+e+" .title-content").text(),jQuery("#"+e+" .pesan").val()),i=a+"?phone="+s+r+"&text=*"+o+" "+n+"...* %0A%0A"+l;jQuery(this).attr("href",i);var u=960,h=540,c=Number(screen.width/2-u/2),d=Number(screen.height/2-h/2),y=window.open(this.href,"","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width="+u+", height="+h+", top="+d+", left="+c);return y.focus(),!1}}window.addEventListener("load",function(){var e=jQuery("title").text();jQuery(".waFix").on("click",function(){jQuery(this).removeClass("show"),jQuery("title").text(e)}),jQuery(".formWA input, .formWA textarea").on("keypress",function(){13===event.keyCode&&jQuery(this).parents(".formWA").find(".submit").trigger("click")}),jQuery(".formWA .wajib").each(function(){title=jQuery(this).attr("placeholder"),label=jQuery(this).parents("label"),jQuery('<span class="validasi">(Required)</span>').appendTo(label)}),jQuery(".formWA .wajib").keyup(function(){""!=jQuery(this).val()&&(jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show"))}),jQuery(".formWA select").change(function(){jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show")})},!1),jQuery(".formWA .submit").on("click",function(){return kirimWA(jQuery(this).parents(".poptamv").attr("id")),!1}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".nabil-live",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

KETERANGAN
Silahkan Di Sesuaikan
        Link Gambar
        Admin Dan Lainnya
        Nomor Hp
        Email
        Text Pembuka WA