Trik Menjadikan Blog Kamu "DoFollow"

Telah diulas sebelumnya bahwa secara default blogger menganut paham nofollow, karena kemurnian sebuah blog akan terjamin dari makhluk-makhluk yang beratribut "SPAM". Yang pada akhirnya akan memberikan reaksi positif terhadap daftar pencarian di search engine google. Dilain sisi, blog yang dofollow bukan berarti kemurnian sebuah blog ternoda, melainkan oknum penyebablah yang menjadikan blog tersebut menjadi agak kurang disukai oleh search engine google. Oleh karena himbauan bagi para komentator "berpromosilah dengan sehat dan jangan dijadikan sebuah blog teman kamu menjadi gudang SPAM".

Karena secara default blogger menganut paham nofollow dan ketika kamu akan menjadikan blog kamu dofollow, maka kamu perlu melakukan trik-trik tertentu. Agar tidak berbelit-belit, mari bersama-sama kita cangkok trik blogger menjadikan blog agar dofollow.

• Login dulu ke account blogger kamu.
• Pilih tab 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 rel='nofollow', pada kode-kode di bawah ini.

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

Kode I :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Kode II :

<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>

• Hapus kode yang berwarna merah.
• Jangan lupa disimpan

Update: Apabila sebuah blog telah menggunakan threaded comments, umumnya blog itu tidak lagi “dofollow”.

Trik Menjadikan Blog Kamu "DoFollow"

Posted by rike No comments

Telah diulas sebelumnya bahwa secara default blogger menganut paham nofollow, karena kemurnian sebuah blog akan terjamin dari makhluk-makhluk yang beratribut "SPAM". Yang pada akhirnya akan memberikan reaksi positif terhadap daftar pencarian di search engine google. Dilain sisi, blog yang dofollow bukan berarti kemurnian sebuah blog ternoda, melainkan oknum penyebablah yang menjadikan blog tersebut menjadi agak kurang disukai oleh search engine google. Oleh karena himbauan bagi para komentator "berpromosilah dengan sehat dan jangan dijadikan sebuah blog teman kamu menjadi gudang SPAM".

Karena secara default blogger menganut paham nofollow dan ketika kamu akan menjadikan blog kamu dofollow, maka kamu perlu melakukan trik-trik tertentu. Agar tidak berbelit-belit, mari bersama-sama kita cangkok trik blogger menjadikan blog agar dofollow.

• Login dulu ke account blogger kamu.
• Pilih tab 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 rel='nofollow', pada kode-kode di bawah ini.

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

Kode I :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Kode II :

<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>

• Hapus kode yang berwarna merah.
• Jangan lupa disimpan

Update: Apabila sebuah blog telah menggunakan threaded comments, umumnya blog itu tidak lagi “dofollow”.

Komputer Tidak Mengeluarkan Suara

Komputer memang merupakan kebutuhan yang cukup lengkap. Fasilitas yang bisa didapat pada komputer selain sebagai sarana untuk membantu pekerjaan, komunikasi, bahkan juga merupakan sebuah hiburan yang sangat lengkap.



Dari komputer kita bisa memainkan game-game baik itu game online maupun game offline, selain itu juga kita bisa menyaksikan film-film atau sekedar mendengarkan irama musik sambil

Komputer Tidak Mengeluarkan Suara

Posted by rike No comments

Komputer memang merupakan kebutuhan yang cukup lengkap. Fasilitas yang bisa didapat pada komputer selain sebagai sarana untuk membantu pekerjaan, komunikasi, bahkan juga merupakan sebuah hiburan yang sangat lengkap.



Dari komputer kita bisa memainkan game-game baik itu game online maupun game offline, selain itu juga kita bisa menyaksikan film-film atau sekedar mendengarkan irama musik sambil

Trik Membuat Teks Berjalan (marquee)

Marquee merupakan kumpulan kode HTML yang jika diterjemahkan dalam bahasa web browser akan membentuk suatu animasi berupa teks atau image yang bergerak atau berjalan. Ketika kamu sedang melakukan silaturahim ke blog lain, tidak jarang kamu akan menemui blog yang menggunakan marquee ini. Tentunya hal tersebut mungkin akan menimbulkan satu pertanyaan tentang "bagaimana cara membuatnya?". Karena pokok bahasannya adalah "marquee", maka kode HTML-nya pun ikut-ikutan marquee, yakni <marquee> ... </marquee>.

Untuk lebih memahami tentang marquee (teks bergerak atau berjalan), mari bersama-sama kita telusuri trik blogger dengan menggunakan kode HTML marquee tersebut.

Berikut beberapa contoh dan manfaat dari kode teks berjalan (marquee) :

<marquee>Teks ini menggunakan marquee default</marquee>

Teks ini menggunakan marquee default

<marquee direction="right">Teks bergerak ke kanan</marquee>

Teks bergerak ke kanan

Catatan : "direction" merupakan kode yang berfungsi untuk menentukan arah gerakan teks atau image. Atributnya adalah left, right, up, dan down.

<marquee direction="up" height="50" width="50%">Teks berjalan ke atas yang dibatasi area tertentu</marquee>

