Kamis, 27 Agustus 2015

MENAMBAHKAN TOMBOL SOSIAL MEDIA PADA SIDEBAR BLOGGER

Tiba-tiba saya ingin menambahkan ikon tombol pada sidebar blog saya yang apabila di klik maka akan tersambung pada sosial media saya. Walaupun saya tidak mempunyai sosial media. Bukan karena apa-apa, tapi hal tersebut sangat menyita waktu saya. Lebih baik saya ngeblog daripada mainan sosmed. Saya hanya mempunyai akun sosmed google plus, sosial media yang tidak terlalu mainstream dibandingkan facebook, twitter, instagram, atau bahkan path yang sangat anak smartphone banget. Selain itu saya juga punya akun forum kaskus dan indowebster. Walaupun dua forum tersebut bukan termasuk sosial media tapi tetap saya sertakan biar keliatan tambah banyak gitu.

Langkah pertama yang saya tempuh adalaha dengan menambah gambar pada sidebar blog saya. Tapi hal tersebut ternyata membuat tampilan blog jadi agak janggal dikarenakan adanya judul gambar yang aneh apabila jumlah sosmed lebih dari satu. Setelah bertapa sambil jalan-jalan (tapa mlaku) di internet akhirnya saya mendapatkan sebuah pencerahan.

Pencerahan apakah itu? Check this one out

Cara menambah tombol sosial media / website / apapun di sidebar blogspot anda :
  1. Buka Dashboard dan klik pada nama blog anda.
  2. Klik Layout terletak di daftar di sisi kiri layar.
  3. Klik Add a Gadget terletak di atas sidebar.
  4. Sebuah window baru akan terbuka. Pada Basics tab, scroll ke bawah untuk menemukan HTML / JavaScript dan pilih.
  5. Tambahkan judul jika anda mau. Di Content ketik kode tombol anda seperti gambar di bawah.
  6. Klik Save. Kembali di layar Layout, tarik tombol gadget baru anda ke lokasi di mana anda ingin pada sidebar. Klik Save Arrangement di sudut kanan atas layar Anda.


Ini kode tombolnya :
<a href="URL social media profile anda" target="_blank"/><img src="URL gambar ikon social media anda" height="auto" width="auto" alt="text nama tombol"/></a>

Anatomi kodenya :
  1. Di dalam tag <a>, link ke halaman profil media sosial anda menggunakan atribut href. href = "URL social media profile anda"
  2. Tambahkan target = "_ blank" untuk membuka link di jendela browser baru.
  3. Dalam <img> tag, link icon gambar sosial media anda menggunakan atribut src. src = " URL gambar ikon social media anda"
  4. Menambah atribut tinggi dan lebar untuk menentukan ukuran gambar Anda dalam piksel. Saya lebih suka menggunakan auto (males mikir). Hehehe. height = "tinggi dalam piksel" width = "lebar dalam piksel"
  5. Atribut alt diperlukan dalam <img> tag untuk menentukan alternatif teks gambar apabila gambar tidak dapat ditampilkan. Sebagai contoh, pengguna memiliki koneksi internet yang lambat, atau dalam kasus orang buta menggunakan pembaca layar. alt = " text nama tombol"

Sekian info dari saya, semoga bermanfaat.

Dikutip dari berbagai sumber dan pengalaman pribadi.



1 komentar: