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.

[heading centered=”yes” margin_bottom=”no” large=”no” background=”no”]Bahan-bahan:[/heading]

[checklist type=”checked” margin_bottom=”no”]

  • 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.

[/checklist][spacing margin=”no” border=”no”][/spacing]

[big_heading centered=”yes”]CARA MEMBUAT WIDGET “ABOUT ME”[/big_heading]

Create about me widget

[heading centered=”yes” margin_bottom=”no” large=”yes” background=”no”]About Me Widget #1[/heading]

[big_heading centered=”no”]Step #1[/big_heading]

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

add-gadget

[big_heading centered=”no”]Step #2[/big_heading]

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.jpgAdd a Tooltip Text alt=’About Me’ />
<h3><strong> Herlia AnnisaAdd a Tooltip Text </strong></h3>
<p style=’color:#54b2a9Add a Tooltip Text><i><b>aktivis selfie fundamentalisAdd a Tooltip Text</b></i></p>
Halo, nama saya Annisa. Saya sering dijadikan korban percobaan kode atau template oleh Uchan karena foto saya lucu dan menggemaskan.Add a Tooltip Text<br /></div>

Keterangan:

[checklist type=”arrowed” margin_bottom=”no”]

  • 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.

[/checklist]

[big_heading centered=”no”]Step #3[/big_heading]

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

Keterangan:

[checklist type=”arrowed” margin_bottom=”no”]

  • 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

[/checklist]


about-me_4

[heading centered=”yes” margin_bottom=”no” large=”yes” background=”no”]About Me Widget #2[/heading]

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/>
[highlight dark=”no”]<a href=’#’ target=’_blank’>
<i class=’fa fa-facebook’>[/highlight]

</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>

[big_heading centered=”no”]Cara Mengganti Ikon Media Sosial:[/big_heading]

[checklist type=”arrowed” margin_bottom=”no”]

  • 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.

[/checklist]

Contoh:

contoh-ikon

[checklist type=”arrowed” margin_bottom=”no”]

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

[/checklist]

Keterangan:

[checklist type=”arrowed” margin_bottom=”no”]

  • 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. 

[/checklist]

[icon icon=”laptop” icon_color=”accent_color” size=”small” icon_solid=”no”][/icon]

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

Share This