Thursday, April 12, 2012

Dalam fitur blog sebenarnya sudah tersedia untuk membuat kotak, yaitu blockquate. Namun jika dalam satu postingan ada beberapa penekanan suatu pernyataan, kalau hanya memakai blockquate akan terlihat membosankan atau kaku. Maka untuk mempercantik tampilan postingan blog ditambah dengan membuat kode html untuk membuat kotak (border).

Bagaimana cara membuat kotak (border) berbeda ?
Untuk membuat border pada sebuah postingan maka dalam penulisannya harus dalam mode HTML. Adapum beberapa contohnya sebagai berikut :
1.
Belajar Buat Blog (B3)
Kode htmlnya <div style="border:1px #c8c785 solid;background-color:#fdfccf;width:300px;padding:10px;text-align:left;">Belajar Buat Blog (B3)</div>

2.
Belajar Buat Blog (B3)
Kode htmlnya <div style="border: 1px #a0ca9e dotted;background-color: #e5fee4; width:300px; padding: 10px;text-align:right;">Belajar Buat Blog (B3)</div>

Keterangan :
1. border: 1px #a0ca9e dotted;
Kode ini untuk model border dimana 1px untuk ketebalan border, bisa anda ganti dengan kebutuhan anda. #a0ca9e untuk warna border. Ini juga bisa diganti dengan selera warna yang anda inginkan. dotted adalah bentuk bordet garis putus-putus.
2. background-color: #e5fce4;
Ini merupakan kode html untuk warna backgrounnya. dan tentunya juga bisa diganti dengan keinginan anda.
3. width: 400px;
Kode ini adalah kode html untuk menentukan panjang border sesuai dengan postingan yang dibuat.
4. padding: 10px
Kode ini adalah untuk menentukan jarak huruf dengan garis tepi. Semakin besar angkanya tentu saja semakin jauh huruf dengan garis tepinya.

Demikian sedikit tutorial tentang bagaimana membuat kotak (Border) dalam sebuah postingan dan semoga bermanfaat......

Sumber : Belajar Buat Blog (B3)

Sunday, April 8, 2012

Search Engine Optimization (SEO) Untuk Blogger

Search Engine Optimization (SEO) saat ini mungkin bagi sebagian sudah tidak asing lagi, tapi bagi yang baru awal-awal mengenal dunia Internet (seperti saya) mungkin masih belum begitu paham dengan SEO. Nah untuk mempermudah mengenal dan mempelajari SEO, salah satu master SEO dunia sudah membuat petunjuknya bagi kita.

Siapa lagi kalau bukan Google, yang baru saja melalui blog resminya Webmaster Central mempublikasikan tutorial tentang Search Engine Optimization (SEO) Starter Guide. Berikut terjemahan / ringkasan secara bebasnya


Dokumen PDF yang bisa di download dari blog google tersebut, pada awalnya bukan untuk dipublikasikan untuk umum, hanya untuk kalangan intern, tetapi akhirnya di rilis publik juga. Karena memang tidak sampai berisi rahasia-rahasia SEO Google, tetapi meskipun begitu, dokumen ini cukup penting bagi pemula, untuk mengoptimalkan web site/blog kita.

SEO dapat dikatakan cara untuk sedikit memodifikasi bagian dari website kita, sehingga berpengaruh kuat ke user (pembaca) dan performa di mesin pencari seperti Google, yahoo dll. Ketika berhasil mengoptimalisasi website kita, maka ketika user mencari kata-kata kunci tertentu, website kita bisa tampil di hasil-hasil awal, sehingga kemungkinan website kita dibuka oleh pengunjung semakin besar.

Google mengatakan, meskipun petunjuk ini mengoptimalkan untuk search engine, tetapi tetap menyarankan bahwa tujuan yang lebih penting adalah untuk pengunjung website kita, jadi ketika menulis tetap berfokus untuk pengunjung atau yang memanfaatkan website kita.
Berikut beberapa point penting dari Dokumen tersebut :

1. Buat Judul halaman ( Title ) yang Unik dan tepat

