Tutorial Blog & Tips SEO: Tutorial Blog

Membuat Tabel Pada Blog - Inilah yang akan di bahas pada postingan zona klik kali ini, dimana tabel bisa dijadikan sebagai tempat untuk mengumpulkan widget, tulisan, image dan sebagainya agar terlihat indah dan tersusun rapi pada blog. Bagi pengguna komputer yang sering mengoperasikan microsoft office seperti ms word dan ms excel, membuat tabel sangatlah mudah dengan menu-menu yang telah di sediakan. Tetapi untuk menampilkan tabel pada blog, haruslah menggunakan kode HTML dengan perintah <table> ........... <table> agar tabel bisa tampil pada blog.

Sebelum membuat sebuah tabel pada blog, terlebih dahulu hendaklah mengetahui beberapa atribut yang terdapat didalamnya :

bgcolor : untuk mengatur warna background/latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna"

align : untuk mengatur tata letak tulisan yang ada pada tabel. Misalnya : rata kiri (left), rata kanan (right), rata tengah (center) dan rata kiri kanan (justify). Penempatan kodenya seperti ini : align="left""right""center""justify"

cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel didalam sebuah tabel. Penempatan kodenya seperti ini : cellpadding="1 pixel"

border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya seperti ini : border="1 pixel"

cellspacing : untuk mengatur jarak antar sel. penempatan kodenya seperti ini : cellspacing="1 pixel"

height : untuk mengatur tinggi tabel. Penempatan kodenya seperti ini : height="1 pixel""%"

weight : untuk mengatur lebar tabel. Penempatan kodenya seperti ini : weight="1 pixel""%"

Maka akan terbentuk sintaksnya seperti ini :

<table align="left""center""right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel""%"
height="pixel""%">

.....................

</table>

Untuk membuat tabel tunggal maka kode HTML nya seperti dibawah ini :

<table width="200" border="1">
<tr>
<td align="left">

Contoh

</td>
</tr>
</table>

Hasilnya sebagai berikut :

Contoh

Untuk membuat tabel dengan 1 baris dan 2 kolom, kodenya sebagai berikut :

<table width="300" border="1">
<tr>
<td align="left">

Kolom 1

</td>
<td align="left">

Kolom 2

</td>
</tr>
</table>

Maka hasilnya sebagai berikut :

Kolom 1

Kolom 2

Untuk membuat tabel 2 kolom dan 2 baris kode HTML nya sebagai berikut :

<table width="300" border="1">
<tr>
<td align="left">

Contoh

</td>
<td align="left">

Contoh juga denk

</td>
</tr>
<tr>
<td align="left">

Contoh

</td>
<td align="left">

Contoh juga denk

</td>
</tr>
</table>

Hasilnya adalah sebagai berikut :

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Selamat Mencoba...

imulbenk 11.29 New Google SEO Bandung, Indonesia

Membuat Tabel Pada Blog

Komentar Admin Berbeda dengan pengunjung blog. Itulah yang akan dibahas pada postingan zona-klik kali ini. Perbedaan antara komentar admin dengan pengunjung blog ini dapat membantu pengunjung mengetahui siapa pemilik atau admin blog tersebut, apalagi jika blog tersebut menampilkan photo atau avatar pada setiap komentar. Untuk lebih jelasnya bisa dilihat pada komentar posting blog ini dengan nick zona-klik, nick zona-klik akan menampilkan komentar dengan background yang berbeda.

Tutorial ini zona-klik dapat dari blog Ayas saat bertanya sama om google untuk membuat komentar admin berbeda dengan pengunjung blog, adapun langkah-langkahnya sebagai berikut :

1. Login ke Account blogger dengan username dan password pribadi.

2. Klik Tata Letak --> Edit Html --> centang "expand template widget"

3. Cari kode dibawah ini (tekan ctrl + F untuk mempercepat pencarian)

]]</b:skin>

3. Copy kode dibawah ini sebelum kode diatas :

.comment-body-author {
background: #ebebeb;
border:1px dotted #000000;
margin:0;
padding:0 0 0 20px;
}

Keterangan :

background = warna latar belakang yang disukai

border = ketebalan garis

4. Cari kode berikut :

<dl id='comments-block'>

5. Akan terlihat tampilan kode berikut :

Kode berwarna merah adalah kode yang harus ditambahkan pada blog anda sesuai dengan posisi pada kode diatas.

6. Kode berwarna merah adalah yang harus ditambahkan dan diletakkan sesuai dengan posisi seperti diatas pada setiap blog.

7. Simpan Template.

