-->

2 Cara Memasang Gambar di Sidebar dan Header Blog

Tutorial: Tips & Trik Cara Membuat, Memasang & Menampilkan Gambar di Sidebar dan di Samping Header Blogger/Blogspot

Dari sekian banyaknya tutorial cara menampilkan gambar di bagian-bagian tertentu pada tampilan situs web, kami rasa inilah yang paling mudah untuk diimplementasikan.

Kenapa dikatakan paling mudah? Karena yang dibutuhkan hanyalah atribut HTML sederhana.

2 Cara Memasang Gambar di Sidebar dan Header Blog
Pic: SEO Killer Tips

Tutorial kali ini menjelaskan 2 cara yang berbeda yaitu (1.) menampilkan gambar di samping blog (Sidebar Blog), dan (2.) memasang gambar di samping nama/judul blog itu sendiri (Sidebar-Header).

Cara Upload Gambar untuk Ditampilkan di Blogger/Blogspot


Untuk pertama kalinya, yang kamu butuhkan adalah URL dari gambar yang akan dipasangkan nantinya.

Kamu bisa memanfaatkan Google Drive, Picasa Google, ImageBam, atau penyedia penyimpanan (hosting) file gambar atau video Online gratis lainnya.

  • Buka atau Akses salah satu penyedia upload gambar gratis, ImageBam misalnya
  • Login atau Masuk apabila diperlukan, silakan langsung tekan tombol Upload Gambar
  • Setelah selesai, buka gambar tersebut

Catatan: Jika ada pengaturannya, ubah (ganti) settingan dari gambar tersebut, dari yang bersifat pribadi menjadi umum (Jika Ada).

Sudah membuka gambar tersebut? Perhatikan pada kolom Address Bar di browser yang kamu gunakan. Simpan tautan situs (URL) dari gambar ini, karena akan digunakan pada akhirnya.

2 Cara Memasang Gambar di Sidebar dan Header Blog


Praktek cara memasangnya:

  • Blogger > Tata Letak (Layout) Blog
  • Ketuk menu Tambahkan Widget/Gadget
  • Copas kode di bawah ini
  • Silakan ubah beberapa kode yang diperlukan
  • Simpan, dan cek hasilnya

1. Cara Menampilkan Gambar di Sidebar Blog - Samping Blogspot


Jika ingin menambahkan gambar di samping sisi kiri/kanan blog, gunakan kode di bawah ini:

<a width="300" href=Tautan-Situs-di-Sini target="_blank" height="250" rel="nofollow"><img border="0" alt="Deskripsi-Gambar" src="URL-Gambar"/></a>

Catatan:

  • 300 adalah lebar gambar, -- 300px merupakan ukuran yang biasanya digunakan
  • Tautan-Situs-di-Sini merupakan URL tujuan yang apabila di klik, akan mengarah ke halaman tersebut
  • target="_blank" adalah kode kondisional untuk mengarahkan ke halaman baru
  • height="250" adalah tinggi dari gambar tersebut, bisa disesuaikan dengan template blogger mana pun
  • rel="nofollow" adalah kode perintah agar tidak meng-index halaman yang di tuju

Jika tidak ingin menggunakan kode di atas, kamu bisa menggunakan kode di bawah ini sebagai penggantinya:

<a href="URL-Situs-di-Sini" target="_blank" rel="nofollow"><img src="Disini-URL-Gambar" alt="Deskripsi-Gambar" title="Deskripsi-Gambar"></a>

2. Cara Menampilkan Gambar di Samping Nama/Judul Blog (Second-Header)


Banyak ahli blogger menyebutnya dengan istilah Second-Header yakni sebuah tempat (slot) pemasangan widget yang berada di samping nama/judul blog.

Kode yang diperlukan:

<a href="URL-Situs-di-Sini" target="_blank" rel="nofollow"><img src="URL-Gambar" alt="Deskripsi-Gambar" title="Deskripsi-Gambar"></a>

Catatan: Kode di atas akan mengatur secara otomatis ukuran lebari dari gambar tersebut. Jika lebarnya 300px, maka lebar gambarnya pun tetap 300px - begitu juga dengan ukuran tingginya.

Jika lebarnya yaitu 300px dan tingginya 600px maka kode yang bisa digunakan (alternatif):

<a width="300" href=Tautan-Situs-di-Sini target="_blank" height="600" rel="nofollow"><img border="0" alt="Deskripsi-Gambar" src="URL-Gambar"/></a>

Ada hal yang ingin ditanyakan?

Source: https://tipsseokiller.blogspot.com/2016/04/cara-pasang-gambar-blog.html

Labels: Tutorial Blogger

Thanks for reading 2 Cara Memasang Gambar di Sidebar dan Header Blog. Please share this article.

Daftarkan email kamu sekali saja, maka kamu akan mendapatkan artikel gratis di setiap harinya. Subscribe Now!

0 Response to "2 Cara Memasang Gambar di Sidebar dan Header Blog"

Post a Comment

Punya masalah? Hubungi kami di Pemecah Masalah.
Silakan bertanya secara spesifik agar kami mudah dalam menjawabnya :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

SEO Kraken Blogger Theme