Untuk lebih meyakinkan anda, coba anda lihat demo nya
disini.
-Login ke blogger
-Silahkan tuju
Design
-Pilih
Edit HTML.
-Backup template dengan klik
Download Template Lengkap.
-Cari kode
<head> kemudian letakkan kode javascript di bawahnya sehingga menjadi:
<head>
<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>
Masih di Edit HTML, sekarang cari kode
]]></b:skin> dan letakkan kode berikut di atasnya, sehingga menjadi :
/* CSS Dock Menu
------------------------ */
.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;
}
]]></b:skin>
Masih di Edit HTML, sekarang kita akan menempatkan
id untuk css dock menu. Jika anda sudah terbiasa dengan kode HTML template blogger, maka anda pasti boleh menempatkan id css dock menu di mana saja sesuai dengan keinginan. Misalnya ditempatkan di atas header, di bawah header, di atas content menu, di bawah content menu atau di atas footer pun boleh. Yang penting, jangan sampai salah meletakkan kode. Biar seragam, saya akan menempatkannya
di bawah header.
-Cari kode :
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
-Letakkan kode berikut di bawahnya, sehingga menjadi :
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-I98o3qt9B7fTbjy1tiP7HN68xrtw77sy9Uuk0N_sGX5-I06TQikn6CIfFrcmLdmMr3ND0bxqKxH0Jp8hC_xu7Kms5GWEDLFOHUQiJJa3nDH4itFtEWhQ9MlAa4l0gWS1ijoRjOvh/s1600/music-trans.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-A324rLLpLA-wVCIl5_jPLPNaZPxEZ0pF3QQHtfpldrOyQlD6S170Mo3GlRgfFoxfSwl23r9ggznJCh8TAZs2ie82D59RDe7TcXVPXdIAKQ32ovc3rzYaolseyVkhgvOcO_3pDrl/s1600/rss2-trans.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6j_lST05OhagLqaoZHf8V2IohAhyphenhyphenMhqv5o-RNSIlK38duglPFuP2oqkZB1n7DBeNJdJNq8xuU5y5tS8nQnoUqrjvnmK4kvlker_aS6NaeE3xeaa60bruJqWPcIe0vNlM3Jt-mpNeo/s1600/link-trans.png.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZthrIObuTRQVrV_vblf6TZ1PpfBBFxF2m0Y8FL92JWusqjhPeTQKX1gntdEM3We8Cgf4EnndBEb_jbVapLXhHVHLqrfRVXvS2eWe0mLJNV2kVj4TpIgK1JH4qqA5_8yIkjPJnxpz/s1600/history-trans.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrcWb69gWij3QT1WirqE_s6K4XlA29mqyA3KI1jE-Og08gGWkr4go4bTfydLvay4C-WK1mx2vDytsgHAvAO58MQ94Fmg0wBUvsozdCXK55Wt29a0HJ_60m1odDNseZf6m8SIVpc_e/s1600/email-trans.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXKP9U9l8gO4hoWb3yFzmC4bNd03jnRBRf-PC6r4kM3gl3hvbE6PRnRsS0DAFvnbLyFJs_fNKMTJdJzWDEAZM52dDu4ZHAbj2g8okXhFfBnrRdBgJwx_m5p0jlwKWzbxqKf5Z5gLh/s1600/portfolio-trans.jpg' width='30'/><span>Link</span></a>
</div>
</div>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
-Sekarang klik
SIMPAN TEMPLATE
-Selesai
Untuk alamat
http://killnotresponding.blogspot.com, silahkan ganti dengan link yang anda siapkan. Untuk alamat link gambar
berwarna pink, boleh juga anda ganti dengan gambar yang sudah disiapkan tentunya. Sudah biasa dengan kode CSS? Kalau sudah, silahkan ganti dan ubah beberapa
kode CSS yang berwarna hijau di atas. Misalnya anda ingin mengubah ukuran itemWidth: 30, proximity: 70, dan lihat efek animasi yang berubah. Demikian juga dengan beberapa kode CSS lainnya. Sekarang lihat hasilnya pada blog anda.
Good luck ya.. :)
Tidak ada komentar:
Posting Komentar