Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* -------------------------
Fancy Apple-Style Icon Slide Out Navigation
------------------------------------------ */
.navigationaple{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menuaple{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menuaple li{
    float:left;
}
ul.menuaple li a{
    text-decoration:none;
    background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ_32rdZv-D41lvspvhNNo8mlLfvUxrH6w7D0Wpy0rj2vvXImWdn9RTugt-uIJBpbPbb4EJbiOhAdDKtEqqpmcyktVgU92siNhnkWIAJe2r-55J3k_vvQUnzcAQHZUY42-ALCePsDgQaM/s1600/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}
ul.menuaple li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menuaple li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menuaple li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menuaple li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menuaple li span.Home{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWRzlbaO0NOI7UEZPeG6ojmadxxaf-B6uxnF3QUXS9BECVBQHnj37I7SMEPHyQKu-PLaBfMyflZAVe7u8ynV9tmKLO2_TWm8D1IgUHXxSwHCI0U3l8ez2vCQ_B57CEvUVs0y9b9cMpPo/s1600/home.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menuaple li span.About{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifKHDpET0rL5aJusrMJsfnAQ_XC2YiaL7XLUjXsUSuHCXqcRQGkwHi9TvmaE80j4asqELy5Eq8hZF8LdnnDEMrovtmuWZMt1fCT9_avIzZy0ZbRSN-SLWgKok2QH5RSMYaTFvCWZf8oAk/s1600/about.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menuaple li span.Email{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4puN6ByanqDDPjPtpriiNhsWDmt_2EcOTHzlS5fJga6ZKTMx0dP-28HoH_Y2jbdo0earuMwHj5Xe-Xk__RJp17GkfTzxqugetqi49eHdUcjbpaUu4V-EZbYbM0eosT-0J3_bdQx_a9TU/s1600/email.png);
    left:293px;
}
ul.menuaple li span.Portofolio{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilnNZkpXXX9U2bEG155il-dbwS8dx4Pynqt-q98Y5_GKDRp7iOyWkzRjMad5O5JKcSqmTUgh3-6T_DXkKeq5Re0o6mzzfKJVIFRqI4p0KApVQ_2dnETC-X2DQQgDUOtE3kYiT-dWeDJXw/s1600/portofolio.png);
    left:423px;
}

selanjutnya simpan script berikut diatas kode </body> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menuaple span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menuaple > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},400).css({'zIndex':'-1'});
                }
            );
            });
        </script>

yang terakhir pemanggilan pada Html :

<div class="navigationaple">
<ul class="menuaple" id="menuaple">
<li><span class="Home"></span><a class="first" href="#">Home</a></li>
<li><span class="About"></span><a href="#">About</a></li>
<li><span class="Email"></span><a href="#">Email</a></li>
<li><span class="Portofolio"></span><a class="last" href="#">Portofolio</a></li>
</ul>

</div>

dan selesai...

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ZAS-XP.com di inbox anda: