August 2008 ~ Belajar Blog

Tuesday, August 26, 2008

Judul Blogger yang SEO Friendly I

Posted by dav On 8:55 PM

Secara default (bawaan) sebuah struktur Title Bar (Baris Judul) Blog pada sebuah browser adalah Judul Blog - Judul Halaman (Misal : Blogger Tune-Up - Page Rank). Konon menurut pakar SEO dengan struktur seperti ini blog menjadi kurang disukai oleh Search Engine (Mesin Pencari). Sedangkan Struktur Title Bar yang disukai Mesin Pencari adalah dengan struktur Judul Halaman - Judul Blog (Misal : Page Rank - Blogger Tune-Up), hal ini membuat spiderbot dengan mudah untuk membaca dan meng-crawl (Crawl = Entah apa bahasa Indonesia-nya) judul halaman lebih dahulu dan kemudian judul blog. Jelas dengan struktur seperti ini membantu spesifikasi dan akurasi dari keyword blog kita, walaupun pada dasarnya tetap spiderbot akan lebih mengutamakan relefansi dari keyword dan keyphrase content (isi halaman). Untuk bisa menukar posisi Judul Blog dengan Judul Halaman agar blog kita menjadi SEO Friendly (mudah dikenali search engine) ikuti langkah berikut :

Langkah 1
Login ke blogger dengan account blogger anda

Langkah 2
Pada Panel Kontrol klik Tata Letak - Edit HTML - Expand Widget Template

Langkah 3
Carilah kode dibawah, biasanya terletak diatas kode <head>. Gunakan fasilitas pencarian pada browser, biasanya terletak pada Edit - Find.

Langkah 4
Setelah ketemu kode pada langkah 3, gantilah kode tersebut (replace) dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Langkah 5
Klik Simpan Template

Setelah anda melakukan perubahan tersebut, maka Judul blogger anda akan tampil seperti gambar dibawah :

Sedangkan mesin pencari akan menampilkan hasil seperti gambar dibawah ini :

Tetapi jangan heran dan kuatir, pada hari-hari pertama kita melakukan perubahan ini justru blog kita seakan tidak lagi ter-index oleh Search Engine. Hal ini wajar karena kita melakukan perubahan sesuatu yang cukup dasar. Tetapi hal ini tidak akan lama sampai dengan Search Engine satu persatu meng-index kembali halaman demi halaman blog kita. Untuk mengecek hasil perubahannya pada search engine (Rekomendasi : Google) silahkan masukan kode :

site:http://namabloganda.blogspot.com

Mudah bukan? Mudah-mudahan bermanfaat dan salam hangat dari Banjarsari - Ciamis - Jawa Barat.

Membuat Text Area

Posted by dav On 8:38 PM

Text Area adalah suatu halaman HTML yang dibuat dengan tidak menganggap / membaca code atau script yang ada didalamnya, hal ini sering digunakan para blogger untuk menyediakan link sebagai sarana bertukar link yang bergambar. Dengan tidak dianggap/dibacanya code/script didalam text area maka kita dengan mudah menulis artikel-artikel yang berupa code/script tanpa mempengaruhi halaman HTML atau tanpa mengalami perubahan pada kode/script pada saat dibuka oleh browser. Untuk membuat Text Area ikuti langkah berikutnya.

Contoh text area :

Inilah kode yang kita tuliskan untuk membuat text area seperti contoh diatas:

<textarea name="contoh" cols="45" rows="6" wrap="virtual" id="contoh">
Disinilah teks/code/script yang akan kita tulis dan akan berada didalam text area
</textarea>

Coding Text Area :

<textarea> : tag untuk memulai text area
name="contoh" : untuk memudahkan dalam mengelola halaman HTML jika kita menggunakan lebih dari 1 text area
cols="45" : untuk menentukan banyaknya (lebar/horizontal) kolom yang akan kita gunakan, nilai 45 bisa kita ubah disesuaikan dengan kebutuhan
rows="6" : untuk menentukan banyaknya (tinggi/vertikal) baris yang akan kita gunakan nilai 6 bisa kita ubah disesuaikan dengan kebutuhan
wrap="virtual" : tag ini bisa saja kita masukan bisa kita buang, jika kita buang maka secara otomatis teks yang ada didalam text area akan menyesuaikan dengan panjang dan lebar Text Area.
wrap="off" : Wrap dimatikan, jika kita set Off maka teks tidak akan dipotong/disesuaikan dengan lebar Text Area tetapi lebar teks akan diikuti text area dengan memunculkan scrollbar horizontal
id="contoh" : ini digunakan sebagai identitas yang unik, tag id digunakan jika text area yang kita gunakan dalam halaman HTML lebih dari 1
</textarea> : tag untuk menutup text area

Mudah-mudahan teman-teman blogger mengerti dengan maksud tutorial ini. Jika sudah memahaminya mari kita lanjutkan bahasan text area dengan beberapa penambahan fasilitas lainnya. Berikut adalah text area yang ditambah dengan tombol seleksi atau sering di sebut Highlight.

