Cara Membuat Menu Slide keren Di Atas Header
Semakin pesatnya perubahan demi perubahan dalam tampilan blog guna
memberikan kenyamanan dan kepuasan,seperti Cssscrollbar,Css reflect,cara
membuat tabel dengan Css dan banyak lagi,memang saya akui penampilannya
memberikan kepuasan degan tampilan yang penuh efek,untuk itu pada
kesempatan ini saya akan sedikit berbagi dengan sobat yaitu Cara Membuat
menu slid Dengan Css di blog,maksud dari menu slid yaitu ketika buka
halam blog maka secara otomatis tabel menu akan hadir dari arah kanan
menuju ke tengah,
Untuk lebih jelasnya silahkan sobat coba dan ikuti
tutorialnya di bawah ini.
1.Seperti biasa login dulu ke blog sobat
2.Kemudian pilih menu Template > Edit HTML.
3.Cari kode
]]></b:skin> (Gunakan CTRL+F untuk memudahkan dalam pencarian kode tersebut)
4.Setelah ketemu letakan kode Css di bawah ini tepat di atas kode
]]></b:skin>.
ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:820px;
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:#8e8f91;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-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 #1e1d1d transparent;
}
ul#navigation li:nth-child(1) a {
background-image:url(http://3.bp.blogspot.com/-8WwZdGaZDF8/
T1jCmIXy3YI/AAAAAAAAAgs/6YHfBmBXNcM/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7LgaujVi2oKN1rAY5UqlNp6It7NY0w8LqEEaITLlMQ_XLBeM29GN1ogYTdtk0VWF-GDNvP5ossFGh5Mt-FajyL8EZK0F5T2BkR5bExFlT8_wHwCprGknOosCw8C-HFAO4lpDAfVSxPAQ/
s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_n9dzevbnTYrxDTtBpAPzeEqQe8cKYAwJ9mFJ8uQXDgDUieosa7RSLIoQkrZ1jZ9obvrWsOqzhi-hY9_P-9ZlPLQb3ZIjyCFRo6hTjm8x0qozSmBMde4ZgkW6f2YWB4p-M3_qxEOEdsA/
s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDU37GK9YUOoA8Tcyqa2u6V3oEcbjD2qwXnQlSrlHxEstqEbifccqw0GoVNsoHBOwPAE-dKzTu36_5pkvT7eAl2XpaOOq4mcPWgQB7wrLUmxihyphenhyphennU38wP7mIZZkqexcEfe6t-PNCmIrIM/
s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKkqHDrrk28nkQCsc7_H01jRr9DFa7nHz7uK937wavNj6CnXKRFtoQsIY7dycDKZT9OH4CIfK-5YGL72Vhuvcbqf9ygojZVptbFcyt0Zx0xWUin2S_D5KS-oA-6qETREe3Vb5v50LViE/
s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxkP-3ztl4lmn_uYcLwjMs4ve2m_RSpN2Vi2BN8BEh52J0z60i6vOOFbVnIzdNZq70TdvIB1QdgtKOjaGa5Ta9l07Yz9HKDk3jCGaVbvwQVRIxa_UDIRKE-XfD2dfQVo12OLZiKWb1CY/
s1600/color.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;}
}
5.Kemudian cari lagi kode
</body> dan pastekan kode Css di bawah ini tepat di atas kode
</body>
<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>Blogging</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Windows</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Internet</a></li>
</ul>
6. Kemudian Simpan Template.
Tutorial tentang cara membuat menu slide indah di atas header sudah selesai sekarng sobat lihat hasilnya.
Terima kasih atas partisipasinya dan jangan bosan ya berkunjung ke blog saya ini.
