™Galery™: animated

Tampilkan postingan dengan label animated. Tampilkan semua postingan

Cara membuat gambar melayang di pojok halaman blog

Kawan-kawan mungkin pernah melihat pada sebuah blog ada gambar melayang di samping blog baik itu di bawah maupun di atas....
cara membuatnya adalah sebagai berikut:

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

#gambar_melayang {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

huruf berwarna biru bisa anda ganti untuk posisinya dengan kombinasi kode : top (untuk atas) bottom (untuk bawah), dan left (seblah kiri) right (sebelah kanan) dipilih berdasarkan keinginan kawan-kawan.

untuk selanjutnya cari kode </body> dan letakkan kode ini di atas kode tadi:

Simpan template...

Efek animasi dasar pada blog

Demonya bisa dilihat disini
1. Image Hover
Kode CSS nya :

.kodokloncat {
float:center;
margin:0px;
autowidth:0px;
autoheight:0px;
autoborder:none;
overflow:hidden
}
.details {
width:200px;
height:300px;
background:#000;
color:#fff;
text-align:center
}
#kodok-3 {
position:relative;
}
#kodok-3 img {
opacity:1-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#kodok-3 .details {
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#kodok-3 .details:hover {
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Cara pemanggilannya pada posting :

<div class="kodokloncat" id="kodok-3"><img src="http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg" width="240" border="0" height="320">

<div class="details"><img src="http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1msHBIvFI/AAAAAAAAAdc/zYAZpMSRInA/s320/asian+girl02.jpg" width="240" border="0" height="320"></div></div>

2. Efek Gambar Berputar

Kode CSS nya :

#timings_demo {
margin:0 auto;
border:0px #aaa solid;
padding:10px;
}
.abstrak_box {
width:230px;
height:200px;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg)
}
#ease.abstrak_box {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
transition: all 4s ease;
border:1px #f00 solid;
}
#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box {
margin-left:300px;
-webkit-border-radius:40px 40px;
-moz-border-radius:40px 40px;
-o-border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
background-color:#fff;
}

Untuk pemanggilannya :

<div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>

3. Efek Gambar Menghilang

Kode CSS nya :

#waktu_demo {
margin:0 auto;
border:0px #aaa solid;
padding:10px;
}
.amdhas_box {
width:230px;
height:200px;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg)
}
#ease.amdhas_box {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
transition: all 4s ease;
border:1px #f00 solid;
}
#waktu_demo:hover .amdhas_box, #waktu_demo.hover_effect .amdhas_box {
margin-left:300px;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";
filter: alpha(opacity=6);
-webkit-border-radius:40px 40px;
-moz-border-radius:40px 40px;
-o-border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
background-color:#fff;
}

Cara pemanggilannya :

<div id="waktu_demo"><div class="amdhas_box" id="ease"><div class="center"></div></div></div>

4. Efek Gambar Berjalan

Kode CSSnya :

#japra_demo {
margin:0 auto;
border:0px #aaa solid;
padding:10px;
}
.feti_box {
width:230px;
height:200px;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg)
}
#ease.feti_box {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
-webkit-transition: all 4s ease-in;
transition: all 4s ease-in;
border:1px #f00 solid;
}
#japra_demo:hover .feti_box, #japra_demo.hover_effect .feti_box {
margin-left:300px;
-moz-transform:rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}

Cara pemanggilannya :

<div id="japra_demo"><div class="feti_box" id="ease"><div class="center"></div></div></div>

cursor following menu

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
cursor following menu
---------------------------------- */
#cf_menu{position:absolute; display:inline-block; z-index:10; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:pointer; top:0; left:0; background:url(empty.gif);} /* stupid IE needs a background value */
#cf_menu .containerfollow{position:relative; font-family:Arial, Helvetica, sans-serif; font-size:10px;}
#cf_menu .title{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#333; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px; color:#fff; padding:5px 8px;}
#cf_menu ul{margin:0; padding:0; list-style:none; display:none;}
#cf_menu ul li{margin:0; padding:0;}
#cf_menu ul ul{margin:0 0 0 2px; padding:0; list-style:none; display:inline-block;}
#cf_menu ul ul li{margin:0 2px 0 0; padding:0; display:inline-block;}
#cf_menu a:link,#cf_menu a:visited{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px 1px 5px 1px; padding:5px 8px; border-bottom:1px solid #f33; border-right:1px solid #f33; color:#fff; background:#f33;}
#cf_menu a:hover{background:#fff; color:#000; border-bottom:1px solid #000; border-right:1px solid #000;}
#cf_menu ul ul a:link,#cf_menu ul ul a:visited{background:#333; color:#ddd; border-bottom:1px solid #333; border-right:1px solid #333;}
#cf_menu ul ul a:hover{background:#fff; color:#000;}
.cf_menu_transparency{filter:alpha(opacity=25); -moz-opacity:0.25; -khtml-opacity:0.25; opacity:0.25;}

