Judul di atas akan menjadi lebih jelas apabila teman-teman langsung nengok di bagian kanan bawah blog ini. Apakah yang dilihat oleh teman-teman? Ya' pasti gambar ini: . Jadi dalam postingan kali ini membahas tentang bagaimana membuat sesuatu tampil di pojok blog. Untuk menampilkan sesuatu di pojok blog kita, maka kita butuh mengotak-ngatik beberapa kode CSS blog kita, bagi teman-teman yang belum tahu caranya jangan khawatir, karena di postingan kali ini akan dijelaskan secara mendetail.
Untuk memulai membuat sesuatu tampil di pojok blog, dapat dilakukan dengan langkah-langkah berikut ini:
1. Login/ masuk ke akun Blogger milik anda.
2. Ketika berada di halaman Dasbor, klik Tata Letak.
3. Sesampai di halaman Tata Letak, Klik Edit HTML.
4. Kemudian Cari Kode ]]></b:skin> (Gunakan Ctrl+F). Kalau sudah ketemu, letakkan kode berikut di atas kode tadi:
#pojok_blog {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
5. Tulisan yang dicetak tebal (bottom dan left), bisa anda ganti sesuai dengan keinginan anda. Apabila anda menggunakan kode di atas tanpa mengubahnya sedikit pun, maka nanti gambar/ icon anda akan tampil di bagian pojok Kiri bawah halaman blog anda. Anda bisa mengganti Bottom dengan Top untuk menghasilkan tampilan gambar di bagian pojok atas, dan juga anda bisa mengganti left dengan right, untuk tampilan di bagian pojok kanan.
6. Selanjutnya, letakkan kode berikut ini persis di atas kode </body> (Jangan lupa menggunakan Ctrl+F, agar lebih cepat):
<div id="pojok_blog">
<a href="http://t4belajarblogger.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMxc-aZvrftyRVBfRhWBGmP8pbdMJAOXNO4W1RrlLbepKpqwAQlsOeJ9W5uQckXekVLi0TwOuL3L7RcaFN_x0CyD-8hnMuJxDSE2fbRQh5px1d39fbLGzY0WlQ4KM4QVCJSzK_k8Vosjsg/" border="0" /></a>
</div>
<a href="http://t4belajarblogger.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMxc-aZvrftyRVBfRhWBGmP8pbdMJAOXNO4W1RrlLbepKpqwAQlsOeJ9W5uQckXekVLi0TwOuL3L7RcaFN_x0CyD-8hnMuJxDSE2fbRQh5px1d39fbLGzY0WlQ4KM4QVCJSzK_k8Vosjsg/" border="0" /></a>
</div>
7. Jangan Lupa klik Simpan Template.
8. Selesai...
Nb:
Bagi teman-teman yang ingin menampilkan sesuatu namun bukan icon/ gambar. Teman-teman bisa menampilkan sesuatu yang mengandung kode HTML atau Java Script, dengan cara menghapus kode berikut ini, lalu diganti dengan kode script yang ingin ditampilkan:
<a href="http://t4belajarblogger.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMxc-aZvrftyRVBfRhWBGmP8pbdMJAOXNO4W1RrlLbepKpqwAQlsOeJ9W5uQckXekVLi0TwOuL3L7RcaFN_x0CyD-8hnMuJxDSE2fbRQh5px1d39fbLGzY0WlQ4KM4QVCJSzK_k8Vosjsg/" border="0" /></a>
Selamat mencoba...!
Semoga Bermanfaat []
0 komentar:
Posting Komentar