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^^
Komentar
Posting Komentar