Mengoptimasi Kotak Komentar Blogger

Tumben rasanya blog seo doodey ini membahas soal tutorial blog, semenjak update tutorial kemaren tanggal 5 April kemarin pada artikel yang berjudul "Cara Mengganti Warna Kotak Komentar Anda". Dan untuk kali ini, sebagai lanjutnya membahas tutorial dari postingan sebelumnya, saya akan mencoba memberikan tutorial tentang mengoptimasi kotak komentar blogger.

Baik, langsung aja. Berikut tutorialnya.

Merubah lebar kotak komentar

Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>

.comment-form {
width:425px;
max-width:425px;
overflow:auto;
clear:both;
}

Catatan: Tambahkan jika CSS tersebut belum include dalam CSS template blog Anda. Kemudian silakan rubah nilai atribut yang berwarna merah, bisa dengan menggunakan satuan px, em, %, atau pt. Atribut width berfungsi untuk mengatur ‘lebar’ suatu elemen, sedangkan max-width digunakan untuk mengatur ‘lebar maksimal’ suatu elemen.

Aksesoris kotak komentar

1. Menambah teks sebelum kotak komentar

Menambah teks sebelum kotak komentar (panah hitam)

Berikut kodenya :

<h2 id='comment-post-message'><data:postCommentMsg/></h2>

<p>Silakan berkomentar, tapi jangan memasukkan SPAM yah…</p>

<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='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Catatan: Kode yang berwarna merah merupakan kode yang dicari, sedangkan yang berwarna hijau merupakan sisipan teks untuk menambah informasi di atas kotak komentar. Default untuk kode yang berwarna merah adalah <h4 id='comment-post-message'><data:postCommentMsg/></h4>

2. Menambah variasi teks atau gambar di samping kotak komentar

Sebelum Anda mencoba menambah variasi teks maupun gambar di samping kotak komentar, terlebih dahulu Anda perlu meninjau lebar—dengan atribut width—elemen komentar (#comments) & lebar kotak komentar (.comment-form) pada CSS template blog Anda. Jika lebar yang Anda tinjau sudah terasa cukup untuk dapat menampung elemen baru, mari kita lanjut ke langkah berikutnya.

Yang perlu digarisbawahi bahwa konsep berikut hanya merupakan ‘contoh’ atau tidak bersifat ‘mutlak’.

Coba Anda lihat gambar di atas tadi, perhatikan yang diberi tanda panah berwarna merah. Mungkin seperti itulah penambahan yang saya maksudkan dan bentuknya lebih kurang terlihat pada gambar di bawah ini.

Baca: You still on the focus. Enjoy with Blogger™ commenting system. Please don't include spam.......

Untuk membuat aksesoris seperti di atas, maka Anda perlu menambahkan kode CSS maupun HTML dalam template blog Anda.

Berikut kode CSS nya.

.intermezzo {

float:right;

width:32%;

margin-top:8em;

-moz-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

-o-transform:rotate(45deg);

transform:rotate(45deg);

}

.intermezzo .first-letter {

float:left;

line-height:0.5em;

padding:0.175em 0.15em 0.0175em 0;

font-size:5em;

}

.intermezzo .first-line {

margin-left:-5.75em;

}

.intermezzo .enjoy {

display:block;

font-variant:small-caps;

font-weight:bold;

}

.intermezzo .type-s {

padding:0.175em 0 0;

font-size:6.15em;

vertical-align:-0.35em;

}

.intermezzo .end-letter .hidden-s {

color:#fafafa;

display:block;

position:absolute;

left:-1.75em;

}

.intermezzo .end-letter {

text-transform:uppercase;

font-size:2em;

margin:-0.225em 0 0 2.225em;

display:block;

position:absolute;

}

.intermezzo .dot {

font-size:1.5em;

bottom:-1.5em;

margin-left:6em;

display:block;

position:absolute;

}

.dot .dot-1 {

bottom:-0.5em;

display:block;

position:absolute;

}

.dot .dot-2 {

bottom:-1em;

display:block;

position:absolute;

margin-left:-0.25em;

}

.dot .dot-3 {

bottom:-1.5em;

display:block;

position:absolute;

margin-left:-0.75em;

}

.dot .dot-4 {

bottom:-2em;

display:block;

position:absolute;

margin-left:-1.525em;

}

.dot .dot-5 {

bottom:-2.5em;

display:block;

position:absolute;

margin-left:-2.5em;

}

.dot .dot-6 {

bottom:-3em;

display:block;

position:absolute;

margin-left:-3.75em;

}

Perhatikan :

• Letakkan kode tersebut di atas ]]></b:skin>
• Warna biru menunjukkan bahwa kode CSS tersebut cocok untuk template ini dan belum tentu balance dengan template blog Anda. Apabila Anda memaksa untuk tetap menggunakan CSS di atas, mungkin Anda perlu pula merubah nilai atribut dari masing-masing ‘markup’-nya, baik sebagian maupun keseluruhan. Dan jika Anda beruntung, berarti Anda tidak perlu merubah kode CSS tersebut.
• Warna merah merupakan kode yang mungkin perlu dirubah agar sesuai dengan tenya.mplate blog Anda. Width menunjukkan lebar elemen dan margin-top menunjukkan jarak margin suatu elemen dengan bidang di atasnya.
• Warna hijau merupakan sintaksis dari transformasi memutar suatu elemen dalam CSS3.

