Tag Archive: Images


Cara Memberi Keterangan Gambar Pada Posting Blog

Cara Memberi Keterangan Gambar Pada Posting Blog. Jika kita sering membaca koran, kita pasti sering melihat photo / gambar yang berfungsi sebagai ilustrasi atas berita / artikel tertentu. Nah, biasanya pada bagian bawah photo /gambar tersebut diberi keterangan sehubungan dengan photo / gambar tersebut. Dalam dunia blog, kita juga dapat melakukan hal yang serupa, yaitu menambahkan photo / gambar ilustrasi dan kemudian kita dapat memberikan keterangan di bawah gambar ilustrasi tersebut. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Kita semua mengetahui bahwa untuk memasang photo / gambar pada postingan blog dapat dilakukan dengan dua cara. Pertama, dengan cara mengupload gambar secara langsung dari PC (komputer) dan kedua, dengan cara menempatkan / mengupload gambar pada suatu layanan photo hosting (misalnya, photobucket, flicker, dll) kemudian linknya dipastekan (ditempatkan) pada postingan blog.

Jika kita menggunakan cara yang pertama, kita akan mendapati scriptnya seperti contoh di bawah ini.

Untuk memberi keterangan gambarnya, caranya adalah dengan menyisipkan teks (keterangan) pada script gambar tersebut. Tuliskan teks (keterangan) pada teks yang berwarna merah seperti di bawah ini.

keterangan gambar

Jika kita menggunakan cara yang kedua, maka contoh scriptnya adalah seperti di bawah ini.

Photobucket

Untuk memberi keterangan gambarnya, caranya juga serupa yaitu dengan menyisipkan teks (keterangan) di antara script tersebut. Perhatikan teks yang berwarna merah.

Photobucket Keterangan Gambar

Hasilnya seperti di bawah ini.

keterangan gambar

dan

Photobucket Keterangan Gambar

Jika kita perhatikan, posisi gambar di atas adalah di tengah (center) secara horizontal, hal ini disebabkan karena pada waktu menguploadnya, Tips dan Trik Blog memilih opsi “center” sedangkan tulisan (keterangan)nya rata kiri sehingga terlihat kurang bagus.

Oleh karena itu, untuk menjadikan keterangan gambar menjadi rata tengah, kita dapat menambahkan script

dan

yang mengapit script di atas, sehingga selengkapnya menjadi seperti ini.

Setelah itu, hasilnya seperti di bawah ini.

dan

Oh, iya jika kita perhatikan, keterangan gambar pada image yang kedua berada di samping gambar, jika menginginkan di bawah gambar, kita dapat menambahkan
sebelum keterangan gambar, selengkapnya menjadi seperti ini.

dan hasilnya akan menjadi seperti di bawah ini.

Selamat Mencoba!!

Iklan

Masih Seputar Image

Masih Seputar Image. Mungkin postingan yang akan Tips dan Trik Blog ketengahkan ini sudah sering dibahas oleh teman-teman blogger lain. Dan bagi yang sudah mahir, postingan ini mungkin tidak akan ada manfaatnya. Namun bagi new blogger mungkin masih membutuhkannya dan siapa tahu ada manfaatnya. Jika pun tidak ada manfaatnya, anggaplah hal ini “sampah internet” yang tidak perlu kita pedulikan.

Postingan kali ini akan membicarakan seputar membuat unclickable image (tidak bisa diklik), membuat clickable image (dapat diklik), dan membuat image terbuka pada jendela baru (new window) ketika image tersebut diklik oleh pengunjung. Kita dapat menempatkan image tersebut baik pada postingan maupun pada side bar blog.

Sebelum melakukan hal itu, kita harus mengupload image yang ingin kita tampilkan tersebut pada image hosting. Banyak image hosting yang tersedia di internet baik yang bersifat gratisan maupun yang berbayar. Jika ingin yang gratisan, kita dapat mencoba salah satunya, yaitu photobucket.com.

Setelah kita menguploadnya, maka kita akan mendapatkan kode html untuk image tersebut. Contohnya seperti di bawah ini.

Untuk menampilkan image pada blog formatnya masing-masing seperti di bawah ini.

Membuat unclickable image, formatnya seperti di bawah ini.

<img src="http://i209.photobucket.com/albums/bb287/yono_pati/hp.jpg“/>

