Windows Desktop Template dengan jQuery ??

hoaaammmhh,, posting sambil ngantuk2 nih sob, hahahaha . Meski ngantuk, tetep semangat !!

Dari pada ngurusin ngantuk, mending ngurusin judul post ini, Windows Dekstop Template dengan jQuery ?? ngerti maksudnya gag sob ?? Biar ngerti langsung menuju kesini..

Demo

hmmm, gimana sob ? doubleklik pada dekstop . lalu window dengan resize..semacem dekstop di pc kita kan ?

disini saya akan sedikit menerangkan tntang pembuatnya..

1. CSS

Css nya sangat bergantung sama z-index, maka dari itu mungkin untuk IE6 demo hnya bakal gag jalan dengan baik sob.. kalo mau liat css dari dekstop template, bisa langsung di ctrl+u pada demo nya .

2. Javascript

Yakin deh, jQuery emang mantaf.. sekarang saya akan menjelaskan guna javascritp secara terperinci dalam desktop template ini,

Clock,


// Update every 60 seconds.
setTimeout(JQD.init_clock, 60000);

ini js untuk jam, yg gunanya berubah setiao 60 detik .

Resize Window

//
// Resize modal window.
//
window_resize: function(el) {
// Nearest parent window.
var win = $(el).closest('div.window');

// Is it maximized already?
if (win.hasClass('window_full')) {
// Restore window position.
win.removeClass('window_full').css({
'top': win.attr('data-t'),
'left': win.attr('data-l'),
'right': win.attr('data-r'),
'bottom': win.attr('data-b'),
'width': win.attr('data-w'),
'height': win.attr('data-h')
});
}
else {
win.attr({
// Save window position.
'data-t': win.css('top'),
'data-l': win.css('left'),
'data-r': win.css('right'),
'data-b': win.css('bottom'),
'data-w': win.css('width'),
'data-h': win.css('height')
}).addClass('window_full').css({
// Maximize dimensions.
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'width': '100%',
'height': '100%'
});
}

// Bring window to front.
JQD.window_flat();
win.addClass('window_stack');
},

ini digunakan agar fungsi resize window dapat berjalan..

Auto Open New Tab


// Relative or remote links?
$('a').click(function() {
var url = $(this).attr('href');
this.blur();

if (url.match(/^#/)) {
return false;
}
else if (url.match('://')) {
$(this).attr('target', '_blank');
return true;
}
});

ini fungsinya untuk otomatis buka newtab saat klik link

Membuat Menu Aktif



// Make top menus active.
$('a.menu_trigger').mousedown(function() {
JQD.clear_active();
$(this).addClass('active').next('ul.menu').show();
}).mouseenter(function() {
// Transfer focus, if already open.
if ($('ul.menu').is(':visible')) {
JQD.clear_active();
$(this).addClass('active').next('ul.menu').show();
}
});

ini untuk mengaktifkan menunya..

Dekstop Icon

// Desktop icons.
$('a.icon').mousedown(function() {
// Highlight the icon.
JQD.clear_active();
$(this).addClass('active');
}).dblclick(function() {
// Get the link's target.
var x = $($(this).attr('href'));
var y = $(x.find('a').attr('href'));

// Show the taskbar button.
if (x.is(':hidden')) {
x.remove().appendTo('#dock').end().show('fast');
}

// Bring window to front.
JQD.window_flat();
y.addClass('window_stack').show();
}).draggable({
revert: true,
containment: 'parent'
});

script ini dipakai agar window akan muncul setelah double klik

Taksbar Buton


// Taskbar buttons.
$('#dock a').live('click', function() {
// Get the link's target.
var x = $($(this).attr('href'));

// Hide, if visible.
if (x.is(':visible')) {
x.hide();
}
else {
// Bring window to front.
JQD.window_flat();
x.show().addClass('window_stack');
}

// Stop the live() click.
this.blur();
return false;
});

Seperti pada pc umumnya kalo windows di minimized, akan muncul bar pada taksbar .

Wallpaper
// Add wallpaper last, to prevent blocking.
$('body').prepend('<img id="wallpaper" class="abs" src="wallpaper url" />');

seperti yg saya katakn sebelumnya, ini sangat bergantung pada z-index . sehingga wallpaper dibuat agar dapat menutup background asli .

Nah begitu javascriptnya yg udah bisa tmn2 liat lengkap disini

dan jangan lupa yg pasti menggunakan script jquery ini jquerypack.

Template yg saya buat ini sebenarnya kurang cocok untuk blog.. mekso kalo kata orang . Yg saya bingungkan gimana pemakaian teknik ajax pada "post" agar tidak load ulang semua.. ada yang punya refrensi tutorial pengguna'an ajax ga ?

Readmore

Cara Membuat Drop-in Box

Sesusai petanyaan mas beben, tentang gimana caranya buat drop-in box ini, saya akan share ajah di sini .

Drop-in box . Yuph sebenernya banyak banget kegunaan dari trik ini cuy.. kalo buat saya, saya gunaan untuk menyampaikan pesan selamat hari raya idul fitri . Seperti kata bang andri-sofda, mungkin trik ini lebih cocok digunakan untuk nampilin iklan yg mungkin temen2 kebingungan dimana menempatkan iklan kalo blog udah terasa penuh .

Langsung ajah caranya cuy..

1.Masukan css ini..

<style type="text/css">

#dropinboxv2cover{
width: 450px; /*ganti width sesuai kebutuhan cuy */
position:absolute;
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 450px;
border: 2px black;
background-color: white;
padding: 4px;
position:absolute;
left: 0;
top: 0;
}

