Cara Pasang Image di Sudut Blog

Salah satu trik blogger agar blog kelihatan tambah menarik adalah memasang image di sudut blog. Pemasangan image bisa di atas kiri, atas kanan, bawah kiri, dan bawah kanan. Selain itu trik ini juga dapat dimanfaatkan untuk fungsi yang lain, sesuai dengan apa yang kamu inginkan. Sebab kalau disebutin kebanyakan...

Tanpa ba..bi..bu.. lagi, langsung kita mulai trik memasang image di sudut blog :

  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Tambahkan kode berikut di atas kode ]]></b:skin>.

#anima_sudut {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

  • Ganti kode yang berwarna merah dengan posisi image yang kamu inginkan (ex : top=atas, bottom=bawah, right=kanan, left=kiri). Dan atur kode yang berwarna hijau sesuai dengan tampilan di blog kamu.

  • Kemudian tambahkan kode ini di atas kode </body>.

<div id='anima_sudut'>
<a href='http://optimasi-blog.blogspot.com/'>
<img alt='' border='0' src='http://i647.photobucket.com/albums/uu191/ariamsi/disiniann.gif'/></a>
</div>


  • Ganti kode yang berwarna merah dengan alamat blog dan alamat penyimpanan image kamu.
  • Jangan lupa disimpan

Selamat mencoba pasang image di sudut blog...

