Cara Memasang 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
<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
<!-- 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 -->
Posting Komentar untuk "Cara Memasang Box Selamat Datang Di Blog"