About

Loading Klasemen...
Loading...
man of the match
Tampilkan postingan dengan label blogging. Tampilkan semua postingan
Tampilkan postingan dengan label blogging. Tampilkan semua postingan
Label:

Tips Cara Membuat Judul Posting Berkedip

Selain membuat link atau tulisan berkedip-kedip di dalam isi posting, kita juga dapat membuat judul posting itu berkedip-kedip. Harapannya adalah agar kata yang dibuat berkedip-kedip lebih diperhatikan oleh pembaca. Selain itu, judul yang berkedip-kedip membuat tampilan posting jadi lebih menarik. Berikut ini langkah-langkah untuk membuat judul posting berkedip-kedip:

Langkah 1
Masuk ke akun Blogger Anda.

Langkah 2
Klik tombol ENTRI BARU.

Langkah 3
Tambahkan kode <blink> dan </blink> pada bagian kata judul yang ingin dibuat berkedip-kedip. Misalnya, untuk judul posting yang sedang Anda baca ini, bentuk penulisan judulnya seperti ini.
Cara Membuat Judul Posting <blink>Berkedip-kedip</blink>

Langkah 4
Tulis posting Anda seperti biasa.

Langkah 5
Isikan Label.

Langkah 6
Klik tombol PRATINJAU untuk melihat preview-nya.

Langkah 7
Jika sudah yakin, klik tombol TERBITKAN ENTRI untuk mem-publish artikel Anda.

Label:

Tips Cara Membuat Judul Blog Berjalan

Banyak cara yang dapat dilakukan untuk mempercantik tampilan suatu blog agar terlihat menarik di mata para pengunjung. Salah satunya adalah dengan membuat judul blog tersebut berjalan atau bergerak pada title bar browser seperti fungsi Marquee. Tidak seperti membuat teks berjalan pada fungsi marquee yang membutuhkan tag <marquee>, di sini kita memerlukan JavaScript tertentu untuk membuat judul blog berjalan. Untuk membuat judul/title blog berjalan, berikut ini langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Back-up template dengan mengeklik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.

4. Cari tag <head>.

5. Copy kode di bawah ini dan paste-kan di bawah tag <head> tersebut.

<script language='JavaScript'>
var txt=&quot; <data:blog.pageTitle/> &quot;;
var kecepatan=200;
var segarkan=null;
function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}
bergerak();
</script>

6. Untuk mengubah kecepatan silakan ganti angka 200 pada var kecepatan=200; semakin rendah nilainya semakin cepat gerakannya.

7. Klik tombol SIMPAN TEMPLATE

Label:

Tips Cara Membuat Gambar Berjalan

Selain teks atau tulisan, kita juga dapat membuat gambar bisa berjalan atau bergerak dengan marquee. Caranya adalah dengan menyisipkan URL gambar ke kode program marquee. Namun, sebelumnya kita harus mengunggah atau meng-upload gambar ke layanan penyimpan gambar online, semacam Photobucket, untuk mendapatkan link dari gambar tersebut.

Dalam program marquee, kita juga dapat menyisipkan elemen lainnya seperti link atau tautan dengan berprinsip sebagai berikut:

<marquee>
TEKS, GAMBAR, TEKS TAUTAN, GAMBAR TAUTAN, DAN LAIN SEBAGAINYA.
</marquee>

Contoh:

Di bawah ini ada 2 URL gambar yang akan dimasukkan ke program marquee.
  1. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=KLIKMUNADI.jpg" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" border="0" alt="Klik Munadi"></a>
  2. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" border="0" alt="Photobucket"></a>
Lalu kedua URL gambar tersebut akan kita sisipkan ke kode marquee di bawah ini.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">
<a href="http://i1230.photobucket.com/albums/ee483/ben345/?action=view&amp;current=hhh.jpg" target="_blank"><img src="http://i1230.photobucket.com/albums/ee483/ben345/hhh.jpg" border="0" alt="seminkota"></a>

<a href="http://i1230.photobucket.com/albums/ee483/ben345/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1230.photobucket.com/albums/ee483/ben345/headkamera.jpg" border="0" alt="Photobucket"></a>
</marquee>

Maka hasilnya akan seperti di bawah ini.


