Friday, October 14, 2011

Cara membuat Dock menu Di blog

Senantiasa Belajar membuat:Cara membuat Dock menu Di blog



star dock yang menakjubkan baru sekarang dapat ditambahkan untuk blogger

blogspot animasi navigasi menuBlogger grafis
Semua dari kita melihat duck menu di jendela dan beberapa tempat


- Sebelum Kita Mulai:
- Anda harus berhati-hati saat mengganti template Anda.
- Sebelum Anda membuat perubahan, Back up template anda dan simpan di tempat aman.
Silakan pergi ke blogger.com dan login ke account Anda,
setelah Anda berada di dashboard klik "Layout" kemudian pilih account dan "edit html"
di halaman "Edit HTML" Pastikan untuk memeriksa "memperluas widget template"centang expand widget"

setelah itu mulai menambahkan kode,
kita akan menambahkan 3 kode, pertama satu, adalah kode java, yang kedua adalah adalah css dan ketiga akan mengendalikan mana menu akan ditampilkan di blog Anda.

Biasa masuk kemenu "edit html" dan cari kode:

<head>

setelah itu tambahkan kode berikut di bawahnya

<script src='http://sites.google.com/site/hostingfreesite/javascript/jquery.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/hostingfreesite/javascript/interface.js' type='text/javascript'></script>

kedua cari kode berikut

]]></b:skin>

lalu Tambahkan Kode berikut tepat diatasnya atau sebelumnya


/* Dock menu by */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

/* Fin del dock menu
----------------------------------------------- */

Dan sekarang kita akan menambahkan kode terakhir, hati-hati menambahkan kode ini di harap tepat.
jika Anda memiliki expirence dengan html, Anda akan dapat menambahkannya mana pun Anda inginkan,
jika Anda tidak memiliki, Anda akan menambahkan ke tempat default, (atas blog).
sehingga memungkinkan belajar bagaimana menambahkannya ke tempat default, 

cari kode :

<body>
atau anda juga bisa pasang di bawah header dengan cari kode header
tambahkan kode di bawah setelah kode di atas atau dibawahnya


<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj48iRtmx85rc18sEDbmSVtZO-zN2ZHcmb-AgORxLXzLsN0SaCD4vr6AkWhoKGjWwUPfKUBKB_me5YRnnCl8b_FJ7ykedL-rzuS3TivgZTuPA9XnLOxVJgzf9itHoWgxIiNhdk98C3Y/s1600/music-trans.png' width='30'/><span>Home</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXj5aZmV0nf32Ulq5XRhIwt9ceNXlWB9zV5PIPOj9_0niUvJD4iZ9hzGxsDzggnpOMsqDrZ5Y4EQIcv8ZM5hNeMpSND4OyykGu03AZgUIErORezStetDDAHhzOPwgLU8UTyF4GCiCD/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPR4Y0eKpf11SM55_gg7MbtbEUkC1QUsscTdSUPy_Pze05WBbb2ElYRMbJY2kWnWYyPlqImyMcya7TXVF3sYdNd0FB00BM7Q3dqrZ0KczF9kGbRDxRb_xMMWqfEfh7XEL-q8lVgh2/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJdeBEmtwRTDIP2UbPLmLRp8J_TjaX8IrIENwBhl5Tc_H0npFuqFGzfoAJskhSr-J3pW7c8XC5vUVmSDwjzITtn2YeqNz8oVoTZyVoCZ291n6EvkgtiC3pLYFRrLWl61Vv-dm8LnbI/s1600/home-trans.png' width='30'/><span>Clock</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNZEm0mq4oOHwdEy-vB4e-aq0M7Gw8Qlryb8a1MHbGPPD0pGDWcZzCzRKOvczLKr9lNaSTkqqNmgyQfjV_ZNZ1HOAfj3iLuedF4-7a-q6lWM6A7I5Bnj0xRoOd2MVTaQDU8qDT28R/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGSvoD_CkYVU0ytPX_7Clf1o6KeBoZ10zHhSOlnyVQ2b97WdkpPAHubCOo0gtaJ90sTR3MzGoSRDdLk9Gkvf1r8Mj_Z2z9fBdX8IgtLAc5RNwcmTpgZBUvijF7-vF_QuHvCZ_m7ilu/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYAtxap5g2S1mHA_GzTcXnu7qApsCnFHwqr9C6rhpGbZNgGrDMBvFrTkWwLgiRWJVF_rlVdH_RF0w3u3Riv1WyZRVlTtBcZl4EYqTDsh9NfXzvtIh0v1FGaomJ8GM0zjZ8FG8Ofeq/s1600/video-trans.png' width='30'/><span>Email</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbsNAb5lt-W9KMyGWhy51hAl53bxgdnOMAgqALCcFBQ2UJ0W8EewHPf7RtoLd5Y_qtXmTNfhtzirI7SyplNsKJtrw3RhlXZz6Z-B2TFIzO5Lgwuaf9ONkXgy1B6oquWGvsr8rKcXCY/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_BnzVSQ9A58JBB22t52eBvT8fBimMI0zYvs2J2Ff_x1KneVeaC8RawVdaDxdaZP2GiwjudRMCGeNEJLfZhodFshKLdrl4CsQcKSYJPSpgnXz0iWim89rJOEHu2GNoQU8SBehD0PqX/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2ZnLSzWbRP9ybDIm1fzh8YOpfWmhgUupejXcQM7yfk6t791qNsvursxQO_o0kHVbq8KsUCakWp_wGHKKt0PHpDhdI06VSBOWVrjvp-fuR4CsRWlOLkn47lg8Aa4Dp9SoOTOzDdND/s1600/calendar-trans.png' width='30'/><span>Web</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFbbrtZ0c_ZZRHN_Jx-JWAVo6w-wo-PCkTrRIlsMorPengjJJQLhprWczKDLm-KXPkqQZM0y0CPaEIEhaxNl_L8ZTQaZ4EwNYpnEMEvV7cMCuM80nVvNIy8QuDfNnmgDSFvXVnBDuT/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)

}
);

</script>
sekarang Simpan Atau Preview dulu Lihat Hasilnya:

trims"
keyword:





6 comments:

  1. Cara Membuat Dock menu,Cara Membuat CSS Dock Menu di Blog,Cara membuat Dock Menu,Cara Membuat Roket Dock Menu Blogger,BLOG: Cara membuat Dock Menu ala MAC OS,CSS Dock Menu,Menu Cairo Dock ala MacOSX di web,Membuat Menu Mirip Apple Dock,"

    ReplyDelete
  2. ijin copas untuk dipelajari & thanks ya sahabat.

    ReplyDelete
  3. Nyimak ni gan demonya ada nggak nihhh pingin tau hasilnya sebelum nyoba

    ReplyDelete
  4. oke banget nihhh tapi bingung ni masih kalaw di taro diblok saya jadinya dimananya yah serasi ngga nih...maaf mas brooo lw banyak nanya...

    ReplyDelete