Teks berjalan ke atas & dibatasi area tertentu

Catatan : "height" dan "width" berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks, atributnya berupa nilai angka atau prosen (%).

<marquee bgcolor="#f2f5a9" scrolldelay="2000" direction="down" scrollmount="2" height="50" width="75%">Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula</marquee>

Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula

Catatan : "scrolldelay" berfungsi mengatur waktu tunda, atributnya adalah angka per-mili detik. Sedangkan "scrollmount" digunakan untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakannya.

<marquee bgcolor="#cecef6" scrollmount="2">Teks berkecepatan tertentu dengan menggunakan latar warna biru muda</marquee>

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

Catatan : "bgcolor" mempunyai fungsi memberikan warna latar teks, atributnya adalah kode warna.

<marquee bgcolor="#f2f5a9" loop="4">Teks 4x berjalan, kemudian hilang</marquee>

Teks 4x berjalan, kemudian hilang

<marquee bgcolor="#cecef6" loop="4" behavior="slide">Teks 4x berjalan, kemudian berhenti</marquee>

Teks 4x berjalan, kemudian berhenti

Catatan : "loop" mempunyai fungsi mengatur jumlah gerakan, atributnya adalah angka. Semakin besar nilainya, maka semakin banyak pula gerakannya. Biasanya kode loop diikuti dengan kode behavior="slide", agar teks tidak hilang.

<marquee hspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak horizontal</marquee>

Teks berjalan

dan berjarak horizontalMarquee!

<marquee vspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak vertikal</marquee>

Marquee!

Teks berjalan

dan berjarak vertikal

Marquee!!

Catatan : "hspace" berguna mengatur jarak marquee dengan teks atau tepi elemen secara horizontal, atributnya adalah angka. Sedangkan "vspace" berfungsi untuk mengatur jarak marquee dengan teks atau tepi elemen secara vertikal, atributnya angka juga. Semakin besar nilainya, maka semakin besar jaraknya.

<marquee behavior="alternate">Teks ini akan berjalan bolak-balik</marquee>

Teks ini akan berjalan bolak-balik

Catatan : "behavior" berfungsi untuk mengatur perilaku gerakan teks dgn atribut yang mengikutinya seperti scroll (gerakan default ke kiri), slide (bergerak sekali lalu berhenti), dan alternate (bolak-balik).

Nah, sekarang bagaimana jika kamu ingin memasukkan jenis huruf (font-family) dan warna huruf (color). Kamu tinggal menambahkan kode <span> ... </span> diantara kode marquee, singkat kodenya seperti di bawah ini.

<span style="font-family:arial;color:#0000ff;"><marquee bgcolor="#f2f5a9" direction="down" behavior="alternate" scrollamount="10" height="100" width="50&">Teks arial warna biru</marquee></span>

Teks arial warna biru

Selain itu terdapat variasi lain yang apabila mouse didekatkan, maka teks akan berhenti. Dan akan bergerak kembali ketika mouse dipindahkan ke area lain.

<marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#cecef6" scrollamount="2" direction="up" width="75%" height="100" align="left">

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-kualitas-link-dalam-blog.html">Optimasi Kualitas Link dalam Blog</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/gratis-7-seo-tool.html">Gratis 7 SEO Tool</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-posting-blog.html">Optimasi Posting Blog</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-judul-blog-dalam-title-tag.html">Optimasi Judul Blog dalam Title Tag</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog.html">Optimasi Blog</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog-lewat-kata-kunci.html">Optimasi Blog lewat Kata Kunci</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/apa-itu-search-engine-optimization-seo.html">Apa itu SEO?</a><br/>

</marquee>

Optimasi Kualitas Link dalam Blog

Gratis 7 SEO Tool

Optimasi Posting Blog

Optimasi Judul Blog dalam Title Tag

Optimasi Blog

Optimasi Blog lewat Kata Kunci

Apa itu SEO?

Kalau kamu ingin yang berjalan bukan teks, melainkan image maka tinggal mengganti teks yang berwarna merah dengan alamat penyimpanan file gambar kamu.

<marquee><img src="http://i647.photobucket.com/albums/uu191/ariamsi/powered-by.jpg"/></marquee>

Catatan : Kode warna merah merupakan teks yang dimasukkan dalam kode marquee.

Dan masih banyak lagi variasi kode yang dapat kamu optimasi, sehingga sesuai dengan tipe dan karakteristik elemen di blog kamu. Point pentingnya adalah jangan tidak pernah mencoba, karena kamu nanti tidak akan pernah pula tahu arti dan maknanya.

Selamat mencoba marquee menurut versi kamu...

Trik Membuat Teks Berjalan (marquee)

Posted by rike No comments

Marquee merupakan kumpulan kode HTML yang jika diterjemahkan dalam bahasa web browser akan membentuk suatu animasi berupa teks atau image yang bergerak atau berjalan. Ketika kamu sedang melakukan silaturahim ke blog lain, tidak jarang kamu akan menemui blog yang menggunakan marquee ini. Tentunya hal tersebut mungkin akan menimbulkan satu pertanyaan tentang "bagaimana cara membuatnya?". Karena pokok bahasannya adalah "marquee", maka kode HTML-nya pun ikut-ikutan marquee, yakni <marquee> ... </marquee>.