Bila kedua gambar tersebut diberi tautan atau link target sesuai keinginan saya, maka hasil akhir dari URL gambar tersebut akan seperti di bawah ini.
  1. <a href="http://seminkota.blogspot.com/" target="_blank"><img src="http://i1230.photobucket.com/albums/ee483/ben345/hhh.jpg" /></a>
  2. <a href="http://digidesain.blogspot.com/" target="_blank"><img src="http://i1230.photobucket.com/albums/ee483/ben345/headkamera.jpg" /></a>
Selanjutnya kedua URL di atas kita masukkan ke kode marquee seperti di bawah ini.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">
<a href="http://seminkota.blogspot.com/" target="_blank"><img src="http://i1230.photobucket.com/albums/ee483/ben345/hhh.jpg" /></a>

<a href="http://digidesain.blogspot.com/" target="_blank"><img src="http://i1230.photobucket.com/albums/ee483/ben345/headkamera.jpg" /></a>
</marquee>


Contoh kode marquee di atas adalah salah satunya saja. Masih ada lagi ragam marquee yang lain yang dapat Anda pelajari di Cara Membuat Marquee di Blogger. Selain itu, Anda dapat juga menambahkan kode-kode yang lain ke dalam kode marquee sesuai keinginan atau kreativitas Anda sendiri.

Label:

Cara Memasang Alexa Site Stats Button Di Blogger

Menurut pembahasan di banyak blog, dengan memasang widget Alexa dapat menaikkan peringkat Alexa suatu blog. Selain memasang Alexa Traffic Rank Button, kita juga dapat memasang Alexa Site Stats Button pada sidebar blog. Di button ini terdapat informasi berupa Rank: atau peringkat Alexa dan Links in:.

Links in: menunjukkan informasi jumlah situs yang di dalamnya terdapat link yang mengarah ke blog kita. Hal ini biasa disebut dengan inbound link. Banyaknya inbound link ini dapat membantu meningkatkan peringkat blog Anda pada mesin pencari dan dapat berfungsi sebagai ukuran reputasi blog Anda. Beberapa link dari situs yang sama hanya dihitung sekali. Untuk informasi yang lebih lengkap mengenai blog Anda, silakan diklik saja widget Alexa tersebut.

Berikut ini langkah-langkah memasang Alexa Site Stats Button di Blogger.
  1. Kunjungi situs Alexa di http://www.alexa.com
  2. Klik menu Site Tools.
  3. Klik Alexa Site Widgets.
  4. Pilih tab Traffic Widgets.
  5. Pada bagian Alexa Site Stats Button, masukkan URL blog Anda.
  6. Klik tombol Built Widget.
  7. Pilih ukuran button yang Anda inginkan.
  8. Copy kode HTML-nya.
  9. Masuk ke akun Blogger Anda.
  10. Klik Rancangan > Elemen Laman > Tambah Gadget.
  11. Pilih HTML/JavaScript.
  12. Beri judul sesuai keinginan Anda.
  13. Paste kode HTML tadi di kolom Konten.
  14. Klik tombol SIMPAN.
  15. Pindahkan elemen ke tempat yang Anda inginkan.
  16. Klik tombol SIMPAN.

Label:

Cara Memasang Alexa Toolbar Pada Browser

Salah satu cara untuk meningkatkan peringkat Alexa adalah dengan memasang Alexa Toolbar pada browser. Blog atau website yang dikunjungi dari browser yang ada Alexa Toolbar-nya maka peringkat Alexa blog atau website tersebut akan naik. Menurut situs Alexa, Alexa Toolbar ini mempunyai fitur-fitur sebagai berikut:
  • Alexa Traffic Rank: See how popular a website is.
  • Related Links: Find sites that are similar to the site you are visiting.
  • Wayback: See how a site looked in the past.
  • Hot Pages & Searches: See what's popular on the web right now.
  • Website Reviews: See what other people thought of this site or write your own review!

Berikut ini langkah-langkah memasang Alexa Toolbar di browser Firefox.
  1. Pastikan Anda sudah berada di browser Firefox.
  2. Silakan kunjungi situs http://www.alexa.com
  3. Klik menu Toolbar.
  4. Klik Install Alexa Toolbar.
  5. Klik tombol Accept and Install.
  6. Klik tombol Allow yang ada di kanan atas.
  7. Klik tombol Install Now.
  8. Silakan tunggu, proses instal sedang berlangsung.
  9. Klik Restart Firefox.

Label:

Cara Membuat Hompage Blog

