Bagaimana Mempercantik Blog Kita…??? [from : Andi]

Waah waaah.., akhirnya baru kesampean buat nulis skarang., ini pertanyaan dari mas Andi, Mas Andi ini termasuk suka bertanya di Tanya Kenapa??? , makasi partisipasinya mas brow 😀 😀 ini heheheh…dia tanya, gimana caranya membuat blog kita bisa dipasangi Facebook (foto profil facebook) dan lain2 seperti blog Tanya Kenapa??? ini. Hm.., maaf ya mas bro., baru sempet jawab skarang hehehe., maklum banyak gawe hehehehe… 😀 .

Pada potingan kali ini aku akan coba bahas mempercantik blog kita, yaitu dengan menempelkan link Facebook dan Yahoo Messenger dengan memanfaatkan bantuan widget “Text” yang tersedia. OK, gak usah panjang lebar lagi., mari mulai…..

1. Memasang Link Facebook dengan Badge Facebook

Loh? kenapa nyebutnya “Link Facebook” ? kok gak “Profile Facebook’ ? . Karena, dengan cara berikut ini kita tidak hanya bisa memasang foto profil kita, tapi juga kita bisa memasang tombol “Like” , memasang “Page” kita, dan “Photo” . Cara berikut dengan memanfaatkan “Badge” yang disediakan oleh FB, klik alamatnya berikut ini : Badge Facebook.

  1. Pastikan login terlebih dahulu ya, kalau sudah akan nampak halaman memilih badge seperti berikut : Pilih Badge
  2. Nah itu dia, kita bisa memilih badge apa yang mau kita pasang pada blog kita, “Profile Badge” untuk menampilkan profile kita, “Like Badge” untuk tombol Like, “Photo Badge” untuk menampilkan foto, dan “Page Badge” untuk menampilkan page kita. Untuk kali ini kita memilih “Profile Badge”, klik, maka kita akan dibawa menuju halaman setting. Pilih apa saja yang mau ditampilkan dalam badge kita, ada preview-nya juga, jadi nampak perubahannya, setelah itu klik tombol “save” seperti gambar berikut : Setting Badge
  3. Setelah itu kita dibawa menuju halaman dimana badge kita akan ditempel, karena kita akan menempelkan pada blog UB yang notabene adalah wordpress, maka pilih “Other” , kemudian klik kanan, dan copy code yang muncul seperti gambar berikut : Copy Code Badge
  4. Setelah itu, kita kembali ke halaman blog kita, buka menu utama blog kita, cari sub menu “Widgets” yang berada dalam menu “Appearance” . Kemudian, cari widget “Text” seperti gambar berikut : Widget Text
  5. Kalau sudah, klik dan tahan widget “Text” tersebut, dan geser menuju bagian “Sidebar” yang ada di bagian kanan. Pada bagian “title” anda bebas mau diberi apa widget tersebut, misal “Chat With Me” , kemudian pada bagian isi, paste-kan  (Ctrl+V) code yang sudah kita copy dari halaman Badge Facebook tadi, seperti gambar berikut : Code Badge
  6. Setelah itu klik tombol “Save”. Kemudian buka blog kita, TARAAAAAAA!!!!! uda berubah kan? 😀 .

2. Memasang Yahoo Messenger

Naah., kalau tadi sudah membuat Link ke Facebook, skarang saatnya membuat Icon Yahoo Messenger, jadi pengunjung bisa melihat kita apakah sedang OL apa OFF, jika OL pengunjung langsung bisa Chat dengan kita. Caranya masih menggunakan widget “Text” , tambahkan ke Sidebar di sebelah kanan. Copy dan Paste-kan code berikut ini ke Ms. Word. Kok Ms. Word? karena berwarna, lebih mudah di identifikasi. Alternatif bisa menggunakan Notepad, Notepad++, atau Text Editor lainnya.

<a href="ymsgr:sendIM?ID_name">
   <img src="http://opi.yahoo.com/online?u=ID_name&amp;m=g&amp;
   t=14&amp;l=us"/>
</a>

Keterangan :

  • Ganti ID_name dengan ID YM anda (TANPA @yahoo.com / @yahoo.co.id ).
  • Angka 14 menunjukkan Nomor Model Icon mana yang akan anda pergunakan, berikut nomor2 Icon yang bisa digunakan : Nomor ID YM
  • Kalau sudah klik tombol “Save” , Buka halaman utama blog anda……dan TARAAAA!!! berhasil lagi hehehheeh 😀
nb : kalo pengen variasi, disini caranya pasang status YM dengan gambar sendiri 🙂 ., check it 🙂

3. Memasang Link Facebook dengan Tag HTML (Tingkat Lanjut)

Naah, tutorial yang berikut ini adalah cara yang lain, yaitu dengan menggunakan Tag HTML, waduuh?? sulit doonk om? , enggak kok, asalkan mengikuti panduan ini dengan benar, pasti bisa. Paling tidak kita pada cara kedua ini kita dapat tambahan sedikit ilmu mengenai materi “Web Dasar” hehehehe..