Apabila langkah-langkah membuat komentar admin berbeda dengan pengunjung blog telah dipraktekkan pada blog dengan benar, coba lihat hasilnya.

imulbenk 15.25 New Google SEO Bandung, Indonesia

Membuat Komentar Admin Berbeda

Mendengar perkataan "Related Post" saya yakin para sahabat blogger sudah tahu maksudnya. Karena pada postingan yang terdahulu zona-klik pernah juga mempublish postingan tentang cara memasang related post atau artikel terkait disetiap postingan yang bisa dilihat disini. Tetapi masih banyak juga yang memiliki blog dan tidak membuat related post pada postingnya. Hal ini tentu saja akan merugikan blog itu sendiri, mengapa saya katakan demikian ?? Karena dengan adanya related post atau artikel terkait di setiap postingan, tentu saja ini akan memberikan backlink kepada posting yang lama dan visitor bisa mengunjungi postingan tersebut walaupun sudah lama dipublish.

Sesuai dengan judul posting kali ini "Related Post Dibawah Postingan (Bagian 2)" mengapa zona-klik membuat "Bagian 2" karena sebelumnya telah dibahas juga cara membuat related post dan kali ini zona-klik menemukan tutorial baru dari blognya "pak guru" untuk memasang related post yang bisa dilihat hasilnya pada akhir postingan ini. Zona-klik merasa related post kali ini lebih bagus dari yang sebelumnya serta zona-klik juga ingin sharing kepada blogger lainnya jika ingin membuat related post yang sama seperti pada zona-klik. Untuk memasang related post ini coba di ikuti langkah-langkah berikut :

1. Login account blogger dengan username dan pasword pribadi.

2. Klik Tata Letak --> Pilih Edit Html --> cari kode </head>

3. Copy kode dibawah ini dan letakkan persis diatas kode (</head>) tersebut.

imulbenk 12.00 New Google SEO Bandung, Indonesia

Cara Membuat Teks Berjalan

Cara Mudah Pasang Recent Comment

Memasukkan Gambar Pada Postingan

Berlangganan artikel atau sering disebut dengan Subscribe merupakan fitur layanan kepada pengunjung agar bisa mengikuti perkembangan juga pembaharuan yang terjadi pada suatu blog. Berupa pemberitahuan adanya postingan terbaru dengan mengirimkan kepada e-mail si pelanggan. Layanan ini lumayan penting buat pengunjung yang ingin mendapatkan informasi terkini dari blog tersebut apalagi kalau blog tersebut berisi tentang tutorial, tips dan trik yang mereka minati. Misalnya blog yang menyediakan tutorial, tips dan trik ngeblog maupun bisnis online. Berlangganan artikel ini sangat di sarankan bagi yang masih newbie atau disebut juga orang yang baru menceburi dunia perbloggeran, karena ia akan mengikuti terus tutorial, tips & triks untuk sukses di dunia blogger, dan tidak tertutup juga untuk orang yang telah lama di dunia perbloggeran.

Fitur ini selain menguntungkan pelanggan, juga menguntungkan bagi penyedia layanan. Mengapa saya katakan demikian ? sebagai contoh : kita ambil lagi blog yang memberikan tutorial, tips dan triks ngeblog. Jika ada yang berlangganan artikel, maka setiap kali melakukan postingan, maka postingan itu akan terkirim ke e-mail pelanggan dan otomatis ia akan membuka dan menuju postingan tersebut, dan itu merupakan keuntungan bagi penyedia layanan karena mendapatkan traffic guna meningkatkan page rank maupun kepopuleran suatu blog.

Setelah kita membaca panjang lebar pengertian dan maksud untuk membuat fitur berlangganan artikel tersebut, mungkin anda sudah tidak sabar lagi untuk langsung mempraktekkannya. Seperti biasa baca, pahami secara serius dan langsung praktekkan apa yang di berikan. Adapun langkah-langkahnya sebagai berikut :

1. Kunjungi situs http://www.feedburner.com

2. Jika anda belum mempunyai acount feedburner silakan daftar terlebih dahulu, dan bagi yang telah memiliki acount feedburner silakan login dengan username dan pasword anda, maka anda akan dibawa ke halaman berikut :

3. Masukkan url blog kamu pada kolom dibawah bacaan "Burn a feed right this instant" kemudian klik "Next" dan anda akan dibawa ke halaman berikutnya. Biarkan di posisi tersebut kemudian klik "Next" --> "Next" lagi ----> hingga muncul gambar seperti dibawah ini :

4. Pilih "Publicize" kemudian klik "Email Subscriptions"

5. Klik "Activate" --->> "Save"

