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:
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.
cari kode :
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.Silakan pergi ke blogger.com dan login ke account Anda,
- Sebelum Anda membuat perubahan, Back up template anda dan simpan di tempat aman.
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>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:Senantiasa belajar:"Cara membuat Dock menu Di blog'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"
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,"
ReplyDeleteijin copas untuk dipelajari & thanks ya sahabat.
ReplyDeleteoke sob silahkan
ReplyDeleteNyimak ni gan demonya ada nggak nihhh pingin tau hasilnya sebelum nyoba
ReplyDelete@VIAN sip sob tuh udah ada demonya
ReplyDeleteoke banget nihhh tapi bingung ni masih kalaw di taro diblok saya jadinya dimananya yah serasi ngga nih...maaf mas brooo lw banyak nanya...
ReplyDelete