Cara Memasang Box Selamat Datang Di Blog

Pada kesempatan kali ini, saya akan membagikan kepada kalian semua Cara Membuat Box Selamat Datang Di Blog.

Jika kalian sering berkunjung ke semua website luar negri, anda pasti akan pernah melihat Pop Up yang berisi ucapan selamat datang bukan? Jika dilihat sekilas makan akan seperti notifikasi cookies.

Ga harus website luar negri, karena di website Indonesia juga sudah banyak yang menggunakan Box Selamat Datang berbentuk pop up loh.

Perlukah memasang Box Selamat datang di blog? Sebenarnya tergantung kalian sendiri. Widget ini hanyalah refrensi tambahan jika anda ingin memberi animasi-animasi keren lainnya ke semua pembaca.

Untuk penggunaannya sangat gampang sekali, anda bisa memasang pada keseluruhan halaman maupun halaman tertentu saja.

Selain itu Box Selamat Datang ini juga di sediakan elemen penegas lain seperti deskripsi web, tombol berlangganan, halaman kontak, dan juga halaman tentang saya.

Untuk demo tampilan mobile kalian bisa melihat gambar di bawah ini.

Cara Memasang Tampilan Box Selamat Datang Di Blog

1. Masuk ke hosting Blogger kalian

2. Pilih Menu TEMA lalu pilih EDIT HTML

3. Salin kode di bawah ini, tepat diatas kode </body>

<div class="welcomeBox" id="welcomeBox">
  <div class="welcomeClose">x</div>
  <div class="welcomeContainer">
    <div class="welcomeTitle">Welcome to Ferisp.com!</div>
    <div class="welcomeDescription">Ferisp.com is a website that discusses issues around Blogs, Apps, Networks, Smartphones, and Desktops</div>
    <div class="welcomeLink">
      <span class="welcomeSub">
        <a href="#" rel="noopener" target="_blank" title="Subscribe">Subscribe</a>
      </span>
      <span class="welcomeIcon">
        <a href="#" title="About">
          <svg class="iconItem" viewBox="0 0 24 24"><g transform="translate(5.000000, 2.400000)"><path d="M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z"></path><path d="M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z"></path></g></svg>
        </a>
      </span>
      <span class="welcomeIcon">
        <a href="#" title="Contact">
          <svg class="iconItem" viewBox="0 0 24 24"><g transform="translate(2.452080, 2.851980)"><path d="M15.0928322,6.167017 C15.0928322,6.167017 11.8828071,10.0196486 9.53493746,10.0196486 C7.18807029,10.0196486 3.941955,6.167017 3.941955,6.167017"></path><path d="M1.04805054e-13,9.11679198 C1.04805054e-13,2.27869674 2.38095238,8.8817842e-15 9.52380952,8.8817842e-15 C16.6666667,8.8817842e-15 19.047619,2.27869674 19.047619,9.11679198 C19.047619,15.9538847 16.6666667,18.233584 9.52380952,18.233584 C2.38095238,18.233584 1.04805054e-13,15.9538847 1.04805054e-13,9.11679198 Z"></path></g></svg>
        </a>
      </span>
    </div>
  </div>
</div>
<script>
var welcomeClose=document.getElementsByClassName("welcomeClose");var i;for(i=0;i<welcomeClose.length;i++){welcomeClose[i].addEventListener("click",function(){this.parentElement.style.display="none"})}
</script>

4. Selanjutnya kalian salin juga kode di bawah ini, setelah itu tempel di atas kode ]]></b:skin>