Judul ini terletak di halaman web antara meta tag (kode HTML yang berada diantara simbol < dan > ) <title> </title> yang berada di antara tag <head> </head>. Jika tulisan kita tampil di search engine, maka judul yang berada di antara title tag tersebut akan berada di judul hasil pencarian.
Petunjuk praktis untuk definisi title tag :
  • Deskripsikan secara akurat isi atau konten halaman tersebut. Hindari judul yang tidak berhubungan dengan isi dan menggunakan judul seperti “Untilted” atau “New Page 1″ dsb
  • Buat judul yang unik untuk setiap halaman, sehingga membedakan dengan halaman lain.
  • Buat deskripsi yang jelas dan informatif. Jika terlalu panjang, google hanya akan menampilkan sebagian. Jadi jangan terlalu panjang dan kurangi kata-kata tidak penting.

2. Manfaatkan (buat) deskripsi di meta tag “Description”

Deskripsi dari sebuah halaman, memberikan ringkasan atau informasi ke Google dan search engine lainnya tentang apakah isi halaman tersebut. Meta tag ini bisanya berada di bawah title, dengan contoh kode HTML sebagai berikut :

Google mungkin juga menggunakan sebagai potongan informasi, meskipun google mungkin juga menggunakan bagian lain di halaman tesebut, misalnya deskripsi di web site Open Directory Project. Bisa dibaca tentang mengoptimalisasi meta tag “description” ini disini improving snippets with better description meta tags
Petunjuk praktis untuk meta tag “Description”
  • Informasikan secara akurat ringkasan isi dokumen. Hindari tulisa seperti :
    • Deskripsi yang tidak berhubungan dengan konten
    • menggunakan deskripsi umum seperti “This is a webpage” atau “Page about baseball cards”
    • Mengisi hanya dengan keyword (kata kunci)
    • Copy paste seluruh konten dokumen
  • Buat deskripsi yang unik untuk setiap page

3. Perbaiki struktur URL website kita

Dengan membuat struktur yang baik, tidak hanya mempermudah mengorganisasi website kita, tetapi juga dapat menghasilkan crawling oleh search engine dengan lebih baik.

Petujuk praktis dalam membuat struktur URL
  • Gunakan kata di URL, karena ini lebih user friendly ke user. Hindari :
    • Struktur yang terlalu panjang
    • kata-kata seperti “page1.html”
    • kata kunci yang berlebihan ( diulang berkali-kali)
  • Buat struktur yang simple. Hindari :
    • struktur yang terlalu dalam, misal dir1/dir2/dir3/dir4/dir5/dir6/page.html
    • nama yang tidak berhubungan dengan konten
  • sediakan hanya satu URL untuk menuju ke dokumen yang dimaksud. Hindari :
    • Mempunyai domain dan sub domain ( misalnya domain.com/page.htm dan sub.domain.com/page.htm) yang mengakses ke halaman yang sama
    • Menggabungkan versi URL www. dan non-www. di struktur link internal.
    • Menggunakan huruf kapital

4. Buat Situs kita agar mudah dalam hal Navigasi

Navigasi website cukup penting untuk membantu pengunjung secara cepat menemukan konten yang diinginkan. Selain itu juga membantu search engine memahami apa isi yang penting dari web tersebut. Meskipun hasil pencarian google disediakan sampai level terakhir, tetapi Google juga memperhatikan secara keseluruhan gambaran ini.
Salah satu cara untuk mempermudah search Engine adalah dengan menambahkan XML Sitemap.

5. Tawarkan konten dan layanan yang berkualitas

Petunjuk praktis untuk konten :
  • Tulis tulisan yang mudah dibaca (easy-to-read)
  • Tetap berfokus di sekitar topik yang dibahas. Jika tulisa cukup panjang, maka membagi-bagi dengan sub judul, pemisah layout akan lebih baik.
  • Gunakan bahasa yang relevan.
  • Buat konten yang unik dan tergolong baru, jadi hindari copy paste.
  • Buat konten yang berfokus untuk user, bukan untuk search engine.

