| Optimasi Blog

Beranda / Penelusuran Arsip Posting

Link Penulis Komentar (Comments Author) Terbuka di Tab Baru

Jumat, Juni 25, 2010 oleh Unknown // 10 komentar

Coba buka salah satu postingan di blog kamu yang ada komentarnya. Kalau sudah klik salah satu link komentator (comments author). What happen? Tentu saja kamu akan dibawa ke halaman link komentator tersebut, namun terbuka pada tab yang sama. Kecuali kamu melakukan klik kanan dan pilih "Open link in New Tab". Nah, trik blogger yang akan OB diskusikan kali ini adalah bagaimana jika kita meng-klik link penulis komentar, maka link itu akan langsung terbuka di tab baru.

Versi demonya silakan klik salah satu link comments author di blog OB.

Sign-in ke akun blogger kamu.
Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode seperti di bawah ini :

<b:if cond='data:comment.authorUrl'>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.

Sisipkan target="_blank" (warna hijau) pada kode yang berwarna merah.

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>

Jangan lupa disimpan.

Sekarang buka kembali salah satu posting yang ada komentarnya di blog kamu dan klik link comments author. Mudah-mudahan telah terbuka di tab baru, kalau ngga... Maka OB akan pusing dan garuk-garuk kepala sendiri.

Update

Trik ini tidak direkomendasikan, silakan telusuri di Google tentang “Link Target” atau “Validitas Link Target”.

[ Baca selengkapnya ]

Cara Pasang Title dan Meta Tags agar Blog lebih SEO Friendly

Kamis, Juni 24, 2010 oleh Unknown // 88 komentar

Sebenarnya judul di atas sangat berhubungan dengan 2 (dua) posting sebelumnya, yaitu : SEO | Optimasi Judul Blog dalam Title Tag dan Memasang Meta Tags dan Manfaatnya. Cuma mungkin karena uraiannya yang agak menggantung, sehingga kurang/tidak tercover di hati pembaca (wih.., puitis amat). Nah, agar semua terlihat terang benderang, seperti ungkapan dalam sebuah buku "Habis Gelap Terbitlah Terang", maka kembali dihadirkan dalam versi keduanya (emang buku ha..ha..). Pada posting kali ini sengaja dijadikan satu, karena kedua tags tersebut sangat erat sekali hubungannya dan langsung diuraikan melalui Edit HTML. Terutama agar blog kamu kelihatan lebih SEO friendly. Langsung saja kita ke TKP (Tempat Kerjaan Para blogger)...

Masuk ke Edit HTML.
Cari kode (letaknya di atas) berikut :