Salah satu tips untuk meningkatkan peringkat Alexa adalah dengan membuat blog kita menjadi homepage atau beranda di browser. Dengan diaturnya blog kita menjadi homepage di browser maka blog kita akan sering terbuka karena begitu kita atau orang lain membuka browser tersebut, blog kita yang akan pertama kali muncul. Hal ini akan dapat meningkatkan trafik blog kita. Berikut ini cara mengatur blog menjadi homepage atau beranda di browser Mozilla Firefox 4 berbahasa Indonesia dan menggunakan Sistem Operasi Microsoft Windows 2000 Professional.
  • Buka browser Mozilla Firefox 4 berbahasa Indonesia.
  • Klik menu Alat > Pengaturan....
  • Pada bagian Umum di Memulai pada poin Saat memulai Firefox diisi dengan pilihan Tampilkan beranda.
  • Kemudian di kolom Beranda isikan URL blog, misalnya http://semminkota.blogspot.com.
  • Klik tombol OK.

Label:

Tips Meningkatkan Peringkat Alexa Blog

Pada postingan beberapa waktu yang lalu telah ditulis mengenai peringkat Alexa. Kali ini akan ditulis mengenai cara untuk meningkatkan peringkat Alexa. Karena peringkat Alexa dibuat berdasarkan banyaknya jumlah kunjungan ke blog atau website, maka untuk meningkatkan peringkat Alexa harus pula meningkatkan jumlah pengunjung blog atau website. Berikut ini beberapa tips untuk meningkatkan peringkat Alexa yang biasa dibicarakan di dunia maya.
  •  Memasang Alexa Toolbar di Browser Internet. Seperti ditulis sebelumnya, kalau data kunjungan suatu blog itu didapat dari Alexa Toolbar yang terpasang di browser para pengguna internet. Oleh karena itu, marilah kita memasang Alexa Toolbar ini di browser. Dengan memasang Alexa Toolbar ini tidak hanya menguntungkan blog kita sendiri tapi juga menguntungkan bagi blog atau website yang kita kunjungi.
  • Memasang Widget Alexa di Blog. Karena tidak semua pengunjung blog memasang Alexa Toolbar, maka Alexa juga akan mendapatkan data dari widget Alexa yang terpasang di blog. Selain itu, kita juga dapat memantau perkembangan peringkat Alexa blog kita melalui widget Alexa ini.
  • Mengatur Blog Menjadi Homepage di Browser Internet. Homepage merupakan halaman website atau blog yang terbuka begitu kita masuk ke browser internet. Dengan demikian, begitu kita atau orang lain yang membuka browser tersebut maka blog kita akan menjadi sering terbuka sehingga meningkatkan kunjungan atau trafik.
  • Membuat Tulisan tentang Alexa. Contohnya adalah tulisan yang sedang Anda baca ini. Blogger pemula tertarik untuk mengetahui tulisan mengenai Alexa. Seperti dulu ketika penulis baru mengenal blog, tidak mengetahui apa itu Alexa, lalu mencari tahunya di internet dengan menggunakan kata kunci "Alexa".
  • Blogwalking. Blogwalking merupakan kegiatan mengunjungi blog orang lain dengan meninggalkan pesan di buku tamu blog tersebut. Bila kita mengunjungi suatu blog dan mencantumkan URL blog kita di sana maka ada kemungkinan para pengunjung blog tersebut nantinya juga akan mengunjungi blog kita.
  • Mendaftarkan Blog ke Mesin Pencari. Untuk mendapatkan pengunjung melalui mesin pencari atau search engine, ada baiknya kita mendaftarkan blog ke mesin pencari seperti Google, Yahoo, Baidu, atau Bing. Baidu merupakan mesin pencari terbesar di China. Bila ingin menjaring pengunjung dari Rusia Anda dapat mendaftarkan blog ke Yandex.
  • Membuat Tulisan yang Menarik dan Bermanfaat. Bila kita menulis sesuatu yang menarik lagi bermanfaat bagi orang lain, hal ini tentunya dapat mengundang orang untuk mengunjungi blog kita dan membaca artikel-artikel yang ada di blog kita.
  • Membagikan Artikel-artikel Blog di Situs Jejaring Sosial. Bila Anda mempunyai akun di situs jejaring sosial, bagikan saja artikel yang telah Anda buat. Dengan begitu akan tercipta peluang artikel dibaca oleh teman-teman Anda.

