Ok sore-sore ini memang enaknya ngeblog yah. Saat ini saya akan memberikan Tips tentang Navigasi untuk blog anda, Navigasi ini cukup unik karena Navigasi ini akan mengikuti Cursor kita ke bawah ataupun ke atas.
Gimana? apakah tertarik untuk membuat Navigasi ini di blog anda?
Ok langsung saja atnpa basa-basi saya kasih tau caranya, FOLLOW ME!
Step :
1 Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode </head> , Lalu Masukan Script Berikut tepat diatasnya.
4. Lalu Letakan kode di bawah berikut,letakan di atas kode ]]></b:skin>
6. Untuk pemanggilan kodenya, simpan kode berikut dibawah kode <body> :
8. Simpan Template
Semoga Bermanfaat. Good Luck ^_^
Gimana? apakah tertarik untuk membuat Navigasi ini di blog anda?
Ok langsung saja atnpa basa-basi saya kasih tau caranya, FOLLOW ME!
Step :
1 Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode </head> , Lalu Masukan Script Berikut tepat diatasnya.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery.easing.1.3panning.js"></script>
4. Lalu Letakan kode di bawah berikut,letakan di atas kode ]]></b:skin>
#cf_menu{position:absolute; display:inline-block; z-index:10; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:pointer; top:0; left:0; background:url(empty.gif);} /* stupid IE needs a background value */
#cf_menu .containerfollow{position:relative; font-family:Arial, Helvetica, sans-serif; font-size:10px;}
#cf_menu .title{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#333; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px; color:#fff; padding:5px 8px;}
#cf_menu ul{margin:0; padding:0; list-style:none; display:none;}
#cf_menu ul li{margin:0; padding:0;}
#cf_menu ul ul{margin:0 0 0 2px; padding:0; list-style:none; display:inline-block;}
#cf_menu ul ul li{margin:0 2px 0 0; padding:0; display:inline-block;}
#cf_menu a:link,#cf_menu a:visited{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px 1px 5px 1px; padding:5px 8px; border-bottom:1px solid #f33; border-right:1px solid #f33; color:#fff; background:#f33;}
#cf_menu a:hover{background:#fff; color:#000; border-bottom:1px solid #000; border-right:1px solid #000;}
#cf_menu ul ul a:link,#cf_menu ul ul a:visited{background:#333; color:#ddd; border-bottom:1px solid #333; border-right:1px solid #333;}
#cf_menu ul ul a:hover{background:#fff; color:#000;}
.cf_menu_transparency{filter:alpha(opacity=25); -moz-opacity:0.25; -khtml-opacity:0.25; opacity:0.25;}
6. Untuk pemanggilan kodenya, simpan kode berikut dibawah kode <body> :
<div id="cf_menu">7. Untuk tulisan berwarna BIRU anda bisa meng editnya se suka hati ana.
<div class="containerfollow">
<div class="title">MENU</div>
<ul id="cf_menu">
<li><a href="#" onclick="Animate2id('#home');return false">↑ Home</a></li>
<li><a href="#" onclick="Animate2id('#about');return false">About me</a></li>
<li><a href="work">+ Work</a>
<ul>
<li><a href="#" onclick="Animate2id('#recent');return false">Recent</a></li>
<li><a href="#" onclick="Animate2id('#web');return false">Web</a></li>
<li><a href="#" onclick="Animate2id('#print');return false">Print</a></li>
</ul>
</li>
<li><a href="#" onclick="Animate2id('#blog');return false">Blog</a></li>
<li><a href="links">+ Interesting links</a>
<ul>
<li><a href="#" onclick="Animate2id('#freebies');return false">Freebies & Resources</a></li>
<li><a href="#" onclick="Animate2id('#people');return false">People</a></li>
</ul>
</li>
<li><a href="#" onclick="Animate2id('#contact');return false">Contact</a></li>
<li><a href="info">+ Script info</a>
<ul>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>
8. Simpan Template
Semoga Bermanfaat. Good Luck ^_^
0 Comments
Tips Hari Ini
