Cara Pasang RocketDock di Blog

Login ke blogger
-Silahkan tuju Design
-Pilih Edit HTML.
-Backup template dengan klik Download Template Lengkap.
-Cari kode 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 :
</b:section>

Letakkan kode berikut di bawahnya, sehingga menjadi :


 </b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</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 klik butang SIMPAN TEMPLATE
Lihat lah blog agan... Selamat mencoba :D

Sumber



.
Login ke blogger
-Silahkan tuju Design
-Pilih Edit HTML.
-Backup template dengan klik Download Template Lengkap.
-Cari kode 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 :
</b:section>

Letakkan kode berikut di bawahnya, sehingga menjadi :


 </b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://killnotresponding.blogspot.com'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</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 klik butang SIMPAN TEMPLATE
Lihat lah blog agan... Selamat mencoba :D

Sumber



.

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | SharePoint Demo