Bismillah....
Cukup lama juga ternyata Rohis Facebook gk memposting tentang Tutorial Blogspot, postingan terakhir pada bulan Juli lihat postingan terakhir disini. Insya Allah kedepannya Rohis Facebook akan lebih memenej waktu jeda antara postingan yang bermuatan Tutorial Blogspot dengan postingan-postingan lainnya.
Setiap Blogger pasti pengen tampil beda, begitu pula dengan postingan kali ini Tutorial Unik Blogspot (1) - Cursor Ngekor Menu. Awalnya Rohis Facebook bingung mau memberi judul apa, supaya agak beda Plus Unik maka judulnya di kasih Tutorial Unik Blogspot (1) - Cursor Ngekor Menu.
Sependekpengetahuan saya diantara sabahat-sahabat Blogger yang saya ikuti gk ada yang ngebahas Tutorial ini. Jadi langsung aja ke TKP....
Berikut ini langkah-langkah pembuatannya:
0. Ingat Back up terlebih dahulu templete Anda
1. Masuk ke akun blogger Anda
2. Rancangan, Edit Html, cari kode ]]></b:skin>
3. Copy kode berikut ini dan simpan di atasnya:
- /* ---------------
cursor following menu
---------------------------------- */
#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-opaci
4. Lalu simpan kode berikut ini diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://oktriblog.googlecode.com/files/jquery.easing.1.3panning.js"></script>
<script type="text/javascript" src="http://oktriblog.googlecode.com/files/jquery.easing.1.3panning.js"></script>
5.Copy kode dibawah ini dan simpan diatas kode </body> :
<script type="text/javascript">
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
<script src="http://kangdadang.googlecode.com/files/malihu.jquery.cfm.js"></script>
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
<script src="http://kangdadang.googlecode.com/files/malihu.jquery.cfm.js"></script>
6. Copy kode dibawah ini dan simpan dibawah kode <body> :
<div id="cf_menu">
<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>
</div>
<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>
</div>
7. Simpan dan Lihat hasilnya, Semoga Bermanfaat...
8. Judulnya Cursor Ngekor Menu atau Menu Ngekor Cursor yaa...???? hehehe...
8. Judulnya Cursor Ngekor Menu atau Menu Ngekor Cursor yaa...???? hehehe...
Lihat Demo
Sumber : http://www.oktri.co.cc
No comments:
Post a Comment