Hasilnya seperti di bawah ini. Image ini tidak bisa diklik, silakan untuk diklik sendiri.

Membuat clickable image, formatnya seperti di bawah ini.

<a href="http://i209.photobucket.com/albums/bb287/yono_pati/hp.jpg“>
<img src="http://i209.photobucket.com/albums/bb287/yono_pati/hp.jpg“/>

Hasilnya seperti di bawah ini.


Ketika image ini diklik oleh pengunjung maka pengunjung akan dibawa menuju link dari image tersebut. Dan dengan format seperti ini pula, image akan ditampilkan pada jendela yang sama dan oleh karena itu akan menindih halaman yang kita buka sebelumnya.

Jika menginginkan, kita dapat mengganti link image tersebut menjadi link yang lain, seperti alamat blog atau situs milik kita atau pun milik orang lain. Formatnya menjadi seperti di bawah ini.

<a href="http://onoid.blogspot.com“><img src="http://i209.photobucket.com/albums/bb287/yono_pati/mychicklet.gif“/>

Catatan

Silakan ganti URL_Blog yang berwarna biru dengan URL_Blog yang dikehendaki.

Membuat Image Terbuka Pada Jendela Baru (New Window), formatnya seperti di bawah ini.

<a href="http://i209.photobucket.com/albums/bb287/yono_pati/hp.jpgtarget=”_blank“>
<img src="http://i209.photobucket.com/albums/bb287/yono_pati/hp.jpg“/>

Dengan format seperti di atas maka ketika suatu image diklik maka pengunjung akan dibawa menuju jendela baru. Dengan demikian blog kita akan terlihat lebih professional karena image akan ditampilkan pada jendela baru dan tidak menindih jendela yang lama.
Hasilnya seperti di bawah ini, dan untuk melihat perbedaannya, silakan klik pada image di bawah ini.


Semoga bermanfaat!!!

Menambahkan Image Pada Judul Postingan

Menambahkan Image Di Depan Judul Postingan. Mengotak-atik blog dalam rangka memperindah tampilan memang tidak ada habis-habisnya. Nah, pada postingan kali ini, kita akan mengotak-atik judul postingan yang tidak lain dalam rangka menambah estetika judul postingan tersebut. Jika menghendaki, kita dapat menambahkan image di depan judul postingan sehingga akan terlihat lebih menarik dan “hidup”. Simak tipsnya berikut ini.

Untuk menambahkan image di depan judul postingan, kita harus menyiapkan imagenya terlebih dahulu yang kemudian kita upload ke image hosting, seperti photobucket dan lain-lain baik yang gratis maupun yang berbayar.
Jika sudah meng-upload-nya, maka untuk menampilkan image tersebut adalah dengan dengan format seperti di bawah ini.

<img src="URL_image_kita“/>

Sebagai contoh, katakanlah kita mempunyai alamat URL image di http://i209.photobucket.com/albums/bb287/yono_pati/yono.jpg maka untuk menampilkan image tersebut menjadi seperti di bawah ini.

<img src="http://i209.photobucket.com/albums/bb287/yono_pati/yono.jpg“/>

Oh, iya, bisa jadi ukuran image tersebut tidak sesuai dengan ukuran Judul Postingan, misalkan saja terlalu besar sehingga hasilnya kurang “matching”. Jika demikian kita dapat mengubahnya dengan menambahkan atribut width (untuk menetapkan lebar image dalam pixel) dan height (untuk menetapkan tinggi image dalam pixel). Selain itu, agar image tidak berborder, kita juga dapat menambahkan atribut border.

Berikut ini contoh untuk merubah ukuran image dan juga menghilangkan border di sekitar image tersebut.

Contoh gambar aslinya adalah seperti di bawah ini.

<img src="http://i209.photobucket.com/albums/bb287/yono_pati/yono.jpg“/>

Gambarnya seperti di bawah ini.

Kemudian jika kita ingin merubah ukurannya maka kode html-nya menjadi seperti di bawah.

<img src="http://i209.photobucket.com/albums/bb287/yono_pati/yono.jpg&quot; width=”30″ height=”30″ border=”0″/>

Dan berikut ini hasilnya hasilnya menjadi lebih kecil sehingga lebih serasi dengan judul postingan, seperti di bawah i

