Minggu, 15 Mei 2011

Cara Memasang Gadget Label di Blogger

Gadget atau widget label ini akan menampilkan semua label dari posting dalam blog kita. Di widget ini kita juga dapat memilih apakah semua label ditampilkan atau hanya label-label tertentu saja yang mau ditampilkan. Label-label dapat disusun berdasarkan alfabet atau frekuensinya. Gadget ini terdiri dari dua tipe yaitu label daftar atau list dan label cloud. Di sini kita juga dapat menampilkan jumlah entri per label.

Berikut ini langkah-langkah memasang gadget atau widget label di sidebar pada Blogger.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Di Dasar-dasar, silakan pilih Label.


4. Kemudian konfigurasikan label sesuai dengan keinginan Anda.


5. Jika sudah, silakan klik tombol SIMPAN.

6. Pindahkan elemen ke tempat yang Anda inginkan.

7. Klik tombol SIMPAN.

8. Selesai.

Cara Membatasi Jumlah Posting yang Tampil pada Label

Kita dapat mengatur berapa jumlah posting yang ingin ditampilkan di halaman beranda atau home page blog kita. Apakah kita juga dapat membatasi jumlah posting yang tampil dalam satu halaman ketika sebuah label diklik? Jawabannya bisa.

Memang sebuah label jika diklik akan menampilkan semua posting di bawah label tersebut. Bila sebuah label telah mempunyai jumlah posting yang cukup banyak, tentu hal ini akan membuat loading blog terasa berat, kita batasi saja jumlah posting yang tampil di satu halamannya sesuai dengan keinginan kita.

Untuk membatasi jumlah posting yang tampil dalam satu halaman saat label diklik, kita perlu menambahkan kode pembatas seperti di bawah ini.

+ "?max-results=5"

Angka 5 di atas menunjukkan berapa banyak jumlah posting yang ditampilkan per halamannya. Silakan ganti sesuai dengan keinginan Anda.

Berikut ini akan kita praktikkan di template blog kita. Namun, sebelumnya pastikan bahwa Anda sudah memasang widget label di sidebar blog Anda. Labelnya bisa label berbentuk daftar atau list atau label yang berbentuk cloud.

1. Masuk ke akaun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template. Hal ini dilakukan untuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode seperti di bawah ini. Gunakan Ctrl + F untuk memudahkan pencarian.

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

6. Tambahkan kode pembatas + &quot;?max-results=5&quot;

7. Sehingga hasilnya akan seperti di bawah ini.

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

8. Kode di atas adalah kode untuk label yang berbentuk list. Sedangkan untuk label cloud, silakan cari kode seperti di bawah ini. Letaknya di bawah kode label list.

<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>

9. Tambahkan kode pembatas + &quot;?max-results=5&quot;

10. Maka hasilnya akan tampak seperti di bawah ini.

<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>

11. Klik tombol SIMPAN TEMPLATE.

12. Selesai.

Cara di atas berlaku pada sebuah label yang diklik di widget label, baik label daftar atau label cloud. Namun, untuk link label yang terdapat di menu navigasi breadcrumbs dan post footer line, link label tersebut bila diklik masih menampilkan semua posting. Nah, bila Anda ingin membatasi juga jumlah posting yang tampil pada label di kedua lokasi tersebut, silakan simak langkah-langkahnya di bawah ini.

1. Lakukan langkah no. 1 - 4 pada langkah di atas.

2. Cari kode seperti di bawah ini  atau yang mirip dengan kode tersebut, yaitu kode untuk menu navigasi breadcrumbs.

<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>

3. Tambahkan kode pembatasnya, maka hasilnya seperti di bawah ini.

<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>

4. Cari kode seperti ini di bawah ini atau yang mirip dengan kode tersebut, yaitu kode untuk label pada post footer line.

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

5. Kemudian tambahkan kode pembatasnya, maka jadinya akan seperti di bawah ini.

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai.

Sabtu, 14 Mei 2011

Cara Menampilkan Navbar Blogger

Bagi rekan-rekan blogger yang tidak menggunakan template bawaan Blogger alias memakai template buatan pihak lain, biasanya tidak mendapati navbar di template tersebut. Hal ini karena pembuat template menyembunyikan navbar tersebut sehingga tidak terlihat oleh mata. Nah, bagi Anda yang ingin menampilkan atau memunculkan kembali navbar tersebut, berikut ini langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template. Hal ini untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.

4. Cari kode seperti di bawah ini atau yang mirip-mrip dengan kode tersebut. Tekan tombol Ctrl + F untuk memudahkan pencarian.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

5. Hapus kode tersebut.

6. Klik tombol SIMPAN TEMPLATE.

Sampai di sini kita sudah berhasil menampilkan kembali navbar Blogger. Sekarang bila Anda ingin mengubah warna navbar atau menyesuaikannya dengan warna template Anda, silakan simak langkah-langkahnya di bawah ini.

1. Klik Rancangan > Elemen Laman.

2. Klik Edit pada elemen Navbar.

3. Silakan pilih warna dari navbar yang Anda inginkan.


4. Klik tombol SIMPAN.

5. Selesai.

Jumat, 13 Mei 2011

Cara Membuat Pesan-pesan Berjalan di Title Tab Browser

Membuat teks atau tulisan berjalan pada title tab browser merupakan salah satu usaha untuk mempercantik tampilan blog agar terlihat menarik di mata pengunjung. Isi dari tulisan tersebut dapat berupa pesan-pesan untuk ditujukan atau untuk dibaca bagi para pengunjung blog. Dengan memasang widget atau gadget ini dapat membuat blog kita terlihat berbeda dengan blog orang lain.

Tulisan atau pesan-pesan berjalan ini tidak hanya muncul di title tab browser, namun widget ini juga dapat terlihat di judul window atau jendela sistem operasi. Selain itu, gadget ini juga ada di tab jendela sistem operasi. Pesan-pesan berjalan ini nantinya akan menggantikan judul blog atau judul artikel yang biasa menempati ketiga lokasi tersebut. Namun, untuk beberapa saat judul blog atau judul artikel masih dapat muncul sebelum digantikan oleh teks berjalan tersebut.

Saat widget ini bekerja, gerakannya terlihat seperti tampilan huruf-huruf yang sedang diketik pada layar monitor. Gerakannya akan terlihat rapi dan teratur. Gerakannya berbeda dengan marquee yang biasa. Nah, bila Anda berminat utnuk memasang gadget ini, silakan simak dan ikuti langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pada Dasar-dasar, pilih HTML/JavaScript.

4. Copy kode di bawah ini dan paste di Konten.

<script type="text/javascript">
function tb8_makeArray(n){
this.length = n;
return this.length;
}

tb8_messages = new tb8_makeArray(4);
tb8_messages[0] = "Klik Munadi";
tb8_messages[1] = "Selamat Datang";
tb8_messages[2] = "Semoga blog ini bermanfaat";
tb8_messages[3] = "Terima kasih atas kunjungan Anda";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

Silakan diganti tulisan yang berwarna merah dengan pesan-pesan Anda.

5. Klik tombol SIMPAN.

6. Taruh elemen di posisi terbawah dari susunan gadget Anda.

7. Klik tombol SIMPAN.

8. Selesai.