13 years ago
Pada Post an yang saya Ini Kita Akan Dibuat Capek DULUAN, hehehee[biacara serius]
karena kita harus membutuhkan bantuan yang nama nya NOTEPAD
karena eh karena, CSS yang gw tarok di bawah Masih Dalam Penyempurnaan....
seperti Tanda # yang jumlah nya Lumayan Banyak, karena , tauh lah dalam hidup butuh perjuangan begitu juga Para BLOGGER sejati. :)
oh iya Checidot aa dehhh, capek juga nulis nulis gnian :)
nih dia gan yang Gw Idam idamin , hehee
Menu Tersembunyi Pada BLOG kita
Cara Membuat Beautiful Slide Out Navigation di Blog. Setelah sebelumnya dulu saya share mengenai Cara Membuat Navigasi Efek Slide Out dengan jQuery
2 cara diatas sebenernya tidak punya banyak perbedaan, karena cara diatas sama-sama menggunakan efek slide JQuery. Tapi yang saya share sekarang ini slidenya tempatnya bagian atas, lain halnya dengan yang sebelumnya yang letaknya disamping kiri.
ok langsung aja ya ...
Cara Membuat Beautiful Slide Out Navigation di Blog
1. Login blog
2. Rancangan -> edit HTML
3. cari kode ]]></b:skin>
4. taruh kode dibawah ini diatas kode ]]></b:skin>
/*---------------- Beautiful Slide Out Navigation -------------------------------*/ .headerfixed { width:600px; height:56px; position:absolute; top:50%; left:10px; background:#fff url(title.png) no-repeat top left; } ul#navixed { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navixed li { width: 103px; display:inline; float:left; } ul#navixed li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#000; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -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; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navixed li a:hover{ background-color:#000; } ul#navixed li a span{ letter-spacing:2px; font-size:11px; color:#FFF; } ul#navixed .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmqk7dTm8WHEYJ_-4tgOhnnzF-AR5iforHm0xpf10SR40M06orBb5rPB8BIKC1t8mVKqu6yzM5pM6kEwBK3W5OVjlc8WGURVJ2m15LnKHOuQIjf3tdHiljZxIddmmqs3P_a2K9FV6CnSA/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ccCqThkNBFNNqGKmY0ge5n7YQ89DPvhDm5T-jlitqZlnXezbsiypHISVk4cfrV5dBmuvfofaUersNpg4E0iGQRoize06_pVhKoyJtZ1rBsbkIJj1IEszreF77nvJKDA2p6azlxwQkuk/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFm2QIlCXOVsl_MGkgSvFNIfeW7s3VQcSJ7iF_kj8yj_wtLKC4e0GbXvKS2uMlaW1HHGpGK85HbPbV8KftZUw_rtDxgNi4Kh-MLinaKoOBIGYrIN1cOAn22rlkl6VRcx90pDPDnA_qnvM/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK4nEvRn6pO-VEPknPEO4quxIseZ4LcEUSdbAX4ins1A-6NItxuuRg9Qihi7n4qXxTRnpCKIVGx5a1fH_2lo3ZPP_ayHJflZQ5wOp2uvKwgO13ixxITkOJ-lPV8owqBnzrjKVZpHC0K0U/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq_Np06AJ3qUrQQkXKGUY7IwZW_H35S3SLYSHSpyn3hZnxPndyJPkh_02bh9YQv1lZ-AveHv-uC7yBZGy2NMH_NCnY8v4CwKAlgPC1ZTUKMHsXBGmDTafyjhSSyL1okvc7mYuFRVQJhBw/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZyhyphenhyphenwDnu4pAzldhn4QTWQwgl94ecyMCrOxKtI3YKi-zXbkC4P6QGVglYJzm4eqmwIO8kemwJ76io2lEt8NWUHS_S9_IlPbeq0RXcERwaBoiNs4iFVpS5n6UlNhLF2Id5DsqVzK7y0a9c/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qTVJr7gOeIxhBKNK5aeKd9Py67181mBNKySZiX0NHC9MiUKNohM6DK3rPdMa41v571xJeMV_aF5_2dYps9m3E3t25j0N7L6dG_C8iS5jHFajjIwIKmiiP9b9BqUSt_ocwZlOM-cErpQ/s1600/mail.png);
5. lalu cari kode
6. taruh kode dibawah ini diatas kode </head>
[Kalo bisa kita edit dolo Kode CSS yang dibawah karena Tanda # tersebut harus kita isi dengan LINK kita supaya bisa Connect pada BLOG kita jadi dia bisa AKTIF deh , hehee]
kalo gk mau susah dengan Notepad yang ada Pada Laptop Kita Ato PC yang kita gunakan
nih gw kasih SOLUSI pake NOTEPAD ONLINE aja yang gw sediain. OK Brother.....
kerjain dehhhh yang dibawah
7. cari lagi kode yang seperti ini <body>
8. lalu taruh kode dibawah ini tepat diatas kode <body>
9. simpan
NB :
ganti # dengan link yang sobat inginkan
Created@Palm_Ben_Astro
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='http://kangdadang.googlecode.com/files/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $('#navixed a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navixed > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>
7. cari lagi kode yang seperti ini <body>
8. lalu taruh kode dibawah ini tepat diatas kode <body>
<ul id='navixed'> <li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li> <li class='search'><a href='#'><span>Search</span></a></li> <li class='photos'><a href='#'><span>Photos</span></a></li> <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li> </ul>
9. simpan
NB :
ganti # dengan link yang sobat inginkan
Created@Palm_Ben_Astro
![ResEdit v1.6.3 32bit[x86] And 64bit[x64] Free Download](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRS1UXSD3DxzwGKHwVhDuEhsMmxG0rW1CpHEgwZpcQr1TC9C3vUIwywuHrw-dE8K2S35VUqNWqI0cXptRVnXPl2VB9EuBxCiYvJ2m31xqIzRKyiLrHh69R3XyDo_QUDwYtPjndmuIU6Qw/s415/PH+-+Res+Edit+1.6.3+-+PalmaHutabarat.jpg)
Tidak ada komentar
Posting Komentar