Animated Text dan Icon Menu Dengan jQuery

Animated Text dan Icon Menu Dengan jQuery
Apa kabar sobat,dah lama nih ga share tentang Jquery lagi,sekarang saya mau kasih tutorial cara memasang Menubar
dengan animated Text dan Icon atau lebih tepat'a menggunakan gambar dengan sentuhan Jquery yang animasi'a
sangat menarik

.Contoh'a bisa sobat lihat disini.trik ini saya dapatkan dari http://tympanus.net.sobat juga bisa lihat trik menarik lain'a disana.ok,ga usah basa - basi lagi,langsung baca tutorialnya~


Langkar pertama,Buka blogger =>Rancangan=>edit HTML
lalu Copas semua CSS dibawah ini,Tepat diatas kode ]]></b:skin>


.sti-menu{
width:1010px;
position:relative;
margin:60px auto 0 auto;
}
.sti-menu li{
float:left;
width:200px;
height:300px;
margin:1px;
}
.sti-menu li a{
display:block;
overflow:hidden;
background:#fff;
text-align:center;
height:100%;
width:100%;
position:relative;
-moz-box-shadow:1px 1px 2px #ddd;
-webkit-box-shadow:1px 1px 2px #ddd;
box-shadow:1px 1px 2px #ddd;
}
.sti-menu li a h2{
color:#000;
font-family: 'Wire One', arial, serif;
font-size:42px;
font-weight:bold;
text-transform:uppercase;
position:absolute;
padding:10px;
width:180px;
top:140px;
left:0px;
text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
font-size:18px;
font-style:italic;
color: #111;
position:absolute;
top:248px;
left:0px;
width:180px;
padding:10px;
}
.sti-icon{
width:100px;
height:100px;
position:absolute;
background-position:top left;
background-repeat:no-repeat;
background-color:transparent;
left:50px;
top:30px;
}
.sti-icon-care{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/care.png);
}
.sti-icon-alternative{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/alternative.png);
}
.sti-icon-family{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/family.png);
}
.sti-icon-info{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/info.png);
}
.sti-icon-technology{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/technology.png);
}



langkah kedua,kamu Copas lagi Font google api,paket Jquery animated dibawah ini.
lalu letakan di atas kode </body> atau boleh juga dibawah kode ]]></b:skin>.


<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.iconmenu.js"></script>
<script type="text/javascript">
$(function() {
$('#sti-menu').iconmenu();
});
</script>


Dan langkah terakhir,kamu Copas kode HTML dibawah ini dimanapun kamu mau ^^
Mau dirancangan=>elemen halaman=>tambah gadget=>HTML/javascript BOLEH.
atau maudirancangan=>edit HTML=> copas di dalam/bawah kode <body> juga boleh,tergantung sobat mau letakan dimana.


<ul id="sti-menu" class="sti-menu">
<li data-hovercolor="#37c5e9">
<a href="#">
<h2 data-type="mText" class="sti-item">Advanced Patient Care</h2>
<h3 data-type="sText" class="sti-item">Personalized to your needs</h3>
<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
</a>
</li>
<li data-hovercolor="#ff395e">
<a href="#">
<h2 data-type="mText" class="sti-item">Alternative Medicine</h2>
<h3 data-type="sText" class="sti-item">Holistic approaches</h3>
<span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
</a>
</li>
<li data-hovercolor="#57e676">
<a href="#">
<h2 data-type="mText" class="sti-item">Modern Info Center</h2>
<h3 data-type="sText" class="sti-item">Educating you</h3>
<span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
</a>
</li>
<li data-hovercolor="#d869b2">
<a href="#">
<h2 data-type="mText" class="sti-item">Future Family Planning</h2>
<h3 data-type="sText" class="sti-item">For a healthier future</h3>
<span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
</a>
</li>
<li data-hovercolor="#ffdd3f">
<a href="#">
<h2 data-type="mText" class="sti-item">Advanced Technology</h2>
<h3 data-type="sText" class="sti-item">From the latest research</h3>
<span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
</a>
</li>
</ul>


Note:
1.Ganti tanda pagar # dengan Url yang kamu inginkan.
2.li data-hovercolor adalah warna link hover'a
3.<h2 data-type="mText" class="sti-item">Nama link</h2>
4.<h3 data-type="sText" class="sti-item">Descripsi link</h3>


Slesai deh,kalau sudah simpan template~xD
bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^
cosplayfanatictemplates

Komentar

  1. Sob. Bagusan desain blog demonya daripada blog yang ini. Saya kesulitan membaca informasi di blog yang ini, suer. Lebih baik pakai desain blog demonya supaya lebih mudah dibaca.

    BalasHapus
  2. thx sob,saya pikir" juga gitu,desain blog yg ini memang masih berantakan.maka'a blog yg ini emang belum slesai,msh tahap perbaikan.

    BalasHapus
  3. son thx banget info na....gw user baru niih mohon di bimbing.....post info terbaru ya sob

    BalasHapus
  4. maaf mksud ane sob td bukan son..heheheh maklum pengguna baru

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template