Welcome Box Blog - Jika sering berkunjung ke web-web luar negeri, Anda pasti pernah melihat pop up yang berisi ucapan selamat datang bukan? Jika dilihat secara sekilas, tampilan akan mirip seperti notifikasi cookies.
Perlukah memasang kotak selamat datang di blog? Sebenarnya tergantung, wijet ini hanyalah referensi tambahan jika Anda ingin memberikan animasi-animasi keren lainnya ke semua pembaca.
Rekomendasi: Cara Memasang Notifikasi Cookies di Blog
Untuk penggunaannya, Anda bisa memasang pada keseluruhan halaman maupun yang tertentu saja. Selain itu, welcome box ini juga disediakan elemen penegas lain seperti deskripsi web, tombol berlangganan, halaman kontak, dan halaman tentang.
Jika masih bingung, silahkan membuka halaman berikut:
Cara Memasang Welcome Box di Blog
- Masuk ke BLOGGER
- Pilih menu TEMA
- Pilih EDIT HTML
- Tempel di atas </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>.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}}Catatan
Untuk fitur yang lebih lengkap, silahkan menambah elemen berdasarkan pengetahuan koding Anda. Untuk pemasangan pada postingan dan halaman tertentu, tempel kumpulan skrip berikut di bawah tulisan (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 -->Penutup
Buat teman-teman yang pesannya lambat dibalas, mohon maaf, pekerjaan juga lumayan sibuk. Untuk request wijet, silahkan menghubungi melalui halaman kontak.
Rekomendasi: Cara Mengunci Halaman dan Postingan di Blog
Cukup sekian artikel tentang Cara Memasang Welcome Box di Blog ini, Terima kasih.
No comments:
Post a Comment