Maka akan muncul halaman baru yang menyediakan kode html, yaitu kode yang digunakan untuk menampilkan widget "Email Subscriptions" atau "Berlangganan Artikel" tersebut. Untuk memasukkan kode tersebut pada blog ikuti petunjuk disini.

imulbenk 14.11 New Google SEO Bandung, Indonesia

Membuat FItur Berlangganan Artikel

Memasang Widget Yahoo Messenger Pada Blog

Tren pada blog sekarang ini adalah menyediakan beberapa kotak sebagai sarana untuk menempatkan Link Banner. Setiap kali berkunjung ke blog para sahabat blogger, blog mereka juga menyediakan kotak untuk ditempatkan link banner, baik itu link banner milik pribadi maupun link banner milik sahabat blogger lain yang direntalkan (seperti mobil aja nich di rental-rental... haa...haa...haa.....). Mungkin anda bingung, gimana bentuk kotak iklan link banner tersebut. Contohnya dapat dilihat pada blog zona-klik ini yang terletak di header blog. Coba lihat gambar di bawah ini :

Nah, itulah bentuk kotak iklan link banner dan kotaknya akan tersusun rapi sesuai dengan berapa jumlah dan besar kotak iklan link banner tersebut yang ingin ditampilkan. Jika blog kalian ingin dipasang kotak iklan link banner caranya sangat gampang, ikuti tutorial dan petunjuk berikut ini dengan benar.

1. Masuk ke acount blogger anda

2. Pilih Tata Letak --> Edit Html

3. Cari kode berikut ini :

]]></b:skin>

4. Copy kode berikut kemudian tempatkan persis diatas kode tersebut.

#Banner-ads {

margin:0px;

padding: 5px;

text-align: center;

width : 960px;

}

#Banner-ads img {

margin: 7px 4px 4px 0px;
padding: 3px;
width : 125px;
height : 125px;
text-align: center;

border: 1px solid #c0c0c0;

}

#Banner-ads img:hover {

margin: 7px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

5. Copy semua kode dibawah ini :

<div id='Banner-ads'>

<a hight='100' href=' http://www.tdwuniversity.com/launch/?id=6628/' target='_blank' width='100'><img alt='ads' border='0' src='http://www.TDWUniversity.com/launch/images/125x125.gif'/></a>

</div>

Keterangan :

---> tulisan berwarna merah ganti dengan "url web/blog" anda

---> tulisan berwarna biru ganti dengan "url gambar" anda

---> untuk memperbanyak jumlah kotak iklan link banner paste kan saja kode tersebut

6. Kemudian letakkan persis di atas kode berikut :

<div id='main-wrapper'>

7. Simpan Perubahan.

Jika telah mengikuti tutorial diatas dengan benar, maka kotak iklan link banner akan muncul pada blog anda. imulbenk 15.50 New Google SEO Bandung, Indonesia

Membuat Kotak Iklan Banner Pada Blog

Postingan kali ini memberikan tutorial bagaimana menampilkan hasil pencarian pada blog hanya berbentuk Judul Postingan. Sehingga lebih mudah untuk mengetahui apa saja hasil pencarian dengan kata kunci yang ditentukan. Sebelumnya sewaktu kita melakukan pencarian, maka akan keluar judul postingan beserta uraian-uraiannya yang panjang lebar sehingga membuat kita jenuh untuk mencari apa yang di butuhkan. Nah, dengan Tampil Judul Posting pada saat Search Pada Blog ini akan membantu dan memudahkan kita untuk mendapatkan apa yang kita inginkan karena disana akan ditampilkan hasil pencarian dengan judul-judul postingan saja.

Untuk lebih mudah memahaminya, coba anda masukkan kata kunci "Tutorial" pada Kolom Search Blog ini kemudian klik "Go" atau "Enter" kemudian lihat hasilnya. Sebagai contoh coba anda perhatikan gambar berikut ini :

Itu merupakan gambar kotak "Search" dengan kata kunci "Tutorial" kemudian klik "Go" atau "Enter" maka hasilnya sebagai berikut :

Sekarang anda pasti sudah mengetahui apa maksud dan tujuan untuk menampilkan hasil pencarian dalam bentuk judul postingan saja. Jika ingin membuat hasil pencarian yang muncul hanya judul-judul postingan saja pada blog anda, ikuti beberapa langkah mudah berikut ini :

- Login ke account blogger anda.

- Pilih Tata Letak --> Edit Html --> centang "Expand Template Widget"

- Cari kode dibawah ini :


<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

- Ganti semua kode yang berwarna merah dengan kode berikut :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

- Simpan Perubahan.

