Sabtu, 14 Agustus 2010

Menambah Home,Refresh,Up,Down Horisontal Di Pojok

Saya mendapatkan Refrensi ini dari Webnya Yudhihame.. kalian pasti sudah baca artikel menu yang sebelummnya ?? jika sudah artikel ini versi horisontalnya.

Go to Tutorial !!

* Masuk ke Tata Letak -> Edit HTML
* Copy CSS berikut dan pastekan di atas ]]></b:skin>



#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

* Kode yang dicetak tebal adalah letak dari widget, "bottom" bisa kamu ganti dengan "top" dan "right" bisa kamu ganti dengan "left" Dan letak nya... kamu bisa ganti angka pixel dengan angka yang lainnya !
* Kalau sudah, cari lagi kode </body> tambahkan kode <a name='ngisor-dhewe'></a> tepat diatasnya.
* Simpan templatenya!

Kemudian Memasang Menunya ...

* Copy kode dibawah ini

<div id='mangetsu'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzhxywq69fyEpHNTDimN-FZrLg8ziCDllUfOpKesjr1gy2Yogdz6-SroKRn-cYJWafI_e-E510ykEtteEQ5AMGS3JDbMVYnHnB74qzbpfo06VwLG8Es145rad8JauVspj70BcftANCaQ/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikyTTwnY1OWOSVGJx1E7i-SYBTitUQwib66SzscUNxYslYGmwvAkeGcdxWBkIokxGLVRahnjFg0j13JYrw91FkyCSIzr2yYdzhu5ZKQNTsUSH9iecWXPadkFMPLF1j9I7EwJUVTlE6FY0/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF2eZ9Nux-KkmAcM2oTppRj0IFIdyo493sK7ITPylU3NXeDNjS-0VhvvGFWTszazPQA8r5BYF43h8X0fq30pBpjFjKga-QDaOhHw8jYDqdNP8W3C0Z-1-T8MUiLgwE3mIM7ppviKdgR6k/s320/next-icon2.png'/></a></td>
<td><a href='#' onClick='window.location.reload()' title='Refresh'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7l7MJa1lCinxfWdmb3Rivw6Yw-3-rtK2sop9bz6QCuBqX5Jifi-oxahsSD0tzvFTcqJvIxwxhpYa_E7R77rr7pZSFvGRNC3_4cIsU8TN4muJS5fTrIwY-MKrnUQrGVO09Pdm2-ffRdsw/s320/refresh-icon1.png'/></a></td>
<td><a href='http://www.emailmeform.com/builder/form/rBbDnjLea2T2' title='Mail me'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwd7zQ5xdfLrECW92QvAV-FVVcPs6myC11-UO5aEz6g0B8f78uck9ZOdhF63X8eR4ivu46csy5C8gRZ3aLTPE7WIPGhNok2Dq9rB_gRizOCCWQY8aSXZ6XHwORKZK4F-rxXL-xkuQjQM/s320/mail-icon2.png'/></a></td>
</tr>
</table>
</div>

* Kodenya bisa paste dibawah <body> atau bisa juga ke Tata Letak -> Elemen Halaman -> Tambah Gadget -> HTML/Javascript, Paste dan simpan.

Tidak ada komentar:

Posting Komentar

Silahkan Coment !!

Related Posts with Thumbnails

ShoutMix chat widget