Untuk lebih memahami tentang marquee (teks bergerak atau berjalan), mari bersama-sama kita telusuri trik blogger dengan menggunakan kode HTML marquee tersebut.

Berikut beberapa contoh dan manfaat dari kode teks berjalan (marquee) :

<marquee>Teks ini menggunakan marquee default</marquee>

Teks ini menggunakan marquee default

<marquee direction="right">Teks bergerak ke kanan</marquee>

Teks bergerak ke kanan

Catatan : "direction" merupakan kode yang berfungsi untuk menentukan arah gerakan teks atau image. Atributnya adalah left, right, up, dan down.

<marquee direction="up" height="50" width="50%">Teks berjalan ke atas yang dibatasi area tertentu</marquee>

Teks berjalan ke atas & dibatasi area tertentu

Catatan : "height" dan "width" berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks, atributnya berupa nilai angka atau prosen (%).

<marquee bgcolor="#f2f5a9" scrolldelay="2000" direction="down" scrollmount="2" height="50" width="75%">Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula</marquee>

Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula

Catatan : "scrolldelay" berfungsi mengatur waktu tunda, atributnya adalah angka per-mili detik. Sedangkan "scrollmount" digunakan untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakannya.

<marquee bgcolor="#cecef6" scrollmount="2">Teks berkecepatan tertentu dengan menggunakan latar warna biru muda</marquee>

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

Catatan : "bgcolor" mempunyai fungsi memberikan warna latar teks, atributnya adalah kode warna.

<marquee bgcolor="#f2f5a9" loop="4">Teks 4x berjalan, kemudian hilang</marquee>

Teks 4x berjalan, kemudian hilang

<marquee bgcolor="#cecef6" loop="4" behavior="slide">Teks 4x berjalan, kemudian berhenti</marquee>

Teks 4x berjalan, kemudian berhenti

Catatan : "loop" mempunyai fungsi mengatur jumlah gerakan, atributnya adalah angka. Semakin besar nilainya, maka semakin banyak pula gerakannya. Biasanya kode loop diikuti dengan kode behavior="slide", agar teks tidak hilang.

<marquee hspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak horizontal</marquee>

Teks berjalan

dan berjarak horizontalMarquee!

<marquee vspace="25" width="25%" bgcolor=yellow><p>Teks berjalan</p>dan berjarak vertikal</marquee>

Marquee!

Teks berjalan

dan berjarak vertikal

Marquee!!

Catatan : "hspace" berguna mengatur jarak marquee dengan teks atau tepi elemen secara horizontal, atributnya adalah angka. Sedangkan "vspace" berfungsi untuk mengatur jarak marquee dengan teks atau tepi elemen secara vertikal, atributnya angka juga. Semakin besar nilainya, maka semakin besar jaraknya.

<marquee behavior="alternate">Teks ini akan berjalan bolak-balik</marquee>

Teks ini akan berjalan bolak-balik

Catatan : "behavior" berfungsi untuk mengatur perilaku gerakan teks dgn atribut yang mengikutinya seperti scroll (gerakan default ke kiri), slide (bergerak sekali lalu berhenti), dan alternate (bolak-balik).

Nah, sekarang bagaimana jika kamu ingin memasukkan jenis huruf (font-family) dan warna huruf (color). Kamu tinggal menambahkan kode <span> ... </span> diantara kode marquee, singkat kodenya seperti di bawah ini.

<span style="font-family:arial;color:#0000ff;"><marquee bgcolor="#f2f5a9" direction="down" behavior="alternate" scrollamount="10" height="100" width="50&">Teks arial warna biru</marquee></span>

Teks arial warna biru

Selain itu terdapat variasi lain yang apabila mouse didekatkan, maka teks akan berhenti. Dan akan bergerak kembali ketika mouse dipindahkan ke area lain.

<marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#cecef6" scrollamount="2" direction="up" width="75%" height="100" align="left">

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-kualitas-link-dalam-blog.html">Optimasi Kualitas Link dalam Blog</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/gratis-7-seo-tool.html">Gratis 7 SEO Tool</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-posting-blog.html">Optimasi Posting Blog</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-judul-blog-dalam-title-tag.html">Optimasi Judul Blog dalam Title Tag</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog.html">Optimasi Blog</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog-lewat-kata-kunci.html">Optimasi Blog lewat Kata Kunci</a><br/>

<a href="http://optimasi-blog.blogspot.com/2009/03/apa-itu-search-engine-optimization-seo.html">Apa itu SEO?</a><br/>

</marquee>

Optimasi Kualitas Link dalam Blog

Gratis 7 SEO Tool

Optimasi Posting Blog

Optimasi Judul Blog dalam Title Tag

Optimasi Blog

Optimasi Blog lewat Kata Kunci

Apa itu SEO?

Kalau kamu ingin yang berjalan bukan teks, melainkan image maka tinggal mengganti teks yang berwarna merah dengan alamat penyimpanan file gambar kamu.

