Cara pasang gambar di blogger

Deskripsi Iklan

Gambar atau sebut saja image dapat memperindah blog kita selain itujuga dapat menarik para pengunjung. dan menarik untuk dilihat. walaupun tentu saja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. langsung aza sob ikuti langkah-langkah dibawah ini dengan cermat, pasti sobat bisa, saya yakin. beberapa tahap yang harus dilakukan antara lain:

  • Langkah pertama
  • Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.

  • Langkah kedua
  • langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.

  • Langkah ketiga
  • langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :

    http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif

    Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :

    <img src="URL image">

    Sehingga kodenya akan jadi seperti ini :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">

    dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :

    tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

    sehingga image yang tadi akan berubah jadi seperti ini :

    Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.

  • Langkah keempat
  • langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

    Untuk yang memakai template klasik :

    1. Sign in ke blogger dengan id sobat
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy ‘n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template
    5. Cari kode berikut pada kode HTML sobat :
    6. <$BlogItemTitle$>

      cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode <$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul :

      <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$>

      pemasangn kode &nbsp;&nbsp; adalah untuk memberi jarak spasi antara image dengan tulisan judul, sebab jika tidak menambahkan kode &nbsp; maka image dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.

    7. Klik tombol Preview untuk melihat perubahan yang dilakukan
    8. Jika sudah OK, klik tombol Save Settings
    9. Selesai

    Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.

    Untuk yang memakai templat baru :

    Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

    kode image tersebut tag nya harus ditutup dengan tag penutup :

    </img>

    Sehingga kode image jadi bertambah menjadi :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>

    Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

    1. Sign in ke blogger dengan id sobat
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik tulisan Download Full Template
    5. Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
    6. Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
    7. Tunggu beberapa saat sampai proses selesai
    8. Cari kode berikut pada template sobat :
    9. <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>

    10. Sisipkan kode gambar yang kita miliki diantara kode :
    11. <a expr:href='data:post.url'> dan kode <data:post.title/></a>
      <b:else/>

      Sehingga bila di satukan kodenya menjadi :

      <a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a>
      <b:else/>

    12. Klik tombol PREVIEW untuk melihat perubahan
    13. bila sudah OK, klik tombol SAVE TEMPLATE
    14. Selesai

    Gitu aza sob moga bermanfaat n janganlupa tinggalkan komentaar


    Semoga Bermanfaat

    ^_^
    Deskripsi Iklan

    Share This Post To :
    Facebook | Twitter | Digg | Twitter | Technorati | Stumbleupon | Delicious | Reddit | Google

    Mari Kita Saling Menghargai Sesama Blogger
    Apabila anda merasa artikel ini bermanfaat, silahkan share dimana saja.
    Dan jika berkenan mohon mencantumkan link sumbernya. Terima Kasih.
    WWW.ERIFARGAZ.COM

    3 comments

    1. hadisetyo /

      Tutorial yang menarik…semoga bermanfaat..salam kenal

    2. UnlimitSoft /

      wah.. komplit sekali bro.. :D thanks ya.. :D aku nyari yg dilangkah ketiga itu ajja :D

    3. Sepatu Murah /

      terimakasih ilmunya bosss, blok saya sudah lumyan bagus gara-gara artikel ini coz awalnya saya gk paham masukin gambar di halaman utama menggunakan kode, sekarang saya sudah paham dan bisa

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>