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.
Ini baru oke punya apalagi kalau bisa dibuat bentuk lingkaran warna-warni. Terima kasih infonya
ReplyDelete