<b:skin><![CDATA[

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.

Ganti kode yang berwarna merah dengan kode di bawah ini :

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

Catatan :
Untuk menambah title, kamu bisa melakukan edit terhadap kode di atas (perhatikan kode yang berwarna biru), contoh :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/> | Tips SEO | Trik Blogger | Blogger Indonesia</title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

atau

<b:if cond='data:blog.pageType == "index"'>
<title>Tips SEO | Trik Blogger | Blogger Indonesia | <data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Setelah selesai mengganti title tag, sekarang tambahkan kode Meta Tags di bawahnya.

Catatan :
Ganti kode yang berwarna merah dengan deskripsi dan keyword blog kamu (perhatikan kode yang berwarna biru), contoh :

Jadi keseluruhan kodenya akan terlihat seperti ini (diambil dari Blog OB) :

<head>
<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/> | Tips SEO | Trik Blogger | Blogger Indonesia</title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

<meta content='Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya' name='description'/>
<meta content='source code,search engine,SEO,keyword,template,templates,keywords,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

<b:skin><![CDATA[

Jangan lupa disimpan.

Sekarang coba klik "Lihat Blog" (dikurung kotak merah) dan perhatikan perubahan judul blog kamu di bagian paling atas browser.

Selamat memasang title dan meta tags...

Update :

Sesuai dengan komentar dari Saudara hans ganteng, OB sependapat bahwa <data:blog.pageTitle/> mengandung arti yang luas, sehingga menyebabkan penempatan keyword tidak optimal. Sekarang OB telah mengubah meta tags blog ini, seperti yang disarankan oleh Saudara hans ganteng.
Coba perhatikan meta tags di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.title/> | keyword1 | keyword2 | keyword2</title>
</b:if>

<meta content="...deskripsi tentang blog kamu..." name="description"/>
<meta content="keyword1,keyword2,keyword3,..." name="keywords"/>
<meta content="INDEX, FOLLOW" name="robots"/>

Contoh penerapannya :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.title/> | Trik Blogger | Tips SEO | Blogger Indonesia</title>
</b:if>

<meta content='Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya' name='description'/>
<meta content='source code,search engine,SEO,keyword,template,templates,keywords,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

Terima kasih atas masukannya, untuk posting “Cara Pasang Title dan Meta Tags agar Blog lebih SEO Friendly”.

[ Baca selengkapnya ]

Trik Blogger | Mengatur Tataletak Link to This Post

Rabu, Juni 23, 2010 oleh Unknown // 25 komentar

Terkadang kita kurang memperhatikan keberadaan fitur Link to This Post (backlink). Yah, mungkin karena dalam penerapannya kurang diminati oleh sebagian blogger mania. Bahkan tidak jarang dengan mudahnya kita menonaktifkan fitur ini. Link to This Post dimaksudkan agar memudahkan pengunjung blog me-link posting yang dibaca dan diminatinya untuk dijadikan bahan referensi atau rujukan dari posting yang akan dia buat. Cara kerjanya sederhana saja, yaitu kamu cukup meng-klik "Buat sebuah Link", maka secara otomatis blogger akan mengarahkan kamu melalui jendela pop-up langsung ke halaman "Entry baru" (dengan syarat kamu telah login ke akun blogger). Selanjutnya kamu bisa mengedit atau disimpan dulu sebagai draft.

Secara default link fitur ini terletak di post-footer. Namun akan berpindah letak dan bentuknya ke bawah form komentar, setelah kita menampilkan seluruh isi posting. Nah, tataletak disinilah yang akan bersama-sama kita diskusikan. Apabila jaraknya dengan form komentar terlalu jauh, kamu dapat memperpendeknya dengan melakukan trik yang cukup simple. Eh..., ngomong-ngomong kode Link to This Post yang seperti apa yah? Kodenya setelah isi keseluruhan posting terbuka (jika melalui "Edit HTML", terlebih dulu centang "Expand Widget Templates") lebih kurang seperti di bawah ini :

Kembali ke pengaturan tataletak Link to This Post. Adapun step by step pengaturannya adalah sebagai berikut :

Edit HTML --> Expand Widget Templates.

Cari kode seperti di bawah ini :

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.

Atur ketinggian pada kode yang ditandai dengan warna merah, kalau OB sendiri diatur dalam kisaran 240 - 260.
Update : Setelah kamu mengaplikasikan trik ini — untuk komentar yang menggunakan verifikasi — pengunjung tidak bisa melakukan verifikasi. Dengan kata lain “pengunjung tidak akan bisa berkomentar”. So, agar bisa memasukkan kode verifikasi dalam form komentar, maka kita harus menambahkan fungsi ‘scroll’. Tambahkan CSS berikut di atas kode ]]></b:skin> :
.comment-form {
overflow:auto;
}
Jangan lupa disimpan.

Catatan :
Kamu pun bisa lebih banyak berkreasi dengan melakukan edit atau menambah kode backlinks-container dalam CSS. Contoh kodenya dalam CSS :

#backlinks-container {
margin: 10px auto 0;
padding: 5px 10px 10px;
border: 1px solid #E1D4C0; }

Selamat mengatur tataletak Link to This Post...

[ Baca selengkapnya ]

Rounded Corner | Membuat Sudut menjadi Tumpul

Rabu, Juni 23, 2010 oleh Unknown // 9 komentar

Pernah melihat di sudut-sudut blog kelihatan tumpul? Nah, itu dinamakan "rounded corner". Sebelum melangkah lebih jauh, kita perlu membatasi ruang lingkup kajian trik blogger kali ini. Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image).

Kemudian bentukkan rounded corner dari kode CSS ini akan nampak, apabila kamu menggunakan browser Firefox, Chrome, dan Safari. Ngomong-ngomong soal tumpul, asal jangan dikaitkan dengan pikiran, lho. Ayo, kita keroyok trik blogger tentang membuat rounded corner :

Full rounded corner :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }

Rounded corner di kiri atas :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }

Rounded corner di atas :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }

Rounded corner di bawah :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

Catatan :

Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.

Selamat membuat rounded corner...

[ Baca selengkapnya ]