4. Simpan script berikut diatas kode </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery.easing.1.3panning.js"></script>

5. Simpan script berikut diatas kode </body> :

<script type="text/javascript">
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
<script src="http://kangdadang.googlecode.com/files/malihu.jquery.cfm.js"></script>

6. Pemanggilannya simpan kode berikut dibawah kode <body> :

<div id="cf_menu">
   <div class="containerfollow">
       <div class="title">MENU</div>
       <ul id="cf_menu">
           <li><a href="#" onclick="Animate2id('#home');return false">↑ Home</a></li>
           <li><a href="#" onclick="Animate2id('#about');return false">About me</a></li>
           <li><a href="work">+ Work</a>
               <ul>
                   <li><a href="#" onclick="Animate2id('#recent');return false">Recent</a></li>
                   <li><a href="#" onclick="Animate2id('#web');return false">Web</a></li>
                    <li><a href="#" onclick="Animate2id('#print');return false">Print</a></li>
               </ul>
           </li>
           <li><a href="#" onclick="Animate2id('#blog');return false">Blog</a></li>
           <li><a href="links">+ Interesting links</a>
                <ul>
                   <li><a href="#" onclick="Animate2id('#freebies');return false">Freebies & Resources</a></li>
                    <li><a href="#" onclick="Animate2id('#people');return false">People</a></li>
               </ul>
           </li>
           <li><a href="#" onclick="Animate2id('#contact');return false">Contact</a></li>
            <li><a href="info">+ Script info</a>
                <ul>
                   <li><a href="#">Tutorial</a></li>
                    <li><a href="#">Contact</a></li>
               </ul>
           </li>
            <li><a href="#">About</a></li>
       </ul>
   </div>
</div>

7. Simpan template dan selesai..... semoga bermanfaat :)

Animated Hover With jquery

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/*Animated Hover with jQuery*/
#anihover {
   margin: 100px 0 0;
   padding: 0;
   list-style: none;
}
#anihover li {
   padding: 0;
   margin: 0 2px;
   float: left;
   position: relative;
   text-align: center;
}
#anihover a {
   padding: 14px 10px;
   display: block;
   color: #000000;
   width: 144px;
   text-decoration: none;
   font-weight: bold;
   background: url(images/button.gif) no-repeat center center;
}
#anihover li em {
   font-weight: normal;
   background: url(images/hover.png) no-repeat;
   width: 180px;
   height: 45px;
   position: absolute;
   top: -85px;
   left: -15px;
   text-align: center;
   padding: 20px 12px 10px;
   font-style: normal;
   z-index: 2;
   display: none;
}

4. Selanjutnya simpan kode berikut diatas kode </head> :

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

<script type="text/javascript">
$(document).ready(function(){

    $("#anihover a").append("<em></em>");

    $("#anihover a").hover(function() {
        $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
        var hoverText = $(this).attr("title");
        $(this).find("em").text(hoverText);
    }, function() {
        $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
    });

});
</script>

5. Save Template
6. Cara pemanggilannya pada Html :

<ul id="anihover">
    <li>
        <a href="#" title="Go to homepage">Home</a>
    </li>
    <li>
        <a href="#" title="Find out who I am">About</a>
    </li>
    <li>
        <a href="#" title="Subscribe RSS feeds">Subscribe RSS</a>
    </li>
</ul>

6. Selesai

Selamat mencoba. :)

™Galery™

Blogger templates

Blog Archive

Cara membuat gambar melayang di pojok halaman blog

Efek animasi dasar pada blog

cursor following menu

Animated Hover With jquery

Banner

banner

Banner

banner

Postingan Populer

Postingan Populer

Postingan Populer

Banner

Banner