Label:

Tutorial Cara Membuat 3 Kolom Dibawah Header

Berikut ini langkah-langkah dalam membuat 3 (tiga) kolom atau elemen di bawah Header di Blogger. Selamat menyimak.. Semoga berhasil..

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

 
4. Cari kode 
]]></b:skin>.
Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.

6. Copy kode di bawah ini dan paste di atas kode tersebut.

#box-main-container {
clear:both;
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

7. Cari kode
<div id='main-wrapper'> 
atau bila tidak ada, silakan cari  
<div class='main-outer'>.

8. Copy kode di bawah ini dan paste di atas salah satu kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

9. Klik tombol SIMPAN TEMPLATE
 
10. SELESAI

Label:

Cara Memberi Warna Teks

Untuk memberi penekanan pada teks atau tulisan atau kalimat yang dianggap penting di postingan Blogger, kita dapat memberikan warna pada teks tersebut. Harapannya adalah agar pembaca lebih memperhatikan kalimat yang diwarnai tersebut. Selain itu, adanya pewarnaan pada tulisan dapat membuat postingan terlihat cantik dan menarik.

Caranya cukup mudah bila kita ingin membuat teks atau tulisan menjadi berwarna di postingan Blogger. Pertama, drag atau block atau highlight teks atau tulisan yang ingin diberi warna. Kemudian klik ikon yang berjudul "Teks color".


Selanjutnya pilih warna yang tersedia.


Sekarang teks atau tulisan sudah berwarna sesuai dengan warna yang dipilih.

Label:

Cara Bikin Komentar Admin Berwarna

P
ada beberapa waktu yang lalu saya telah menulis cara membuat warna kotak komentar admin berbeda dengan kotak komentar pengunjung. Nah, pada kesempatan kali ini saya akan membahas hal yang kurang lebih sama. Namun, di sini kita hanya akan memberi warna pada huruf atau font komentar admin. Dengan demikian, secara kasat mata kita dapat membedakan dengan mudah mana komentar admin dan mana komentar dari pengunjung.

Cara untuk memberi warna pada komentar admin ini tidak jauh berbeda dengan cara membuat kotak komentar admin berbeda dengan pengunjung lainnya. Kita hanya perlu mengubah kode CSS-nya saja agar huruf pada komentar admin atau pemilik blog berwarna sesuai keinginan kita. Berikut ini langkah-langkah untuk mengerjakannya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang di Expand Template Widget.

5. Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk memudahkan pencarian.

6. Copy kode di bawah ini lalu paste di atas kode tersebut.

.comment-body-author {
color:#FF0000;
}
  • #FF0000 merupakan kode warna untuk warna merah, silakan diganti dengan kode lainnya sesuai dengan warna keinginan Anda.
7. Cari kode seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>  
          </dt>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

          <dd class='comment-footer'>

8. Tambahkan kode:
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
di bawah kode:
<data:commentPostedByMsg/>  
          </dt>
dan kode </b:if> di bawah kode:
<dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
sehingga hasilnya menjadi seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>  
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>
          <dd class='comment-footer'>

9. Klik tombol SIMPAN TEMPLATE.

Label:

Cara Membatasi Jumlah Posting Pada Label

Kita dapat membatasi 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.

+ &quot;?max-results=5&quot;

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.

Label:

Cara Pasang Widget Statistik Bloger

Widget Statistik dari Blogger ini hanya menampilkan informasi total tayangan laman yang sudah dikunjungi oleh pengunjung blog. Bila ingin mengetahui lebih rinci lagi mengenai data statistik blog, Anda dapat melihatnya di menu Statistik. Jika Anda tertarik untuk memasang widget statistik kepunyaan Blogger ini di blog, silakan Anda menyimak langkah-langkah pemasangannya di bawah ini.
  • Masuk ke akun Blogger Anda.
  • Klik menu Rancangan.
  • Pada tab Elemen Laman, klik Tambah Gadget.
  • Di bagian Dasar-dasar, pilih Satistik blog.
  • Isikan Judul sesuai keinginan Anda.
  • Ada 3 opsi untuk Jangka Waktu, yaitu Setiap Saat, 30 hari terakhir, dan 7 hari terakhir, silakan pilih sesuai keinginan Anda.
  • Kemudian ada 4 macam Gaya widget statistik, silakan pilih menurut selera Anda.
  • Beri tanda centang di bagian Opsi gaya bila ingin menganimasikan penghitung.
  • Klik tombol SIMPAN.
  • Atur posisi widget ke tempat yang Anda inginkan.
  • Klik tombol SIMPAN.
  • Klik Lihat Blog untuk melihat hasilnya.

