Home » » Tutorial Unik Blogspot (1) - Cursor Ngekor Menu

Tutorial Unik Blogspot (1) - Cursor Ngekor Menu

 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:

    1. /* ---------------
      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>


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>

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">&uarr; 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 &amp; 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...

Lihat Demo

Sumber : http://www.oktri.co.cc
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Rohis Facebook

+ Create Comment + 21 Responses so far.

14 November 2011 16.57

pasti kursornya makin keren abies dech sobat...

14 November 2011 17.28

Asis Sugianto@
keren bro.., n tdk memberatkan blog..,
thx ya dah mampir & komen *smile

14 November 2011 17.34

Ternyata eh ternyata ada tutor juga dsini yak :)
saya obok2 filenya dulu ya hhe.sapa tauk ada tutor yang blm kebaca.

14 November 2011 18.51

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

14 November 2011 20.43

hhmmm,, scriptnya lumayan banyak ya sob,, hehehe,, ntar ane coba dah,, thx infonya sob,, :)

14 November 2011 22.21

Rama88@
silahkan sob..., semoga bisa..!
thx ya dah mampir & komen *smile

14 November 2011 23.34

Hohoho numpang mampir bro...

15 November 2011 11.50

wah ekor nya pamjang juga ya,
kayak scriptnya,
xixixiiiii
langsung ke tkp,
thanks bra.....

15 November 2011 12.04

boleh nih dicoba..
tapi kodenya banyak banget nih... agak susah nih editnya ... :)

15 November 2011 12.23

Ichiruki Shinigami@
thx ya dah mampir *smile

z@
iya panjang tp hasilx mantap bro..
thx ya dah mampir & komen *smile

15 November 2011 12.32

Shinobi Cafe@
edit sama aja dengan mbuat menu biasa...

thx ya dah mampir & komen *smile

15 November 2011 15.01

waaahh... ngikut Cursor yaa sob,,, kerenn :D

15 November 2011 15.10

Ridzahul Khairin@
keren sob...
thx ya dah mampir & komen *smile

15 November 2011 21.04

Wah ada kursor ekor pasti unik nih, izin mencoba ya sob.Agar Konten Menawan Hati,

16 November 2011 13.38

Bisnis Online Blog@
silahkan sob..,
thx ya dah mampir & komen *smile

18 November 2011 15.37

Coba ada kolom demonya,jadi kita bisa langsung lihat hasilnya.Nice share sob,makasih ya.Happy blogging ajah.

18 November 2011 15.48

Er'end@
sy dah kasi link demox, jadi tinggal di klik aja..,

thx ya dah mampir & komen *smile

19 November 2011 13.41

Hehe,sory sob,kemarin ga lihat.Bener nieh ane lihat di Rumah Belajar,asyik juga yach,maksih infonya,happy weekend and happy blogging ajah

19 November 2011 20.09

Er'end@
iya sob..,
thx ya dah mampir & komen *smile

19 Januari 2012 18.04

Saya berkata: aduh yg begini ini bikin mumet, tapi pantang menyerah akan aku coba, Thx

19 Januari 2012 18.10

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