Contoh text area dengan tombol Seleksi :

Inilah kode yang kita tuliskan untuk membuat text area dengan tombol seleksi seperti contoh diatas :

<form name="highlight">
<div align="center">
<textarea name="contoh" cols="45" rows="6" wrap="virtual" id="contoh">
Disinilah teks/code/script yang akan kita tulis dan akan berada didalam text area
</textarea>
<br/>
<input onclick="javascript:this.form.contoh.focus();this.form.contoh.select();" type="button" value="Seleksi">
</div>
</form>

Coding JavaScript :

<form name="highlight"> : Nama form JavaScript, ini sebagai identitas code/script form supaya tidak terjadi bentrok dengan form lain jika kita membuat lebih dari 1 form dalam halaman HTML
<div align="center"> : Tag div align sebenarnya bukan tag JavaScript tetapi tag umum HTML yang digunakan untuk menempat suatu objek; center = tengah, left = kiri, dan right = kanan.
input onclick : Script yang digunakan untuk memberikan reaksi pada saat kita mengklik mouse pada tombol
javascript:this.form.contoh.focus(); : Mengarahkan klik tombol ke isi text area contoh
this.form.contoh.select(); : untuk menyeleksi isi text area contoh
type="button" : Jenis tampilan tombol
value="Seleksi" : Nama tombol, gantilah sesuai keinginan anda

Semoga berhasil dengan lancar. Salam hangat dari Banjarsari - Ciamis - Jawa Barat

Membuat Dock Menu Gaya Macintosh

Posted by dav On 9:20 PM

Beberapa blogger sudah membuat tutorial ini, tapi tidak ada salahnya saya mencoba menulis kembali dari beberapa referensi dan percobaan sendiri. Beberapa hal yang membuat saya menulis ulang adalah dari beberapa kegagalan yang pernah saya coba, kesalahan-kesalahan itu diantaranya semua text dalam blog saya ikut berubah ukurannya, dan background pada dock tidak muncul. Bahkan ada beberapa blogger mengalami kegagalan dalam pemasangan. Saya telah mencoba dan berhasil memasangnya dengan baik, dan dibawah ini langkah demi langkah pemasangan.

Langkah 1 :
Login ke Blogger - Panel Kontrol - Tata Letak - Edit HTML - Expand Widget Template.
Note : Mungkin lebih baik anda backup terlebih dahulu template sebelum melakukan perubahan

Langkah 2 :
Cari kode dibawah ini :

</head>

Langkah 3 :
Copy Paste kode dibawah ini tepat diatas kode pada langkah 2 (warna biru kode tambahan)

Langkah 4 :
Cari kode dibawah ini :

</body>

Langkah 5 :
Copy Paste kode dibawah ini tepat diatas kode pada langkah 4 (warna biru kode tambahan)

Setelah langkah 2 - 4 Simpan Template

Langkah 5 :
Tambahkan sebuah elemen melalui tab Elemen Halaman - Tambah Gadget - HTML/JavaScript, Copy Paste kode dibawah pada bagian Konten lalu simpan tanpa Judul

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com//music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss2.png" alt="rss" /><span>RSS2</span></a>
</div>
</div>

Ubahlah # (berwarna merah) sesuai dengan link yang anda inginkan (misal: http://bonprog.blogspot.com) dan seterusnya.

Perhatian !
Ubah Gerakan Dock Menu
Gerakan Dock Menu ini akan bergerak kebawah (cocok untuk posisi Dock Menu diatas) tetapi jika anda menginginkan gerakan Dock Menu keatas ubahlah kode dibawah ini (lihat langkah 5)

Ubahlah menjadi seperti kode dibawah ini :

Ubah juga semua kode dibawah :

class="dock-item"

Menjadi kode berikut :

class="dock-item2"

Maka gerakan dock menu akan berbalik menjadi keatas.

Ubah Gambar/Icon
Jika anda ingin mengganti gambar/icon sesuai keinginan anda silahkan gantilah kode dibawah (lihat langkah 5)

src="http://dedehendriono.googlepages.com/home.png"

Ubahlah link-nya sesuai dimana anda menyimpan gambar/icon tersebut, sehingga menjadi :

src="http://alamat_link_anda/nama_icon"

Update:
Untuk melihat hasilnya download source code dock style disini.
Mudah bukan? Selamat mencoba dan ubahlah semuanya sesuai dengan ekspresi anda, salam hangat dari Banjarsari - Ciamis - Jawa Barat

Pantau Pendapatan Adsense

Posted by dav On 7:45 PM

Sempat terpikir, bagaimana cara memantau pendapatan kita dari GA (Google Adsense)? Kalau misal kita harus secara langsung membuka dari website-nya sepertinya kurang bergitu efektif dan memakan waktu apalagi bagi anda yang memiliki koneksi internet lambat dan terbatas. Seandainya ada software yang mampu memantau GA secara langsung dan realtime mungkin kita akan lebih mudah untuk memanajemen dan memprediksi content apa yang sedang diminati dan hangat dipasaran.

