untuk itu saya coba posting cara memasukkan link kedalam gambar, sebagai cara/dasar pembuatannya.
Artikel ini juga mengulas cara Memasukkan gambar pada Artikel Blogger.
Inti dari pembuatan Logo Bank sebenarnya cukup mudah yaitu mencari gambar atau logo dan Alamat Internet Banking dari bank yang bersangkutan. ini berlaku pula untuk gambar-gambar lainnya seperti gambar iklan atau banner yang ingin anda pasang di blog.
Contoh:
kita akan menampilkan logo Bank BRI maka kita cari dulu gambar atau logo banknya lalu alamat Internet banking dari bank tersebut karena yang akan kita tawarkan tentu Transaksi Online.
Jika kita mencari gambar lewat google maka akan didapat gambar dengan format .jpg sehingga kita perlu merubah format gambar tersebut dalam bentuk .ico agar tampilan gambar tersebut kecil sehingga tidak boros halaman.bila anda menemukan gambar tersebut berformat .ico atau jika anda sudah memiliki dan menentukan gambar yang ingin ditampilkan berarti anda beruntung.
Untuk merubah gambar berformat .jpg atau sejenisnya menjadi gambar berformat .ico bisa anda gunakan tool atau media converter seperti Format Factory atau tool sejenis lainnya.
Setelah gambar tersebut kita simpan atau telah diubah formatnya menjadi .ico kemudian kita harus mengupload gambar tersebut ke File sharing yaitu hosting tempat menyimpan dokumen. anda bisa menggunakan Photobucket, Picasa atau media share lainnya seperti 4shared. dll. asal media tersebut terjamin kelancaran dan existensinya. karena jika media share/hosting tersebut sering mengalami gangguan tentu akan berpengaruh terhadap tampilan dari file tersebut seperti gambar tidak muncul atau masalah koneksi lainnya.
kembali ke topik.
contoh gambar/logo bank BRI berformat .ico
Gambar tersebut sudah saya upload di Blogger sehingga didapat alamat gambar yaitu:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7v7d8Eo9LqSpYwf4Av70r2dME3tyUAvQ-JAOlx1TSK5slh2tw7NwCIiPLaV3Lk6JQjP-zg6rG2ofUukQdbxpVnCkUYc98AFK6mMGIdOyOo9zVNqGvpHVrCGG1mip9qKGHF2BcXIpB781/s1600/bri.ico
Setelah gambar siap kemudian kita cari alamat internet banking bank tersebut lewat google dengan memasukan kata kunci atau keyword nama produk bank tersebut. contoh keywordnya: BRI online, internet banking BRI dan sebagainya.
Untuk alamat internet banking BRI yaitu : https://ib.bri.co.id/ib-bri/Login.html
Sedangkan kode/script penulisa yang bisa digunakan yaitu:
<a href="https://ib.bri.co.id/ib-bri/Login.html" target="_blank" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;" target="_blank""><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7v7d8Eo9LqSpYwf4Av70r2dME3tyUAvQ-JAOlx1TSK5slh2tw7NwCIiPLaV3Lk6JQjP-zg6rG2ofUukQdbxpVnCkUYc98AFK6mMGIdOyOo9zVNqGvpHVrCGG1mip9qKGHF2BcXIpB781/s1600/bri.ico" /></a>
Perhatikan Script diatas.
1. Tulisan berwarna merah adalah Link atau alamat internet Banking dari bank BRI
2. Tulisan berwarna ungu adalah kode atau perintah untuk reaksi dari mouse dimana kede tersebut menggunakan perintah target blank yaitu membuka halaman baru jika gambar tesebut diklik.
Anda juga bisa menggunakan perintah lain seperti: Link terbuka otomatis saat cursor melintas dan sebagainya. tergantung selera anda.
3. Tulisan berwarna biru adalah alamat dimana gambar tesebut disimpan.
Tinggal bagaimana menempatkan logo tersebut di blog kita, bisa di dalam posting maupun halaman blog.
Untuk menampilkannya di artikel tentu kita harus menulisnya pada halaman penulisan HTML yaitu dengan mengklik menu HTML dibagian atas kolom penulisan.
Sedangkan untuk menampilkan dihalaman blog kita bisa memilih beberapa cara diantaranya menampilkan dalam bentuk scrol maupun marque berjalan.
1. Menampilkan gambar dalam bentuk scrol.
Kode/scriptnya adalah:
<div style="overflow:auto;width:200px;height:200px;padding:10px;border:1px solid #eee"> Masukan Kode gambar anda disini </div>
Keterangan:
- Ganti ukuran panjang dan lebar kotak scrol dengan merubah nilai width:200px;height:200px
- Masukan Script gambar dengan mengganti tulisan berwarna biru dengan script gambarnya.
2. Menampilkan dalam bentuk Marque
Kode/scriptnya:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="up" width="100%" height="120" align="center"> Masukkan Kode gambar Disini </marquee>
Keterangan:
- Kode Marquee diatas yaitu marquee yang bergerak dari atas kebawah dengan efek marquee berhenti jika mouse mendekat atau berada di atas marque.
- Ganti tulisan "masukkan Kode gambar Disini" dengan kode gambar anda.
- Ganti ukuran panjang dan lebar kotak marquee dengan merubah nilai width:"100%" dan height:"120".
- Untuk mengubah pergerakan menjadi dari atas ke bawah silahkan ganti kata "Up" menjadi "Down"
Silahkan Copy paste kode/script tersebut, lalu memasukkan pada menu HTML/Javasript pada pilihan Tambahkan gedget. kemudian klik Simpan.
Untuk menampilkan link dalam gambar pada artikel blog sangatlah mudah, karena blogger telah meberikan layanan Insert Link saat menulis artikel.
pertama, pilih gambar yang ingin kamu tampilkan dengan mengklik menu insert gambar yang terdapat dibagian atas kolom penulisan artikel
Akan muncul pilihan sumber gambar yaitu:
Upload = mengambil gambar dari komputer
From This Blog = mengambil gambar yang sudah anda upload sebelumnya/ gambar yang terdapat diblog anda.
From Picasa Web Album = Mengambil Gambar dari Picasa. jika anda memiliki gambar yang ingin ditampilkan dari akun Picasa anda.
From Your Phone = Mengambil gambar dari handphone
From Your Web = mengambil gambar dari sebuah website, jika anda tertarik dan ingin menapilkannya diblog.
from a URL = mengambil gambar dari sebuah alamat jika anda mengetahui alamat gambar tersebut.
Setelah gambar tersebut berhasil diupload, kemudian klik gambar tadi dan pilih Add Selected
Jika Gambar tadi sudah tampil dihalaman penulisan artikel, klik kembali gambar tersebut.
Kemudian klik menu bertuliskan Link.
Menu tersebut untuk memasukkan link baik kedalam tulisan maupun gambar.
Masukkan alamat/link pada kolom yang tersedia, yaitu disamping tulisan Web Address.
Pilih/pastikan tanda centang pada pilihan Open this link in a new window jika anda ingin membuka link dalam gambar tersebut pada tab/halaman baru.
Memasukkan gambar dan memasukan link pada gambar pada sebuah artikel selesai.
Semoga Artikel ini bermanfaat.
Happy blogging..
0 komentar:
Posting Komentar
Mohon Maaf bila telat balas komen...