Cara Memasang Welcome Box di 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, widget 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>:
- Tempel di atas ]]></b:skin>:
- Pilih SIMPAN
- Selesai.
<div class="welcomeBox" id="welcomeBox"> <div class="welcomeClose"><span class="welcomeCloseNotif">Close</span>x</div> <div class="welcomeContainer"> <div class="welcomeTitle">Welcome to EriDocs!</div> <div class="welcomeDescription">EriDocs is a dedicated page to display tutorial demos and other complementary information</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 class="iconItemTwo" 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 class="iconItemTwo" 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> <span class="welcomeIcon"> <a href="#" title="Sitemap"> <svg class="iconItem" viewBox="0 0 24 24"><g transform="translate(3.610000, 2.750100)"><line class="iconItemTwo" x1="11.9858" y1="12.9463" x2="4.7658" y2="12.9463"></line><line class="iconItemTwo" x1="11.9858" y1="9.1865" x2="4.7658" y2="9.1865"></line><line class="iconItemTwo" x1="7.521" y1="5.4272" x2="4.766" y2="5.4272"></line><path d="M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 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>
/* Welcome Box by www.ferisp.com */
.welcomeBox{position:fixed;width:400px;background:#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 8s forwards;z-index:999}
.welcomeContainer{margin:-20px 0 8px 0}
.welcomeClose{color:#ccc;text-align:right;margin-top:-10px;cursor:pointer}
.welcomeClose span.welcomeCloseNotif{color:#ddd;font-size:10px;margin-right:5px}
.welcomeTitle{color:#333;font-weight:bold}
.welcomeDescription{color:#444;font-size:14px;margin-top:10px;line-height:20px}
.welcomeLink{margin-top:20px}
.welcomeSub a{background:#009ee0;color:#fff;font-size:14px;padding:10px;border-radius:3px}
.welcomeSub a:hover{background:#068ac2;color:#fff}
.welcomeIcon svg{margin-bottom:-9px;padding-left:10px;width:30px;height:30px}
.welcomeIcon svg.iconItem{fill:none;stroke:#111}
.welcomeIcon svg .iconItemTwo{stroke:#4d8aa3}
@keyframes welcomeShow{to{opacity:1}}
@media screen and (max-width:700px){.welcomeBox{width:100%;right:0;bottom:0;left:0;border-radius:0}}
/* Dark Mode */
.drK .welcomeBox{background:#1e1e1e}
.drK .welcomeTitle{color:#e0e0e0}
.drK .welcomeDescription{color:#cecece}
.drK .welcomeIcon svg.iconItem{stroke:#eee}
.drK .welcomeIcon svg .iconItemTwo{stroke:#009ee0}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"><span class="welcomeCloseNotif">Close</span>x</div> <div class="welcomeContainer"> <div class="welcomeTitle">Welcome to EriDocs!</div> <div class="welcomeDescription">EriDocs is a dedicated page to display tutorial demos and other complementary information</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 class="iconItemTwo" 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 class="iconItemTwo" 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> <span class="welcomeIcon"> <a href="#" title="Sitemap"> <svg class="iconItem" viewBox="0 0 24 24"><g transform="translate(3.610000, 2.750100)"><line class="iconItemTwo" x1="11.9858" y1="12.9463" x2="4.7658" y2="12.9463"></line><line class="iconItemTwo" x1="11.9858" y1="9.1865" x2="4.7658" y2="9.1865"></line><line class="iconItemTwo" x1="7.521" y1="5.4272" x2="4.766" y2="5.4272"></line><path d="M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z"></path></g></svg> </a> </span> </div> </div> </div> <!-- End HTML --> <!-- CSS --> <style> /* Welcome Box by www.ferisp.com */ .welcomeBox{position:fixed;width:400px;background:#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 8s forwards;z-index:999} .welcomeContainer{margin:-20px 0 8px 0} .welcomeClose{color:#ccc;text-align:right;margin-top:-10px;cursor:pointer} .welcomeClose span.welcomeCloseNotif{color:#ddd;font-size:10px;margin-right:5px} .welcomeTitle{color:#333;font-weight:bold} .welcomeDescription{color:#444;font-size:14px;margin-top:10px;line-height:20px} .welcomeLink{margin-top:20px} .welcomeSub a{background:#009ee0;color:#fff;font-size:14px;padding:10px;border-radius:3px} .welcomeSub a:hover{background:#068ac2;color:#fff} .welcomeIcon svg{margin-bottom:-9px;padding-left:10px;width:30px;height:30px} .welcomeIcon svg.iconItem{fill:none;stroke:#111} .welcomeIcon svg .iconItemTwo{stroke:#4d8aa3} @keyframes welcomeShow{to{opacity:1}} @media screen and (max-width:700px){.welcomeBox{width:100%;right:0;bottom:0;left:0;border-radius:0}} /* Dark Mode */ .drK .welcomeBox{background:#1e1e1e} .drK .welcomeTitle{color:#e0e0e0} .drK .welcomeDescription{color:#cecece} .drK .welcomeIcon svg.iconItem{stroke:#eee} .drK .welcomeIcon svg .iconItemTwo{stroke:#009ee0} </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 widget, 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.