</style>

2. ini javascriptnya..

<script type="text/javascript">

var dropboxleft=200 //set left position of box (in px)
var dropboxtop=100 //set top position of box (in px)
var dropspeed=15 //set speed of drop animation (larger=faster)

//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="always"


if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById

function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}

function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){ top="scroll_top+dropboxtop+" top="parseInt(crossbox.style.top)+dropspeed+" top="0" visibility="hidden" search =" Name" returnvalue = ""> 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;
}

if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}

</script>

wah banyak juga yaa..

3. terakhir sob ini pemanggilannya masukin dimana ajah..

<div id="dropinboxv2cover">
<div id="dropinboxv2">
ini isi dari drop-in boxnya<br/>
<p align="left"><a href="#" onclick="dismissboxv2();return false"><img src="http://i27.tinypic.com/2rmrv39.jpg"/></a></p>

</div>
</div>

NB:

--isi ganti sesuai keinginan

--http://i27.tinypic.com/2rmrv39.jpg ini adalah gambar dari close yg saya pakai bisa diganti dengan gambar lain atau lebih sederhananya pakai tulisan close aja tanpa gambar .

nah selesai.. gampang kan sob..

Readmore

Pesan Selamat Datang Menurut Waktu (Javascript Alert)

Tentunya udah pada tau kan gimana cara kerja alert message dari javascript ? Yuph, alert message yg biasanya digunakan sebagai pesan selamat datang di sebuah blog . Nah sekarang saya akan sedikit share alert message yang sedikit berbeda . Time Message Alert, yaitu pesan selamat datang yg bisa berubah2 menurut waktu pengunjung...

Contohnya.. Karena saya gag pake fasilitas javascript yang satu ini, saya kasih gambar preview na ajah yah sob ?

Begini, dengan js dibawah ini yg bisa temen2 masukan di antara <head></head> .

<SCRIPT language=javascript>
var date = new Date();
var hours = date.getHours();

if (hours > 0 && hours < 12) {
alert("Good Morning!");
} else if (hours >=12 && hours < 18) {
alert("Good Afternoon!");
} else if (hours > 18 && hours < 21) {
alert("Good Evening!");
} else if (hours > 21 && hours < 0) {
alert("Good Night.");
} </script>

