Siang-siang panas sambil menunggu buka puasa ane mau posting Tips dan Trik Blog atau Tutorial Blog tentang Cara Membuat Tombol Home, Back To Top, Dan Bottom Di Blog sebelumnya saya sudah pernah posting tentang Cara Membuat Teks Area Di Blog ...
OK buat agan-agan semua kita langsung praktek ke TKP ...^_^
Eitss iya sebelum saya kasih tutorial ya disini saya jelaskan dulu tentang Tombol Home, Back To Top, Dan Bottom, Untuk priview Tombolnya bisa agan-agan liat di blog ane di pojok kanan bawah .... 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
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
Mudah kan sobat cara membuat Tombol Home,Back To Top,Dan Bottom nya...
Semoga Bermanpaat dan selamat mencoba....^-^
OK buat agan-agan semua kita langsung praktek ke TKP ...^_^
Eitss iya sebelum saya kasih tutorial ya disini saya jelaskan dulu tentang Tombol Home, Back To Top, Dan Bottom, Untuk priview Tombolnya bisa agan-agan liat di blog ane di pojok kanan bawah .... 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
#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/AVvXsEighD9d0ConsIBIhRlz-DJdDh3z33w3lo-84BvqUG7XxsefqcE47jBDd1xa_Ipkj6yC6akIdhGR6_78OfOXLa2BiGmx9sRStRGJr4yjWxxecQUDvAWX12CuyOGsRUasSpt7GDCDjN9uxc0/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpFfapaXodgsogbNHzzGdGEyvZ3PkrcneOaeWaLVKT86UdWfIxw8UZUek4eS1-epoTC2W_RR_awqh4XJxbXqWsjT24Ne2axhn-_78e1IrbdHbFe0yv8Wht-AljVs8OWdlqhMBNUs3dwI/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QqUzTkjpKxLqEFpYtR2xa92m-VbyQ7eZ_uAW9wL1XNFyGP-Q1c2FeYdjDOiOP_I1Xzsr5fdqRuvuotgfyuvXfUUqvydA5e4evafvc5FKZS4Vqhpc7IRrWMPJCggHM6ssfCmNuWRotg/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/AVvXsEighD9d0ConsIBIhRlz-DJdDh3z33w3lo-84BvqUG7XxsefqcE47jBDd1xa_Ipkj6yC6akIdhGR6_78OfOXLa2BiGmx9sRStRGJr4yjWxxecQUDvAWX12CuyOGsRUasSpt7GDCDjN9uxc0/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpFfapaXodgsogbNHzzGdGEyvZ3PkrcneOaeWaLVKT86UdWfIxw8UZUek4eS1-epoTC2W_RR_awqh4XJxbXqWsjT24Ne2axhn-_78e1IrbdHbFe0yv8Wht-AljVs8OWdlqhMBNUs3dwI/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QqUzTkjpKxLqEFpYtR2xa92m-VbyQ7eZ_uAW9wL1XNFyGP-Q1c2FeYdjDOiOP_I1Xzsr5fdqRuvuotgfyuvXfUUqvydA5e4evafvc5FKZS4Vqhpc7IRrWMPJCggHM6ssfCmNuWRotg/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
7.Simpan
Mudah kan sobat cara membuat Tombol Home,Back To Top,Dan Bottom nya...
Semoga Bermanpaat dan selamat mencoba....^-^
10 komentar
Click here for komentargak jadi..
ReplyDi Coba lagi gan Ruri, Udah di perbaiki kok artikel ya...!
ReplySilahkan Kang....Monggo ...!:)
ReplyOK ... sama sama matur nuhun ...!
Replymntab sobat, izin pakai ...
Replybagus nih gan
Replykeren nih gan
Replygan ini buat tampil di homes ya ? Bisa ndak misal aku buat page baru terus aku sisipkan tombol next dan back
Reply@hengki
Replynice gann.
Replymampir www.adidoankzz.blogspot.com thanx..
copas ya : hehe
Silhakan memberi Komentar, Kritik, atau Saran ConversionConversion EmoticonEmoticon