Komputer | Jaringan | Software | Driver | Internet | Blogging | Bisnis | SEO | Kesehatan | Musik | Game | Refreshing | Dota | Umum

Kamis, 29 September 2011

Trik Memasang 2 Gambar atau Lebih pada Sudut Kanan dan Kiri atau Atas dan Bawah Blog

Yo ! Selamat malam Yo ! Gimana kabar kalian Yo !? Semoga baik Yo !? Amin ... Yups, saatnya berbagi tips dan trik mengenai blogging, hehe maklum saya sangat jarang sekali berbagi seputar trik blogging ! Saat ini saya ingin berbagi tentang salah satu cara untuk mengoprek-oprek template blog agar terlihat lebih cantik ! yaitu dengan menambahkan gambar atau animasi pada bagian sudut blog.

Mungkin topik ini sudah sangat sering di bahas oleh blogger2 di dunia blogging maya. Namun sangat jarang sekali dan bahkan belum ada yang pernah membahas Bagaimana Cara Menambahkan Gambar atau Animasi lebih dari satu, dua bahkan bisa lebih pada Pojok Kanan, Kiri, Atas dan Bawah Blog ! hehe sebernarnya ini sangatlah mudah ! kita tinggal menganalisa scriptnya, sehingga kita berpikir sejenak, lalu mengaplikasikannya, dan akhirnya saya coba ternyata berhasil hehe ^^. Hemm bagaimana caranya ? mari kita simak !
  • Login pada Akun Blogspot anda, itu pasti hehe !
  • Masuk pada Design - Edit Html dan jangan lupa mencentang Expand Widget Templates
  • Ada 2 Script yang harus kita tambahkan pada Templates Blog kita ! pertama adalah script Konfigurasi Widget dan scripts yang kedua adalah Content atau Isi dari Widget tersebut.
  • Langsung saja cari kode ]]></b:skin>
  • Letakkan terlebih dahulu scripts konfigurasi widget berikut ini, di atas kode ]]></b:skin>
#sudut {
position:fixed;_position:absolute;
top:10px; left:10px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

#sudut2 {
position:fixed;_position:absolute;
bottom:10px; left:10px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  • Coba perhatikan script yang berwarna merah, itu berfungsi sebagai identitas untuk membedakan scripts satu dengan yang lainnya agar tidak crash ! sebagai contoh seperti pada scripts di atas, #sudut dengan #sudut2 Penamaan ini tidak boleh sama !
  • Kemudian perhatikan script yang berwarna biru, itu berfungsi untuk mengatur posisi penempatan gambar pada sudut blog, right = kanan ; left = kiri ; top = atas ; bottom = bawah.
  • Lalu Cari kode </body>
  • Nah saatnya menambahkan script content widget tersebut, dengan menambahkan script berikut ini di atas kode </body>
<div id='sudut'>
<a href='
http://kimochiku.blogspot.com'>
<img alt='' border='0' src='
http://i1036.photobucket.com/albums/a447/andryli/kimo.gif' style='cursor:pointer; cursor:hand;width: 210px; height: 78px;'/></a>
</div>

<div id='
sudut2'>
<a href='
http://kimochiku.blogspot.com'>
<img alt='' border='0' src='
http://i1036.photobucket.com/albums/a447/andryli/kimo.gif' style='cursor:pointer; cursor:hand;width: 210px; height: 78px;'/></a>
</div>
  • Coba kita perhatikan script di atas yang berwarna Merah, "div id=sudut" dan "div id=sudut2" Nah inilah yang saya maksud tadi bahwa penamaan tidak boleh sama karena memang berfungsi sebagai identitas scripts !
  • Dan untuk script yang berwarna orange itu adalah alamat url link, berfungsi ketika kita hendak meng-klik gambar tersebut akan mengarah kemana
  • Untuk script yang berwarna hijau, itu adalah alamat sumber link gambar yang akan kita tampilkan pada sudut2 blog.
Yups selesai sudah trik pemasangan 2 gambar atau lebih pada sudut2 blog, semoga bermanfaat dan dapat membantu para blogger untuk menghias blognya agar lebih sedap dan cantik pada layar monitor hehe ^^ Oke Sekian dari saya, Terima kasih

~ Blogging Trik ~

1 comments:

imam mengatakan...

bagus gan

Posting Komentar