Karena para developer disana menerangkan dengan versi bahasa web :D dan bukan versi blogger LoL Tapi initnya sama kok, cuman berbeda sedikit bahasa doang. Agar lebih jelas dalam hal ini maka akan Beben sampaikan dengan bahasa sederhana. Semoga bisa dipahami ya :)
| <style type="text/css"> ISI KODE VARIABEL CSS </style> | <style> ISI KODE VARIABEL CSS </style> |
| <script type='text/javascript'> ISI VARIABEL SCRIPT </script> | <div class/id="UNIQUE-ID"> ISI VARIABEL KODE </div> |
Penempatan HTML pasti didalam tag <body> bisa juga melalui Add a Gadget ► HTML/Javascript
Cara dan penjelasan sudah terpampang, mari kita lihat beberapa contoh artikel trick menggunakan jQuery :-bd
Splitting effect for Image with CSS and JQuery
Kode and Script Click expand here<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.box_container').hover(function(){
var width = $(this).outerWidth() / 2;
$(this).find('.left').animate({ right : width },{queue:false,duration:300});
$(this).find('.right').animate({ left : width },{queue:false,duration:300});
}, function(){
$(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
$(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
});
});
//]]>
</script>
<style>
.box_container {
position: relative;
width: 300px;
height: 225px;
overflow: hidden;
background: #333;
color: #ff0;
text-align: center;
cursor: help;
}
.images_holder {
position: absolute;
}
.image_div {
position: relative;
overflow: hidden;
width: 50%;
float: left;
}
.right img {
margin-left: -100%;
}
.clear {
clear: both;
}
</style>
<div class='box_container'>
<div class='images_holder'>
<div class='image_div left'>
<img class='box_image' src='http://hosting.gmodules.com/ig/gadgets/file/116495266976257712756/prodigy-of-head.jpg' style='width:300px'/>
</div>
<div class='image_div right'>
<img class='box_image' src='http://hosting.gmodules.com/ig/gadgets/file/116495266976257712756/prodigy-of-head.jpg' style='width:300px'/>
</div>
</div>
Ini address link blog akyuh
http://beben-koben.blogspot.com/
Kunjungi selalu yaaa ... \m/
</div>
Create a Disappearing jQuery Dialog Messages
Script and coded Click expand here<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>
<script type='text/javascript'>
$(document).ready(function(){
setTimeout(function() {
$('.messageBox').fadeOut('fast');
}, 5000); // <-- time in milliseconds
});
</script>
<style>
.messageBox {
background: #FFEBD6;
width:150px;
padding:10px;
border:1px solid #666;
position:fixed;
right:5px;
top:5px;
z-index:999;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
</style>
<div class="messageBox">
Hallooo...don't forget to come again yaaa \m/
</div>
Make a custom tab interface
demoHasil modifikasi oleh Beben Koben menjadi begini
Please welcome<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.active_tab').fadeIn();
$('.tab_link').live('click', function(event){
event.preventDefault();
$('.tab_link_selected').removeClass('tab_link_selected');
$(this).addClass('tab_link_selected');
var container_id = $(this).attr('title');
$('.active_tab').animate({
height : 'toggle' , opacity : 'toggle'
},function(){
$(this).removeClass('active_tab');
$(container_id).addClass('active_tab');
$('.active_tab').animate({
height : 'toggle' , opacity : 'toggle'
});
});
});
});
//]]>
</script>
<style>
.tab_link {
float:left; /* important */
border:3px solid #826C55;
border-bottom:none;
background: #E1D4C1;
padding:5px;
margin-right:0px;
color:#000;
text-decoration:none;
font-variant:small-caps;
-webkit-border-radius-topright: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-webkit-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
.tab_link_selected{
background-color: #F5EDE3;
}
.tab_text {
display: none;
border:3px solid #826C55;
padding:5px;
color:black;
-webkit-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-webkit-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
.clear {
clear: both;
}
</style>
<div id='tabs_wrapper'>
<a href='#' class='tab_link tab_link_selected' title='#popular'>Popular</a>
<a href='#' class='tab_link' title='#recent'>Recent</a>
<a href='#' class='tab_link' title='#new'>New</a>
<div class='clear'></div>
<div class='tab_text active_tab' id='popular'>
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus tet.
</div>
<div class='tab_text' id='recent'>
Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio...
</div>
<div class='tab_text' id='new'>
Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem...
</div>
</div>
Enjoy it, and i hope you can be smarter ;)bye \m/
Tidak ada komentar:
Posting Komentar