Ingin tau Cara Membuat Tombol Home,Back To Top,Dan Bottom
Mari kita mulai saja Tutorial nya..
Eiiiit sebelum memulai Tutorial nya saya ingin menjelas kan dulu apa itu Tombol Home,Back To Top,Dan Bottom..?
Untuk lebih jelas nya coba sobat klik Tombol Home,Back To Top,Dan Bottom yang ada pada blog saya,.
5.Selanjutnya cari kode </body> Dan Letak Kode Dibawah Ini Tepat Diatasnya
6.Langkah Terakhir Tinggal Memasukan Kode Dibawah Ini Tepat Dibawah Kode <body>
7.Simpan
Mari kita mulai saja Tutorial nya..
Eiiiit sebelum memulai Tutorial nya saya ingin menjelas kan dulu apa itu Tombol Home,Back To Top,Dan Bottom..?
Untuk lebih jelas nya coba sobat klik Tombol Home,Back To Top,Dan Bottom yang ada pada blog saya,.
sudah sobat klik,nah itu dia maksud nya dari Tombol Home,Back To Top,Dan Bottom..
Sobat tertarik untuk membuat nya di blog sobat..?
Sobat tertarik untuk membuat nya di blog sobat..?
jika tertarik,mari kita mulai cara pembuatan nya..
1.Masuk Ke akun Blog Sobat
2.Pada Dasbor Pilih Rancangan-->Edit HTML Dan jangan Lupa Centang Kolo Expand Template Widget
3.Kemudian Cari Kode ]]></b:skin> ( gunakan CTRL+F atau F3 untuk memudahkan pencarian )
4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode Tadi
1.Masuk Ke akun Blog Sobat
2.Pada Dasbor Pilih Rancangan-->Edit HTML Dan jangan Lupa Centang Kolo Expand Template Widget
3.Kemudian Cari Kode ]]></b:skin> ( gunakan CTRL+F atau F3 untuk memudahkan pencarian )
4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode Tadi
#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;
}
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;
}
5.Selanjutnya cari kode </body> Dan Letak Kode Dibawah Ini Tepat Diatasnya
<a name='ngisor-dhewe'></a>
6.Langkah Terakhir Tinggal Memasukan Kode Dibawah Ini Tepat Dibawah Kode <body>
<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/AVvXsEiR7rwIwm1MmpBsTouggRsypSebPqbDQ8KeSvYX-SWvNh-o4pHU2FfgVogAhdlbtKnf1AvVbNZ8SQTGLtfpZ65izqMGy7qD6O83ppKXHTHE1OjwX8skf-VCYFF6-70xHUAeMNr51UnyBNU/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBi70xCdHnlH-2TT2oSvnGoHTKsVA5mVnglhqN-iar0cy5OFGEpeM_r-4mOasPj7FBT5b4E0VAh9CrlxbXTpSrB1ByQxmBUPkw00JYTXUmKYgOcoEvSbqj4bl7fmENeVmESch49dvMMlU/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNomG4jQCOw0f8UWdba1Kh2-2tetpiDclkhOSHclaIfvByvrBKH_yPwli4b-KCSEz0yoALR-wib3QcH6icVTCiYsb4G3IOuNTpNuk8WHZ2vmOz3N67jzVDdzHYYkf5ximywZg5gN5hbeY/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR7rwIwm1MmpBsTouggRsypSebPqbDQ8KeSvYX-SWvNh-o4pHU2FfgVogAhdlbtKnf1AvVbNZ8SQTGLtfpZ65izqMGy7qD6O83ppKXHTHE1OjwX8skf-VCYFF6-70xHUAeMNr51UnyBNU/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBi70xCdHnlH-2TT2oSvnGoHTKsVA5mVnglhqN-iar0cy5OFGEpeM_r-4mOasPj7FBT5b4E0VAh9CrlxbXTpSrB1ByQxmBUPkw00JYTXUmKYgOcoEvSbqj4bl7fmENeVmESch49dvMMlU/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNomG4jQCOw0f8UWdba1Kh2-2tetpiDclkhOSHclaIfvByvrBKH_yPwli4b-KCSEz0yoALR-wib3QcH6icVTCiYsb4G3IOuNTpNuk8WHZ2vmOz3N67jzVDdzHYYkf5ximywZg5gN5hbeY/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
7.Simpan
Atau bisa anda coba yang di bawah ini.
Cara Membuat Tombol Back To Bottom di Blog - Tombol Back to
Bottom merupakan kebalikan dari tombol back to top. Jadi, tombol back to
bottom ini bila di klik akan membawa kita langsung ke bagian paling
bawah halaman blog. Bagi kawan - kawan yang ingin membuat tombol back to
bottom ini, sobat tinggal ikuti langkah - langkahnya dibawah ini .
1. Login ke Blogger sobat.
2. Pilih Rancangan --> Tata letak --> Tambah Gadget
3. Copy kode dibawah ini di HTML/JavaScript
<a style="display:scroll;position:fixed;top:0px;right:5px;" href="#footer" title="Kembali ke Bawah"><img src="http://i968.photobucket.com/albums/ae165/whiex/down.png" /></a>
Keterangan :
1. Ganti yang berwarna Ungu dengan bottom jika ingin meletakkan nya dibawah
2. Ganti yang berwarna Biru dengan left jika ingin meletakkan nya di sebelah kiri
3. Ganti yang berwarna Merah dengan judul linknya Sesuai keinginan sobat :)
4. Ganti yang berwarna Pink dengan URL Gambar Back to bottom sobat.
4. Terakhir Klik Simpan.
Atau bisa anda coba juga yang terakhir ini.
Langkahnya adalah sebagai berikut:
1. Login ke akun blog anda
2. Klik menu Rancangan, kemudian klik tambah gadget, pilih javascript
3. Kemudian copy dan pastekan kode di bawah ini
Untuk gambarnya bisa anda ganti sendiri sesuai selera anda dengan mengganti http://www.kenseimedia.com/img/icon-upload.png dengan alamat gambar yang anda sukai.untuk posisinya juga bisa anda rubah sendiri dengan mengganti right:5px dengan left:5px untuk mengganti posisi tombol berada di kiri.
1. Login ke akun blog anda
2. Klik menu Rancangan, kemudian klik tambah gadget, pilih javascript
3. Kemudian copy dan pastekan kode di bawah ini
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://www.kenseimedia.com/img/icon-upload.png" /></a>
Untuk gambarnya bisa anda ganti sendiri sesuai selera anda dengan mengganti http://www.kenseimedia.com/img/icon-upload.png dengan alamat gambar yang anda sukai.untuk posisinya juga bisa anda rubah sendiri dengan mengganti right:5px dengan left:5px untuk mengganti posisi tombol berada di kiri.
SEMOGA BERMANFAAT
Tidak ada komentar:
Posting Komentar