Menu Slide Out Navigation

Tutorial Kali ini ,Abe Nik akan membuat tutorial bagaimana untuk tambah Menu Slide Out Navigation . Kode agak sedikit panjang dan rumit sedikit. Untuk lebih lanjut bolehlah melihat contoh dibawah dan sekiranya ingin mencuba bolehlah ikuti langkah2 dibawah dengan cermat .

Bagaimana Untuk Tambah Menu Slide Out Navigation

Langkah 1) Dari Blogger Dashboard, pergi Templates and klik pada Edit HTML
                     (Jangan lupa Download Copy of your template dahulu )

Langkah  2) Cari kode dibawah ini .
                      (Klik Ctrl dan F untuk bar carian untuk membantu mencari kode)

]]></b:skin>

                     Selepas itu copy kode dibawah dan pastekan di atas kode yang anda cari tadi .

ul#navigation {

  position:fixed;

  margin:0px;

  padding:0px;

  top:0px;

  right:10px;

  list-style:none;

  z-index:999999;

  width:735px;

  font:normal 11px Arial,Sans-Serif;

  -webkit-animation:2s fxhompinav ease-in-out;

  -moz-animation:2s fxhompinav ease-in-out;

  -ms-animation:2s fxhompinav ease-in-out;

  animation:2s fxhompinav ease-in-out;

}

ul#navigation li {

  width:103px;

  display:inline;

  float:left;

  margin:0 0 0 2px;

}

ul#navigation li a {

  display:block;

  float:left;

  margin-top:-78px;

  width:100px;

  height:22px;

  background-color:#111;

  background-repeat:no-repeat;

  background-position:50% 150px;

  border:2px solid #e6e6e6;

  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

  box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

  -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;

  border-radius:0px 0px 10px 10px;

  color:#ccc;

  text-decoration:none;

  text-align:center;

  text-shadow:0 1px 1px #000;

  padding-top:85px;

  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;

}

ul#navigation li a:hover {

  margin-top:-3px;

  background-position:50% 10px;

  color:#fff;

  position:relative;

}

ul#navigation li a:hover:after {

  content:"";

  width:0px;

  height:0px;

  position:absolute;

  top:100%;

  left:45%;

  margin-top:-10px;

  border-width:5px;

  border-style:solid;

  border-color:transparent transparent #e6e6e6 transparent;

}

ul#navigation li:nth-child(1) a {

  background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);

}

ul#navigation li:nth-child(2) a {

  background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);

}

ul#navigation li:nth-child(3) a {

  background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);

}

ul#navigation li:nth-child(4) a {

  background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);

}

ul#navigation li:nth-child(5) a {

  background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);

}

ul#navigation li:nth-child(6) a {

  background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);

}

ul#navigation li:nth-child(7) a {

  background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png);

}

@-webkit-keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

@-moz-keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

@-ms-keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

@keyframes fxhompinav {

  from{margin-right:-1000px;}

  to  {margin-right:0px;}

}

Langkah  3) Cari kode dibawah ini .
                      (Klik Ctrl dan F untuk bar carian untuk membantu mencari kode)

</head>

                     Selepas itu copy kode dibawah dan pastekan di atas kode yang anda cari tadi .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Langkah  4) Cari kode dibawah ini .
                      (Klik Ctrl dan F untuk bar carian untuk membantu mencari kode)

</body>

                     Selepas itu copy kode dibawah dan pastekan di atas kode yang anda cari tadi .

<ul id='navigation'>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Search</a></li>
     <li><a href='#'>Photos</a></li>
     <li><a href='#'>Rss Feed</a></li>
     <li><a href='#'>Podcasts</a></li>
     <li><a href='#'>Contact</a></li>
</ul>

Langkah 5) Klik Save templates

Semoga berjaya.....