Saturday, February 4, 2012

Cara Memasang Gambar di Sebelah Kiri Halaman Blog (Floating Image)

gambat

Postingan yang kali ini sobat blogger baca adalah tentang cara memasang gambar di sebelah kiri halaman blog. Postingan ini Rinjani Lovers publikasikan karena kebetulan salah seorang dari rekan sesama blogger sempat bertanya melalui kolom komentar.
gimana, cara menampilkan foto seperti gambar sampean n langsung terhubung ke facebook
Sebenarnya, ada beberapa alasan sehingga blog ini memasang gambar tersebut di sebelah kiri :
  • Pertama, karena saya ingin blog ini terlihat beda dengan blog-blog yang lain (Bukan mau pamer muka).
  • Kedua, supaya pengunjung blog bisa berinteraksi secara langsung dengan saya melalui situs jejaring sosial Facebook.

Untuk membuat gambar tampil di sebelah kiri halaman blog, sudah pasti sobat blogger harus memiliki foto atau gambar yang akan ditampilkan.
Kalau sobat blogger sudah memiliki gambar, sobat Upload gambar tersebut ke PhotoBucket misalnya atau ke website-website penyimpanan gambar yang lain.
Kalau kedua hal itu sudah siap, ikuti langkan di bawah ini.

Cara menampilkan gambar di sebelah kiri halaman blog :
  • Sobat Login dulu di blog sobat
  • Pilih tata letak lalu klik Edit HTML
  • Kasih tanda centang pada Expand Widget Template
  • Copy kode berikut :
#trik_pojok {
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); }

  • Paste kode tersebut sebelum kode ]]></b:skin>
  • Selanjutnya, copy kode berikut :
<div id="trik_pojok"><br /><a href="http://www.facebook.com/#!/MuhammadSeptiRosidi"><br /><img src="URL GAMBAR" border="0" /></a><br /></div>

  • Paste kode tersebut sebelum kode </body>
  • Simpan Template sobat

Tambahan :
http://www.facebook.com/#!/MuhammadSeptiRosidi bisa di ganti dengan URL Facebook, URL Twitter, atau URL Blog sobat
Ganti URL GAMBAR dengan URL gambar sobat

Kalau sobat blogger mengalami kesulitan dalam membuat gambar di sebelah kiri halaman blog, silahkan sobat blogger bertanya melalui kolom komentar. Dengan senang hati Rinjani Lovers akan jawab.


Dapatkan Artikel terbaru Rinjani Lovers secara gratis! Untuk itu, masukkan Email anda pada kolom di bawah ini. Setiap artikel yang kami publikasikan, akan langsung kami kirim ke Email anda

Delivered by FeedBurner

Baca Artikel menarik lainnya di bawah ini...



23 comments:

  1. Replies
    1. Cba perhatikan langkah-langkahnya,
      Bener apa tidak,
      Kalau masih atau ttp tdk bsa,
      Kasih tau saya pesan yang Error yang muncul saat edit template...

      Delete
    2. bro. Paste kode tersebut sebelum kode ]]> itu kaya gmna ?

      Delete
  2. Paste kode tersebut sebelum kode ]]>

    ReplyDelete
    Replies
    1. Yudi...
      "SEBELUM" di sini artinya di "ATAS"...

      Delete
  3. Replies
    1. Supaya gambar yang ditampilkan langsung muncul di blognya, simpan gambar atau fotonya di situs PhotoBucket

      Delete
  4. Nice info gan ^_^
    Mapir ya :D
    rgs-share.blogspot.com

    ReplyDelete
  5. Ass wrt wb. sahabatku yang baik hati ,,,saya telah sudah mencoba memasang gambar di sudut blog sesuai petujuk sahabat di blog ini tp belum juga bisa tolong beri petunjuk lebih jelas lagi. dan kalo bisa tolong cantumkan cara memasang foter blog 3 atau 4 kotak bersudut bundar... terma kasih atas kebaikan sahabat wasslm

    ReplyDelete
    Replies
    1. Walaikum sallam Wr. Wbr...
      Alfatih...
      Supaya gambar bisa muncul dengan cepat di blog kita,
      Lebih baik gambarnya di simpan di photobucket.com dan langsung copy URL yang diberikan...
      saya belum pernah coba apakah gambar yang di simpan di Picasa Web Albums atau website lain bisa tampil seperti gambar yang Alfatih lihat saat ini.

      Delete
  6. CHECK YA MAS BRO BLOG SAYA 'BANYAK TIPS2 YNG PERLU ANDA KETAHUI TERIMA KASIH ..
    CHECK TKP http://putrapatiwara.blogspot.com/

    ReplyDelete
  7. Mas Ma'af Saya Sering Copy Artikel Mas...Karna Saya Betul2 Sangat Suka Dengan artikel Anda Begitu Bermanfaat Mas

    ReplyDelete
    Replies
    1. Ahmad Sazili...
      Silahkan di copas, tapi jangan lupa cantumkan sourcenya...
      Oke...????

      Delete
  8. Untuk menampilkan sebelah kanan gimana mas? Boleh di copas tidak artikelnya? sangat menarik dan bermaanfaat sekali bagi sy blog pemula. Trima kasih

    ReplyDelete
  9. bang.. klw blog yang pake templet klasik bisa di setting kaya blognya abang.

    ReplyDelete
  10. mas bro link yang mana di pakek neh.. yg html code to direc link.. bingung neh dak bisa2

    ReplyDelete
  11. brow apa di pakek biar gambarnya tidak punya beground blakang

    ReplyDelete
  12. bang tidak bisa buat foto spt abg, saat aku mencoba ada balasan : Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The reference to entity "current" must end with the ';' delimiter.
    Error 500

    ReplyDelete
  13. gan, kalau mau dipasangnya sebelah kanan gimana caranya?

    ReplyDelete

home

Copyright © 2012 Tutorial Blogspot | Design by X-Template