Cara Menambahkan Widget Kustom pada Blog Blogger

Untuk menambahkan widget kustom yang tidak tersedia di dalam daftar gadget bawaan Blogger, Anda dapat memasangnya secara manual memanfaatkan fitur Gadget HTML/JavaScript. Berikut adalah panduan langkah demi langkahnya:

Langkah-Langkah Memasang Widget Kustom

1. Cari dan tentukan kode widget kustom yang ingin Anda gunakan, lalu salin (copy) seluruh baris kode tersebut ke clipboard perangkat Anda.
2. Masuk (sign in) ke akun Blogger Anda.
3. Masuk ke halaman dasbor blog Anda, lalu klik menu tab Tata Letak (Layout).
4. Klik tautan tombol Tambahkan Gadget (Add a Gadget) yang berada di bagian atas bilah sisi (sidebar) atau area penempatan yang Anda inginkan. Langkah ini akan memunculkan jendela baru (popup).
5. Cari jenis gadget bernama HTML/JavaScript dan klik tombol tambah (ikon tanda plus +). Jendela popup baru akan terbuka untuk mengonfigurasi kode.
6. Ketikkan nama judul block pada kolom Judul (Title) sesuai keinginan Anda untuk menamai widget tersebut. Anda juga bisa mengosongkan kolom judul ini jika tidak ingin menampilkan judul visual di blog.
7. Tempelkan (paste) kode widget kustom yang sudah Anda salin sebelumnya ke dalam kotak teks berlabel Konten (Content).
8. Klik tombol Simpan (Save).
9. Secara bawaan, Blogger akan menempatkan elemen baru ini di posisi paling atas bilah sisi. Anda bisa mengatur posisinya dengan mengarahkan kursor tetikus (mouse) di atas elemen tersebut hingga kursor berubah menjadi ikon empat panah. Tahan tombol klik kiri, lalu seret (drag) elemen tersebut ke atas atau ke bawah di antara daftar gadget lain, kemudian lepas (drop) pada posisi yang Anda inginkan.
10. Klik tombol Simpan (ikon disket di kanan bawah dasbor) lalu klik Lihat Blog (View Blog) untuk memeriksa tampilan widget baru Anda.

Contoh Implementasi: Membuat Widget Profil Penulis Kustom

Sebagai contoh praktik, Anda bisa membuat widget profil penulis kustom (About Me) yang elegan dengan menyalin susunan kode CSS dan HTML di bawah ini:

1. Bagian Kode CSS Stylesheet

Kode ini berfungsi untuk mengontrol gaya visual dan tata letak dari elemen profil agar terlihat rapi dan responsif:

<style>
.myProfile .isIndividual {
  text-align: center;
  margin-top: 0;
}
.myProfile {
  margin: 0;
  line-height: 177%;
  width: 100%;
}
.myProfile .myProfile-img {
  border-radius: 50%;
  float: none;
}
.myProfile .myProfile-link {
  color: #757575;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 1em;
  opacity: .87;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.myProfile .myProfile-link.visit-profile {
  border-style: solid;
  border-width: 1px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  padding: 5px 20px;
  display: inline-block;
  line-height: normal;
}
.myProfile .isIndividual .myProfile-link {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>

2. Bagian Kode HTML

Masukkan kode HTML berikut tepat di bawah kode CSS di atas pada kotak konten gadget.

📌 Tugas Anda: Ganti teks atau tautan yang berwarna jingga (//plus.google.com/..., //lh3.googleusercontent.com/..., dan Blak Rush) dengan URL profil media sosial, URL file foto, serta nama Anda sendiri. Tag atribut href (Hypertext Reference) bertugas memberi tahu peramban ke mana arah tujuan ketika tautan tersebut diklik (misalnya ke akun Facebook, Instagram, atau GitHub Anda).

<div class="myProfile">  
   <div class="blak-no-change">  
    <div class="wrapper solo">  
      <div class="isIndividual">  
       <a href="//plus.google.com/+BlakRush" rel="nofollow">
         <img alt="My photo" class="myProfile-img" height="48" width="48" src="//lh3.googleusercontent.com/-Vbb2RDIujDA/AAAAAAAAAAI/AAAAAAAACH4/gwqnysBNx8k/s120-c-pf/photo.jpg"/>
       </a>  
       <div class="myProfile-info">   
        <dl class="myProfile-datablock">  
         <dt class="myProfile-data">  
           <a class="myProfile-link g-profile" href="//plus.google.com/+BlakRush" rel="author nofollow">Blak Rush</a>  
           <script src="https://apis.google.com/js/platform.js" async defer></script>  
           <div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/+BlakRush" data-rel="author"/>  
         </dt>  
        </dl>  
       </div>                     
       <a class="myProfile-link visit-profile" href="//plus.google.com/+BlakRush" rel="author">Visit profile</a>  
      </div>  
    </div>   
   </div> 
 </div>

Anda bisa memasukkan kedua bagian kode (CSS dan HTML) ini secara langsung ke dalam satu kotak input gadget HTML/JavaScript yang sama, atau bisa juga memisahkan kode CSS-nya dengan menaruhnya di dalam tag <b:skin> pada editor HTML Tema utama agar template tetap bersih.