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
+ Create Comment + 21 Responses so far.
pasti kursornya makin keren abies dech sobat...
Asis Sugianto@
keren bro.., n tdk memberatkan blog..,
thx ya dah mampir & komen *smile
Ternyata eh ternyata ada tutor juga dsini yak :)
saya obok2 filenya dulu ya hhe.sapa tauk ada tutor yang blm kebaca.
Sodara uchank@
iya emak ada sy pun sampe lupa klo ada hehe..
silahkan bro kali2 aja ada yg bermanfaat..
thx ya dah mampir & komen *smile
hhmmm,, scriptnya lumayan banyak ya sob,, hehehe,, ntar ane coba dah,, thx infonya sob,, :)
Rama88@
silahkan sob..., semoga bisa..!
thx ya dah mampir & komen *smile
Hohoho numpang mampir bro...
wah ekor nya pamjang juga ya,
kayak scriptnya,
xixixiiiii
langsung ke tkp,
thanks bra.....
boleh nih dicoba..
tapi kodenya banyak banget nih... agak susah nih editnya ... :)
Ichiruki Shinigami@
thx ya dah mampir *smile
z@
iya panjang tp hasilx mantap bro..
thx ya dah mampir & komen *smile
Shinobi Cafe@
edit sama aja dengan mbuat menu biasa...
thx ya dah mampir & komen *smile
waaahh... ngikut Cursor yaa sob,,, kerenn :D
Ridzahul Khairin@
keren sob...
thx ya dah mampir & komen *smile
Wah ada kursor ekor pasti unik nih, izin mencoba ya sob.Agar Konten Menawan Hati,
Bisnis Online Blog@
silahkan sob..,
thx ya dah mampir & komen *smile
Coba ada kolom demonya,jadi kita bisa langsung lihat hasilnya.Nice share sob,makasih ya.Happy blogging ajah.
Er'end@
sy dah kasi link demox, jadi tinggal di klik aja..,
thx ya dah mampir & komen *smile
Hehe,sory sob,kemarin ga lihat.Bener nieh ane lihat di Rumah Belajar,asyik juga yach,maksih infonya,happy weekend and happy blogging ajah
Er'end@
iya sob..,
thx ya dah mampir & komen *smile
Saya berkata: aduh yg begini ini bikin mumet, tapi pantang menyerah akan aku coba, Thx
masigit@
heheh..., kemarin2 aq juga nyaba sempat gagal sh tp setelah kedua kalix baru berhasil..., smg berhasil bro... *smile
Posting Komentar
Terima Kasih banyak atas saran dan kritiknya.
Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.
0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup