Skip to content Skip to sidebar Skip to footer

Membuat rotate page menu navigation

Membuat rotate page menu navigation
Membuat rotate page menu navigation

Page menu navigation rotate atau rotasi maksudnya seperti gambar di atas, di tutorialku ini aku meletakkannya di sebelah kanan atas blog agar dekat dengan scrollbar jadi akan mudah menekan menu navigasinya. Cara membuat rotate page menu navigation adalah sebagai berikut:

1.Dashboard > Template > edit HTML
2.Tick Expand template widget dan tekan F3 atau CTRL + F dan cari kode:
]]></b:skin> atau  /* Content (pilih salah satu saja)
3.Letakkan kode berikut ini di atas kode tadi:
/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font:normal 80% Verdana,Trebuchet,Arial,Sans-serif; font-size:12px;margin:1px; }
#list8 ul li a { display:block; width:100px; height:28px; background-color:#FFB5B5; border-left:10px groove #FF79BC; padding-left:40px;
text-decoration:none; color:#272727; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #FFB5B5;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #FFB5B5;
transform:rotate(-5deg); box-shadow:10px 10px 20px #FFB5B5;
}
Yang aku tandai warna ungu/purple adalah kode warna, silahkan kalau mau ditukar, tentang ukuran px bisa juga kalau mau ditukar ukurannya, pintar-pintarlah mengeditnya xD.

3.Cari kode:
</body>
4.Letakkan kode berikut di atasnya, jadinya sepertidi bawah ini:
<div style='display:scroll; position:fixed; top:150px; right:-40px;'>
<div id='list8'>
<ul>
<li><a href='url blog'>Home</a></li>
<li><a href='url page'>title</a></li>
<li><a href='url page'>title</a></li>
<li><a href='url page'>title</a></li>
</ul>
</div>
</div>
</body>
Yang aku tandai warna biru adalah link/url page navigation nya masukkan disitu danwarna pink adalah nama navigation misalnya about me, daftar isi, etc.

4.Tekan pratinjau dulu jadi atau gak? baru simpan template, kalau ada pertanyaan silahkan untuk menuliskannya di komen xD.

1 comment for "Membuat rotate page menu navigation"

  1. Ini baru oke punya apalagi kalau bisa dibuat bentuk lingkaran warna-warni. Terima kasih infonya

    ReplyDelete