<marquee><img src="http://i647.photobucket.com/albums/uu191/ariamsi/powered-by.jpg"/></marquee>

Catatan : Kode warna merah merupakan teks yang dimasukkan dalam kode marquee.

Dan masih banyak lagi variasi kode yang dapat kamu optimasi, sehingga sesuai dengan tipe dan karakteristik elemen di blog kamu. Point pentingnya adalah jangan tidak pernah mencoba, karena kamu nanti tidak akan pernah pula tahu arti dan maknanya.

Selamat mencoba marquee menurut versi kamu...

Modifikasi Tampilan Judul Posting saat Mengklik Label

Dulu OB pernah memposting "Klik Label yang Tampil Judul Posting Saja", namun tampilan judul posting tersebut mengikuti default background dalam kode CSS main. Bagaimana jika kamu ingin tampil beda? Yah, mau tidak mau kamu harus melakukan modifikasi terhadap template blog yang telah ada. Kode dalam memodifikasi tampilan judul posting ini disadur dari kode membuat daftar isi dari Kang Rohman. Baiklah, supaya kepala tidak tambah puyeng dan dikitari oleh lebih banyak bintang-bintang. Let's go to start this tricks

• Masuk 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.

• Pembaharuan (13 Desember 2012) — Cari kode di bawah ini.

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

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

  Catatan : Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan trik klik label yang tampil judul posting saja.

• Ganti kode yang berwarna merah dengan kode berikut.

  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
    <data:post.title/>
  </div>

  Catatan: Silakan rubah kode yang berwarna hijau dengan kode warna yang sesuai dengan blog kamu.

• Cara menambahkan image panah biru di depan title post adalah dengan trik menyisipkan kode berwarna biru di bawah ini, ke dalam kode yang baru ditambahkan sebelumnya. Kode selengkapnya:

  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
  <img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png'/>
    <data:post.title/>
  </div>

• Jangan lupa disimpan.

Selamat memodifikasi judul posting saat mengklik label…

Modifikasi Tampilan Judul Posting saat Mengklik Label

Posted by rike No comments

Dulu OB pernah memposting "Klik Label yang Tampil Judul Posting Saja", namun tampilan judul posting tersebut mengikuti default background dalam kode CSS main. Bagaimana jika kamu ingin tampil beda? Yah, mau tidak mau kamu harus melakukan modifikasi terhadap template blog yang telah ada. Kode dalam memodifikasi tampilan judul posting ini disadur dari kode membuat daftar isi dari Kang Rohman. Baiklah, supaya kepala tidak tambah puyeng dan dikitari oleh lebih banyak bintang-bintang. Let's go to start this tricks

• Masuk 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.

• Pembaharuan (13 Desember 2012) — Cari kode di bawah ini.

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

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

  Catatan : Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan trik klik label yang tampil judul posting saja.

• Ganti kode yang berwarna merah dengan kode berikut.

  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
    <data:post.title/>
  </div>

  Catatan: Silakan rubah kode yang berwarna hijau dengan kode warna yang sesuai dengan blog kamu.

• Cara menambahkan image panah biru di depan title post adalah dengan trik menyisipkan kode berwarna biru di bawah ini, ke dalam kode yang baru ditambahkan sebelumnya. Kode selengkapnya:

  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
  <img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png'/>
    <data:post.title/>
  </div>

• Jangan lupa disimpan.

Selamat memodifikasi judul posting saat mengklik label…

Membuat Posting dalam Kotak yang Terpisah-pisah

Kalau sebelumnya kamu telah membuat sidebar dalam kotak yang terpisah-pisah, sekarang bagaimana dengan posting "apakah bisa juga diterapkan?" Ternyata dengan sedikit menambah atau memodifiksi kode CSS, posting pun dapat ditampilkan dalam kotak yang terpisah-pisah. Penasaran dimana letak kode yang perlu ditambah atau dimodifikasi, mari bersama-sama kita ikuti trik bloggernya sebagai berikut.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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 CSS .post antara <head> ... </head>. Kodenya lebih kurang seperti berikut.
  
  

.post {

margin:.5em 0 1.5em;

padding-bottom:1.5em;

}

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

Catatan :

Kode template mungkin berbeda tapi cari yang memiliki kemiripan (.post). Atau jika belum ada maka tambahkan kode tersebut.

• Modifikasi kode .post, seperti dibawah ini.