Berikut kode CSS nya.

<p class='intermezzo'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger™ commenting system.</span></span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></p>

Letakkan kode HTML tersebut di atas kode berikut.

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if>

Apabila Anda memulai pencarian dengan kode <p class='comment-footer'>, maka Anda akan menemui 2 (dua) kode. Pilihlah yang kedua!

Untuk menjaga format komentar agar tidak berantakan, Anda dapat menambahkan kode :

<div style='clear:both;'></div>

di atas kode HTML :

<p class='intermezzo'>

Ketika Anda melakukan pengaturan bahwa komentar tidak diizinkan karena suatu sebab atau lain hal, mungkin aksesoris teks/gambar di samping kotak komentar tidak diperlukan lagi. Tambahkan kode berikut (warna merah) di antara HTML .intermezzo.

<div style='clear:both;'></div>
<p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger^™ commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p>

Di halaman statis kok muncul juga? Tambahkan kode berwarna biru berikut di-antara HTML .intermezzo.

<div style='clear:both;'></div>
<b:if cond='data:blog.pageType != "static_page"'><p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger^™ commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p></b:if>

Kemudian rubah CSS .comment-form menjadi (lihat kode berwarna merah) :

.comment-form {
width:…;
max-width:…;
overflow:auto;
clear:left;
}

dot…dot…dot tersebut tergantung isian nilai yang telah Anda masukkan.

Selamat mengoptimasi kotak komentar Blogger Anda.

Salam.

(optimasi-blog.blogspot.com)

More about → Mengoptimasi Kotak Komentar Blogger

Cara Membuat Footer Multi Kolom

Setelah kemarin kita belajar seo dalam postingan kita sebelumnya, maka kali ini saya akan mengajak sobat untuk kembali mengutak-atik template blog sobat supaya lebih kelihatan profesional. Tutorial yang akan saya sajikan kali ini adalah bagaimana cara membuat footer multi kolom seperti pada blog doodey ini.

Apa itu footer multi kolom? Jika sobat melihat bagian bawah dari blog doodey ini, maka sobat akan melihat footer blog (kaki blog) yang terdiri dari multi (banyak) kolom. Nah, tertarik untuk membuat yang sama? Berikut tutorialnya.

1.      Silakan sobat tuju ke bagian Edit HTML, lalu tambahkan kode di bawah ini di atas kode ]]></b:skin>

#footer-column-divide {

background: #444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7MSEiX7N5BMU29JUaKTjaMgd6RGQLdc8FszG_iYd0SS3YUi2SoAOTDteies_86x9Fz08lAbah3JsVt1XuyalQj1dXVvfDUjZb7py-x6YlxEffNeEOnLTeSNszajNxtK930K2r0_kFlaU4/s1600/buttommenu-c.png) no-repeat;

width: 900px;

position: relative;

clear: both;

float: center;

color: #fff;

margin: 0 auto;

}

.footer-column {

padding: 10px;

}