96 komentar untuk “Cara Pasang Image di Sudut Blog”

  1. satu lagi tambah ilmu dari kang OB . . . bisa dicoba and thanks banget ya . . .

    jangan lupa backlink punya aku. .heehehhe

    BalasHapus
  2. siip deh ijin copas yach

    BalasHapus
  3. keren mas... nantilah kalau ada waktu...saya belajar lagi.... Maklum lagi Deadline Majalah

    BalasHapus
  4. makasih ilmunya mas....
    langsun ane praktekin...

    BalasHapus
  5. hahaha.. tengkyu tengkyu.. salwa here :)>-

    BalasHapus
  6. to all: sami-sami, tapi jangan lupa, kapan-kapan berkunjung kembali yaa... :D

    BalasHapus
  7. sumpah,,,blog q jd tambah keren,,makasi bozzzzzzzz

    BalasHapus
  8. Mantapp banget mas,, thanks yah

    BalasHapus
  9. to ardyan & ReMo-XP: thanks, friends. Akan lebih banyak tips dan trik lagi, jika sobat-sobat pada rame ngunjungi ini blog...

    BalasHapus
  10. ok bang OB udah ku praktikin neh keren hasilnya.. tnx yak...;):D

    BalasHapus
  11. Aduh terima kasih banyak nih mas OB... :)

    BalasHapus
  12. ilmu tambahan

    thankz kang ob

    BalasHapus
  13. makasih ya atas postingnya, mo di coba ah

    BalasHapus
  14. kode /b:skin ada di bagian mna yah ? ada yang bisa bantu ? klik http://mzvha.blogspot.com
    makasi :)

    BalasHapus
  15. to mznha: klo tidak salah, blog mba menggunakan template klassik. Jadi ngga keliatan, tp mungkin kode </b:skin> sama fungsinya dengan kode </style>

    BalasHapus
  16. Akhirnya ketemu juga caranya, khan keren kl ada di blog :D

    BalasHapus
  17. Artikelnya bermanfaat banget nie...
    Trims bwt infonya ya...;)
    Salam kenal,
    Angwie
    (pendiri situs beritakita-angwie.blogspot.com)

    BalasHapus
  18. Trimakasih tipsnya, ada yang mo tak tanyakan nih :

    kalo buat image-nya di 2 tempat kiri-kanan apa harus nambahin kode yang sama diatas ]]></b:skin> tadi..???

    kunjungi blog-ku ya http://lolidsonline.blogspot.com/

    BalasHapus
  19. keren neh artikel nya..mohon bimbingannya:D

    BalasHapus
  20. to Lolids Here: untuk menambah image di sudut yang lain, maka buat lagi kumpulan kode CSS anima_sudut dengan nama yang berbeda ex: anima_sudut1, anima_sudut2, dst. Kemudian tambahkan pula kode di atas </body>. Caranya mengganti kode div id='anima_sudut' dengan nama yang sesuai dengan CSS yang kamu tambahkan

    BalasHapus
  21. akhirnya dapet juga jawabannya setelah mencari cari

    BalasHapus
  22. TOLONG LIHAT BLOG SAYA DONG BISA NGGAK BLOG SAYA DI MODIP BIAR KEREN N BANYAK PENGUNJUNG WWW.BISNIS-HP-DAHSYAT.BLOGSPOT.COM MAKACIIIIIIIIIIIIIIIIIIIIIIIIIH BUANYAAAAAAAAAAAAAAAAAAK.... TAK TUNGGU LHOOOOO

    BalasHapus
  23. Oh ya lupa sampean ini pakai template apa kayaknya sederhana namun rapi bersih....=))

    BalasHapus
  24. to SUNARDI: Pakai template "minima green Fragmentary", ingin lebih tahu infonya silakan kunjungi http://www.zoomtemplate.com/2009/05/minima-green-fragmentary.html

    BalasHapus
  25. nih blog iklasnya minta nasi

    BalasHapus
  26. tx banget sob,,,
    postingan ni membantu,,,

    BalasHapus
  27. Makasih banyak yaa...
    tolong dong bikinin blog yang bagus

    BalasHapus
  28. klo dpake di wordpress gmana dong...???..pasti bisa dong.. b-( ??

    BalasHapus
  29. LANJUTKAN....I LOVE YOU FULL HA HA HA

    BalasHapus
  30. kalo di pasang script bisa gak yah?

    BalasHapus
  31. ko tak bisa ya kang OB.. :((
    jawabannya tutup semua dengan benar :-/
    piyee ya.. :-?

    BalasHapus
  32. maen ke blogku dumz.
    hhu..huu..higz..higz..
    gagal nii.http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif

    BalasHapus
  33. terima asih banyak kang....
    bisa buat di blogku

    BalasHapus
  34. Thanks om. udh bagi bagi ilmunya...:D

    BalasHapus
  35. makasih bgt y mas atas tutorialnya.jangan lupa backlink ya mas

    BalasHapus
  36. makasih infonya bermanfaat banget buat akang yang masih belajar blogging pake blogspot. btw, main dong ke http://www.kanghanif.co.cc

    BalasHapus
  37. terima kasih udah terpasang, lihat blogku kalo gak percaya. Tapi bisa nggak ya diisi warna selain putih....?

    BalasHapus
  38. MAKASIH BANG ATAS ILMUNYA JAYA TERUS INDONESIA

    BalasHapus
  39. Koko said
    Thanks ata informasinya
    Salam untuk semua BLOGGER

    BalasHapus
  40. Makasih tutorial memasang image di sudut blog nya sobat...

    BalasHapus
  41. makash y mz atas infonya... aq akan coba nanti

    BalasHapus
  42. Recent Visitorsnya udah saya pasang, dan berhasil. Tapi wuaadduh susahnya. pertama sih gak berhasil, bikin penasaran, setelah dicoba dan dicoba lagi, eh.... gak tahunya di account MBL-nya yang gak benar. Makasih ya

    BalasHapus
  43. bisa dipake buat wordpress gak?

    BalasHapus
  44. numpang koment...minta ijin copas yak...
    tengkyu...???

    BalasHapus
  45. cara ganti gambarnya gimana bos?

    BalasHapus
  46. mantappppp............siph.....tengkiuuuuu^^

    BalasHapus
  47. kereeeen gan!!! :D

    silakan blogwalking k tempat saia

    http://akirawisnu.blogspot.com

    BalasHapus
  48. gambar gif...
    nggak web2.0 bgt ah :)

    BalasHapus
  49. salam balik, abna-aulad.blogspot.com, blognya tak pasang.

    BalasHapus
  50. Thx ya infonya salam kenal jagang lupa klik di http://blogharriz.blogspot.com ya!!!

    BalasHapus
  51. keren....
    dicoba n berhasil.........
    teng kyu....

    BalasHapus
  52. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  53. Berhasiel..!!,Terima Kasih Banyak
    :))

    BalasHapus
  54. ~x( gak bisaaaaaaaaaaaa..... aku bego..... :((
    http://ilmu-komputernya.blogspot.com/

    BalasHapus
  55. kang, tu klu mau taroh d tengah gmna.jd pas center d tengah...Q otak atik kok g bisa ya....
    mohon bantuanya kang...

    BalasHapus
  56. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  57. thanks for the info ^^

    BalasHapus
  58. itu kok cm bs satu sih?kl dua gitu gimana caranya?

    BalasHapus
  59. infonya sangat bagus, makasih yah, mas

    BalasHapus
  60. kalo dipasang form subcriber di sudut kayak pasang gambar bisa gak bos??

    BalasHapus
  61. @Dela yuntuk menambah image di sudut yang lain, maka buat lagi kumpulan kode CSS anima_sudut dengan nama yang berbeda ex: anima_sudut1, anima_sudut2, dst. Kemudian tambahkan pula kode di atas </body>. Caranya mengganti kode div id='anima_sudut' dengan nama yang sesuai dengan CSS yang kamu tambahkan

    BalasHapus
  62. @kaos couple dicoba aja, mas. Sebab OB belum pernah coba, mudah-mudahan bisa

    BalasHapus
  63. waw...mantep mas,,,,sip dah tak pasang di blog saya juga yo...tankki

    BalasHapus
  64. trim .... kasih.....kank?aq wes isoooooooo..........adddeeeeemmmmm rasa ne..........hikz ghikz=))=))=))=))

    BalasHapus
  65. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  66. misi misi,,, aqu ijin plagiat "cara pasang ini" nya ya pak,, heeee

    BalasHapus
  67. Wah...Kerenn.. Thx gan.. ane dah nyoba, langsung tok cer, bisa muncul gambarnya..

    BalasHapus
  68. NICE bgt kk...
    ijin sedot triknya y....
    sy kasi smber link nya kk...tq ;))

    oh y cara biar ada tulisan "cara pasang ini" gmn kk??

    BalasHapus
  69. @Rizhardy Cara pasang link-teks "Cara Pasang ini" di bawah anima, cukup dengan menambahkan link-nya di atas </div> pada kode HTML anima_sudut, contoh :
    <div id='anima_bawah'>
    <a href='http://optimasi-blog.blogspot.com/'>
    <img alt='tips seo dan trik blogger' border='0' src='http://i647.photobucket.com/albums/uu191/ariamsi/disiniann.gif'/></a><br/>
    <a href='http://optimasi-blog.blogspot.com/2009/03/cara-pasang-image-di-sudut-blog.html' title='trik blogger'>Cara pasang ini</a>
    </div>

    BalasHapus
  70. iya bagus ne mas.. sayang kecepatan load blogku jadi lama.. but btw thanks a lot ya mas infonya.. ;;)

    BalasHapus
  71. ehhh mmpir ke blok aq dong aq gi trget pny 100 knjungan
    aq gi dftr ggle adsnse
    yayayayayaaaa.....please

    BalasHapus
  72. @Rani R Tyas : Lambatnya loading mungkin bukan karena masang trik ini kk Rani, kecuali ukuran image-nya besar.

    @Muhammad arfans : Udah beberapa kali mampir, kk arfans. Mungkin hanya butuh komentarnya, kk. he..he..

    BalasHapus
  73. sangat informatif Sob..lanjutkan..sukses selalu!

    BalasHapus
  74. WIH...
    wajib di coba ni....
    maksih kang...
    salam kenal ja ya...

    BalasHapus
  75. terima kasih mas. maklum saya ini blogger baru. jadi tutorial seperti ini adalah yang paling saya cari… :)

    Lihat juag:
    Cara Memasang Star Rating di Blog

    BalasHapus