How to Create Custom “About Me” Widget in Blogspot

Level: beginner

Sebelum Anda meneruskan membaca, harap abaikan judul di atas, itu hanya untuk gaya-gayaan. Dibutuhkan waktu seribu tahun bagi saya untuk bisa menulis postingan dalam bahasa Inggris. So, how to create custom “about me” widget?

Kebanyakan template blogger hari ini sudah dilengkapi dengan widget “about me” yang ketjeh-ketjeh. Tapi, gimana sih kalau Anda mau membuat widget sendiri? Pakai kode HTML. Eits, jangan dulu tutup tab. Saya janji, kok. Tutorial ini akan menggunakan bahasa yang dimengerti oleh manusia. Anda tidak harus jago koding untuk bisa melakukan ini. Tapi, sebagai blogger masa kini, sudah sepantasnya keahlian ngode-in brand segaris lurus dengan pemahaman kode HTML di Blogspot.

Bahan-bahan:

  • Foto profil yang layak untuk konsumsi umum ➤ unggah di page blog atau di G+ ➤ simpan URL fotonya.
  • Cara mendapatkan URL foto #1: klik kanan foto ➤ open image in new tab ➤ di bilah browser akan nampak URL seperti ini “https://2.bp.blogspot.com/-WOPzB9QQDJI/V7Q0RBjI3YI/AAAAAAAAG7w/aEqcX9THpbQ0XDAxlu4_AEZVPiSMcXEWACLcB/s640/SODEXO.jpg” simpan URL
  • Cara mendapatkan URL foto #2: klik kanan foto ➤ copy image addresspaste.
  • Pastikan foto Anda diatur publik.
  • Tidak disarankan untuk menggunakan foto dari Facebook atau media sosial lainnya karena akan bermasalah dengan Google’s crawler.

CARA MEMBUAT WIDGET “ABOUT ME”

Create about me widget

About Me Widget #1

Step #1

Dasboard ➤ layout ➤ sidebar ➤ add gadget ➤ HTML/JavaScript.

add-gadget

Step #2

Tulis judul gadget (opsional) ➤ masukkan kode HTML di bawah ini ➤ atur sesuai dengan kebutuhan Anda ➤ save.

masukkan-kode-html

<div class=’about-me’ style=’border:1px solid #000; padding: 20px; text-align:center; color:black;’>
<img src=’https://1.bp.blogspot.com/-UFBsePv9_wI/V-VRG6-JQxI/AAAAAAAAHMc/Jl_WFhD90JoJ43BaujTLHbftrdsOj-R9gCLcB/s640/CEU%2BNISA_2.jpg alt=’About Me’ />
<h3><strong> Herlia Annisa </strong></h3>
<p style=’color:#54b2a9><i><b>aktivis selfie fundamentalis</b></i></p>
Halo, nama saya Annisa. Saya sering dijadikan korban percobaan kode atau template oleh Uchan karena foto saya lucu dan menggemaskan.<br /></div>

Keterangan:

  • Ganti kode berwarna merah dengan informasi Anda sendiri.
  • Untuk mengganti warna huruf, ganti #54b2a9 dengan warna yang Anda inginkan. Jika Anda tidak tahu kode warnanya, bisa dilihat di Color Hex.
  • Untuk mengatur ketebalan kotak, ganti border:1px dengan ketebalan yang Anda inginkan. Misalnya border:2px atau border:0.5px.
  • Untuk mengganti jarak border dengan konten, ganti padding: 20px dengan jarak yang Anda inginkan. Misalnya padding: 10px atau padding: 30px.
  • Untuk menghilangkan border: border: 0px.
  • Apabila terjadi troubleshooting, perhatikan apakah ada tanda baca yang terhapus. Tanda seperti ‘ (tanda petik), ; (titik dua), atau > akan memengaruhi kode HTML.

Step #3

Lihat di sidebar apakah widget sudah tampil dengan benar atau tidak.