Langkah selanjutnya adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi “Expand Template Widget”

Ketiga, temukan kode berikut ini. Jika menggunakan Firefox, kita gunakan Ctrl + F untuk mempercepat pencarian kode tersebut.


Keempat, sisipkan kode html image (URL image) yang sudah kita siapkan sebelumnya pada kode di atas sehingga menjadi seperti di bawah ini.



Kelima, simpan template

Keenam, refresh blog dan pastikan kita sudah mendapati image pada judul postingan.

Ketujuh, selesai

Screenshot hasilnya seperti di bawah ini.

Selamat Mencoba!!

Membuat Rotasi Image Header

Tips Membuat Rotasi Image Header : Jika pada postingan yang lalu, di sini, telah dijelaskan tentang pembuatan rotasi background image, maka pada kesempatan kali ini, dengan tips yang hamper sama, Tips dan Trik Blog akan menjelaskan tentang pembuatan rotasi Image Header. Dengan tips tersebut, ketika pengunjung berusaha me-refresh blog kita maka mereka akan mendapati image header yang berubah-ubah. Dengan demikian diharapkan blog kita menjadi lebih variatif dan menarik. Jika tertarik, silakan ikuti tipsnya berikut ini.


Langkah-langkahnya adalah sebagai berikut.

Pertama, upload image-image yang akan kita jadikan sebagai background ke image hosting terlebih dahulu.

Kedua, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript

Ketiga, copy kode berikut ini

var banner= new Array()
banner[0]=”URL_Image01
banner[1]=”URL_Image02
banner[2]=”URL_Image03
banner[3]=”URL_Image04
banner[4]=”URL_Image05
banner[5]=”URL_Image06
banner[6]=”URL_Image07
banner[7]=”URL_Image08
banner[8]=”URL_Image09
banner[9]=”URL_Image10
var random=Math.floor(10*Math.random());
document.write(“”);
document.write(“#header {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) no-repeat top left;’);
document.write(” }”);
document.write(“”);

Keterangan

  • Ganti URL_Image01 hingga URL_Image10 dengan URL_image kita.
  • Jika menghendaki jumlah image yang berbeda, kita tinggal menambahkan atau menguranginya sendiri. Misalkan kita hanya mempunyai 5 image maka hapuslah banner[4] hingga banner[9]. Namun sebaliknya jika dirasa masih kurang, kita dapat menambahkannya mulai banner[10] hingga seterusnya.
  • Ganti angka 10 sesuai dengan jumlah image yang ingin kita gunakan, misalkan image-nya hanya 4 maka ganti menjadi angka 4 begitu seterusnya jika kita memasang image 20 buah maka gantilah menjadi 20.
  • Jika image kita berukuran kecil maka kita dapat mengganti atribut “no-repeat top left” menjadi “repeat center center”.

Contoh aplikasinya seperti di bawah ini.

var banner= new Array()
banner[0]=”http://www.geocities.com/yono_pati/intan.gif
banner[1]=”http://www.geocities.com/yono_pati/baby1.gif
banner[2]=”http://www.geocities.com/yono_pati/bisnis.gif
banner[3]=”http://www.geocities.com/yono_pati/bunga.gif
var random=Math.floor(4*Math.random());
document.write(“”);
document.write(“#header {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) no-repeat top left;’);
document.write(” }”);
document.write(“”);

Keempat, simpan perubahan

Kelima, selesai.

Sekarang, cobalah refresh blog beberapa kali dan pastikan image headernya telah berubah-ubah sesuai dengan image yang kita atur sebelumnya.

Selamat Mencoba!!

(sumber : Tips For New Bloggers)

Baca juga yang ini

Membuat Rotasi Background Image
Tips dan Trik Komputer
Tips dan Trik Bisnis di Internet

Membuat Rotasi Background Image

Tips Membuat Rotasi Background Image : Jika menginginkan, dengan beberapa image yang kita miliki, kita dapat membuat background image yang berubah-ubah (berotasi) secara bergantian ketika pengunjung berusaha me-refresh (me-load) beberapa kali blog kita. Dengan tampilan background yang berubah-ubah tersebut mungkin dapat membuat pengunjung lebih betah berlama-lama pada blog kita karena mendapatkan sajian background yang tidak monoton dan itu-itu saja. Jika tertarik silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.