.welcomeBox{position:fixed;width:400px;background-color:#fff;font-family:"Noto Sans",sans-serif;right:30px;bottom:30px;padding:20px;border-radius:10px;opacity:0;box-shadow:0 20px 48px rgba(0,0,0,.2);animation:welcomeShow 0s 10s forwards}
.welcomeContainer{margin:-20px 0 8px 0}
.welcomeClose{color:#ccc;text-align:right;margin-top:-10px;cursor:pointer}
.welcomeTitle{color:#333;font-weight:bold}
.welcomeDescription{color:#444;font-size:14px;margin-top:10px}
.welcomeLink{margin-top:20px}
.welcomeSub a{background-color:#ea4c89;color:#fff;font-size:14px;padding:10px;border-radius:6px}
.welcomeSub a:hover{background-color:#e04681;color:#fff}
.welcomeIcon{padding-left:10px}
.welcomeIcon svg.iconItem{fill:none;stroke:#111}
@keyframes welcomeShow{to{opacity:1}}
@media screen and (max-width:700px){.welcomeBox{width:100%;right:0;bottom:0;left:0;border-radius:0}}

5. Setalah semua kode kalian sudah terapkan, silahkan klik SIMPAN TEMA

6. Selesai

Catatan

Untuk semua fitur lengkap, silahkan menambah element berdasarkan pengetahuan coding kalian.

Untuk pemasangan pada postingan atau halaman tertentu, kalian bisa tempel semua kumpulan script berikut di bawah ini (mode HTML)

<!-- HTML -->
<div class="welcomeBox" id="welcomeBox">
  <div class="welcomeClose">x</div>
  <div class="welcomeContainer">
    <div class="welcomeTitle">Welcome to Ferisp.com!</div>
    <div class="welcomeDescription">Ferisp.com is a website that discusses issues around Blogs, Apps, Networks, Smartphones, and Desktops</div>
    <div class="welcomeLink">
      <span class="welcomeSub">
        <a href="#" rel="nofollow noopener" target="_blank" title="Subscribe">Subscribe</a>
      </span>
      <span class="welcomeIcon">
        <a href="#" title="About">
          <svg class="iconItem" viewBox="0 0 24 24"><g transform="translate(5.000000, 2.400000)"><path d="M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z"></path><path d="M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z"></path></g></svg>
        </a>
      </span>
      <span class="welcomeIcon">
        <a href="#" title="Contact">
          <svg class="iconItem" viewBox="0 0 24 24"><g transform="translate(2.452080, 2.851980)"><path d="M15.0928322,6.167017 C15.0928322,6.167017 11.8828071,10.0196486 9.53493746,10.0196486 C7.18807029,10.0196486 3.941955,6.167017 3.941955,6.167017"></path><path d="M1.04805054e-13,9.11679198 C1.04805054e-13,2.27869674 2.38095238,8.8817842e-15 9.52380952,8.8817842e-15 C16.6666667,8.8817842e-15 19.047619,2.27869674 19.047619,9.11679198 C19.047619,15.9538847 16.6666667,18.233584 9.52380952,18.233584 C2.38095238,18.233584 1.04805054e-13,15.9538847 1.04805054e-13,9.11679198 Z"></path></g></svg>
        </a>
      </span>
    </div>
  </div>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
.welcomeBox{position:fixed;width:400px;background-color:#fff;font-family:"Noto Sans",sans-serif;right:30px;bottom:30px;padding:20px;border-radius:10px;opacity:0;box-shadow:0 20px 48px rgba(0,0,0,.2);animation:welcomeShow 0s 10s forwards}
.welcomeContainer{margin:-20px 0 8px 0}
.welcomeClose{color:#ccc;text-align:right;margin-top:-10px;cursor:pointer}
.welcomeTitle{color:#333;font-weight:bold}
.welcomeDescription{color:#444;font-size:14px;margin-top:10px}
.welcomeLink{margin-top:20px}
.welcomeSub a{background-color:#ea4c89;color:#fff;font-size:14px;padding:10px;border-radius:6px}
.welcomeSub a:hover{background-color:#e04681;color:#fff}
.welcomeIcon{padding-left:10px}
.welcomeIcon svg.iconItem{fill:none;stroke:#111}
@keyframes welcomeShow{to{opacity:1}}
@media screen and (max-width:700px){.welcomeBox{width:100%;right:0;bottom:0;left:0;border-radius:0}}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script>
var welcomeClose=document.getElementsByClassName("welcomeClose");var i;for(i=0;i<welcomeClose.length;i++){welcomeClose[i].addEventListener("click",function(){this.parentElement.style.display="none"})}
</script>
<!-- End JavaScript -->