Keterangan:

  • Jenis huruf dan ukuran tidak akan sama, disesuaikan dengan jenis huruf di template yang Anda gunakan.
  • Lebar dan tinggi widget menyesuaikan dengan template.
  • Karena setahu saya kode HTML tidak kompatibel untuk membuat border berbentuk lingkaran, maka jika Anda ingin foto profil tampil seperti contoh di bawah ini, harus menggunakan kode CSS which is akan memengaruhi semua style di template. So, alternatifnya adalah dengan mengunggah foto yang sudah berbentuk lingkaran.

about-me_3


about-me_4

About Me Widget #2

Anda juga bisa memasukkan akun media sosial di widget “about me”, tapi sebelumnya pastikan dulu apakah di template Anda sudah terinstall ikon Font Awesome atau belum. Dashboard ➤ template ➤ edit HTML ➤ CTRL+F ➤ googleapis ➤ cari stylesheet “font-awesome” .

fontawesome

Jika belum, masukkan kode di bawah ini di antara font stylesheet:

<link href=’http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’ rel=’stylesheet’/>

Tergantung template yang Anda gunakan, tampilan ikon mungkin tidak akan sama antara yang saya gunakan dengan yang Anda gunakan. Anda juga bisa memilih ikon yang berbeda. Untuk referensi, silakan lihat ikon di official website Font Awesome.

Langkah-langkahnya sama dengan widget pertama, berikut kode HTML yang harus Anda masukkan:

<div class=’about-me’ style=’text-align:center;’>
<img src=’https://1.bp.blogspot.com/-UFBsePv9_wI/V-VRG6-JQxI/AAAAAAAAHMc/Jl_WFhD90JoJ43BaujTLHbftrdsOj-R9gCLcB/s640/CEU%2BNISA_2.jpg’ alt=’About Me’ />
<h3><strong> Herlia Annisa </strong></h3>
<p style=’color:#54b2a9′><i><b>
aktivis selfie fundamentalis</b></i></p>
Halo, nama saya Annisa. Saya sering dijadikan korban percobaan kode atau template oleh Uchan karena foto saya lucu dan menggemaskan.<br />
<hr/>
<a href=’#’ target=’_blank’>
<i class=’fa fa-facebook’>

</i></a>
<a href=’#’ target=’_blank’>
<i class=’fa fa-twitter’/>
</i></a>
<a href=’#’ target=’_blank’>
<i class=’fa fa-instagram’/>
</i></a>
<a href=’#’ target=’_blank’>
<i class=’fa fa-pinterest’/>
</i></a>
<a href=’#’ target=’_blank’>
<i class=’fa fa-heart’/>
</i></a>
<a href=’#’ target=’_blank’>
<i class=’fa fa-google-plus’/>
</i></a>
<a href=’#’ target=’_blank’>
<i class=’fa fa-tumblr’/>
</i></a>
</div>

Cara Mengganti Ikon Media Sosial:

  • Perhatikan kode yang saya highlight di atas, Anda bisa memasukkan URL media sosial dan mengganti ikon di sana. Langkah untuk mengganti ikon berikutnya sama.
  • href:’#’ ➤ ganti tanda # dengan URL medsos Anda. Contoh: href:’https://www.facebook.com/langit.amaravati/’
  • target:’_blank’ ➤ ini untuk mengatur agar tautan terbuka di jendela baru ketika diklik. Jika Anda ingin tautan terbuka di jendela yang sama, hapus _blank dan biarkan kosong. Contoh: target:”
  • i class=’fa fa-facebook’  ➤ ini untuk mengganti ikon media sosial. Ganti “facebook” dengan ikon yang Anda inginkan.

Contoh:

contoh-ikon

  • i class=’fa fa-facebook’
  • i class=’fa fa-facebook-square’
  • i class=’fa fa-facebook-official’

