Cara Membuat Sumber Gambar Seperti IDNTIMES


KURAZONE ~ Halo sahabat Kurazer, BTW any way nih, lagi trend pembahasan tentang gimana cara bikin tulisan url sumber gambar yang ditaruh dipojok kanan bawah pada gambar, seperti dibawah ini :


Teknik ini digunakan oleh IDNTimes untuk memberikan source pada gambar yang mereka gunakan, melihat teknik seperti itu banyak Blogger Indonesia yang ingin menggunakannya juga. Bisa dibilang teknik ini mirip seperti kita menambahkan caption pada gambar.

Nah, langsung cekidot aja deh tekniknya.....

Cara Membuat Caption Source Image pada Gambar Postingan Blog

1. Buka akun Blogger >> Pilih Tema >> Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode ]]></b:skin>
.kuraembed {
    position: relative;
    margin-bottom: 5px;
}
.kuraembed span {
    font-size: 12px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.4);
    text-align: center;
    color: #fff;
    font-style: italic;
    padding: 4px 10px;
}

3. Simpan Template
Dari sini kalian sudah berhasil memasang kode caption source image nya pada template blog kalian, sekarang saatnya kita melakukan pemanggilan (kuchiyose) pada kode tersebut agar bisa muncul pada gambar postingan blog.

Cara Pemanggilan Kode Caption Source Image

1. Masuk ke Postingan, Edit salah satu artikel
2. Pindah ke mode HTML
3. Gunakan kode pemanggilan dibawah ini :
<div class="kuraembed">
KODE GAMBAR DISINI
<span> kurazone.net </span>
</div>

Note :
- Letakkan kode gambar pada teks yang bewarna kuning
- Ganti teks 'kurazone.net' dengan sumber gambar yang bersangkutan
- Settingan gambar yang disarankan adalah 100% atau original size supaya gambarnya bisa full size. Apabila ingin gambarnya tidak pecah-pecah, maka gunakanlah gambar dengan minimal size lebarnya 720px (tingginya terserah)

Hasil jadinya nanti akan nampak seperti dibawah ini :


Ini adalah contoh gambar yang size minimalnya 720px dan diset width nya ke 100%,
Hasilnya : Caption Source Imagenya terlihat pas/sesuai dengan apa yang diharapkan.

kurazone.net

Ini adalah contoh gambar yang size nya dibawah 720px dan TIDAK diset width nya ke 100%,
Hasilnya : Caption Source Imagenya terlihat TIDAK pas/ tidak sesuai dengan apa yang diharapkan.

kurazone.net

Jika kalian bingung dalam mensetting width:100%, maka gunakan saja pengaturan dibawah ini, sisanya kalian ubah sesuai kebutuhan.
<div class="kuraembed">
<img src="urlgambar.png" width="100%"/>
<span> kurazone.net </span>
</div>

Cara ini juga mendukung gambar ber-ekstensi GIF
Google Doodle

Tambahan :
Apabila letak Caption Source Image terlalu keatas atau terlalu kebawah, kalian bisa mengaturnya dengan mengubah nominal pada kode margin-bottom: 5px;

Sisanya bisa kalian kembangkan sendiri (dibawah ini hanya contoh kreasi)

1. Bagian tepi atas-kiri dibikin melengkung

kurazone.net

2. Bagian tepi dibikin melengkung semua

kurazone.net

Gimana? Gampang ya ternyata.. hehehe... Itulah informasi mengenai "Cara Membuat Caption Source Image pada Gambar Postingan Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!






Lebih baru Lebih lama