Memantau GA secara realtime memudahkan kita untuk bisa berganti channel setiap hari dan mampu memprediksi artikel yang seperti apa yang sedang diminati pasar, sehingga kita bisa memaksimalkan pendapatan kita dari adsense kita. Ternyata aku yang ketinggalan jaman, nyatanya ada software yang dibuat khusus untuk memantau penghasilan kita dari GA secara realtime, kita bisa mengetahui iklan apa yang telah diklik oleh pengunjung dan berapa harga iklan tersebut. Hilang sudah kepenasaran saya terhadap pemikiran tersebut. AdsenseLog yang sekarang sudah mencapai versi 4.6.0 sangat membantu kita dalam memanajemen GA. Ternyata saya yang ketinggalan jaman, toh AdsenseLog sudah versi 4.

Fasilitas yang diusung AdsenseLog cukup banyak diantaranya :

Secara otomatis menge-check dan meng-update statistik penghasilan kita dari GA
Mampu memberi tahu kita dengan mengirim pesan baik melalui email ataupun SMS plus suara
Mendukung GA jenis content, search, refferal dan channel
Mampu mengetahui Page Impression dan mengirimkan info yang akurat
Dapat diambil datanya secara langsung untuk kita analisis secara offline
dan masih banyak lagi...

Untuk memperoleh AdsenseLog silahkan dapatkan informasinya disini.
Salam hangat dari Banjarsari - Ciamis - Jawa Barat....

Collapse Posting with Readmore 1

Posted by dav On 8:18 PM

Sering kita menemukan artikel dari para master blooger yang pada halaman utamanya terdapat beberapa posting yang terpenggal [Collapse], jika kita ingin membacanya secara lengkap [Expand] kita harus meng-klik Readmore.. | Selengkapnya... atau kita harus meng-klik judul posting tersebut. Ada beberapa teknik pemenggalan posting [Collapse], tapi yang baru diketahui oleh penulis saat ini baru ada 2 (dua) jenis teknik pemenggalan posting [Collapse] yaitu ; Full Expanded dan Peekaboo Expanded. Pada artikel kali ini penulis akan mencoba menjelaskan pemenggalan posting [Collapse] yang jenis Full Expanded, karena teknik ini termasuk teknik yang paling mudah dan sederhana dalam pemasangan kode didalam script XML template blogger.

Memasang Read More Versi 1.0

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML" dan Check "Expand Template Widget"
Langkah 3 :
Carilah code dibawah (Gunakan fasilitas pada browser anda, biasanya "Find"):

<data:post.body/>

Langkah 4
Gantilah (Replace) code diatas dengan kode dibawah ini (Copy Paste) :

<!-- Begin Read More Code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>#fullpost{display:none;}</style>
<data:post.body/>
<a expr:href='data:post.url'>Readmore...</a>
</b:if>
<!-- End Read More Code -->

Sehingga secara keseluruhan kode menjadi seperti dibawah ini:

<div class='post-header-line-1'/>
<div class='post-body'>
<!-- Begin Read More Code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>#fullpost{display:none;}</style>
<data:post.body/>
<a expr:href='data:post.url'>Readmore...</a>
</b:if>
<!-- End Read More Code -->
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Langkah 5
Kata Readmore... bisa anda ganti dengan kalimat apa saja (misal : Baca Selengkapnya...)
Langkah 6
Kode diatas tidak akan berjalan baik jika pada posting tidak disisipkan code dibawah:

Isi posting anda
<span id="fullpost">
Isi posting yang terpenggal dan akan tampil jika kita klik Readmore...
</span>

Perhatian!

Sisipkan kode diatas (Langkah 7 yang diblok) disetiap kita membuat posting dan sisipkan kode tersebut pada post editor mode "Edit HTML" JANGAN pada mode "Compose"

Mudah-mudahan berhasil....
Salam hangat dari Banjarsari - Ciamis - Jawa Barat

Blogger Ad Code Converter

Posted by dav On 5:41 AM

Sering kita menemukan format/code yang tidak bisa diterima oleh blogger, nah untuk menanggulangi hal tersebut maka kita harus mengkonvertnya kedalam format XML yang mampu dibaca oleh blogger, kita bisa menggunakan Blog Ad Code Converter.

Untuk dapat menggunakannya silahkan kunjungi blognya.
silahkan klik disini.

Belajar Blog

Tuesday, August 26, 2008

Judul Blogger yang SEO Friendly I

Membuat Text Area

Monday, August 25, 2008

Membuat Dock Menu Gaya Macintosh

Tuesday, August 12, 2008

Pantau Pendapatan Adsense

Sunday, August 10, 2008

Collapse Posting with Readmore 1

Memasang Read More Versi 1.0

Saturday, August 9, 2008

Blogger Ad Code Converter

SITE SEARCH

Popular Posts

Category

Blog Archive