6. Tulis text “Anchor” yang lebih baik

Anchor adalah text yang bisa di klik, yang dilihat user, yang diletakkan diantara kode HTML <a href+".."> dan </a>.

Dengan Anchor yang lebih baik, maka lebih memudahkan bagi user dan juga bagi search engine memahami halaman apa yang di link.
Petunjuk Praktis untuk keterangan Anchor
  • Pilih text yang deskriptif. Hindari :
    • kata-kata umum, seperti “page”, “article”, “click here” dsb
    • kata yang tidak ada hubungannya dengan yang di link
    • URL halaman yang dimaksud ( untuk sebagian besar kasus)
  • Tulis text yang ringkas. HIndari anchor yang panjang, bahkan sampai satu paragraf.
  • Format link sehingga mudah di ketahui, bedakan antara text biasa dan link.
  • Pertimbangkan tentang anchor text yang me-link ke halaman internal kita, karena ini juga membantu user dan google menavigasi lebih baik ke web.

7. Gunakan tag Heading sewajarnya

Heading tag adalah tag HTML yang biasanya digunakan untuk judul atau sub
judul, mulai dari <h1> sampai <h6>. <hi> adalah yang paling penting dan menurun
tingkat kepentingannyan sampai <h6>

8. Optimalkan penggunaan Image (gambar)

Salah satu untuk mengoptimalkan image adalah dengan memberikan deskripsi di atribut “alt”, hal ini dapat bermanfaat jika image tidak tampil, maka akan ada informasi / keterangan tetnag apa gambar tersebut.

9. Efektifkan penggunaan robots.txt

File robots.txt merupakan file yang ditujukan bagi search engine apakah mereka diperbolehkan mengakes atau crawl halaman tertentu dari website kita. File ini diletakkan di root direktori website kita. Misalnya http://ebsoft.web.id/robots.txt

10. Pahami atribut “nofollow” untuk link

Mengatur nilai atribut “rel” dengan “nofollow” akan mengatakan ke google bahwa link yang dituliskan tidak boleh di ikuti oleh google ( tidak mempengaruhi reputasi link yang bersangkutan). Jika ingin menyebutkan link yang tidak bermaksud meningkatkan reputasi alamat link tersebut, maka gunakan nofollow.

11. Promosikan web dengan cara yang benar

Beberapa petunjuk praktis untuk mempromosikan website :
  • Membuat blog tentang konten atau layanan yang baru.
  • promosi Offline
  • Mengetahui tentang situs social media..
  • Jika berupa bisnis, tambahkan di Google’s Local Business Center
  • Ikut komunitas yang berhubungan dengan tema situs kita

12. Manfaatkan fasilitas Google Webmaster Tools

Search Engine terbesar seperti google, menyediakan tools gratis untuk para webmaster, Google Webmaster Tools yang membantu pengelola web untuk mengontrol dengan lebih baik bagaimana google berinteraksi dengan website kita . Tools ini sangat membantu kita menganalisis berbagai permasalahan yang terjadi. Selain google Yahoo dan Microsof juga menawarkan hal yang sama, yaitu Yahoo! Site Explorer dan Live Search Webmaster Tools.

13. Manfaatkan layanan Web Analytics

Untuk menganalisa trafik pengunjung web, maka bisa dimanfaatkan fasilitas google seperti Google Analytics.
Untuk Informasi selengkapnya, bisa download Langsung dokumen PDF Search Engine Optimization Starter Guide

Monday, April 2, 2012

Memasang Musik/Lagu Pada Blog

Memasang lagu sebagai background (jika halaman dibuka otomatis lagu akan dimainkan) tidak dianjurkan jika file merupakan MP3 (atau WAV, WMA, dsb) yang ukurannya besar seperti satu lagu penuh. Hal ini akan 'memberatkan' pengunjung dalam mengakses halaman blog kita, apalagi kalau pengunjungnya dari Indonesia. Seperti yang kita tahu di Indonesia koneksi internetnya blom sepenuhnya bagus.
Untuk halaman blog teman kita yang tanpa background musik yang rata2 besarnya kurang dari 100KB saja masih ada yang mengeluh karena lelet jika dibuka di warnet, apalagi kalau halaman tersebut dipasang musik yang besarnya lebih dari 1 MB, kan.