.post {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Tambahan :

Rasanya kurang afdol apabila posting ditampilkan dalam kotak terpisah tanpa diikuti pula dengan komentar, karena akan kelihatan janggal dan kurang seimbang. Nah, untuk membuat komentar dalam kotak yang terpisah cukup dengan menambahkan kode berikut (tergantung karakteristik kode template masing-masing blog).

.comments {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Catatan :

Sesuaikan kode dengan tampilan template blog kamu, jangan asal copy-paste.

• Kamu bisa membuat kotak posting dan komentar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.


• Jangan lupa di simpan.

Selamat membuat posting dalam kotak yang terpisah-pisah...

Membuat Posting dalam Kotak yang Terpisah-pisah

Posted by rike No comments

Kalau sebelumnya kamu telah membuat sidebar dalam kotak yang terpisah-pisah, sekarang bagaimana dengan posting "apakah bisa juga diterapkan?" Ternyata dengan sedikit menambah atau memodifiksi kode CSS, posting pun dapat ditampilkan dalam kotak yang terpisah-pisah. Penasaran dimana letak kode yang perlu ditambah atau dimodifikasi, mari bersama-sama kita ikuti trik bloggernya sebagai berikut.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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 CSS .post antara <head> ... </head>. Kodenya lebih kurang seperti berikut.
  
  

.post {

margin:.5em 0 1.5em;

padding-bottom:1.5em;

}

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

Catatan :

Kode template mungkin berbeda tapi cari yang memiliki kemiripan (.post). Atau jika belum ada maka tambahkan kode tersebut.

• Modifikasi kode .post, seperti dibawah ini.

.post {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Tambahan :

Rasanya kurang afdol apabila posting ditampilkan dalam kotak terpisah tanpa diikuti pula dengan komentar, karena akan kelihatan janggal dan kurang seimbang. Nah, untuk membuat komentar dalam kotak yang terpisah cukup dengan menambahkan kode berikut (tergantung karakteristik kode template masing-masing blog).

.comments {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Catatan :

Sesuaikan kode dengan tampilan template blog kamu, jangan asal copy-paste.

• Kamu bisa membuat kotak posting dan komentar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.


• Jangan lupa di simpan.

Selamat membuat posting dalam kotak yang terpisah-pisah...

Membuat Sidebar dalam Kotak yang Terpisah-pisah

Kadang kita ingin memodifikasi template blog menjadi lebih trendy dan tidak ketinggalan zaman. Dengan catatan tanpa membebani loading blog tentunya. Banyak cara dan trik optimasi agar blog tampil lebih oke, salah satunya adalah membuat tampilan sidebar dalam kotak yang terpisah-pisah. Rekomendasinya trik blogger ini lebih bagus jika diterapkan pada template yang memiliki 2 (dua) kolom, karena akan kelihatan lebih hidup tanpa harus memikirkan perataan terhadap kolom-kolom elemen halaman sidebar. Tapi tidak menutup kemungkinan pula, apabila template yang mempunyai lebih dari 2 (dua) kolom untuk ikut serta menerapkan trik blogger ini.

Adapun langkah-langkahnya adalah sebagai berikut :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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 CSS sidebar antara <head> ... </head>

.sidebar .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

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

Catatan :

Kode template tiap blog mungkin berbeda tapi cari yang memiliki kemiripan (.sidebar .widget). Atau jika belum ada maka tambahkan kode tersebut.

• Modifikasi kode .sidebar .widget, seperti dibawah ini.

.sidebar .widget {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Artinya setiap widget yang kamu tambahkan dalam elemen sidebar akan dipisahkan (margin:0 0 1.5em;) sebesar 1,5em ke bawah. Kotak sidebar tersebut berlatar putih (#fff) dan memiliki garis tepi berwarna abu-abu (#6E6E6E), sedangkan jarak teks dengan tepi kotak (padding:0.5em;) sebesar 0.5em.

• Kamu bisa membuat kotak sidebar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.


• Jangan lupa di simpan

Sumber : Membuat Sidebar Dalam Kotak-Kotak Terpisah by Kang Rohman

Selamat membuat kotak sidebar terpisah-pisah...

Membuat Sidebar dalam Kotak yang Terpisah-pisah

Posted by rike No comments

Kadang kita ingin memodifikasi template blog menjadi lebih trendy dan tidak ketinggalan zaman. Dengan catatan tanpa membebani loading blog tentunya. Banyak cara dan trik optimasi agar blog tampil lebih oke, salah satunya adalah membuat tampilan sidebar dalam kotak yang terpisah-pisah. Rekomendasinya trik blogger ini lebih bagus jika diterapkan pada template yang memiliki 2 (dua) kolom, karena akan kelihatan lebih hidup tanpa harus memikirkan perataan terhadap kolom-kolom elemen halaman sidebar. Tapi tidak menutup kemungkinan pula, apabila template yang mempunyai lebih dari 2 (dua) kolom untuk ikut serta menerapkan trik blogger ini.

Adapun langkah-langkahnya adalah sebagai berikut :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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 CSS sidebar antara <head> ... </head>

.sidebar .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

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

Catatan :

Kode template tiap blog mungkin berbeda tapi cari yang memiliki kemiripan (.sidebar .widget). Atau jika belum ada maka tambahkan kode tersebut.

• Modifikasi kode .sidebar .widget, seperti dibawah ini.

.sidebar .widget {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Artinya setiap widget yang kamu tambahkan dalam elemen sidebar akan dipisahkan (margin:0 0 1.5em;) sebesar 1,5em ke bawah. Kotak sidebar tersebut berlatar putih (#fff) dan memiliki garis tepi berwarna abu-abu (#6E6E6E), sedangkan jarak teks dengan tepi kotak (padding:0.5em;) sebesar 0.5em.

• Kamu bisa membuat kotak sidebar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.


• Jangan lupa di simpan

Sumber : Membuat Sidebar Dalam Kotak-Kotak Terpisah by Kang Rohman

Selamat membuat kotak sidebar terpisah-pisah...

Membuat Menu Horizontal

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

• Login ke account 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 kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

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

/* navbar

================== */



#bg_nav {

background: #ffffff;

width: 850px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #000000;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #000000;

border-bottom: 1px solid #ffffff;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #000000;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}



#bg_nav a:hover {

color: #000000;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}



#navleft {

width: 500px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 220px;

font-size: 11px;

float: right;

margin: 0px;

padding: 3px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 3px 5px 0px 0px;

}



#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}



#nav a, #nav a:visited {

background: #ffffff;

color: #000000;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #ffffff;

}

#nav a:hover {

background: #c06000;

color: #000000;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}



#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

}

#nav li li a:hover, #nav li li a:active {

background: #c06000;

padding: 7px 30px 7px 10px;

}



#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}



#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

Catatan :

1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.


2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.


3. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.

• Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1'

showaddelement='no'>

<b:widget id='Header1' locked='true' title='test

(Header)' type='Header'/>



... dan seterusnya ...



</b:section>

</div>

• Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>



<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>



<div id='navright'>



<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>

</form>



</div>



</div><!-- akhir bg_nav -->

• Jangan lupa disimpan

Baca juga postingan : Dasar Pembuatan Menu Horizontal

Sumber : Tutorial Membuat Horizontal Navigasi by Kang Rohman

Update

Permasalahannya terjadi pada dropdown yang blink ketika di dekati mouse. Kode CSS yang perlu diperbaiki adalah sebagai berikut

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position:absolute;
}

Kemudian agar teks dalam menu utama dapat menyesuaikan dengan ukuran karakter yang Anda masukkan, maka perlu pula memperbaiki kode CSS seperti yang tampak di bawah ini.

#nav li {
float: left;
margin: 0px;
padding: 0px;
position:relative;
}

Kode CSS yang berwarna merah merupakan penambahan dari kode CSS navigasi menu horizontal sebelumnya. Saya mohon maaf atas ketidak nyamanan ini.

Update 26 September 2011

Jika Anda terasa sulit untuk menerjemahkan beberapa kode yang cukup banyak di atas. Saya menyediakan tautan lain untuk membuat menu navigasi horizontal yang tutorialnya mudah diikuti. Silakan klik tautan berikut untuk menuju ke artikel yang saya maksud Mudahnya membuat Menu Horizontal dan Dropdown Menu Navigasi Horizontal.

Membuat Menu Horizontal

Posted by rike No comments

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

• Login ke account 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 kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

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

/* navbar

================== */



#bg_nav {

background: #ffffff;

width: 850px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #000000;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #000000;

border-bottom: 1px solid #ffffff;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #000000;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}



#bg_nav a:hover {

color: #000000;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}



#navleft {

width: 500px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 220px;

font-size: 11px;

float: right;

margin: 0px;

padding: 3px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 3px 5px 0px 0px;

}



#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}



#nav a, #nav a:visited {

background: #ffffff;

color: #000000;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #ffffff;

}