Label:

Cara Pasang Widget Recent Post Dan Recent Comment

Banyak dari blogger yang memasang widget Recent Posts dan Recent Comments di sidebar blog mereka. Untuk memasang kedua widget tersebut, blogger biasanya menggunakan javascript. Namun, penggunaan javascript berpotensi memperlambat loading sebuah blog. Bila sebuah blog sulit diakses karena loading yang berat, maka ada kemungkinan akan ditinggalkan oleh para pengunjung.

Selain menggunakan javascript, ada cara lain yang dapat dilakukan yaitu dengan menggunakan alamat feed kita sendiri. Untuk Recent Posts dapat menggunakan feed posts. Sedangkan untuk Recent Comments bisa menggunakan feed comments. Berikut ini adalah alamat feed untuk Recent Posts:
http://NamaBlogAnda.blogspot.com/feeds/posts/default
Sedangkan alamat feed untuk Recent Comments adalah sebagai berikut:
http://NamaBlogAnda.blogspot.com/feeds/comments/default
Untuk NamaBlogAnda harus diganti dengan nama blog Anda sendiri. Misalnya, nama blog ini adalah salon bloger, maka alamat feed untuk Recent Posts akan menjadi seperti ini:
http://salonbloger.blogspot.com/feeds/posts/default
Sedangkan Recent Comments alamat feednya menjadi:
http://salonbloger.blogspot.com/feeds/comments/default

Berikut ini cara pemasangannya di blog:

  1. Masuk ke akun Blogger Anda.
  2. Di halaman Dasbor, klik Rancangan.
  3. Pilih Elemen Laman kemudian klik Tambah Gadget.
  4. Di halaman Dasar-dasar, pilih Feed.
  5. Masukkan alamat feed yang Anda inginkan, alamat feed Recent Posts atau Recent Comments.
  6. Klik LANJUTKAN.
  7. Isikan Judul, pilih berapa item yang akan ditampilkan, maksimal 5. Beri tanda centang di Tanggal Item, Sumber/pengarang item atau Buka link di jendela baru bila Anda menginginkannya. Silakan lihat di bawah untuk Pratinjaunya.
  8. Klik SIMPAN.
  9. Pindahkan posisi widget tersebut di tempat yang Anda inginkan.
  10. Kemudian klik SIMPAN.
  11. Klik Lihat Blog untuk melihat hasilnya.

Label:

Tutorial Cara Membuat Border Blogger

B
order biasanya digunakan untuk menandai suatu teks atau tulisan yang dianggap penting di postingan pada blog. Dengan kata lain, pembaca diajak untuk lebih memperhatikan kalimat yang diberi border tersebut. Selain itu, adanya border ini juga dapat mempercantik tampilan postingan.

Untuk membuat border di postingan, diperlukan kode CSS atau Casscading Style Sheets. Border ini mempunyai beberapa macam atau style, diantaranya adalah border style solid dan border style dot. Berikut ini kode CSS untuk kedua macam style border tersebut.

Border Style Solid

<div style="border: 2px solid red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Solid</div>

Maka hasilnya seperti di bawah ini.

Border Style Solid

  • border: 2px solid red; menunjukkan ketebalan tepi border sebesar 2 piksel dan bergaya solid dengan warna merah (red). Bila ingin lebih tebal lagi, silakan ganti angka 2 dengan angka yang lebih besar lagi. Kalau mau ganti warna, silakan ganti kata red dengan warna yang lain, misalnya blue untuk biru, dan lain sebagainya.
  • height: 20px; menunjukkan tinggi border sebesar 20 piksel. Bila ingin lebih tinggi lagi, silakan ubah angka 20 dengan angka yang lebih tinggi lagi nilainya.
  • padding: 5px; menunjukkan jarak antara tulisan dengan tepi border sebesar 5 piksel. Jika ingin diubah, silakan diganti angkanya. Makin besar angkanya makin renggang jaraknya.
  • text-align: left; menunjukkan perataan tulisan. Left untuk rata kiri, right untuk rata kanan, center untuk rata tengah, justify untuk rata kanan kiri.
  • width: 200px; menunjukkan lebar border sebesar 200 piksel. Jika ingin lebih lebar lagi, silakan diganti angka 200 dengan angka yang lebih tinggi lagi nilainya.

