Tutorial TutorialMemasang Pop Up Layar Penuh di Blogger - vivSoft

Sore yang panas di kota kecil tempat saya tinggal ini saya akan membagikan cara Memasang Pop Up Layar Penuh di Blogger. Pop up biasa dibuat untuk iklan atau sekedar promosi blog atau website anda yang lain di blog yang di pasang pop up. kok ribet ya bahasanya pokoknya inti dari semuanya adalah pop up bisa sobat gunakan untuk promosi.


Ok, langsung aja ke materi pelajaran kita hari ini agar kita tidak ketinggalan pelajaran.

Langkah 1 : Pastikan sobat sudah memasang jQuery Library, versi berapapun itu. jika belum silahkan simpan script external dibawah ini tepat sebelum code </head> pada halaman Edit Template :

<!-- Library jQuery --><script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Catatan : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.

Langkah 2 : Simpan Bumbu CSS di bawah ini tepat sebelum kode </head>

<style type="text/css">/* KediaSoft Box CSS */@media (max-width:800px){ #ks-box { display:none; } }#ks-box {position:fixed !important;position:absolute;top:-700px;left:39%;margin:0px 0px 0px -182px;font:normal Dosis, Georgia, Serif;color:#333;-webkit-box-shadow:0px 0px 10px #333;-moz-box-shadow:0px 0px 10px #333;box-shadow:0px 0px 10px #333;background:#fff;}#ks-box a.close-popup {position:absolute;top:-25px;right:0px;font:25px Arial, Sans-Serif;text-decoration:none;text-align:center;color:#f2f2f2;cursor:pointer;}#ks-box a.close-popup:hover { color:#fff; }#ks-box a.close-popup:active { opacity:0; }#ks-box div.black-bg { background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3I8aW6Xxh7MRzkulv5iX25lXg6_LRcpJBAYQLQJI1Nw2gV87TjwjfTPkm7HbceToOpUG4H-mJzEDXmi7Lpr04nLDT6mXN91gj2OiNscUSJWFH3zLRkeUCOA28O2i-Og7VCA43A74R0igv/s1600/ajax-loader-apps.gif) no-repeat center;position:fixed;top:0px;left:0px;width:100%;height:100%;opacity:.6;z-index:-500; }#ks-box div.gambar-space { border:5px solid #fff; position:relative; background:#fff;border-bottom:0px;}#ks-box div.gambar-space img { width:600px; height:400px; }</style>

Terakhir : Simpan kode JavaScript & HTML dibawah ini tepat di atas kode </body> , agar POPUP bisa di tampilkan.

<!-- jQuery ks-Box [ Begin ] --><div id="ks-box"><a class="close-popup" href="#">&#215;</a><div class="black-bg kaluar"></div><div class="gambar-space"><a href="#link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNgQTaUZxJTG8mBHGwYqQL8xgUGDt6tSzsFLENQMqunt0ElsyDqfStcvh9aubciN4g3g65RKH3XvoZffWi9XXtA1OROQbd_xKV6kf9bZ9VWWcS_Gk0BrORlGIKZUBeNMQAHbSzs8Pc-du/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul"/></a></div></div>
<script type='text/javascript'>// JavaScript ks-Box$(window).bind("load", function() {$('#ks-box').animate({top:"100px"}, 2000);$('a.close-popup, .kaluar').click(function() {$(this).parent().fadeOut(500);return false;});});</script><!-- jQuery ks-Box [ End ] -->

Keterangan tambahan untuk kode HTML di atas :
Ganti alamat gambar : 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNgQTaUZxJTG8mBHGwYqQL8xgUGDt6tSzsFLENQMqunt0ElsyDqfStcvh9aubciN4g3g65RKH3XvoZffWi9XXtA1OROQbd_xKV6kf9bZ9VWWcS_Gk0BrORlGIKZUBeNMQAHbSzs8Pc-du/s1600/SPACE-PROMOTE-600X400-PIXEL.png
dengan alamat gambar yang ingin sobat tampilkan. berukuran ( 600 x 400 pixel )
#link dengan alamat Link yang di inginkan.

Demikianlah pelajaran kita hari ini mudah-mudahan sobat bisa paham dan bermanfaat untuk sobat sekalian. Terima Kasih -Kedia Soft-