Langkah-langkahnya adalah sebagai berikut.

Pertama, upload image-image yang akan kita jadikan sebagai background ke image hosting terlebih dahulu.

Kedua, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript

Ketiga, copy kode berikut ini

var banner= new Array()
banner[0]=”URL_Image01
banner[1]=”URL_Image02
banner[2]=”URL_Image03
banner[3]=”URL_Image04
banner[4]=”URL_Image05
banner[5]=”URL_Image06
banner[6]=”URL_Image07
banner[7]=”URL_Image08
banner[8]=”URL_Image09
banner[9]=”URL_Image10
var random=Math.floor(10*Math.random());
document.write(“”);
document.write(“body {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) repeat center center;’);
document.write(” }”);
document.write(“”);

Keterangan

  • Ganti URL_Image01 hingga URL_Image10 dengan URL_image kita.
  • Jika menghendaki jumlah image yang berbeda, kita tinggal menambahkan atau menguranginya sendiri. Misalkan kita hanya menghendaki 5 image maka hapuslah banner[4] hingga banner[9]. Namun sebaliknya jika dirasa masih kurang, kita dapat menambahkannya mulai banner[10] hingga seterusnya.
  • Kemudian gantilah angka 10 sesuai dengan jumlah image yang ingin kita gunakan, misalkan image-nya hanya 5 buah maka gantilah menjadi angka 5 begitu juga jika kita menginginkan 20 buah image maka gantilah menjadi 20.

Contoh aplikasinya, seperti di bawah ini.

var banner= new Array()
banner[0]=”http://www.geocities.com/yono_pati/intan.gif
banner[1]=”http://www.geocities.com/yono_pati/bunga.gif
banner[2]=”http://www.geocities.com/yono_pati/bisnis.gif
var random=Math.floor(3*Math.random());
document.write(“”);
document.write(“body {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) repeat center center;’);
document.write(” }”);
document.write(“”);

Keempat, simpan perubahan

Kelima, selesai

Sekarang, cobalah refresh blog beberapa kali dan pastikan background imagenya berubah-ubah.

(sumber : tips for new bloggers)

Tips Menghilangkan Border Image

Tips Menghilangkan Border Image : Sebelum menginjak kepada tema tersebut, mungkin kita perlu “menyamakan” pemahaman tentang border ini. Yang dimaksud border di sini adalah garis yang mengelilingi suatu image yang kita upload ke halaman blog. Sehubungan dengan border tersebut, setiap blogger mempunyai kebiasaan atau kesukaan yang berbeda, sebagian lebih yang menyukai image berborder dan sebagian yang lain lebih menyukai image tanpa border. Bagaimana dengan pengunjung???

Ini contoh image yahoo emotion dengan border

Ini contoh image yahoo emotion tanpa border

Sehubungan dengan hal itu pula, saya mempunyai pengalaman tersendiri yang tentunya sedikit menjengkelkan tentang border ini. Ketika ingin memasang sebuah image yahoo emotion pada suatu postingan, saya mendapati image yahoo emotion tersebut “dihiasi” dengan kotak atau border. Saya sudah memastikan bahwa kode border=”0” sudah saya tambahkan pada kode html image-nya, seperti contoh tersebut berikut ini.

<img src="http://geocities.com/yono_pati/contoh.gif&quot; border=”0″>

Ternyata, dengan penulisan tersebut, border-nya masih tetap muncul. Setelah beberapa lama akhirnya saya menemukan jawabannya. Bahwa jika kita sudah men-setting boder=”0” namun ternyata bordernya masih muncul maka kita harus merubah style sheet css yang ada di template blog milik kita.

Untuk merubahnya, langkah-langkahnya adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, temukan kode css untuk image tersebut.

Kode-nya bisa seperti di bawah ini.

.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}

Atau bisa juga seperti di bawah ini.

.post-body img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}

Yang perlu diubah adalah kode yang ditandai dengan warna merah, gantilah 1px menjadi 0px pada “border:1px solid $borderColor;” sehingga menjadi “border:0px solid $borderColor;

Ketiga, simpan template

Keempat, selesai

Sekarang pastikan image yang kita upload sudah tidak mempunyai border lagi.

Selamat Mencoba!!