Ngapain di-posting seh? kan pake cara pertama bisa? iya benar, untuk cara pertama emang bisa, tapi menurut-ku tampilan foto profilnya terlalu kecil, jadi gak gitu jelas foto kita hehehehe (maklum agak narsis seh 😀 ) . Makanya aku kasi cara alternatif 😀 . Dan cara kedua inilah yang dipake di Tanya Kenapa??? , makanya tampilannya terlihat beda kan dari Badge FB hehehhehhe 😀 . Caranya :

  1. Pilih foto yang akan kita tampilkan di blog kita, pada dasarnya semua foto bisa, tapi bagiku, biar seolah2 itu dari FB, maka aku dikit dengan bantuan Adobe Photoshop 😀 , dan yang awalnya fotoku biasa, jadi ada tambahan tulisan Facebook hehehehe 😀 , jadi tambah kelihatan manarik juga kan heheheheh.
  2. Buka Sub Menu “Add Media” di tab baru, Upload foto ke blog kita, pastikan ukuran “width” atau “lebar” foto-nya 169 pixel, jika ukuran masih besar, bisa di-resize dengan Adobe Photoshop atau Paint bawaan windows.
  3. Setelah upload sukses, buka Sub Menu “Widget” di tab baru. Tambahkan widget “Text” ke “Sidebar” yang ada di sebelah kanan seperti cara yang sudah dijelaskan di Bagian 1 , beri Title terserah, misal “Chat With Me”. Copy, dan Paste-kan code dibawah ini ke Ms. Word.
<table border="0">
<tr>
<td width="178"><p></p></td>
</tr>
<tr>
<td width="178"><p><a href="alamat_fb_anda"
target="_blank"><img src="URL_foto_anda" /></a></p></td>
</tr>
<tr>
<td><strong>My Facebook :</strong><br />
  <a href="alamat_fb_anda" target="_blank">nama fb</a></td>
</tr>
<tr>
<td><strong>My Twitter :</strong><br />
  <a href="alamat_twitter_anda" target="_blank">nama twitter</a></td>
</tr>
<tr>
<td><strong>My Google+ :</strong><br />
  <a href="alamat_google_anda" target="_blank">nama google+</a></td>
</tr>
</table>

Keterangan :

  • “Tag” <tr> pertama, baris ke-1 sampai ke-4 (ditutup oleh </tr> ), berfungsi hanya memberi jarak dari atas widget.
  • “Tag” <tr> kedua, baris ke-5 sampai ke-8 (ditutup oleh </tr> )
  • “Tag” <tr> ketiga, baris ke-9 sampai ke-12 (ditutup oleh </tr> )
  • “Tag” <tr> keempat, baris ke-13 sampai ke-16 (ditutup oleh </tr> )
  • “Tag” <tr> kelima, baris ke-17 sampai ke-20 (ditutup oleh </tr> )
  • Pada “Tag” <tr> kedua, ganti “alamat_fb_anda” dengan URL dari FB anda, Gampangnya, klik kanan pada Nama FB anda, dan pilih “Copy Link Location” seperti pada gambar berikut : URL FB (browser Firefox, untuk browser lain menyesuaikan). Perhatikan tanda petik dua ( ” ), jangan sampai petik dua-nya hilang, yang diganti cuma yang berwarna MERAH saja.
  • Masih pada “Tag” <tr> kedua, ganti “URL_foto_anda” dengan URL dari foto yang sudah di-upload tadi. Caranya, buka kembali tab media yang berisi hasil upload foto tadi, buka foto hasil uploadnya, copy URL dari fotonya, seperti nampak pada gambar berikut : URL Foto
  • Begitu juga dengan tulisan yang berwarna merah lainnnya. Sesuaikan dengan kepunyaan anda.
  • Apabila tidak ingin menampilkan Tulisan akun twitter atau jejaring sosial yang lain, bisa dilakukan dengan menghapus “Tag” <tr>.
  • Misal, menghilangkan tulisan My Facebook : hapus “Tag” <tr> mulai baris ke-9 sampai ke-12.
  • Menghilangkan tulisan My Twitter : hapus “Tag” <tr> mulai baris ke-13 sampai ke-16.
  • Menghilangkan tulisan My Google+ : hapus “Tag” <tr> mulai baris ke-17 sampai ke-20.
  • Masing2 “tag” ada pembuka ada penutup, “Tag” <tr> ditutup dengan </tr> , “Tag” <table> ditutup dengan </table>, “Tag” <td> ditutup dengan </td>. Dan masih banyak “Tag” lainnya.
  • Setelah menyesuaikan mana yang akan ditampilkan dan mana yang tidak, copy semua hasil editan kita barusan, dan Paste-kan ke Widget “Text”
  • TARAAA!!!! berhasil kan? 😀

Capek???

Hm…, ternyata capek juga nulis segitu banyaknya wkwkkwkw.., tapi gpp,, Ilmu itu kudu dibagi OK!!! , smoga bisa bermanfaat bagi pembaca skalian :D.

Comments

  1. By andi

    Reply

    • Reply

  2. By FeY

    Reply

    • Reply

  3. Reply

    • Reply

  4. Reply

  5. By Dian

    Reply

  6. By dwy andika

    Reply

    • Reply

  7. By dickey

    Reply

  8. By Irene Paramita

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *