|| Blogger Tips || Navigasi cantik dengan efek slide out

Pujangga Blogs

17 January 2011

|| Blogger Tips || Navigasi cantik dengan efek slide out

Pada tutorial sebelumnya saya pernah membahas tentang Menu navigasi keren "Slide out effect" ( jQuery ) dimana letak dari menu navigasi tersebut berada di sebelah kiri dari element halaman blog/web.Tapi pada tutorial kali ini kita akan menempatkan Menu navigasi tersebut di atas dari element halaman blog/web anda.Hasilnya tetap sama seperti pada tutorial sebelumnya,disaat kita scroll halaman ke bagian paling bawah sekalipun,menu navigasi tersebut akan selalu ada pada posisi atas elemen halaman.Untuk versi demonya anda bisa lihat disini .

Berikut langkah - langkah project latihan kita kali ini.

Kode CSS :

Dengan adanya serangkaian kode css,sebuah blog/web akan tampil dan terbentuk sosoknya termasuk menu navigasi yang akan kita terapkan disini.Tanpa adanya rangkaian kode css tersebut bisa saya simpulkan bagaimana semerawutnya tampilan halaman website/blog anda walaupun sebenarnya kode kode tersebut bisa anda terapkan langsung pada bagian body dari elemen html.
Okey...untuk langkah pertama silahkan anda meletakan kode css dibawah ini dibagian atas dari tag </b:skin> page HTML.

/*slide out navigation start*/
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
}
ul#navigation .home a{
    background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/internet-icon.png);
}
ul#navigation .about a      {
    background-image: url(http://www.iconarchive.com/icons/zakar/shining-z/48/Brush-SZ-icon.png);
}
ul#navigation .search a      {
    background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/search-icon.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/my-music-icon.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/subscriptions-icon.png);
}
ul#navigation .photos a     {
    background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/jpeg-image-icon.png);
}
ul#navigation .contact a    {
    background-image: url(http://www.iconarchive.com/icons/rokey/the-last-order/48/e-mail-icon.png);
}

Kode HTML

Nah...langkah selanjutnya,kita sisipkan kode html yang ada dibawah ini dibagian bawah dari tag <body> page HTML anda.

<ul id='navigation'>
            <li class='home'><a href='#'><span>Home</span></a></li>
            <li class='about'><a href='#'><span>About</span></a></li>
            <li class='search'><a href='#'><span>Search</span></a></li>
            <li class='photos'><a href='#'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
            <li class='contact'><a href='#'><span>Contact</span></a></li>
        </ul>

Saya akan memberi sedikit penjelasan disini kususnya untuk anda yang masih baru atau awam dengan pengkodean diatas.
pada item <li> kita dapat melihat beberapa menu yakni :
  • Home
  • About
  • Search
  • Photos
  • Rss Feed
  • Podcast
  • Contact
Menu tersebut nantinya akan mengisi header dari tiap elemen <li>,dan pada bagian "<a href='#'>" adalah tempat dimana kita meletakan link tujuan dari tiap-tiap header tersebut.Contohnya seperti ini.
<li class='home'><a href='http://pujangga-adhitya.co.cc/'><span>Home</span></a></li>

Ketika kita mengeklik menu Home ,maka anda akan masuk kehalaman beranda website/blog.Jadi...untuk menu-menu lainnya saya harap anda sudah memahaminya.

Javascript

Dengan adanya serangkaian kode javascript, gaya dan efek yang diterapkan pada halaman web akan terasa indah dan inovatif.Letakan perintah javascript dibawah ini dibagian bawah dari kode html yang sudah kita masukan sebelumnya.

<script type="text/javascript">
  $(function() {
  var d=300;
  $('#navigation a').each(function(){
  $(this).stop().animate({
  'marginTop':'-80px'
  },d+=150);
  });
$('#navigation > li').hover(
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-2px'
  },200);
  },
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-80px'
  },200);
  }
  );
  });
</script>

Dan yang terakhir, letakan plugin jQuery javascript library dibawah ini dibagian bawah dari tag <head> page HMTL anda.

<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

Selesai..silahkan anda priview dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda save project latihan ini.
Tetap semangat dan terus GoBlog...!

4 comments:

Om Pulsa on January 19, 2011 at 3:14 PM said...

patut dicoba dulu....
tks ya.....

Pujangga on January 19, 2011 at 3:35 PM said...

Om Pulsa :Sama sama mas :36

Om Pulsa on January 19, 2011 at 3:37 PM said...

wah... kalo yg ini penjelasannya lebih gampang dipahami mas... tks ya...

Gothic on June 19, 2011 at 2:50 AM said...

yg ini dh berhasil mas, penjelasannya lbh mudah di mngerti,, thankzzzz..


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment