Blog ini hanyalah ungkapan akan ketidaksempurnaan seseorang yang haus terhadap ilmu pengetahuan. Hanya blog biasa dan sederhana tanpa
ada sesuatu apapun itu yang membuatnya spesial. Merupakan titik temu antara pola pikir dan rasa penasaran yang kemudian tertumpah
dalam barisan abjad atau angka yang kadang penulispun terjerumus di dalamnya. fvck real dejavu //Tips Trik Blog
[+] Post Title :

Cara Membuat Beautiful Slide Out Navigation


[+] Date : 4/19/2011
[+] Author : Oktri darmadi
[+] Link : http://tipsbelajar-blog.blogspot.com/2011/04/cara-membuat-beautiful-slide-out.html
[+] Type :
    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya : 
/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    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#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
     
}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1zgSZ-U9Ngot0bcDcMUc7dw6sq2cfUT_6knG6Iy-wjYnAIno14-HVfsZVjEk9A8Ud7dpQ1foJnOaJ68OFgsQ6hfXaKmPm50Z1z1VSrDW0EBZOwq2GIxGKiooSigD9bVWkXzqufk1djJ8/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xnGUqHUqPVnk5o_dpKWrM26TteD2fv9NuiuxAPaWdwJav2fXRgY0lRR25lwD7wl5creMGvhqOcZDHwDQXxQo1izXwPPJKFmDqA2UNG2jg3uWmz_qSsGC7QYxxMf_qT9MW6sWH9qXaM4/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_e9IceVaMshMmyOeGqKyB4hYu0IJDd_1Na9lY9zvMUNTgUoket58eqnzaugj8ccGBme86tS1YydIxfamRdmEO8vYAQbLFxtsZKBOjAT5JZ2WaoGBxxLh8dOqLeO0eKfZ1qW5Mpt3Eik/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCZDIAhR6WB6VXdtwMyRZj8lVyBsXJ29gkHa-L39ojKSSpi24hgz7epG-kpNVWJAggT5StkdpWh_NAB0vYwjSYHvtZtwgwML0Oh8WstYdODpCWosXkFCLexTt9AQ8P_7Jr8q9z9QI_VFU/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUFj3ZBDQH7t-oYhde5NZEL9nZ_HJktkUh3Hqm1KkOGC_Um35vUUyiOFIdUTgBJ1unA-oCHbn1YuOjrYf0jSh0QxKVfTrS6BaS_JnJ9A5_EzVbMinXg3OC38AJPn3TZzo2mNWObgCgn30/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEXRiaaMmaHV3zSI48K3dHW7_HG3m7AeooNBddzODhtuL8i9qRoKQGby4RPikA4JiAOgsOxWyLKidg2EDhIMpT58WeW78WQrsBORHrnd2wZaHPxTEjFj3KyLRAp8pAfM7MourEG4ItH0/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpx1f10-s6zYhvqdZ_J09gScvrwOxD5J-8kZr11URSrqxANJcRMxgxeJfZ46cvWKC4Iz2J3XvL5GFkNt8713PRoGekWcjF39UEFuKVHaKgHpZm-67BwHlQT72jCh5Ht044PJGWwuvloIQ/s1600/mail.png);

dan simpan script ini di atas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
            $(function() {
                var d=300;
                $(&#39;#navixed a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navixed &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>

terakhir simpan cara pemanggilannya di atas kode <body>:

<ul id='navixed'>
            <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>
ket : silahkan ganti # dengan link yang anda inginkan

selesai... jangan lupa simpan template......

Ditulis Oleh : Oktri darmadi ~ Tips Belajar Blog

Anda sedang membaca sebuah artikel yang berjudul Cara Membuat Beautiful Slide Out NavigationMohon maaf apabila konten dari posting yang anda baca sudah rusak atau terjadi kesalahan dalam penulisan. Jika ada pertanyaan yang ingin disampaikan silahkan tulis pada kotak komentar

:: Thank you for visiting ! ::

5 komentar:

Little of Paroun's mengatakan...

kang oktri mw nanya soal ini. emang sudah biza keluar tmpilannya Beautiful Slide Out Navigation nya itu, tp kug gag da linkx, di klik gag bz, crax ngasih linkx gmna, trima kasih.

JelajahMan mengatakan...

terimakasih banyak saya baru membuat blog tp masih belajar ..sangat-sangat membantuku semoga sukses selalu

Rizki Ananda mengatakan...

misi numpang tanya bos,, kalau kitas ingin menghapus gambarnya dan kemudian,, hover dropnya mau dijadikan jd lbih pendek gmana tuh,,,
saran dan infonya,, :)

obor terbakar mengatakan...

makasih kangg ilmunyaaaaaa

Unknown mengatakan...

Kunjungan perdana,salam kenal.Blog yang bagus dengan tip yg mantap.Ane coba yach,makasih tipsnya.

Posting Komentar

 
Masuk ke Blog