Mustofa Ali M

Cara Membuat Breadcrumb Navigasi Terdeteksi Google

Mustofa Ali M Monday, July 09, 2012

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNLE4q_biMH3LyN_OzfomRe6xMEHdat2bt1LBGMUHERP4o9MV2i4d6tfjZvtJfUAldp4qN3g_vWEu-2n0kkWrq0N-SvNKJJhWOE02XuTOX-HKC-KNr0fbI7inaC91eUR5i5bkH9Qthsqo/s1600/Navigasi+Breadcrumb+totto-apa-adanya.blogspot.com.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Breadcrumb Navigasi totto-apa-adanya.com" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNLE4q_biMH3LyN_OzfomRe6xMEHdat2bt1LBGMUHERP4o9MV2i4d6tfjZvtJfUAldp4qN3g_vWEu-2n0kkWrq0N-SvNKJJhWOE02XuTOX-HKC-KNr0fbI7inaC91eUR5i5bkH9Qthsqo/s1600/Navigasi+Breadcrumb+totto-apa-adanya.blogspot.com.png" title="Breadcrumb Navigasi totto-apa-adanya.com" width="568" /></a></div>
<br />
Anda telah terbiasa menemukan artikel yang berjudul <b>Breadcrumb Navigasi</b> di beberapa blog. Namun, kali ini berbeda. Karena Breadcrumb Navigasi ini dapat terdeteksi di <b>Google Search Engine</b>. Selain untuk memudahkan pengunjung dalam menavigasi blog, Breadcrumb Navigasi berguna untuk meningkatkan <b>SEO On Page</b> bagi blog anda. Dan ini akan <b>berdampak positif</b> bagi <b>SERP</b> blog anda. Ini screenshot blog saya yang Navigasi Breadcrumb nya sudah terdeteksi di Google :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWylo_iyu3a3ZobCd6i2dnNoCpIdJDJB8jn_UKef7Ea9EeVBiSt0CAQMQ0LOIzpU4g1gcuNDhsFRSMxCJ6H-OkPZ4m0ORbeMpF2gUc9SHoR5Gj6srC_sTOJb38L4o3EoOpdIFKp2Plio/s1600/Navigasi+Breadcrumb+Google+totto-apa-adanya.blogspot.com.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWylo_iyu3a3ZobCd6i2dnNoCpIdJDJB8jn_UKef7Ea9EeVBiSt0CAQMQ0LOIzpU4g1gcuNDhsFRSMxCJ6H-OkPZ4m0ORbeMpF2gUc9SHoR5Gj6srC_sTOJb38L4o3EoOpdIFKp2Plio/s1600/Navigasi+Breadcrumb+Google+totto-apa-adanya.blogspot.com.png" /></a></div>
<br />
Baik, berikut <b>Cara Memasang Breadcrumb Navigasi pada Blogger (Blogspot) agar Terdeteksi di Google Search Engine</b> :<br />
<br />
1. Login ke <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger</a><br />
2. Masuk ke <b>Template</b><br />
3. Klik <b>Edit HTML</b><br />
4. Centang "<b>Expand Template Widget</b>"<br />
<br />
5. Sekarang tekan <keyboard>CTRL</keyboard> + <keyboard>F</keyboard> dan cari kode <b><div class='post-hentry'></b><br />
<br />
6. Letakkan kode berikut SEBELUM (diatas) kode diatas :<br />
<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.homepageUrl == data:blog.url'><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div class='breadcrumb'><br />
<span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><span style="background-color: transparent;"><a expr:href='data:blog.homepageUrl' itemprop='url'></span><span itemprop='title'><b>Home</b></span></a></span> - <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' itemprop='url'> , <span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'/></b:loop></b:if></span> - <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><span itemprop='title'><data:post.title/></span></span><br />
</div><br />
</b:if><br />
</b:if>
</blockquote>
<br />
7. <span style="background-color: transparent;">Sekarang tekan</span><span style="background-color: transparent;"> </span><keyboard style="background-color: transparent;">CTRL</keyboard><span style="background-color: transparent;"> </span><span style="background-color: transparent;">+</span><span style="background-color: transparent;"> </span><keyboard style="background-color: transparent;">F</keyboard><span style="background-color: transparent;"> </span><span style="background-color: transparent;">dan cari kode </span><span style="background-color: transparent;"><b>]]></b:skin></b></span><br />
<span style="background-color: transparent;"><b><br /></b></span><br />
<span style="background-color: transparent;">8. Letakkan kode berikut SEBELUM (diatas) kode diatas :</span><br />
<span style="background-color: transparent;"><br /></span><br />
<blockquote class="tr_bq">
<span style="background-color: transparent;">.breadcrumb{margin:2px 2px 5px 2px;overflow:hidden;border:1px solid #000;</span><span style="background-color: transparent;">-webkit-border-radius: 5px;</span><span style="background-color: transparent;">-moz-border-radius: 5px;</span><span style="background-color: transparent;">border-radius: 5px;color:#000;}</span></blockquote>
<span style="background-color: transparent;"><br /></span><br />
<b>Catatan : </b>Silahkan modifikasi sendiri kode CSS diatas agar terlihat lebih bagus.<br />
<span style="background-color: transparent;"><br /></span><br />
<span style="background-color: transparent;">9. Simpan Template</span><br />
<span style="background-color: transparent;"><br /></span><br />
<span style="background-color: transparent;">Bagaimana hasilnya ??? Ada kesalahan atau kebingungan, silahkan bertanya di kotak komentar dibawah dengan <b>MENYERTAKAN LINK BLOG ANDA</b> (link blog hasil Breadcrumb diatas) agar saya bisa membenahinya.</span>
<style>
keyboard{
border: 1px solid gray;
padding: 1px 5px;
margin: 0 5px;
font-size: 1.2em;
-webkit-box-shadow: 1px 0 1px 0 transparent, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
-moz-box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
box-shadow: 1px 0 1px 0 transparent, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -moz-linear-gradient(left, transparent 0%, #E2E2E2 25%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(25%, #E2E2E2));
background: -webkit-linear-gradient(left, transparent 0%, #E2E2E2 25%);
background: -o-linear-gradient(left, transparent 0%, #E2E2E2 25%);
background: -ms-linear-gradient(left, transparent 0%, #E2E2E2 25%);
background: linear-gradient(left, transparent 0%, #E2E2E2 25%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 );}
</style>

Anda telah terbiasa menemukan artikel yang berjudul Breadcrumb Navigasi di beberapa blog. Namun, kali ini berbeda. Karena Breadcrumb Nav...

Pentingnya Membalas Komentar Pengunjung

Mustofa Ali M Sunday, June 10, 2012

Komentar sangat penting bagi suatu posting. Apabila posting tersebut tidak memiliki komentar, maka blog tersebut dianggap blog mati. Seperti yang saya tulis di <a href="http://totto-apa-adanya.blogspot.com/2011/05/cara-mendapatkan-backlink.html"><b>Trik SEO - Cara Mendapatkan Backlink dengan Berkomentar</b></a>. Perhatikan Screenshot berikut :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8FA2MUr1UaujviN139rdDSXgOTtVCZ2W0qgo_7Q9RowW8m0u8k8IewxGBw-Mfee1ez4frbFYnpxTFnP7qLPoX7b5J5v-7uQZv8FOTLpUSTuI9Kz_8oESa7aW_l4fMPzoeItgAPh0XrSQ/s1600/Totto.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8FA2MUr1UaujviN139rdDSXgOTtVCZ2W0qgo_7Q9RowW8m0u8k8IewxGBw-Mfee1ez4frbFYnpxTFnP7qLPoX7b5J5v-7uQZv8FOTLpUSTuI9Kz_8oESa7aW_l4fMPzoeItgAPh0XrSQ/s320/Totto.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(klik untuk memperbesar)</td></tr>
</tbody></table>Dari data diatas, yang saya tandai dengan warna merah adalah posting terbaru saya yang mempunyai sedikit komentar. Sedangkan yang saya tandai hijau, adalah posting lama saya yang mempunyai banyak komentar.<br />
<br />
Mengapa yang terbaru kok lebih sedikit ? Nah, karena saya jarang membuka blog dan jarang membuka komentar, selama beberapa bulan tersebut sehingga para pengunjung yang berkomentar semua pada kabur.<br />
<br />
Dari kesimpulan diatas bahwa komentar orang lain sangatlah penting. Dan untuk mengembalikannya membutuhkan waktu yang agak lama.<br />
<br />
<h3>Manfaat komentar pengunjung :</h3><b></b><br />
<h4><b>1. Mendapat banyak traffic</b></h4><br />
Dengan banyaknya komentar pengunjung yang masuk, otomatis kita mendapat banyak traffic yang masuk. Apalagi banyak pengunjung setia. Mereka akan selalu mengunjungi blog anda.<br />
<b></b><br />
<h4><b>2. Mempunyai pengunjung setia</b></h4><br />
Jika blog kita mempunyai pengunjung setia, maka kita akan mendapat banyak traffic yang setia. Seperti saya jelaskan diatas.<br />
<b></b><br />
<h4><b>3. Mendapat backlink</b></h4><br />
Pengunjung akan otomatis meletakkan link blog mereka di kotak komentar. Sehingga kita mendapakan backlink dari link tersebut. Apalagi blognya pengunjung tersebut berlabel <b>dofollow</b>.<br />
<b></b><br />
<h4><b>4. Saling berbagi wawasan</b></h4><br />
Dengan adanya fitur komentar, para pengunjung dan admin akan saling berbagi wawasan.<br />
<b></b><br />
<h4><b>5. Menambah keyword yang masuk</b></h4><br />
Dengan adanya komentar pengunjung, otomatis para pengunjung meletakkan banyak keyword pada kotak komentar. Nah, otomatis keyword ini terindex oleh search engine. Dan ini akan membantu aktivitas SEO pada blog kita.<br />
<br />
Kenapa pengunjungku tidak kembali lagi ? Padahal setiap komentar mereka sudah saya jawab.<br />
Nah, mungkin itu karena ada beberapa hal yang dibenci para pengunjung. Untuk itu, insyaallah posting <a href="http://totto-apa-adanya.blogspot.com/2011/06/hal-hal-yang-dibenci-pengunjung.html"><b>Hal-Hal Yang Dibenci Pengunjung</b></a> bisa mengatasinya.

Komentar sangat penting bagi suatu posting. Apabila posting tersebut tidak memiliki komentar, maka blog tersebut dianggap blog mati. Seperti...

Hal-Hal Yang Dibenci Pengunjung

Mustofa Ali M Thursday, June 23, 2011

<div style="text-align: justify;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQXux335HFQEJantC8xd9qgHXp2Dsdpqw5doluIZuab2S-cWxKi4AO7FpUIEqVc8nwyceJrdW8nPFOFGdZwxGo47zBOJbcMGxLg-Rx3lRuTMx0eD0t0XfA888A1DCfGSPi2j5SfiB84Hg/s1600/angry.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQXux335HFQEJantC8xd9qgHXp2Dsdpqw5doluIZuab2S-cWxKi4AO7FpUIEqVc8nwyceJrdW8nPFOFGdZwxGo47zBOJbcMGxLg-Rx3lRuTMx0eD0t0XfA888A1DCfGSPi2j5SfiB84Hg/s1600/angry.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(<i>Source : google.co.id</i>)</td></tr>
</tbody></table><b>Hal-Hal Yang Dibenci Pengunjung</b> - Sebelumnya saya menulis artikel yang berjudul <b><a href="http://totto-apa-adanya.blogspot.com/2011/05/tips-pengunjung-nyaman-di-blog.html">Tips Agar Pengunjung Nyaman di Blog</a>.</b> Dengan tips kenyamanan tersebut, ternyata ada beberapa hal yang membuat dibenci pengunjung. Tanpa kita sadari mungkin kita melakukan hal-hal terhadap blog kita yang membuat dibenci oleh pengunjung. Dengan melakukan hal-hal tersebut secara berkelanjutan, bukan tidak mungkin blog kita akan ditinggalkan oleh pengunjung. Oleh karena itu, dalam postingan kali ini saya akan mencoba menulis hal-hal pada Blog yang dibenci oleh pengunjung.<br />
<br />
Berikut hal-hal yang dibenci pengunjung :<br />
<h3>1. Loading Halaman yang Terlalu Lama</h3><blockquote>Maksimal waktu loading sebuah halaman blog/web adalah 15 detik, jika lebih dari itu kemungkinan besar akan langsung ditutup oleh pengunjung. Terdapat banyak penyebab lamanya loading halaman pada Blog anda. Mungkin dikarenakan Widget yang terlalu banyak, terlalu banyak link, gambar yang terlalu banyak, Template yang kurang sesuai, terlalu banyak animasi, format gambar yang tidak sesuai, halaman yang terlalu panjang, dan masih banyak lagi. Silahkan analisa sendiri untuk mencari penyebabnya. </blockquote><h3>2. Adanya Pop Up Iklan</h3></div><div style="text-align: justify;"><blockquote>Hal ini juga akan membuat pengunjung benci. Bukan karena isi iklannya, tetapi karena mereka terganggu dengan munculnya pop up iklan tersebut. Apalagi, jika pop up iklan tersebut menutupi hampir semua halaman blog, mereka jelas akan terganggu. </blockquote><h3>3. Banyak Iklan Sedikit Kontent</h3><blockquote>Yang satu ini juga hampir sama dengan point yang kedua. Selain membuat pengunjung terganggu, banyak iklan juga akan membuat loading halaman menjadi lama. Selain itu, jika pengunjung hanya mendapatkan iklan saja, tetapi tidak mendapatkan artikel yang dicari. Dijamin pengunjung tersebut hanya akan datang satu kali saja ke blog/web tersebut.</blockquote><h3>4. Postingan Terlalu Singkat atau Terlalu Panjang</h3><blockquote>Postingan yang tertalu singkat akan membuat pengunjung ragu untuk membacanya. Karena isi postingan tersebut sangat sedikit, sehingga ilmu yang didapatkan oleh pengunjung akan sedikit juga. Selain itu, mungkin penjelasannya kurang mengena. Percuma bukan? Postingan yang terlalu panjang juga akan membuat pengunjung menjadi bosan dalam membacanya. </blockquote><h3>5. Menggunakan Moderasi Komentar</h3><blockquote>Hal ini juga dapat membuat pengunjung malas berkomentar. Karena, ketika kita akan publish komentar, komentar kita tidak akan langsung muncul, tetapi masuk moderasi komentar. Komentar tersebut akan dipublish jika pemilik blog tersebut menyetujui komentar tersebut.</blockquote><h3>6. Menggunakan Captcha</h3><blockquote>Hal satu ini juga sama seperti diatas. Captcha memang sangat menyebalkan. Ketika kita mau publish sebuah komentar, akan muncul sebuah captcha ini. Ketika kita memasukkan kode captcha, dan berulangkali salah. Hal ini sangat menyebalkan.</blockquote>Nah, itu yang saya tulis di postingan kali ini. Semoga setelah anda membaca artikel ini, anda segera mengoreksi Blog anda. Jika anda ingin menambahkannya, silahkan tulis di kotak komentar dibawah ini.   Terimakasih.</div>

( Source : google.co.id ) Hal-Hal Yang Dibenci Pengunjung - Sebelumnya saya menulis artikel yang berjudul Tips Agar Pengunjung Nyaman di...

Membuat Drop Down Menu

Mustofa Ali M Monday, June 13, 2011

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF4cICyP_DaGHY2sfdc8CoBRx8hIEuxcqq8wFN5a7t8QS1uL9GtLsTfUP5sVcIvB4MpEy3eqmUwUjaWQjMrkrd-HhlUFnnbqu76NQuU16nr19VV0ZorJkXLLa3H4fm14h6DlljFioCibI/s1600/Drop-Down-Menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Drop-Down Menu" border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF4cICyP_DaGHY2sfdc8CoBRx8hIEuxcqq8wFN5a7t8QS1uL9GtLsTfUP5sVcIvB4MpEy3eqmUwUjaWQjMrkrd-HhlUFnnbqu76NQuU16nr19VV0ZorJkXLLa3H4fm14h6DlljFioCibI/s400/Drop-Down-Menu.png" title="Drop-Down Menu" width="400" /></a></div><div style="text-align: justify;"><b>Membuat Drop Down Menu</b> - <b>Drop Down Menu</b> memang sangat populer dan sangat dibutuhkan pada saat ini. Jika di blog anda terdapat banyak link dan bingung untuk menaruhnya dimana. Nah, <i>Drop-Down Menu</i> adalah jawabannya. <i>Drop Down Menu</i> yang bagus dan indah ini dibuat full CSS tanpa JS (<i>JavaScript</i>). Sehingga anda tidak perlu khawatir jika loading blog anda lambat. Saya telah menerapkan hasil <i>Drop Down Menu</i> ini di blog saya yang satunya. Silahkan lihat hasilnya :</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><b><a href="http://demo-totto.blogspot.com/"> DEMO </a></b></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Langkah untuk membuat <b>Drop-Down Menu</b> :</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">1. Login ke <b><a href="http://blogger.com/">blogger.com</a></b></div><div style="text-align: justify;">2. Masuk ke menu <b>Rancangan (Design)</b> dan pilih <b>Edit HTML</b></div><div style="text-align: justify;">3. Centang <b>Expand Widget Template</b></div><div style="text-align: justify;">4. Cari kode <b><body></b></div><div style="text-align: justify;">5. Masukkan kode berikut dibawah kode <b><body></b></div><blockquote><div style="text-align: justify;"><link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/><br />
<b:section id='menu' maxwidgets='1' showaddelement='no'><br />
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/><br />
</b:section></div></blockquote><blockquote>Kode diatas berfungsi untuk membuat sebuah <i>JavaScript/HTML</i> di <b>Elemen Laman</b>.</blockquote>6. Klik <span style="background-color: orange; color: white;"> </span><b style="background-color: orange; color: white;">Simpan Template  </b><br />
7. Masuk ke <b>Elemen Laman</b><br />
8. Cari Elemen Laman yang bernama <b>Menu,</b> kemudian klik<b> Edit. </b>Lihat Screenshoot<b> !</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LwO5K-mIcwYXzXdNVFQvy2oRhxkbptl6ZGSC3tMFnG4aYlYd7eic0FR_2Fdl7NqEqtnLpa3MMz2Gg2gcP-NI0J3p87ZXSlA8aGfGcKT9-r4YvwRtUOjPmHHbbgvOEc7g_Ow_3tHeyKE/s1600/Elemen+Laman.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Elemen Laman" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LwO5K-mIcwYXzXdNVFQvy2oRhxkbptl6ZGSC3tMFnG4aYlYd7eic0FR_2Fdl7NqEqtnLpa3MMz2Gg2gcP-NI0J3p87ZXSlA8aGfGcKT9-r4YvwRtUOjPmHHbbgvOEc7g_Ow_3tHeyKE/s400/Elemen+Laman.PNG" title="Elemen Laman" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(Klik Untuk Memperbesar)</td></tr>
</tbody></table>9. Masukkan kode dibawah ini<br />
<blockquote><ul class="menu"><br />
<li class="no_drop"><a href="">Home</a></li><br />
<li><a href="#" class="drop">1 Column</a><br />
<div class="dropdown_1column"><br />
<div class="col_1"><br />
<ul><br />
<li><a href="#">Totto 1</a></li><br />
<li><a href="#">Totto 2</a></li><br />
<li><a href="#">Totto 3</a></li><br />
<li><a href="#">Totto 4</a></li><br />
<li><a href="#">Totto 5</a></li><br />
<li><a href="#">Totto 6</a></li><br />
<li><a href="#">Totto 7</a></li><br />
<li><a href="#">Totto 8</a></li><br />
<li><a href="#">Totto 9</a></li><br />
<li><a href="#">More...</a></li><br />
</ul><br />
</div></div></li><br />
<br />
<li><a href="#" class="drop">2 columns</a><br />
<div class="dropdown_2columns"><br />
<br />
<div class="col_1"><br />
<h3>Totto 10</h3><br />
<ul><br />
<li><a href="#">Totto 11</a></li><br />
<li><a href="#">Totto 12</a></li><br />
<li><a href="#">Totto 13</a></li><br />
</ul><br />
</div><br />
<br />
<div class="col_1"><br />
<h3>Totto 14</h3><br />
<ul><br />
<li><a href="#">Totto 15</a></li><br />
<li><a href="#">Totto 16</a></li><br />
<li><a href="#">Totto 17</a></li><br />
</ul><br />
</div><br />
<br />
<div class="col_1"><br />
<h3>Totto 18</h3><br />
<ul><br />
<li><a href="#">Totto 19</a></li><br />
<li><a href="#">Totto 20</a></li><br />
<li><a href="#">Totto 21</a></li><br />
</ul><br />
</div><br />
<br />
<div class="col_1"><br />
<h3>Totto 22</h3><br />
<ul><br />
<li><a href="#">Totto 23</a></li><br />
<li><a href="#">Totto 24</a></li><br />
<li><a href="#">Totto 25</a></li><br />
</ul><br />
</div></div></li></ul></blockquote><blockquote>Ganti kode # dengan URL tujuan. Ganti Totto 1, Totto 2, Totto 3, Totto... dengan anchor teks dari URL tersebut. </blockquote>10. Kemudian Klik <b><span style="background-color: orange; color: white;"> Simpan  </span></b><br />
<br />
<div style="text-align: justify;">Mudah bukan ? Sebenarnya semua hal tidak terlalu sulit seperti yang kita bayangkan. Baik, jika anda merasa ada kesulitan atau apapun. Silahkan tulis di kotak komentar dibawah ini. Semoga berhasil.<span style="font-size: xx-small;"><a href="http://noct-land.blogspot.com/">sumber</a></span></div>

Membuat Drop Down Menu - Drop Down Menu memang sangat populer dan sangat dibutuhkan pada saat ini. Jika di blog anda terdapat banyak link ...

Membuat Blog Lebih Baik

Mustofa Ali M Tuesday, June 07, 2011

<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwthgwx_SjTW33jXWYTZ17LeOzfEKIoYn99gvow9Aar2K1hwR0UGNf3K_tpxLD6G3ciyjs54cb0wnz3Kl10Ina8NTcOfjjEjJD6N-WwHWtkaF7HU2F76hmucSUme5Ti4QLDwpekmYsRWA/s1600/blog+terlihat+lebih+baik.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Blog Lebih Baik" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwthgwx_SjTW33jXWYTZ17LeOzfEKIoYn99gvow9Aar2K1hwR0UGNf3K_tpxLD6G3ciyjs54cb0wnz3Kl10Ina8NTcOfjjEjJD6N-WwHWtkaF7HU2F76hmucSUme5Ti4QLDwpekmYsRWA/s1600/blog+terlihat+lebih+baik.png" title="Membuat Blog Lebih Baik"/></a></div></div><div style="text-align: justify;"><br />
<b>Membuat Blog Lebih Baik</b> - Sebelumnya, Saya menulis artikel tentang <b>Tutorial Blogging</b> yang berjudul <a href="http://totto-apa-adanya.blogspot.com/2011/05/membuat-blog-lebih-menarik.html"><b>Membuat Blog Lebih Menarik.</b></a> Membuat blog kini semakin mudah saja rasanya. Bahkan saking mudahnya, bagai membalikkan telapak tangan. Fakta menunjukkan, kemudahan tersebut telah melahirkan begitu banyak <b>blogger baru</b>. <a href="http://totto-apa-adanya.blogspot.com/2011/05/membuat-blog-lebih-menarik.html"><b></b></a> Tapi, menarik belum tentu baik. Tapi tetap saja kemudahan itu tak berarti <b>semua Blogger</b> mengerti benar bagaimana membuat Blog yang baik, sehingga sering dikunjungi orang. Bagi sebagian besar, ternyata mengelola blog masih dianggap sebagai hal yang sulit. Akibatnya banyak orang membuat blog tapi kemudian mengabaikannya begitu saja. Padahal dengan pengelolahan yang baik, blog memiliki potensi untuk <b>jadi populer</b> dan menguntungkan secara <i>finasial</i>. <br />
<br />
Pada kali ini saya akan coba mensarikan kembali panduan bagaimana menjaga dan mengelola blog agar senantiasa baik, menarik dan informatif.</div><div style="text-align: justify;"><ul><li><b>Fokus pada Satu Topik Bahasan</b></li>
</ul>Hampir semua pakar internet marketing menyarankan hal ini. Membuat Konten sebuah blog sebaiknya fokus pada satu tema bahasan yang menarik dan bermanfaat. Sebab, pembaca akan tertarik jika Blog berisi topik bahasan yang jelas dan khusus. Informasi Blog yang fokus akan membuat pengunjung setia untuk berkunjung terus. Tentu saja dengan seperti ini akan tercipta jaringan pembaca yang loyal. <br />
<br />
<ul><li><b>Buat Lebih Informatif</b></li>
</ul><b>Membuat blog lebih informatif</b>, artinya konten yang ditampilkan berisi informasi terkini. Ini bisa dilakukan dengan cara menampilkan fakta-fakta yang terpercaya atau menyajikan artikel dan opini tentang hal-hal yang sedang berkembang. Intinya usahakan sebisa mungkin isi konten benar-benar bermanfaat bagi pembaca. <br />
<br />
<ul><li><b>Update Secara Rutin dan Berkala</b></li>
</ul>Blog yang diupdate secara rutin sangat disukai oleh <b>search engine (mesin pencari)</b>. Ini secara otomatis akan membuat Blog kita akan selalu direkomendasikan oleh mesin pencari untuk dikunjungi, karena berada di dereten atas. Luangkan waktu 1-2 hari saja untuk memposting tulisan. Tidak usah terlalu banyak cukup 300 sampai 500 kata saja untuk satu topik bahasan. Karena kalau terlalu banyak pembaca juga akan bete dan bosan. <br />
<br />
<ul><li><b>Buat Konten yang Jelas dan Mudah Dimengerti</b></li>
</ul>Membuat postingan yang jelas dan mudah dimengerti oleh pembaca, membutuhkan latihan. Tapi biasanya para Blogger adalah orang-orang yang cenderung suka menulis, maka dengan sendirinya kemampuan untuk menulis akan meningkat dari waktu ke waktu. Tidak perlu menjelaskan sesuatu dengan dalam kalimat-kalimat panjang karena malah bisa membingungkan. Biasanya, penjelasan yang singkat dan sederhana justru bisa mengena. <br />
<br />
<ul><li><b>Pakai Judul yang Menarik</b></li>
</ul>Judul yang menarik pasti akan membuat siapapun penasaran untuk membaca isinya. Maka memilih judul postingan yang atraktif menjadi hal penting untuk menarik perhatian pembaca. Namun membuat judul yang terlalu berlebihan sehingga keluar konteks, justru tidak akan efektif. Hal ini justru bisa membuat pembaca menganggap blog hanya mengandalkan sensasi saja. <br />
<br />
<ul><li><b>Pentingnya Kuantitas</b></li>
</ul>Pastikan untuk arsip semua postingan blog Anda untuk menciptakan sebuah portal internet yang kaya konten. Selain memantapkan keberadaan blog, hal ini akan berpengaruh terhadap tampilnya blog Anda di mesin pencari Internet. <br />
<br />
<ul><li><b>Cermati Tulisan Anda Sebelum Dipublish</b></li>
</ul>Seperti yang kita tahu, apapun yang dipublikasi di internet bisa dibaca banyak orang. Untuk itu, agar terhindar dari masalah, sebaiknya cermati dengan benar apa yang telah ditulis sebelum dipublish di blog. Teliti pula agar tidak ada salah kata ataupun kalimat salah ketik yang mengganggu.<br />
<br />
Oke, sekian dulu tulisan dari Saya ini. Apabila ada kritikan atau apapun, silahkan tulis di kolom komentar dibawah ini. Semoga bermanfaat. Sampai jumpa di postingan yang akan datang. Terimakasih.</div>

Membuat Blog Lebih Baik - Sebelumnya, Saya menulis artikel tentang Tutorial Blogging yang berjudul Membuat Blog Lebih Menarik. Membuat b...

Tukar Link, Bermanfaat atau Tidak?

Mustofa Ali M Thursday, June 02, 2011

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUZ0xjHsmz5KdoKLA7vinEFq0INnTlyQ10jd_uBsRDnVuy1JluG8TUYJw3jq6ElAnh7_bKFaUNMoFLvMcfQ_nQaR-B9osA93Kd2QPLI2HcLrRpSdM0Giiyxbl5w9Jgp5qYGH4m4MSdiQ/s1600/link-exchange.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Link Exchange" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUZ0xjHsmz5KdoKLA7vinEFq0INnTlyQ10jd_uBsRDnVuy1JluG8TUYJw3jq6ElAnh7_bKFaUNMoFLvMcfQ_nQaR-B9osA93Kd2QPLI2HcLrRpSdM0Giiyxbl5w9Jgp5qYGH4m4MSdiQ/s1600/link-exchange.png" title="Link Exchange" /></a></div><div style="text-align: justify;"></div><div style="text-align: justify;"><b>Tukar Link, Bermanfaat atau Tidak? - </b>Sebelumnya saya menulis artikel tentang <b>tukar link </b>yang berjudul<b> <a href="http://totto-apa-adanya.blogspot.com/2011/05/kesalahan-dalam-tukar-link.html">Kesalahan dalam Tukar Link</a>. </b>Dan kali ini, saya akan share <b>Tukar Link</b> itu bermanfaat atau hanya buang-buang waktu saja? <b>Tukar link</b> atau <b>Link Exchange</b> sepertinya sudah menjadi sebuah kebudayaan di dunia blog. Nah, untuk Anda yang belum tahu apa itu <b>tukar link</b>, ini penjelasannya :<br />
<blockquote>Tukar link atau Link Exchange adalah sebuah kegiatan untuk menempatkan link blog kita di blog orang lain dan begitu pula kita juga harus menempatkan link orang tersebut ke dalam blog kita. Tujuannya jelas, yaitu untuk mendapatkan backlink dan juga memperbanyak Traffic karena selain backlink, tukar link ini juga bisa berfungsi untuk promosi blog Anda sehingga pengunjung bisa saja datang ke blog Anda setelah melihat link Anda di blog orang lain.</blockquote></div><div style="text-align: justify;">Tapi, setelah semua berjalan sekian lama, muncul pertanyaan dari dalam hatiku, "Tukar link itu bermanfaat atau hanya sekedar buang-buang waktu saja, ya?" Memang semua itu punya 2 sisi, negatif dan positif. Nah, sekarang kita bahas yuk.<br />
<br />
<span style="font-size: large;"><b>SISI POSITIF :</b></span><br />
<br />
</div><div style="text-align: justify;"><ol><li>Penempatan link yang baik dari Tukar Link akan membawa dampak tertariknya pengunjung untuk berkunjung ke blog Anda. Misalnya, di bagian sidebar, maka orang bisa menjadi tertarik untuk melihat dan berkunjung.</li>
<li>Penempatan link yang baik dan tidak dimasukkan kedalam halaman link <i>junk</i> atau halaman sampah akan memberikan dampak yang baik dari Mesin Pencari (<i>Search Engine</i>) untuk menghadiahkan PageRank. Tapi ingat, bukan di halaman <i>junk</i> (halaman dengan banyak Link Exchange).</li>
<li>Penempatan link yang baik juga dapat memberikan kesan bahwa blog Anda memang eksklusif dan direkomendasikan untuk dibaca. Dengan artikel yang bagus, baik dan original, bisa jadi blog Anda dijadikan acuan untuk menulis blog orang lain. Suatu kehormatan bukan?</li>
<li>Dari sisi persahabatan, dengan saling memberikan dukungan maka tidak dapat diragukan bahwa Anda akan memiliki orang yang setia dengan blog Anda. Interaksi yang terus menerus akan memberikan persahabatan yang erat antara Anda dengan orang tersebut.</li>
<li>Jika artikel yang Anda sajikan memang bagus, maka tidak menutup kemungkinan jika Anda akan mendapatkan link-link yang lain. Bahkan tanpa Anda harus meminta tukar link dari mereka, blog Anda sudah terpasang di Blog mereka.</li>
</ol></div><div style="text-align: justify;"><span style="font-size: large;"><b>SISI NEGATIF :</b></span><br />
<br />
<ol><li>Mesin Pencari (<i>Search Engine</i>) tidak akan pernah berkunjung bahkan memberikan dampak yang baik untuk blog Anda jika link Anda ditaruh kedalam halaman <i>junk</i>. Halaman <i>junk</i> dengan banyak link-link dari hasil tukar link akan dianggap halaman SPAM oleh <i>Search Engine</i>, jadi tukar link tersebut menjadi sia-sia.</li>
<li>Siapa yang mau baca link-link yang berserakan dalam sebuah halaman? Siapa yang mau membaca dan kemudian berkunjung? Mungkin ada yang mau membaca dan berkunjung. Tapi, berapa persen kemungkinan yang akan terjadi? Dan berapa persen kemungkinan pengunjung itu akan kembali ke Blog Anda? Nah, tanyakan pada diri Anda sendiri.</li>
<li>Mau dipasang di <i>Blogroll</i> ataupun di halaman <i>Link Exchange</i>, jika link Anda ada di salah satu dari 1000 link yang ada, sepertinya Blog Anda akan sulit ditemukan. Salah satu langkah untuk mengantisipasinya adalah "<i>anchor text</i>". Kenapa <i>anchor text</i> ? Ya, karena anchor text adalah sebuah teks yang terpasang pada link tersebut. Jika anchor text tersebut menarik atau lagi trendi, pastinya link tersebut akan diklik. Misalnya, <b><a href="http://totto-apa-adanya.blogspot.com/2011/05/membuat-blog-lebih-menarik.html">Tips dan Trik Blog</a></b>.</li>
</ol>Ya, mungkin masih banyak lagi sisi-sisi negatif atau positif yang lainnya. Yang  pasti, disini saya tidak ada maksud untuk menjelekkan atau  menyanjung siapapun. Yang tertulis disini bersifat objektif dan bukan  subjektif. </div><div style="text-align: justify;"></div><div style="text-align: justify;">Baik, itu saja yang saya share. Semoga bermanfaat. Jika Anda ingin menambah, silahkan tulis di komentar. Terimakasih. </div>

Tukar Link, Bermanfaat atau Tidak? - Sebelumnya saya menulis artikel tentang tukar link yang berjudul Kesalahan dalam Tukar Link . Dan kali...

Menambah Tombol Add Comment jQuery

Mustofa Ali M Sunday, May 29, 2011

<div style="text-align: justify;"><b>Menambah Tombol Add Comment</b> <b>jQuery </b>- Prosedur ini sangat cocok bagi Blog yang mempunyai komentar banyak. Para pembaca umumnya sangat kesal, karena pembaca harus menarik kebawah slider atau scrool kebawah untuk memulai menulis komentar. Hal ini memang menyebalkan. Tapi tenang saja. Hal tersebut dapat dipecahkan dengan <b>Menambahkan Tombol Add Comment efek jQuery.</b> Berikut langkah langkah untuk menambahkannya.</div><div style="text-align: justify;"></div><div style="text-align: justify;"><br />
<i><b>Lihat screenshot :</b></i><br />
</div><div style="text-align: justify;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-NGZl_37mGM1XjEAimcozF6CfAacPicFr_say9gPsKtXgrb2pN7uSbNEEk7SV8k64dXZegj7A3v2SpSma48Ck97jANLZL0BOP6wNzfOBgb7Gd7Xh4Wmp1O9LfSn8KVHkzMrdqGKXlez8/s1600/Add+comment+button.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add Comment Button with jQuery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-NGZl_37mGM1XjEAimcozF6CfAacPicFr_say9gPsKtXgrb2pN7uSbNEEk7SV8k64dXZegj7A3v2SpSma48Ck97jANLZL0BOP6wNzfOBgb7Gd7Xh4Wmp1O9LfSn8KVHkzMrdqGKXlez8/s1600/Add+comment+button.PNG" title="Add Comment Button with jQuery" /></a></div><div style="text-align: justify;"></div><div style="text-align: justify;">Cara menambahkannya :<br />
1. Login ke <a href="http://blogger.com/">blogger.com</a><br />
2. Klik Rancangan / Design >> Klik Edit HTML<br />
3. Centang Expand Widget Template<br />
4. Cari kode <b>]]></b:skin></b><br />
5. Masukkan kode <b>CSS</b> dibawah ini <i>diatas</i> kode <b>]]></b:skin></b></div><blockquote><textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: #FFDAAF; border: 2px ridge #7F4500; color: #7f4500; line-height: 1.5em; padding: 5px;">a.add_comment{text-decoration:none;color:#fff}<br /> .add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}<br /> .add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}<br /> .add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

6. Cari kode <b:includable id='comments' var='post'>
7. Masukkkan kode dibawah ini dibawah kode <b:includable id='comments' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

Note :
- Ganti Add a comment dengan kata yang ingin ditampilkan.
- 1000 adalah angka kecepatan Slider jQuery.

8. Klik SIMPAN TEMPLATE

Menambah Tombol Add Comment jQuery - Prosedur ini sangat cocok bagi Blog yang mempunyai komentar banyak. Para pembaca umumnya sangat kesal,...