Cara Menempatkan Dua Logo atau Gambar Berdampingan di Widget Custom HTML WordPress

Apakah Anda ingin menampilkan dua logo atau gambar berdampingan di WordPress? Panduan ini akan membantu Anda melakukannya dengan mudah menggunakan widget Custom HTML. Dengan langkah-langkah ini, Anda dapat meningkatkan tampilan situs blog Anda dan membuatnya lebih profesional. Mari kita mulai!

Langkah-langkah Menempatkan Dua Logo atau Gambar Berdampingan

1. Masuk ke Dashboard WordPress Login ke dashboard WordPress Anda untuk mengakses pengaturan situs Anda.

2. Akses Widget Pergi ke menu Appearance > Widgets untuk mengelola widget di situs Anda.

3. Tambahkan Widget Custom HTML Tambahkan widget Custom HTML ke area widget yang diinginkan, seperti sidebar atau footer.

4. Masukkan Kode HTML dan CSS Di dalam widget Custom HTML, masukkan kode berikut ini:

   
   <div class="logo-container">
       <a href="URL_TUJUAN_PERTAMA">
           <img src="URL_LOGO_PERTAMA" alt="Logo Pertama" class="logo">
       </a>
       <a href="URL_TUJUAN_KEDUA">
           <img src="URL_LOGO_KEDUA" alt="Logo Kedua" class="logo">
       </a>
   </div>
   
   <style>
   .logo-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .logo {
       max-width: 48%;
       height: auto;
   }
   </style>
   

   Gantilah URL_TUJUAN_PERTAMA dan URL_TUJUAN_KEDUA dengan URL tujuan yang diinginkan. Juga, gantilah URL_LOGO_PERTAMA dan URL_LOGO_KEDUA dengan URL gambar logo yang sesuai.

Contoh Penggunaan

Sebagai contoh, jika Anda ingin gambar pertama mengarah ke https://example.com/logo1 dan gambar kedua mengarah ke https://example.com/logo2, serta gambar pertama memiliki URL https://example.com/images/logo1.png dan gambar kedua memiliki URL https://example.com/images/logo2.png, maka kodenya akan menjadi seperti ini:

<div class="logo-container">

    <a href="https://example.com/logo1">
        <img src="https://example.com/images/logo1.png" alt="Logo Pertama" class="logo">
    </a>
    <a href="https://example.com/logo2">
        <img src="https://example.com/images/logo2.png" alt="Logo Kedua" class="logo">
    </a>
</div>

<style>
.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    max-width: 48%;
    height: auto;
}
</style>

Penjelasan Kode

• HTML:

  • <div class="logo-container"> digunakan sebagai wadah untuk dua gambar.
  • <a href="URL_TUJUAN_PERTAMA"> membungkus gambar pertama dan memberikan tautan ke URL yang diinginkan.
  • <img src="URL_LOGO_PERTAMA" alt="Logo Pertama" class="logo"> menampilkan gambar pertama.
  • <a href="URL_TUJUAN_KEDUA"> membungkus gambar kedua dan memberikan tautan ke URL yang diinginkan.
  • <img src="URL_LOGO_KEDUA" alt="Logo Kedua" class="logo"> menampilkan gambar kedua.

• CSS:

  • .logo-container menggunakan display: flex untuk membuat kedua gambar sejajar secara horizontal.
  • justify-content: space-between memastikan ada ruang yang cukup antara kedua gambar.
  • .logo memberikan batasan maksimum lebar sebesar 48% untuk setiap gambar agar tidak saling bertabrakan dan memastikan mereka tetap berdampingan.

Dengan mengikuti langkah-langkah ini, Anda dapat menempatkan dua logo atau gambar berdampingan di WordPress dengan mudah. Panduan ini tidak hanya membantu meningkatkan tampilan situs web Anda tetapi juga dioptimalkan untuk SEO, membantu situs Anda mendapatkan peringkat lebih tinggi di mesin pencari.