2.      Setelah itu, cari kode di bawah ini :

<div id='footer-wrapper'>

<b:section class='footer' id='footer' showaddelement='yes'/>

</div>

atau

<div id='footer'>

<b:section class='footer' id='footer' showaddelement='yes'/>

</div>

3.      Tambahkan kode berikut di bawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Catatan:
Jika sobat tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut di bawah <div id='footer'>

Untuk pilihan berapa kolom yang akan sobat gunakan, berikut adalah pilihan jumlah kolomnya :

Jika ingin membuat footer 2 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

Membuat footer 3 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

Membuat footer menjadi 4 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

4.      Jika sudah, klik Save template. Kalau sudah berhasil, maka hasilnya akan menjadi seperti ini :

Footer 2 kolom

Footer 3 kolom

Footer 4 kolom

Nah, jika sobat sudah berhasil mempraktekkan tutorial cara membuat footer multi kolom ini, maka hasilnya bisa kurang lebih seperti tampilan footer multi kolom blog doodey ini. :D Selamat mencoba..

More about → Cara Membuat Footer Multi Kolom

Sentuh SEO hanya dengan CSS

Belajar SEO Blogspot – Pekerjaan untuk mengoptimasi keywords atau yg biasa kita kenal dengan SEO memang cukup menarik. Sayangnya, terkadang jika kita terlalu over melakukan semua optimasi tadi, kita sampai lupa dengan kenyamanan para pembaca atau pengunjung. Ada beberapa kasus dimana seorang blogger menggunakan BOLD, STRONG, EM dan ITALIC secara berlebihan pada keyword yang di bidik, termasuk saya sendiri. Akibatnya, para pengunjung akan merasa cukup terganggu dengan pengoptimasian seperti itu tadi. Untuk menghindari hal tersebut tanpa harus melupakan optimasi SEO yang kita buat, sebenarnya kita bisa mempercantik SEO dengan sentuhan CSS yang sederhana.

Maka dari itu, kali ini perkenankan saya berbagi tips cara mempercantik SEO dengan sentuhan CSS supaya tetap SEO friendly dan juga visitor friendly. Langkah yang perlu dilakukan untuk mempercantik tampilan artikel yang kita buat adalah sebagai berikut.

1.      Buka style.css dari template anda.

2.      Tambahkan kode css di bawah ini dimana saja, atau jika memungkinkan, masukkan di sekitar .post.

.post em, u, b, strong {
font-style: normal;
text-decoration: none;
font-weight: normal;
}

3.      Save style.css anda dan selesai.

Setelah itu, lihat apa hasil dari penambahan kode di atas, saya yakin semua keywords yang dibuat BOLD, STRONG, EM, dan ITALIC akan terlihat seperti tulisan normal. Dengan teknik mempercantik seperti ini, di jamin usaha SEO kita tetap jalan, namun kenyamanan pembaca pun tetap terjaga.

(belajarseo.com)

More about → Sentuh SEO hanya dengan CSS

Rahasia Memasang Dinamik Meta Tag di Setiap Postingan Otomatis

Teknik SEO Blogspot – Pada postingan lalu, saya pernah menulis tentang bagaimana mengoptimalkan on page SEO pada blogspot. Postingan kali ini sebenarnya merupakan sedikit lanjutan dari postingan yang lalu tersebut, yaitu rahasia memasang dinamik meta tag di setiap postingan otomatis yang merupakan salah satu teknik dari optimasi on page SEO yang sempat saya tulis pada postingan lalu.

Seperti yang pernah dijelaskan sebelumnya, teknik ini sangat-sangat berguna untuk optimasi on page karena setiap postingan kita akan memiliki meta deskripsi yang berbeda antara satu postingan dengan postingan lainnya tanpa perlu repot-repot menambahkan satu-satu pada setiap postingan secara manual. Dengan kata lain, meta deskripsi dan keyword pada setiap posting akan ter-generate secara otomatis. Hal ini tentu menjadi solusi bagi sobat yang mengalami duplikasi meta deskripsi.

Ok, langsung saja, berikut cara pemasangannya.

Ikuti cara ini buat sobat yang BELUM PERNAH memasang meta tag deskripsi sebelumnya:

1.      Login dulu ke blogger.com, lalu ke Tata Letak > Edit HTML

2.      Kemudian cari kode berikut :

<title><data:blog.pageTitle/></title>

3.      Setelah dapat kode di atas, hapus lalu ganti dengan kode berikut :

<b:if cond='data:blog.url == &quot;http://alamatblogsobat.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='description' content='isi dengan deskripsi untuk homepage blog sobat'/>
<meta name='keywords' content='isi dengan kata kunci untuk homepage'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>

4.      Setelah itu save pekerjaan sobat. Beres dach!

Lalu, bagaimana dengan yang SUDAH PERNAH memasang meta tag deskripsi sebelumnya?

Ikuti langkah di bawah ini!

1.      Langsung aja tuju ke Tata Letak > Edit HTML, setelah login ke blogger.com

2.      Di halaman edit html, cari kode ini :

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

Intinya, hapus saja dan ganti kode deskripsi dan keyword yang lama dengan kode ini.

3.      Setelah itu, kode meta tag deskripsi dan keyword yang lama dihapus diganti dengan kode berikut :

<b:if cond='data:blog.url == &quot;http://alamatblogsobat.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='description' content='isi dengan deskripsi untuk homepage blog sobat'/>
<meta name='keywords' content='isi dengan kata kunci untuk homepage'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>

4.      ok, setelah itu, save langsung & pekerjaan hari in terselesaikan. :)

Nah, demikianlah rahasia memasang dinamik meta tag di setiap postingan otomatis. Semoga setelah ikutin cara di atas sobat-sobat pembaca semuanya gak direpotkan lagi dengan harus memasang meta tag deskripsi di setiap postingan secara manual lagi. Ok.

Sampai bertemu lagi dalam postingan belajar SEO blogspot selanjutnya. :)

Sumber: blogjuragan

More about → Rahasia Memasang Dinamik Meta Tag di Setiap Postingan Otomatis

Cara Menambahkan Title Pada Judul Post Blogger

Menurut beberapa sumber pakar SEO expert yang saya dapat baca, salah satu faktor kecil penunjang terhadap SEO adalah dengan membubuhkan title terhadap sebuah link. Title link yang dimaksud disini adalah ketika sebuah link disorot oleh mouse komputer, akan keluar sebuah tulisan kecil.

Walaupun ini bukanlah teknik SEO blogspot yang penting, tetapi apa salahnya buat kita untuk menerapkan tirk ini, dan mudah-mudahan ada pengaruhnya sedikit terhadap SEO blogspot kita.

Jika sobat berminat untuk menerapkan trik tersebut seperti apa yang sudah saya terapkan di blog ini, ikuti langkah-langkah di bawah ini..

1.      Login dulu ke blogger, lalu klik Rancangan

2.      Klik tab menu Edit HTML, lalu klik Expand Template Widget

3.      Cari kode berikut ini :

<a expr:href='data:post.link'><data:post.title/></a>

4.      Hapus kode tadi, lalu ganti dengan kode di bawah ini :

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

5.      Lalu cari kembali kode berikut ini :

<a expr:href='data:post.url'><data:post.title/></a>

6.      Hapus kode tadi, lalu ganti dengan kode di bawah ini :

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>

7.      Kemudian, klik Save Template

Teknik di atas tadi hanyalah memasukan keyword judul post ke dalam link judul post. Pada dasarnya, kode yang ditambahkan adalah seperti ini :

expr:title='data:post.title'

Jika sobat ingin variasi lain, misalkan blog sobat mempunyai keyword andalan lalu ingin memasukkan ke dalam title tersebut, itu bisa dilakukan. Misalkan saya membidik keyword “Teknik SEO Blogspot”, maka variasi kodenya adalah seperti ini :

<a expr:href='data:post.link' expr:title='&quot;Teknik SEO Blogspot : &quot; + data:post.title'><data:post.title/></a>

serta :

<a expr:href='data:post.url' expr:title='&quot;Teknik SEO Blogspot : &quot; + data:post.title'><data:post.title/></a>

Sudahkah sobat lakukan? Berhasil?

Cobalah sekarang! :)

More about → Cara Menambahkan Title Pada Judul Post Blogger