Jadi, daripada pengunjung 'kabur' gara2 gak bisa nge-load blog kita, mendingan gak usah dipasang. Lagipula, belum tentu lagu kesukaan kita itu juga disukai oleh pengunjung blog kita :) Dan juga, jika lagu itu milik artis legal, malah bisa kesandung hak cipta.

Kalau file musik itu ukurannya hanya beberapa KB saja, ya tidak menjadi masalah dalam hal loading. Misalnya file suara ciap-ciap ayam yang besarnya kurang dari 10 KB, suara angin, dll. Yang jadi masalah, justru kalau si pengunjung merasa terganggu. Bisa saja kan, si pengunjung lagi dengerin musik di komputernya saat buka blog kita, lalu terganggu dengan suara background blog itu dan malah menutup blog kita.

Tapi,
jika kita tetap ingin menampilkan lagu di blog, cara yang bisa disarankan adalah dengan memasangnya di salah satu bagian blog, tapi bukan sebagai background (jadi tidak otomatis dimainkan saat blog dibuka). Dengan cara itu, pengunjung bisa melihat list lagu yang tersedia dan bisa memilih mau memainkannya atau tidak. Biasanya dipasang di sidebar.
Ok, cara inilah yang akan saya jelaskan.

Ada beberapa website yang menyediakan layanan free audio yang bisa ditambahkan untuk blog. Antara lain Song2Play, Odeo, Radio Blog Club, dan Last.fm. Saya akan kasi contoh untuk 2 layanan terakhir.

1. Memasang Lagu dari Radio Blog Club

  • Buka website http://radioblogclub.com/
  • Di bagian search, cari berdasarkan nama artis atau judul lagu. Tentu saja lagunya lagu barat yg tersedia di situ.
  • Misalnya saya cari Muse, akan muncul berbagai lagu yang tersedia.
  • Pilih salah satu lagu yang sesuai dengan pencarian kita.
  • Klik di bagian berwarna biru di samping tiap lagu, lalu di kolom kanan akan muncul kode yang bisa kita tambahkan. Warnanya juga bisa diatur di situ (klik di tanda + nya). Kode itu bisa ditambahkan di sidebar atau dalam postingan (kalo di blogspot masuk ke mode 'edit html' jangan 'compose').
  • Kita bisa menambahkan hingga beberapa lagu.
2. Memasang Widget Playlist dari Last.FM
Last.fm yang punya tagline The Social Music Revolution ini sedang ngetop (termasuk di Indonesia). Widget dari Last FM ini akan menampilkan playlist berupa beberapa lagu yang telah kita putar terakhir atau yang sering diputar di Winamp.
Sebenernya caranya agak panjang kalo ini, tapi saya tulis poin2nya aja, silakan coba sendiri aja yaa.. :)
  • Sebelumnya, kita harus sign up dulu di http://last.fm.
  • Trus kita juga harus download softwarenya, yang harus diinstal di komputer kita.
  • Saat kita mendengarkan lagu di Winamp, Last FM akan menyimpan datanya (tentu saja kalo last fm nya dinyalakan. bisa di-minimize ke tray icon kok).
  • Login ke situs last.fm, lalu pilih menu widget.
  • Lalu, pilih warna widget yang diinginkan. Uncek saja di bagian 'Include friends listening now'.
  • Di bagian bawah, klik di bagian 'Embed it:' yang Show me the code.
  • Tambahkan kode yang muncul, ke blog kamu.



HASILnya, yang pertama dr RadioBlogClub, yang kedua dari Last.FM:












Untuk playlist last.fm, pengunjung bisa mendengarkan dengan klik di bulatan kecil play (kanan), tapi tidak di semua lagu ada. Hanya beberapa yang tersedia di last.fm, dan hanya bisa dimainkan sekitar 30 detik per lagu.

Sumber : pernak pernik blog.blogspot.com