2:02 AM
Unknown
-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://sinarabadifc.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOzSY2nsMBubjpG6CBk4cHN_ACaYwQgEU48WTxGcDRNonZOOCPsdC87g1NOXeCOrIQhCrHzIsWTcqU8cLszX0LfUNhuWxaHhzyp_IiNq4AZlSTewpzzojz0Ugjyo3QH2BB8xegNFcd/s1600/music-trans.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://sinarabadifc.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIoi8-ivrViBtCJU0AWDpWz_FtLu9GR7pZacy-yozwOHIkQUIojYqwkQFMTrl_ml1MkgzioxhBn0_a1KLKgUdGIuRkFQHiVcikl6ZmPh0g84lN4bcY1RoKSQqODj7dSFhbuslMW4jZ/s1600/rss2-trans.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://sinarabadifc.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDN1KLe-Sx2P_MOEHYD6TCCz8ThNFyjoENOdFL-9rUhYHth3u-mCeHqY5gGdcPIk1HfAxnoyz0a9ZOw0KRtLWfFQsHurPPePv5dUv2aoYHLnyTosb2n5AIRIiudYc1Q7Xe6jmOYGCQ/s1600/link-trans.png.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://sinarabadifc.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsNApSsWOyrjJH4s74Zr05T5O0GE0IjDMCHiRit121UAJjRuePq_t49a0Qb9-ua4Rhwv8MSJC30YvJX9EOPRZBHY90oXO7uV1yzTqSYA-dWXh47FVR5JKrqZgXgUb6r-GU91N88JjI/s1600/history-trans.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://sinarabadifc.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSNYa3ZzGLso8GCN95Tx5Df7_KNng6FUmbmwI1bXoBPytNlrqjrxrncrTdXazc0gUXtz2vfH-k52VNqVs2K9HySEwYd9SpPSpql6EzWC8ORUKQsBSTZzxV-xzMI8o6sSj-jLUWT3n0/s1600/email-trans.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://sinarabadifc.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj48C2lio7jSQyZb4Nih40GsbLupxiEk74rYmoEoCl0pkrxiQQO65r_PY3vs4KpzTzeQy6VQ9QNeQeT9F6IecAo7E0gHZrWXpmJCSG-AzZFbN76h9gcZdSCm32tR4HDtYBDreKGOkOc/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://sinarabadifc.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.
Semoga berhasil :)
Download Artikel pdf
Posted in: TUTORIAL BLOG
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.