Jika anda telah mengikuti langkah-langkah diatas dengan benar, coba buka blog anda kemudian masukkan kata kunci tertentu pada search blog kemudian lihat hasilnya. imulbenk 11.13 New Google SEO Bandung, Indonesia

Menampilkan Judul Postingan Saat Search Pada Blog

Kali ini zona-klik ingin sharing cara membuat artikel terkait atau related post dibawah postingan. Artikel terkait ini sangat bermanfaat bagi sebuah blog. Selain untuk meningkatkan page views, related post ini juga membantu agar postingan kita yang belum terindeks bisa terindeks oleh search engine. Related post adalah daftar link posting yang berhubungan, dihubungkan oleh kategori atau label yang sama. Disini zona-klik akan membuat tutorial membuat related post berdasarkan label. Adapun tampilan related post ini dalah sebagai berikut :

Sekarang kita sudah mengetahui bagaimana bentuk related post atau artikel terkait pada postingan tersebut, untuk menampilkan related post diblog hanya memasukkan beberapa kode html saja. Agar tutorial ini bermanfaat silakan langsung praktekkan di blog sobat dan ikuti langkah mudah berikut :

1. Login ke acount blogger anda

2. Pada dasboard, pilih layout atau tata letak --> edit html

3. Centang pada bacaan Expand Widget Template

4. Cari kode berikut ini, agar lebih cepat gunakan ctrl+f

<p><data:post.body/></p>

5. Copy kode berikut ini, kemudian paste persis dibawah kode diatas

----------------------- mulai sini --------------------------

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>



<div class='widget-content'>
<b>Postingan Terkait Lainnya :</b>
<div id='data2007'/><br/><br/>
<div id='Randezvous'>
Widget by <u><a href='http://astaqauliyah.com/2007/11/14/cara-memasang-menu-related-post-by-label-postingan-terkait-dengan-labelkategori-di-blogger-beta-blogger-baru-xml/' target='_blank'>Astaqauliyah.Com</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

------------------------- sampai sini ------------------------

6. Simpan perubahan.

Untuk melihat hasilnya coba buka salah satu halaman postingan anda, jika anda telah mengikuti langkah-langkah diatas dengan benar maka related post atau artikel terkait akan muncul di bawah postingan.

imulbenk 09.44 New Google SEO Bandung, Indonesia

Registrasi Photobucket

Tips Sukses Membuat Blogroll

Contact Person merupakan hal yang lumayan penting bagi sebuah blog, apalagi jika blog tersebut bergerak di bidang Bisnis Online dan penyedia pemasangan iklan, Mengapa saya katakan demikian ? karena dengan adanya contact person, ini akan memudahkan pengunjung untuk melakukan order ataupun pemesanan terhadap produk yang disediakan suatu blog. Ini juga merupakan suatu kemudahan bagi pengunjung untuk berinteraksi dengan admin karena dengan adanya contact person ia tidak perlu lagi membuka email untuk melakukan order, karena pesan akan langsung terkirim ke pemilik blog, setelah kita mengisi form yang telah disediakan.

Banyak penyedia layanan membuat contact person baik yang berbayar maupun yang gratisan, dan tidak ada salahnya jika kita mencoba untuk menggunakan layanan yang gratisan, mumpung masih ada yang gratisan ngapain harus bayar, benar gak ?? (tepuk dada tanya selera). Agar contact person tampil pada blog, anda bisa mengikuti langkah mudah berikut ini :

Masuk di http://www.emailmeform.com/ kemudian lakukan registrasi dengan klik bacaan sign up --> isi form yang disediakan seperti gambar dibawah ini :

Setelah mengisi form register dengan benar --> klik sign up maka anda menuju ke halaman berikut :

Buka email anda kemudian klik link verifikasi yang dikirim emailmeform untuk proses verifikasi, maka muncul halaman seperti dibawah ini :

Pada bacaan "please click here to go into your Control Panel" klik kata "here" dan anda akan dibawa ke halaman control panel --> klik "View the Form list" --> klik "Create Form Wizard", selanjutnya anda akan menuju halaman berikut :
Langsung saja klik Next kemudian pada step 2 isi nama, email, subject dan message pada form yang telah di sediakan kemudian klik Next --> Next --> Next --> Next sampai muncul gambar dibawah ini :
Klik Finish

Sekarang proses registrasi emailmeform sudah selesai, agar contact person tampil pada blog anda harus memasukkan code html yang diberikan, dengan cara log in ke acount blogger dengan username dan pasword anda. Jika anda belum bisa memasukkan kode HTML pada blog bisa pelajari disini.

imulbenk 09.48 New Google SEO Bandung, Indonesia