Border Style Dot

<div style="border: 2px dotted green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Dot</div>

Maka hasilnya seperti di bawah ini.

Border Style Dot


Selain dua jenis border di atas masih ada lagi beberapa tipe border yang lainnya. Berikut ini beberapa style border yang lainnya.


Border Style Dash

<div style="border: 2px dashed blue; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Dash</div>

Maka hasilnya seperti di bawah ini.

Border Style Dash


Border Style Outset

<div style="border: 2px outset yellow; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Outset</div>

Maka hasilnya seperti di bawah ini.

Border Style Outset


Border Style Inset

<div style="border: 2px inset yellow; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Inset</div>

Maka hasilnya seperti di bawah ini.

Border Style Inset


Border Style Double

<div style="border: 5px double green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Double</div>

Maka hasilnya seperti di bawah ini.

Border Style Double


Border Style Multiple

<div style="border-color: purple; border-style: dotted dashed solid double; border-width: 6px; height: 20px; padding: 5px; text-align: center; width: 200px;">Border Style Multiple</div>

Maka hasilnya seperti di bawah ini.

Border Style Multiple


Border Style Ridge

<div style="border: 10px ridge red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Ridge</div>

Maka hasilnya seperti di bawah ini.

Border Style Ridge

Label:

Tutorial Cara Membuat Menu Navigasi Breadcrumbs Di Blogger

Menu navigasi breadcrumbs merupakan menu hirarki untuk mengelompokkan artikel dalam suatu kategori atau label yang sama. Untuk lebih jelasnya perhatikan tulisan kecil yang ada di atas judul posting ini atau lihat gambar di samping. Bila di template Anda belum terdapat menu navigasi breadcrums ini dan Anda ingin memasangnya, berikut ini langkah-langkahnya.

  • Masuk ke akun Blogger Anda.

  • Klik Rancangan > Edit HTML.

  • Back up template dulu dengan mengeklik Download Template Lengkap untuk mengantisipasi kalau nanti terjadi kesalahan.

  • Beri tanda centang pada Expand Template Widget.

  • Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian).

  • Copy kode di bawah ini dan paste di atas kode tersebut.

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:3px double #333;
}

  • Selanjutnya cari kode <div class='post hentry uncustomized-post-template'>

Kalau tidak ketemu, cari kode yang ini <div class='post hentry'>

Kemudian copy kode berikut ini dan paste di bawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot; '>
<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>
</b:if>

  • Klik tombol SIMPAN TEMPLATE.

Label:

Tutorial Cara Membuat Dropcap Di Posting Blogspot

Beberapa waktu yang lalu, telah dibahas mengenai cara membuat drop cap di Blogger. Di dalam posting tersebut sudah dijelaskan bahwa untuk membuat drop cap kita perlu mengedit HTML template blog guna menambahkan kode-kode pembentuk drop cap. Nah, kali ini kita masih membahas tentang cara membuat drop cap, namun dengan cara yang sedikit berbeda.

Bila pada cara sebelumnya kita perlu mengedit HTML template blog, maka pada cara yang satu ini kita meletakkan langsung kode pembentuk drop cap di posisi Edit HTML postingan. Kode pembentuk drop cap yang dimaksud adalah seperti di bawah ini.

<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">huruf yang dijadikan drop cap</span>

Yang perlu diingat adalah saat meletakkan kode tersebut harus berada di posisi Edit HTML. Kemudian untuk mengetikkan huruf atau teks selanjutnya dapat dilakukan di Edit HTML atau Compose.

Contoh:

<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">H</span>ai, jumpa lagi dengan saya. Pada kesempatan kali ini kita akan membuat drop cap di posting tanpa harus mengedit HTML template blog. Bagi yang tidak mau mengedit template blog silakan menggunakan cara ini.

Maka hasilnya akan seperti ini.

Hai, jumpa lagi dengan saya. Pada kesempatan kali ini kita akan membuat drop cap di posting tanpa harus mengedit HTML template blog. Bagi yang tidak mau mengedit template blog silakan menggunakan cara ini.

