◄ Min  Size Fonts: + | - | ± Color: ■ ■ ■ ■ Max ►
Home › › › › › › › Become an Expert with jQuery Technique

Become an Expert with jQuery Technique

Follow This Blog
Terlihat ada artikel unik, full stylish, banyak dicari, etc maka Beben Koben si Bloglang anu Ganteng Kalem tea akan bagi pada pelancong blog aneh ini. Seperti web berikut yang sebagian besar postingannya mungkin bermanfaat bagi sobat sekalian. Sobat hanya perlu memperhatikan bagaimana cara penempatan kedalam template blog sobat nantinya ;)
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>
Jika diterangkan begitu berarti itu kode untuk CSS, yg mana pada blogspot peletakannya diatas/sebelum tag </b:skin>
<script type='text/javascript'>

ISI VARIABEL SCRIPT

</script>		<div class/id="UNIQUE-ID">

ISI VARIABEL KODE

</div>
Penempatan script dahulukan sebelum/diatas tag </body> tidak menutup kemungkinan didalam tag </head> (bagaimana aturan)
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>

demo

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>

demo

Make a custom tab interface

demo
Hasil modifikasi oleh Beben Koben menjadi begini

tab
<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>
Please welcome

web enavuEnjoy it, and i hope you can be smarter ;)
bye \m/
Loading...
XBecome an Expert with jQuery Technique

Subscribe my posts Register For Free!
, , , , , ✎

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE