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 penapilannya 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 tengahuntuk 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr7CY7bQ2qJmAO82LpKsu9YvDPNJnw-MAB42lu-FSzqOsbITBtFVEloL4y0uKvyZE5CHm0wQ-ptb05J0SVTQ_zVhVU6O7ot6Iin187vYLyfMWqdQBwrZu4rp5r2GMdJBKrUlQZua2SPYA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyt-CRUxM6WZE94CBRW5iDgLIZHW3DMKfeQmsj-LvCInt7d2AaidNN1hlxXL0gJJqZP_rK7jw3JbetvMyedkkaPgiWQyGEM44081yj9FlLll4_rT9Yl-ZxUWwzIT5RpZJy-qvIhFz9KVc/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIF9tByzfIKvRB5fSCgM4xOeNq6AWLZGGD84RNtLFZPJyWM0KUIbOOGz4YBZyfinoeJrkp8VJ0xGQqhyphenhyphenL08GAvJvdbIhDuCJX7ZZVqTg2HnXrXgfgGZ8Q3xKJdr5JowGeiPOW80aQ6VA/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIM_wkrYNLuYrtr8ZzYx6gJXwZSxCMVhPfHQ3yY0HqRsrIQrjp8u9vksLyVM451BnSdAN-TfdEJNxFrETm-gky35ufD1e5yCnWLw6sQ5zR7C9qELTfX7ILB6pMWAu2OZkVdq2BXcGjNSk/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_NWAKLCRKU2u0S0A4VjHEKA4YvqMK8lpIpd8nFKwkCmmeYvsqt45wrGEfWBCeu_JzIoKbLMOj_3Odk-UaSFjzUO4ce9owGp0ajCy-8Dfnds7mr_OEp278gV4A0vy502UGS4q-gEHy9k/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGLfTdMfQhIz4arGuxMbgMZgHBhcLKU8G_FB8zul8CChNzPZMQxryE1SUy_QXgxB4aoqhyphenhyphenmIBKFObFKUnr0n0emd9pRvCzJjpy7gBhnbNB4OsJ2yeMzMZqn96HbNKAgeBAEFJ9FcoVA2Q/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.
<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 dan lihat hasilnya
Itulah artikel dari saya semoga ada manpaatnya terima kasih.
Postingan
tidak ada tombol navigasinya ya, tapi its oke patut dicoba, Thanks infonya mas.