Berikut penjelasan singkat mengenai kode di atas.

<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">huruf yang dijadikan drop cap</span>

color: black; menunjukkan warna dari huruf drop cap, dalam hal ini warna huruf tersebut adalah black atau hitam. Anda dapat menggantinya dengan warna lain, misalnya red untuk merah, blue untuk biru, green untuk hijau, dan lain-lain.

float: left; ini menunjukkan kode agar tulisan awal diletakkan pada posisi kiri (left) alias mepet ke kiri.

font-family: Times New Roman; ini adalah jenis huruf drop cap, Anda dapat menggantinya dengan yang lain, misalnya Verdana.

font-size: 50px; ini adalah kode untuk besarnya huruf, bila ingin diganti dengan ukuran yang lain, silakan ubah nilainya saja.

line-height: 40px;  ini merupakan kode untuk jarak baris.

padding-right: 3px; ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 3 pixel, jika Anda ingin mengganti jaraknya, silakan diubah nilainya.

padding-top: 1px; ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya. 

Selamat mencoba.

Label:

16 Tips Jitu Meningkatkan Pageview Blog/Blogspot

Setiap blogger tentunya menginginkan page views yang tinggi. Mengapa? Selain menunjukkan kualitas konten blog, page views yang tinggi juga merupakan salah satu daya tarik untuk para pemasang iklan. nah berikut ini adalah 16 kiat meningkatkan pageview blog/blogspot.


Faktor eksternal

Faktor eksternal ini adalah jumlah pengunjung. Semakin banyak pengunjung, maka semakin tinggi pula page views. Di bawah ini cara-cara meningkatkan pengunjung.

 

1. SEO

 

Search engine optimization (SEO) merupakan upaya menoptimasi blog untuk mejaring pengunjung dari mesin pencari. Semakin bagus posisi blog atau postingan di mesin pencari (misal di halaman satu Google), maka semakin besar pula peluang mendapatkan pengunjung. Jika Anda tertarik dengan SEO, silakan baca postingan saya sebelumnya yaitu 7 Cara Menjadi Nomor Satu di Google.

 

2. Blogwalking

 

Blagwalking adalah mengunjungi blog orang lain dan meninggalkan komentar di blog tersebut. Semakin rajin Anda blogwalking, semakin besar pula dikunjungi oleh pemilik blog atau pengunjung blog bersangkutan yang tertarik terhadap komentar Anda. Agar efektif, berikan komentar yang berkualitas saat Anda blogwalking sehingga memancing ketertarikan blogger lain untuk mengunjungi blog Anda.

 

3. Kirim postingan ke situs sosial bookmarking

 

Anda bisa mendaftarkan postingan Anda ke beberapa situs sosial bookmarking. Untuk blog bahasa Indonesia, Anda bisa menggunakan Lintas Berita dan InfoGue. Jika postingan Anda ada yang menjadi artikel hot, maka jumlah pengunjung dari situs ini sangat besar yaitu mencapai ribuan orang per hari.

 

4. Aktif di forum

 

Forum merupakan salah satu sarana yang bisa Anda gunakan untuk mempromosikan postingan. Biasanya Anda membuat thread atau link ke postingan Anda. Bila postingan Anda menjadi ngetop, jumlah pengunjung yang didapatkan tidak jauh beda dengan jumlah pengunjung dari situs sosial bookmarking.

 

5. Menjadi blogger tamu

 

Dengan menjadi blogger tamu di blog ternama, Anda berkesempatan untuk melink ke postingan atau homepage Anda. Dengan demikian, peluang mendapatkan banyak pengunjung semakin besar.

 

6. Direferensikan oleh blogger lain

 

Pengunjung akan meningkat bila ada blogger lain yang mereferensikan postingan atau blog Anda. Terlebih bila yang mempromosikannya adalah blogger terkenal. Tentunya ini bergantung kepada kualitas konten yang Anda miliki.

 

7. Buat sesi RSS di blog Anda yang lain

 

Sesi ini sangat mudah dibuat di wordpress karena ada widget RSS. Dengan mengaktifkan widget ini, maka postingan terbaru Anda akan muncul di blog Anda yang lain. Secara pribadi, saya menempatkan sesi RSS di Blogotainmen dan blog gratisan saya sehingga postingan terbaru Blogodolar muncul secara otomatis.
Faktor Internal