#nav a:hover {

background: #c06000;

color: #000000;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}



#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

}

#nav li li a:hover, #nav li li a:active {

background: #c06000;

padding: 7px 30px 7px 10px;

}



#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}



#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

Catatan :

1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.


2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.


3. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.

• Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1'

showaddelement='no'>

<b:widget id='Header1' locked='true' title='test

(Header)' type='Header'/>



... dan seterusnya ...



</b:section>

</div>

• Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>



<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>



<div id='navright'>



<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>

</form>



</div>



</div><!-- akhir bg_nav -->

• Jangan lupa disimpan

Baca juga postingan : Dasar Pembuatan Menu Horizontal

Sumber : Tutorial Membuat Horizontal Navigasi by Kang Rohman

Update

Permasalahannya terjadi pada dropdown yang blink ketika di dekati mouse. Kode CSS yang perlu diperbaiki adalah sebagai berikut

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position:absolute;
}

Kemudian agar teks dalam menu utama dapat menyesuaikan dengan ukuran karakter yang Anda masukkan, maka perlu pula memperbaiki kode CSS seperti yang tampak di bawah ini.

#nav li {
float: left;
margin: 0px;
padding: 0px;
position:relative;
}

Kode CSS yang berwarna merah merupakan penambahan dari kode CSS navigasi menu horizontal sebelumnya. Saya mohon maaf atas ketidak nyamanan ini.

Update 26 September 2011

Jika Anda terasa sulit untuk menerjemahkan beberapa kode yang cukup banyak di atas. Saya menyediakan tautan lain untuk membuat menu navigasi horizontal yang tutorialnya mudah diikuti. Silakan klik tautan berikut untuk menuju ke artikel yang saya maksud Mudahnya membuat Menu Horizontal dan Dropdown Menu Navigasi Horizontal.

Galat Blogger Berkode bX-193ra1

