Tutorial Cara Membuat Kotak Pop Up Box Atau Modal Box Melayang Pada Blog
Kotak tabel pop up atau pop up box memang sangat menguntungkan bagi kamu para pemilik website. pasalnya dengan kotak tabel pop up yang kamu miliki. tentunya orang semakin yakin bahwa apa yang ingin kamu sampaikan pada kotak tabel pop up tersebut. entah itu sekedar pengumuman pada blog yang kamu rombak baru-baru ini atau memberitahu bahwa kamu memiliki social media atau melakukan donasi.
Sebenarnya ada banyak pilihan bagaimana cara membuat pop up box di internet. akan tetapi yang simple dan tidak memberatkan loading blog itu susah sekali didapat. mengingat kebanyakan pop up box baru akan terload 2 sampai 3 menit setelahnya. karena css yang digunakan cukup banyak dan tidak sederhana.
Pop up box sendiri banyak digunakan oleh para blogger. disamping untuk memberitahu orang-orang atau pengunjung yang melihat blognya. pop up box sering digunakan untuk memberikan tombol social media agar pengunjung bisa langsung mengikuti social media yang si pemilik miliki.
Nah pada kesempatan kali ini aku akan memberikan sebuah tutorial bagaimana caranya membuat kotak tabel pop up box melayang pada blog milikmu. tepat seperti pada gambar diatas ini. kotak tabel yang aku berikan tersebut berisi pelangi disetiap sisinya dan bergerak. jadi semakin keren. nah simak tutorial dibawah ini dengan seksama.
Tutorial :
- Pertama-tama pastikan kamu telah login pada blogger milikmu.
- Setelah itu pergilah ke menu "Tema".
- Disini click tombol icon segitiga mengarah kebawah tersebut disamping tombol "SESUAIKAN"
- Jika sudah maka pilih menu "Edit HTML".
- Nah pada halaman ini. carilah code ]]></b:skin> atau jika tidak bisa. carilah code </style>.
- Copy seluruh code dibawah ini dengan cara select/block semua codenya lalu tekan tombol CTRL + C pada keyboard. dan pastekan tepat diatas code ]]></b:skin> atau code </style> :
/* topbar */#topbar {height:30px;width:auto;margin:0 auto;background: #f2f2f3 url('http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg');background-repeat:repeat-x;text-align:left;padding-top:4px;}#adsground {height:auto;margin:0 auto;width: 336px;background:#fff;border-bottom:2px #f2f2f3 solid;border-right:2px #f2f2f3 solid;border-left:2px #f2f2f3 solid;text-align:Center;padding:4px;}#headlineatas {opacity:1.0;height:auto;width:auto;position:fixed;top:65px;left:170px;border-bottom:1px #f2f2f3 solid;border-bottom:0px #f2f2f3 solid;color:#333;padding:0px;z-index:1001;position: fixed;top: 30%;left: 42%;margin-top: -120px;margin-left: -220px;font-size:13px;}#headlineatas a{color:#000;}@media screen and (max-width:768px) {#headlineatas {left:245px;}}@media screen and (max-width:508px) {#headlineatas {left:50px;}}/* Rainbow */@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.rainbow{position:relative;z-index:0;overflow:hidden;padding:3px}.rainbow::before{content:'';position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#2ecc71;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#f3125c,#f3125c),linear-gradient(#f7a524,#f7a524),linear-gradient(#25dc7f,#25dc7f),linear-gradient(#4e38f3,#4e38f3);animation:rotate 8s linear infinite}.rainbow::after{content:'';position:absolute;z-index:-1;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}#HTML99{padding:0}#HTML99 h2{color:#222;padding:0}#HTML99 h2:before{display:none}.subscribe-wrapper{color:#222;line-height:20px;margin:0;padding:20px}.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}- Jika sudah maka sekarang copy seluruh code dibawah ini dengan cara select/block semua codenya lalu tekan tombol CTRL + C pada keyboard (caranya sama). dan pastekan tepat diatas code </body> :
<script type='text/javascript'>function getValue(){document.getElementById("headlineatas").style.display = 'none';}</script><div id='headlineatas'><div class='rainbow'><div id='topbar'><span style='color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px'><a onclick='getValue()' target='_blank'>X</a></span><span style='color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:110px'><a onclick='getValue()' target='_blank'>PENGUMUMAN</a></span></div><div id='adsground'><p> <b><font color='red'>Mohon sempatkan untuk membaca terlebih dahulu!!</font></b><br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis interdum urna. Donec malesuada non magna et ultrices. Aliquam maximus, ipsum at venenatis fermentum, ex turpis pellentesque purus, lobortis mattis sem nulla vel arcu.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis interdum urna. Donec malesuada non magna et ultrices. Aliquam maximus, ipsum at venenatis fermentum, ex turpis pellentesque purus, lobortis mattis sem nulla vel arcu. </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis interdum urna. Donec malesuada non magna et ultrices. Aliquam maximus, ipsum at venenatis fermentum, ex turpis pellentesque purus, lobortis mattis sem nulla vel arcu.</p> </div></div></div>- Jika sudah maka simpan hasil editanmu tersebut dengan cara click symbol icon berbentuk disket tersebut.
- Tunggu beberapa menit maka harusnya akan tersimpan.
- Nah sekarang kamu bisa mencobanya.
Pengaturan :
- Untuk tulisan yang aku bold warna Hijau. ganti angkanya jika tabelnya tidak berada tepat ditengah postingan artikel milikmu. semakin kecil angkanya maka tabel pemberitahuannya semakin kekiri. sebaliknya. semakin besar angkanya maka tabel pemberitahuannya akan semakin ke kanan.
- Untuk tulisan warna merah. ganti dengan judul yang ingin kamu berikan. kamu bisa memberikan judul sesuai dengan konteks dari kotak tabel pop up yang akan kamu gunakan.
- Untuk tulisan warna orange. kamu bisa isikan beberapa isi dari pengumuman yang ingin kamu berikan. atau kamu ingin memberikan kotak social media milikmu? bisa saja.
- Bagi kamu yang masih ragu dan ingin mengetahui bagaimanakah kotak tabel pop up tersebut. click disini untuk melihatnya.
- Oh iya, bagi kamu yang berhasil akan tetapi fungsi close atau ketika mengeclick symbol "X" pada kotak tabelnya tidak berhasil menutup. maka pindahkan seluruh code CSS /* topbar */ tersebut ke code <head>. tempatkan diatas code <head>, nah agar code cssnya dikenali dan mau bekerja maka sebelum kamu save. tambahkan atau berikan tag <style> diatas code /* topbar */ tersebut dan tag penutup </style> pada akhir code css topbar nya. setelah itu save.