Dengan script di atas, hasilnya akan begini..

Kalo dateng waktu jam 0-12 pagi akan muncul pesan alert

Sedangkan misal dateng waktu jam 12-18 akan muncul pesan alert

nah gitu.. gampang kan ?? untuk jam dan pesan nya bisa di edit sendiri kok...

Readmore

Back to Top dengan Smoothscroll - jQuery

Sekarang ... saya coba share cara membuat 'bac to top' yang kalo diklik gag asal loncat ajah ke atas .. tapi dengan cara semut... eh salah .. smooth.. dengan menggunakan fasilitas javascript jQuery dan smoothscroll .

hasil 'back to top' dengan jQuery ini temen temen bisa liat d blog ku.. d pojok kiri bawah . langsung ajah cara buatnya ..

1. Buka Edit HTML

2. Masukan anu kamu . eh script jquery berikut d atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

3.Masukan juga kode javascript ini di bawah kode jquery tadi .

<script type='text/javascript'>

//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 

&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});

//]]>

</script>

<!-- end scrolltop -->

4. Cari kode <body> dan ubah menjadi <body id='top'>

5. Masukan kode HTML berikut sebelum kode </body>

<div id='goingtop'>

<a href='#top' title='Top'><img src="http://i29.tinypic.com/1znu3vq.png" style="right:20px; bottom:20px; position: fixed;"/></a></div>

NB :

-id=top' atau '#top' anda dapat rubah, itu merupakan kunci perintah dari effect.

-temen temen bisa merubah gambar sesuai selera . kalo gambar yg d atas itu gambar blog saya .  silahkan kalo mao dpake .. hehehe ..

6. tungguin ampe 1 jam.. trus klik save template.. hahahaha ..

sekian dulu dari saya kali ini... semoga bermanfaat...

Readmore

Hiasi Blog Kamu dengan Javascript

Adakalanya kita bosan dengan halaman site kita, dan ingin memolesnya biar indah. Jika anda ingin memperindah halaman site anda dengan efek - efek berikut,

1. Script untuk efek dengan salju bertaburan,

<script src="http://h1.ripway.com/fabi0/salju.js" type="text/javascript"></script>

2. Script untuk efek dengan daun berguguran,

<script src="http://h1.ripway.com/fabi0/daun.js" type="text/javascript"></script>

3. Script untuk efek dengan bintang berjatuhan,

<script src="http://h1.ripway.com/fabi0/salju.js" type="text/javascript"></script>

4. Script untuk cursor dengan bintang kecil black,

<script src="http://h1.ripway.com/fabi0/cursor-black.js" type="text/javascript"></script>

5. Script untuk cursor dengan bintang kecil blue,

<script src="http://h1.ripway.com/fabi0/cursor-blue.js" type="text/javascript"></script>

6. Script untuk cursor dengan bintang kecil green,

<script src="http://h1.ripway.com/fabi0/cursor-green.js" type="text/javascript"></script>

7. Script untuk cursor dengan bintang kecil orange,

<script src="http://h1.ripway.com/fabi0/cursor-orange.js" type="text/javascript"></script>

8. Script untuk cursor dengan bintang kecil purple,

<script src="http://h1.ripway.com/fabi0/cursor-purple.js" type="text/javascript"></script>

9. Script untuk cursor dengan bintang kecil red,

<script src="http://h1.ripway.com/fabi0/cursor-red.js" type="text/javascript"></script>

10. Script untuk cursor dengan bintang kecil white,

<script src="http://h1.ripway.com/fabi0/bintangputih.js" type="text/javascript"></script>

11. Script untuk membuat link pelangi,

<script src="http://h1.ripway.com/fabi0/link-pelangis.js" type="text/javascript"></script>

Untuk itu , ikuti langkah berikut

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan script di atas ke kolom Konten

di coba yawh . semoga bermanfaat .

Readmore