Ternyata OB baru-baru ini (selama 3 hari) mengalami error di blogger. Error tersebut berkode "bx-193ra1", OB dibuat kelimpungan dengan galat tersebut. OB juga cari-cari informasi di blogger help dan hasilnya nihil. Memang ada sih beberapa pengguna blogger yang mengalami galat bx-193ra1, tapi masih belum ada jawabannya. Mungkin kamu pada bertanya seperti ini "Apa maksud dari galat berkode bx-193ra1 itu? Galat bx-193ra1 berarti blog kamu tidak bisa disimpan ketika kamu melakukan "Edit Layout" (Tata Letak --> Elemen Halaman). Coba bayangkan saat kita memindah posisi elemen, namun tidak bisa disimpan dan tiba-tiba muncul jendela error blogger bertuliskan bx-193ra1. Keblinger kan!!!

Alhamdulillah... Setelah selidik punya selidik dan sedikit melakukan bongkar pasang kode HTML, akar permasalahan tersebut dapat ditemukan. Rupa-rupanya yang menjadi biang keringat ...eh... biang keladi maksudnya adalah kode berikut :

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

</b:if>

Eit.. jangan langsung menarik kesimpulan kepagian dong. Apabila digunakan secara normal dengan mengikuti sistem pengkodean yang benar, kode HTML di atas tidak akan menimbulkan permasalahan. Karena kode tersebut berfungsi untuk menyembunyikan perangkat widget/gadget pada halaman depan blog kamu dan akan terlihat jika kamu atau pengunjung blog mengklik sebuah posting.



Kemudian yang menjadi masalah adalah apabila kode HTML itu diletakkan diantara kode <widget> ... </widget> (tidak didalam perangkat widget/gadget), sehingga jika kamu membuka "Edit Layout" (Tata Letak --> Elemen Halaman) widget tersebut tidak akan terlihat sama sekali. Adapun alternatif pemecahannya adalah dengan menghilangkan atau memindahkan kode HTML yang bersangkutan ke tempatnya yang benar, yakni didalam perangkat widget.

Contoh penempatan kode yang tepat :

<b:widget id='HTML111' locked='false' title='Poting yang berkaitan' type='HTML'>

<b:includable id='main'>

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

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Contoh penempatan kode yang kurang/tidak tepat :

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

<b:widget id='HTML111' locked='false' title='Poting yang berkaitan' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:if>

Sekarang sudah tahu kan tentang serba-serbi galat bx-193ra1 ...

Galat Blogger Berkode bX-193ra1

Posted by rike No comments

Ternyata OB baru-baru ini (selama 3 hari) mengalami error di blogger. Error tersebut berkode "bx-193ra1", OB dibuat kelimpungan dengan galat tersebut. OB juga cari-cari informasi di blogger help dan hasilnya nihil. Memang ada sih beberapa pengguna blogger yang mengalami galat bx-193ra1, tapi masih belum ada jawabannya. Mungkin kamu pada bertanya seperti ini "Apa maksud dari galat berkode bx-193ra1 itu? Galat bx-193ra1 berarti blog kamu tidak bisa disimpan ketika kamu melakukan "Edit Layout" (Tata Letak --> Elemen Halaman). Coba bayangkan saat kita memindah posisi elemen, namun tidak bisa disimpan dan tiba-tiba muncul jendela error blogger bertuliskan bx-193ra1. Keblinger kan!!!

Alhamdulillah... Setelah selidik punya selidik dan sedikit melakukan bongkar pasang kode HTML, akar permasalahan tersebut dapat ditemukan. Rupa-rupanya yang menjadi biang keringat ...eh... biang keladi maksudnya adalah kode berikut :

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

</b:if>

Eit.. jangan langsung menarik kesimpulan kepagian dong. Apabila digunakan secara normal dengan mengikuti sistem pengkodean yang benar, kode HTML di atas tidak akan menimbulkan permasalahan. Karena kode tersebut berfungsi untuk menyembunyikan perangkat widget/gadget pada halaman depan blog kamu dan akan terlihat jika kamu atau pengunjung blog mengklik sebuah posting.



Kemudian yang menjadi masalah adalah apabila kode HTML itu diletakkan diantara kode <widget> ... </widget> (tidak didalam perangkat widget/gadget), sehingga jika kamu membuka "Edit Layout" (Tata Letak --> Elemen Halaman) widget tersebut tidak akan terlihat sama sekali. Adapun alternatif pemecahannya adalah dengan menghilangkan atau memindahkan kode HTML yang bersangkutan ke tempatnya yang benar, yakni didalam perangkat widget.

Contoh penempatan kode yang tepat :

<b:widget id='HTML111' locked='false' title='Poting yang berkaitan' type='HTML'>

<b:includable id='main'>

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

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Contoh penempatan kode yang kurang/tidak tepat :

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

<b:widget id='HTML111' locked='false' title='Poting yang berkaitan' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:if>

Sekarang sudah tahu kan tentang serba-serbi galat bx-193ra1 ...

Membuat Widget Label Berborder Bawah

