MEBUAT MENU HIDDEN Keren Di Blog 20Mei
10:00 AM
Farrid Kuntoro
0 Comments
Pada Artikel pertama saya pernah Share Membuat Menu Hidden Keren di Blog Menunya sama cuma eefect nya berbeda.10:00 AM Farrid Kuntoro 0 Comments
Pertama anda harus Login terlebih dahulu ke akun Bloger anda
Kemudian ke Rancangan -> Edit Html
kemudian cari kode ]]></b:skin> salin kode berikut
CODE
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:#9E242C; 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 #e6e6e6 transparent; } ul#navigation li:nth-child(1) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMe1X1xgbtXftNZmmBRjY545RbkWFXSVb8I0xLVZMxfpfgz4jecDJuIV6v_k9-307JcC7H5pTWAgJhTx6fd0AunBtBlrk9SN97pLvFvLoL9RLE_bwPXgcZyZXSjO95Yp1chwu3f-NRAA/s1600/home.png); } ul#navigation li:nth-child(2) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGXnaGo4PmAIXTOhiPJqhc5reeimXQXmaLdZS2dMt4BJQmJGRUFf80iVzyP9IarlDc3cgYmxJ-JBIfvYQG5Gtyw8Yg5Globd_79eDd_I3IHXHP-_If2TeNZP-VIEXGzXjlbBSnCbXTzw/s1600/user.png); } ul#navigation li:nth-child(3) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdSE4X45Dwera2ipbHTSCglKLGaWfSmeTyGOEXn-0pe_NhdzJndZVi8Ni6GoXUyvXwcQu6V8oBsndqwyuh4tTecBMzkBjFkkKqtw0ZAFIbAa0wDkGI_InsJ0p8XMA7xIiSKab_N7EWEU8/s1600/mail.png); } ul#navigation li:nth-child(4) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiPyjzVzxrPCDAVTRetGNv6JGiSXmI_bFuRzyanMNHCUOyhrqQBFuXzrqe_jiDOw54xpvbijjjssOr-owveIAcNle8yjHlUmQ3zA1EyksgOY5Yswkfj5CLLZevWyUkQ_tArWdvoklIhgQ/s1600/rss.png); } ul#navigation li:nth-child(5) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHPdTYdTkszxQSntcQUmMSbLgoeB_sRBteS6LwAHelOMSN9VXoOwxj0z09rDsiHyWOlqD2xLP50l53LeEWfNfbRZU1D9nk08aYMsUZ1zf5wVlC9Ax8LPSH74tht8hdmoi-pScDgAAJcbU/s1600/link.png); } ul#navigation li:nth-child(6) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAm5yZvP9mD30Noz3G5fNy-VJreE-_1ly2UeXAtqHw-TbsN-JgXvokvBx95kM4uYfP4YuLRRSFzXbUlCFJhsU9_vePUjLam2dqfz4_-w7N0_TGwuhDirCby9uDuKHORIzNkHyv1sysz2Q/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;} }
Selanjutnya cari kode </body> dan letakan kode dibawah ini danletakan diatasnya :
Semoga ini Berguna dan Bermanfaat bagi kita semua, Tolong jangan hanya melihat dan mencobanya, komentarnya dan Follow juga donk biar semangat ...

0 comments:
Terima Kasih telah membaca artikel ini , Silahkan Komen jika ada yang ingin di tambahkan atau di kritik/saran dan Share ke social media kalian semoga bermanfaat :D