widget/gadgetsesuai kebutuhan, pasang snippet/hack script ke dalam template juga menurut fungsi. Tanya dan lihat apakah kita memerlukan itu semua!!! Jika kalian pasang di blog apakah memang layak? Satu contoh kasus begini, sobat tahu fitur recent comment! Bagi blogger seperti gue yg saban hari bisa online, belum perlu memasang hal itu karena masih bisa terlacak langsung pada sesi dashboard. Jadi intinya
Pasang or buatlah segala sesuatu itu berguna bagi diri sendiri dan orang lain, tanpa menghilangkan nilai tujuan misi & visi mereka berada di blog kita. Begitu kira-kira :dBeben KobenKoben sekarang mau berbagi cerita mengenai iframe preloader. Mungkin sudah banyak yg membuat artikel ini, tapi di sini saatnya langkah optimasi and permudahan :p Kenapa gue mengangkat tema ini, karena fungsinya yaitu membuka hal tanpa mesti meninggalkan blog si pemilik. Secara garis besar ada dua jenis yakni iframe preloader using jquery & iframe preloader using javascript! Untuk versi JavaScript gue comot dari master Zhinto. Kenapa versi ini dipilih, karena dapat memanggil variable iframe lebih dari satu b-) Silahkan kunjungi link iframe preloader javascript + css3 dan ikuti instruksi yg ada. Berikut optimasi kode yg gue buat, kalian tinggal melakukan edit/tambahkan variabel sesuai dgn keperluan!
#bungkuy {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
#bungkuy iframe {
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 0;
width: 100%;
height: 100%;
position: absolute;
}
#bungkuy .hilang {
left: 0;
bottom: 0;
content: '';
color: #f00;
width: 25px;
height: 23px;
z-index: 999;
position: fixed;
cursor: pointer;
background: #333;
text-align: center;
}
.tampil {
opacity: 1;
visibility: visible;
}
.hiddne {
opacity: 0;
visibility: hidden;
}
.awal {
display: none
}
.lanjut {
display: block
}
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
#bungkuy iframe {
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 0;
width: 100%;
height: 100%;
position: absolute;
}
#bungkuy .hilang {
left: 0;
bottom: 0;
content: '';
color: #f00;
width: 25px;
height: 23px;
z-index: 999;
position: fixed;
cursor: pointer;
background: #333;
text-align: center;
}
.tampil {
opacity: 1;
visibility: visible;
}
.hiddne {
opacity: 0;
visibility: hidden;
}
.awal {
display: none
}
.lanjut {
display: block
}
Letakan planing HTML berikut tepat di bawah kode <body>class="kotax" pada link.
Beres versi JavaScript sekarang giliran jQuery version. Gue jatuhkan pilihan dari master Taufik Nurrohman. Tengok artikelnya iframe preloader used jQuery Seperti biasa bloglang bagian optimasi dan penyederhanaan coding ;))class="open-dialog" pada syntax link.
Demikian kisah dua type iframe preloader pilihan Beben Koben si Bloglang anu Ganteng Kalem Tea. Ingat pada awal paragraf, pasang & pakai snippet coded sesuai dengan keperluan ;) Mau full stylish, pakek banyak script >:)
project.mahemoff.com/jquery-iframe
Happy script \m/
<div id='bungkuy' class='hiddne'>
<div class='hilang' onclick='sembunyi();'>X</div>
<iframe id="iprame" class="awal"></iframe>
</div>Bumbu JavaScript taruh diatas tag penutup </body> Bila gagal coba taro sebelum tag penutup </head><script>//<![CDATA[
function tampil(obj){var p=document.getElementById('bungkuy'),b=document.getElementById('iprame');p.className='tampil';b.className='lanjut';b.src=obj.href;}function sembunyi(){var p=document.getElementById('bungkuy'),b=document.getElementById('iprame');b.className='awal';b.src='';p.className='hiddne';}window.onload=function(){var p=document.getElementsByClassName('kotax');for(var i=0;i<p.length;i++){p[i].onclick=function(){tampil(this);return false;}}}//]]></script>
Pemakaiannya pakai syntax beginifunction tampil(obj){var p=document.getElementById('bungkuy'),b=document.getElementById('iprame');p.className='tampil';b.className='lanjut';b.src=obj.href;}function sembunyi(){var p=document.getElementById('bungkuy'),b=document.getElementById('iprame');b.className='awal';b.src='';p.className='hiddne';}window.onload=function(){var p=document.getElementsByClassName('kotax');for(var i=0;i<p.length;i++){p[i].onclick=function(){tampil(this);return false;}}}//]]></script>
<a class="kotax" href="http://www.blogger.com/">Link 1</a>
<a class="kotax" href="http://www.bing.com/">Link 2</a>
<a class="kotax" href="http://www.wikipedia.com/">Link 3</a>Tinggal menambahkan atribut Beres versi JavaScript sekarang giliran jQuery version. Gue jatuhkan pilihan dari master Taufik Nurrohman. Tengok artikelnya iframe preloader used jQuery Seperti biasa bloglang bagian optimasi dan penyederhanaan coding ;))
#kotak-dialog {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
position: fixed;
}
#kotak-dialog .title {
color: #fff;
height: 20px;
text-align: left;
padding: 8px 10px;
background-color: #3B5998;
}
#kotak-dialog .title a {
top: 9px;
right: 15px;
color: #fff;
position: absolute;
}
#dialog-overlay {
display: none;
}
#iframeContainer iframe {
top: 35px;
left: 0px;
right: 0px;
bottom: 0px;
border: none;
opacity: 0.1;
position: absolute;
}
#iframeContainer:hover iframe {
opacity: 1;
}
Taruh script jQuery diatas tag </body> (rekomendasi), kalau tidak jalan di bawah jQuery script inti!top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
position: fixed;
}
#kotak-dialog .title {
color: #fff;
height: 20px;
text-align: left;
padding: 8px 10px;
background-color: #3B5998;
}
#kotak-dialog .title a {
top: 9px;
right: 15px;
color: #fff;
position: absolute;
}
#dialog-overlay {
display: none;
}
#iframeContainer iframe {
top: 35px;
left: 0px;
right: 0px;
bottom: 0px;
border: none;
opacity: 0.1;
position: absolute;
}
#iframeContainer:hover iframe {
opacity: 1;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'>
</script><script>//<![CDATA[
$(document).ready(function(){
$('.open-dialog').click(function() {
$('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '" width="100%" height="100%"></iframe>');
$('#dialog-overlay').fadeTo(400, 0.8);
return false;
});
$('#kotak-dialog .close').click(function() {
$('#kotak-dialog').fadeOut('normal', function() {
$('iframe', this).remove();
});
$('#dialog-overlay').hide();
return false;
});
});//]]></script>
Letakan planing HTML tepat di bawah kode <body>$(document).ready(function(){
$('.open-dialog').click(function() {
$('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '" width="100%" height="100%"></iframe>');
$('#dialog-overlay').fadeTo(400, 0.8);
return false;
});
$('#kotak-dialog .close').click(function() {
$('#kotak-dialog').fadeOut('normal', function() {
$('iframe', this).remove();
});
$('#dialog-overlay').hide();
return false;
});
});//]]></script>
<div id="kotak-dialog">
<div class="title">Kotak Dialog<a href="#" class="close">X
</a></div>
<div id="iframeContainer"></div>
</div>
<div id="dialog-overlay"></div>Cara aturan main<a class="open-dialog" href="http://www.blogger.com/">Link 1</a>
<a class="open-dialog" href="http://www.bing.com/">Link 2</a>
<a class="open-dialog" href="http://www.wikipedia.com/">Link 3</a>Tinggal pakek atribut Demikian kisah dua type iframe preloader pilihan Beben Koben si Bloglang anu Ganteng Kalem Tea. Ingat pada awal paragraf, pasang & pakai snippet coded sesuai dengan keperluan ;) Mau full stylish, pakek banyak script >:)
project.mahemoff.com/jquery-iframe
Happy script \m/
Tidak ada komentar:
Posting Komentar