Keterangan:

  • Jenis huruf dan ukuran tidak akan sama, disesuaikan dengan jenis huruf di template yang Anda gunakan.
  • Lebar dan tinggi widget menyesuaikan dengan template.
  • Warna dan hover ikon menyesuaikan dengan template. 

Oke, sekian dulu dari saya, semoga bermanfaat. Bagi Anda yang masih takut-takut mengedit kode HTML di blog sendiri, tolong tekadkan hati terlebih dahulu. 😀 Template Blogspot itu cenderung lebih sederhana dan kode-kode di dalamnya lebih mudah dimodifikasi, juga lebih mudah diperbaiki jika misalnya terjadi kesalahan.

Jika ada pertanyaan, saran, dan tambahan, please feel free untuk menuliskannya di kolom komentar. Atau, jika Anda ingin request tutorial, saya akan dengan senang hati menuliskannya sepanjang saya bisa.

Salam,

~eL

18 Comments

  1. September 24, 2016 at 3:58 pm

    Sampai ke blog yg baru hijrah ini, apa wordpress lebih mudah dri blogspot ya mbak?

    • LangitAmaravati-Reply
      September 26, 2016 at 12:34 pm

      Nggak juga, ada kelebihan dan kekurangannya.

  2. September 24, 2016 at 4:03 pm

    Mantaaaap. Kalo aku pake cara manual. Masukkin foto dan infonya di tempat nulis blog post. Baru klik HTML nya, muncul otomatis deh codingnya. Nah tinggal copas k tata letaknya 😀

    • LangitAmaravati-Reply
      September 26, 2016 at 12:34 pm

      Wuih, kok eike baru nyadar ya cara sederhana kayak gitu? Hahaha. Makasih lho tipnya.

  3. September 24, 2016 at 4:42 pm

    Iya kalau blogspot lebih enak custom widgetnya.
    Rikues: bikin footnote untuk widget instagram jadi tampilannya jalan gitu Teh. Kaya punya Windi Teguh klo gak salah.

    Dua2nya ya Teh, blogspot dan wordpress *dikepret Teh El >,<

    • LangitAmaravati-Reply
      September 26, 2016 at 12:33 pm

      Itu mah ada tutorialnya di keterangan template.

  4. September 24, 2016 at 5:30 pm

    Dulu butuh banget nih pas masih di blogspot. Hehehehe.

    • LangitAmaravati-Reply
      September 26, 2016 at 12:33 pm

      WP “about me”-nya udah bisa custom ya. 😀

  5. September 24, 2016 at 6:12 pm

    Tutorial yang komplit dan aplikatif
    Saya pasang About Me pakai gadget Page saja
    Salam hangat dari Jombang

    • LangitAmaravati-Reply
      September 26, 2016 at 12:32 pm

      Salam balik, Pakde. 😀

  6. September 24, 2016 at 9:34 pm

    Ya ampun infonya jg lucu dan menggemaskan bukan cm fotonya…asli sy mumet kalo ketemu kode2 HTML gituan.. pengen nyoba ah entar

    • LangitAmaravati-Reply
      September 26, 2016 at 12:31 pm

      Gih, cobain gih.

  7. September 24, 2016 at 10:01 pm

    Makasih tutorialnya. Pasti manfaat banget buat pemula seperti saya.

    • LangitAmaravati-Reply
      September 26, 2016 at 12:31 pm

      Sama-sama 🙂

  8. September 24, 2016 at 11:19 pm

    Mau coba ah 😀

    • LangitAmaravati-Reply
      September 26, 2016 at 12:31 pm

      Cieee Diko kunjungan cieee 😀

  9. September 26, 2016 at 10:35 am

    wah tampilan baru mba blognya… belom pnah coba yang ikon medsos, makasih tutonya

    • LangitAmaravati-Reply
      September 26, 2016 at 12:24 pm

      Cobain gih, lucu-lucu hayoh ikonnya. 😀

Leave a Reply