Sulit juga bikin judul yang mengena dengan isi postingan, pokoknya seperti itulah. Agar tidak membayangkan yang lain, seperti apa rupanya langsung lihat contoh di sidebar kanan widget blog OB. Nah, di sana tempat lahir beta... Ups!?? Maksudnya kamu lihat label yang ada tambahan icon di depan label (panah biru) dan bergaris putus-putus di bawahnya. Dan ini juga sekaligus jawaban atas pertanyaan Caplin_Banjar dalam komentarnya di posting "Trik Memasang Fungsi Scroll".

Dengan tidak panjang lebar langsung kita kupas trik blogger untuk membuat label tersebut :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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 berikut diantara <head> ... </head>:

.sidebar li {

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

atau kode-kode yang sejenis dalam template blog kamu.

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

• Tambahkan kode yang berwarna hijau berikut, di bawah kode di atas

background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;

border-bottom:1px dotted #000000;

Artinya : Kamu mengganti icon daftar urutan dengan image di alamat penyimpanan file image kamu (ex : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png) dan menambah border (warna hitam) di bawah item daftar urutan label dengan garis putus-putus.

• Sehingga full kodenya adalah

.sidebar li {

background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;

border-bottom:1px dotted #000000;

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

• Jangan lupa disimpan

Posting yang berkaitan : Trik Blogger | Menghilangkan Angka Jumlah Label



Mudah bukan, selamat membuat widget label berborder bawah...

Membuat Widget Label Berborder Bawah

Posted by rike No comments

Sulit juga bikin judul yang mengena dengan isi postingan, pokoknya seperti itulah. Agar tidak membayangkan yang lain, seperti apa rupanya langsung lihat contoh di sidebar kanan widget blog OB. Nah, di sana tempat lahir beta... Ups!?? Maksudnya kamu lihat label yang ada tambahan icon di depan label (panah biru) dan bergaris putus-putus di bawahnya. Dan ini juga sekaligus jawaban atas pertanyaan Caplin_Banjar dalam komentarnya di posting "Trik Memasang Fungsi Scroll".

Dengan tidak panjang lebar langsung kita kupas trik blogger untuk membuat label tersebut :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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 berikut diantara <head> ... </head>:

.sidebar li {

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

atau kode-kode yang sejenis dalam template blog kamu.

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

• Tambahkan kode yang berwarna hijau berikut, di bawah kode di atas

background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;

border-bottom:1px dotted #000000;

Artinya : Kamu mengganti icon daftar urutan dengan image di alamat penyimpanan file image kamu (ex : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png) dan menambah border (warna hitam) di bawah item daftar urutan label dengan garis putus-putus.

• Sehingga full kodenya adalah

.sidebar li {

background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;

border-bottom:1px dotted #000000;

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

• Jangan lupa disimpan

Posting yang berkaitan : Trik Blogger | Menghilangkan Angka Jumlah Label



Mudah bukan, selamat membuat widget label berborder bawah...

Lama Tak Jumpa

Sudah lama banget rasanya ngga bikin posting. Waktu terasa begitu cepat, maklum OB sambil kerja jadi tidak selalu online. Kali ini pun postingan masih berkisar tentang kata-kata mutiara, tanpa ada embel-embel tips SEO atau trik blogger. Di kantor tempat OB bekerja memerlukan target pencapaian yang sedemikian sulit, sehingga waktu untuk online pun tersita bahkan ngga online sampai lebih dari seminggu. Mungkin ada teman-teman yang berkomentar dan mengunjungi blog Optimasi Blog belum dibalas komentar serta kunjungannya, OB minta maaf (he..he..he).

Sekarang OB akan balas kunjungan dan komentarnya ke blog kamu. Nantikan OB di blog kamu serta jangan menyesal telah mengunjungi Optimasi Blog. Karena Blog tanpa kunjungan akan terasa hampa, sebaliknya blog yang telah mendapat kunjungan tapi ngga balas mengunjungi, nanti dikatain sombong.



Yuk, saling mengunjungi dan berikan komentar dalam blog yang kamu kunjungi...

Lama Tak Jumpa

Posted by rike No comments

Sudah lama banget rasanya ngga bikin posting. Waktu terasa begitu cepat, maklum OB sambil kerja jadi tidak selalu online. Kali ini pun postingan masih berkisar tentang kata-kata mutiara, tanpa ada embel-embel tips SEO atau trik blogger. Di kantor tempat OB bekerja memerlukan target pencapaian yang sedemikian sulit, sehingga waktu untuk online pun tersita bahkan ngga online sampai lebih dari seminggu. Mungkin ada teman-teman yang berkomentar dan mengunjungi blog Optimasi Blog belum dibalas komentar serta kunjungannya, OB minta maaf (he..he..he).

Sekarang OB akan balas kunjungan dan komentarnya ke blog kamu. Nantikan OB di blog kamu serta jangan menyesal telah mengunjungi Optimasi Blog. Karena Blog tanpa kunjungan akan terasa hampa, sebaliknya blog yang telah mendapat kunjungan tapi ngga balas mengunjungi, nanti dikatain sombong.



Yuk, saling mengunjungi dan berikan komentar dalam blog yang kamu kunjungi...