Faktor internal adalah faktor-faktor yang membuat pengunjung nyaman dan tertarik membuka postingan Anda.

 

8. Desain tampilan blog agar loadingnya tidak bermasalah

Apapun hosting dan theme/template yang Anda gunakan, desainlah blog Anda agar loading time-nya cepat. Dengan demikian, pengunjung tidak terganggu dalam membuka postingan Anda. Trik-trik di bawah ini bisa digunakan untuk memperoleh loading time yang relatif cepat:

    Sedikit mungkin memasang banner yang terbuat dari java script.
    Seoptimal mungkin mengguanakan widget. Secara pribadi saya hanya menggunakan kurang dari 10 widget dan hanya menaruhnya di sidebar.
    Gunakan plugin seperlunya. Hapus juga plugin yang tidak digunakan agar tidak memakan tempat di database hosting.

9. Buat Judul yang menarik

Bila Anda mengunjungi suatu blog, mungkin saja Anda mengklik beberapa postingan yang ada di blog tersebut. Mengapa? Hal ini karena Anda tertarik ingin mengetahui lebih jauh isi postingan tersebut. Oleh karena itu, buatlah judul yang menarik. Jika Anda belum familiar dengan hal ini, silakan simak 6 Cara Mudah Membuat Judul yang Menarik Minat Baca Pengunjung.

 

10. Buat internal link

 

Buat intenal link ke postingan Anda sebelumnya jika postingan yang Anda buat ada hubungannya.  Jumlah link internal pun harus proporsional agar tidak mengganggu kenyamanan pembaca. Jangan lupa, berilah warna link sejelas mungkin agar mudah diidentifikasi oleh pengunjung.

 

11. Buat Postingan Serial

 

Postingan serial adalah postingan bersambung dari satu topik yang tidak mungkin dibahas dalam satu postingan. Misalnya saja Anda akan menulis topik Mike Tyson. Postingan serial yang bisa Anda buat antara lain 10 Petinju yang di KO Mike Tyson dalam Satu Ronde, 5 Petinju yang Mengalahkan Mike Tyson, dan 10 Petinju yang Susah Dikalahkan Mike Tyson.

Bila pengunjung menemukan salah satu tulisan di atas, besar kemungkinan dia akan melihat 2 postingan yang lainnya karena memang sambung menyambung.

 

12. Buat sesi postingan terkait

 

Tidak semua postingan harus disisipi link internal. Agar pengunjung mengetahui postingan relevan dengan postingan yang tidak ada link internalnya, maka buatlah sesi postingan terkait. Bila Anda menggunakan wordpress.org, postingan terkait dibuat dengan menggunakan plugin.

 

13. Buat sesi postingan terpopuler dan terbaru

Postingan terpopuler akan bermanfaat bagi pengunjung baru, sehingga ia bisa mengenali postingan mana yang paling banyak dibaca di blog Anda. Adapun postingan terbaru akan memberikan informasi terkini, baik kepada pengunjung baru ataupun pengunjung lama.

 

14. Buat navigasi sesederhana mungkin

 

Navigasi di sini adalah halaman, kategori, tempat pencarian, dan arsip yang mudah dikenali dan dilihat pengunjung. Oleh karena itu, sediakan dan buatlah navigasi yang mudah dikenali pengunjung. Misalnya, pengunjung dapat dengan mudah melihat arsip Anda pada 6 bulan yang lalu. Jika Anda menggunakan wordpress, Anda bisa menggunakan plugin Wp-Archives untuk membuat arsip yang lebih informatif.

 

15. Tempatkan Iklan PPC secara proporsional

 

Postingan yang dipenuhi iklan akan membingungkan pembaca sehingga besar kemungkinan ia akan lekas kabur dari blog Anda. Oleh karena itu, tempatkanlah iklan tersebut secara proporsional, misal di bawah postingan saja.

 

16. Kuantitas postingan

 

Selain kualitas, kuantitas postingan juga berpengaruh terhadap page views. Semakin banyak jumlah postingan, semakin banyak pula postingan yang bisa dibaca pengunjung.

Itulah 16 cara yang saya lakukan untuk meningkatkan page views blog yang saya miliki. Jika Anda punya cara selain 16 cara di atas, silakan membagikannya di komentar. Tentunya cara Anda tersebut akan bermanfaat bagi saya dan teman-teman yang lain.