Cara Membuat Pop Up Blogger Mudah Tanpa Edit HTML

Aduh udah lama gak update artikel, harap maklum semester akhir jadi sedikit sibuk. Oke kakungilmu.com kali ini akan bahas tentang kode atau cara membuat kotak muncul atau bahasa kerennya pop up dengan gambar atau tanpa gambar dengan mudah, hanya melalui tambah widget javascript html saja. Tidak perlu cari kode ini kode itu di edit html.

Males ah basa-basi, kalian juga gak butuh itu, langsung aja cus.

Demonya seperti gambar dibawah,

Kamu bisa melihat kotak putih disebelah kanan, bisa diberi gambar dan tanpa gambar dan atur saja ukurannya sesuka kamu.

Berikut kodenya:

<style type="text/css">
#topbar{
position:absolute;
padding-left:0%;padding-top:0%;
background-color: #fff;
width: 250px;height:250px;
visibility: hidden;
z-index: 100;
}
</style> <script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 5);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj26j5y0obmcayklQusQa_TYEJzEtH0E7IDqnpIs67aWfU6MnLm0qbemKhxsKQw-jOTSusCdf8xIycz8PkxeRxmO7dp9mpMdympNfxaoFzXOEQvORmh1ZZLW-bpHqlLlw3RPD2tXfaxKw/s1600/close2-24.png" alt="close"/></a>
</div>
<center>Event Spesial</center><br/>
<a href="https://www.kakungilmu.com" target="_blank"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7TGiEhTYBw7PR26VPGrZgkswbiVupSsjQ1ZHvid69nMQGt3y_YoYDJZqDNeMGvDfNZ48nSIuMrnNBNgItfVjMDzaNWyqzsSDEmURbw4o_QILrlWYzieLCdK9lJG7l9UHOVE89_YbIpjM/s200/give+away+1.jpg" alt="Event" />

</a></div>
<div style="background: #fff;">
</div>

Keterangan warna dalam kode:
Merah yaitu ukuran background atau kotaknya
Kuning ketika gambar diklik mau diarahkan kemana
Hijau link gambar
Cara menambahkan atau upload gambar mudah saja:
1. Buka halaman
2. Edit atau buat baru jika belum ada
3. Tambahkan gambar dan upload
4. Klik kanan pada gambar dan pilih Copy image addres
5. Pastekan di kode berwarna hijau
6. Done

Cara meletakkan kode:
1. Buka Tata Letak
2. Tambah Gadget
3. HTML/JavaScript
4. Pastekan kode diatas
5. Done

Salam luar biasa, terimakasih. Share kalau perlu dan jika tidak ya sudah.