Cara Memasang Image Live Traffic Feedjit di WordPress

F

eedjit merupakan suatu widget yang dapat memantau perkembangan arus lalu lintas pengunjung di blog kita secara real time. Widget ini dapat menginformasikan kepada kita dari kota, provinsi, negara mana para pengunjung blog kita berasal dan kapan waktu terakhir mereka mengunjungi blog kita. Selain itu, di widget ini juga dilengkapi dengan bendera dari pengunjung yang bersangkutan. Bila ingin mengetahui lebih lengkap lagi tentang apa yang terjadi di blog saat itu, kita dapat mengeklik gambar dari widget Feedjit ini. Kemudian kita akan masuk ke halaman Feedjit Live - Updating in real-time.

Nah, berikut ini langkah-langkah dalam memasang widget Feedjit di WordPress.

1. Silakan kunjungi halaman http://feedjit.com/joinimg/

2. Silakan kustomisasi widget sesuai keinginan Anda. Silakan atur warna teks, warna judul, warna latar belakang, dan warna garis tepi menurut selera Anda. Selain itu, atur pula lebar widget sesuai lebar sidebar blog Anda dan berapa maksimal entri yang Anda inginkan. Pratinjaunya bisa Anda lihat di sebelah kiri.

3. Selanjutnya klik area teks, lalu copy kode HTML tersebut.

4. Kemudian masuk ke halaman wp-admin akun WordPress Anda.

5. Klik Tampilan > Widget.

6. Seret widget Teks yang ada di kolom "Widget yang Tersedia" ke sebuah bilah sisi di kanan untuk mengaktifkannya.

7. Berikan judul sesuai keinginan Anda.

8. Lalu paste kode HTML tadi di kotak di bawah kolom judul.

9. Klik tombol Simpan.

10. Lihat blog WordPress Anda.

Cara Memberi Warna pada Huruf Komentar Admin

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.

Cara Membuat Widget LinkWithin Muncul Hanya di Halaman Posting

B

ila kita memasang widget LinkWithin pada blog, maka widget ini selain muncul di halaman posting, juga akan tampil di beranda atau home page di bawah posting. Widget yang muncul di beranda ini akan membuat waktu loading home page blog menjadi lebih lama. Nah, agar loading home page menjadi lebih ringan, kita buat saja widget LinkWithin ini tampil atau muncul hanya di halaman posting. Bagaimana caranya? Silakan simak langkah-langkah untuk hide widget LinkWithin di home page berikut ini. Namun sebelumnya, pastikan Anda telah memasang widget LinkWithin pada blog Anda.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template. Hal ini dilakukan untuk berjaga-jaga kalau nanti ada kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template ke seperti sebelumnya.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode seperti di bawah ini. Gunakan Ctrl + F, kemudian masukkan kata kunci LinkWithin sebagai kata kunci utamanya.

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><data:content/></b:includable>
</b:widget>

6. Tambahkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> setelah kode <b:includable id='main'> dan </b:if> sebelum </b:includable> sehingga hasilnya menjadi seperti di bawah ini.

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>

<b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>

</b:widget>

7. Klik tombol SIMPAN TEMPLATE.

8. Selesai.

Cara Membuat Widget Follower atau Pengikut dengan Scroll

M

emberi scroll pada widget di sidebar merupakan salah satu solusi untuk menghemat tempat pada blog. Begitu juga dengan widget Follower atau Pengikut, bila dirasa terlalu panjang maka kita dapat memberikan scroll pada widget tersebut. Caranya sama seperti kita memberi scroll pada widget arsip dan label atau widget-widget lain yang didapat dari pihak Blogger sendiri.

Nah, berikut ini langkah-langkah dalam memberi scroll pada widget Pengikut atau Follower di Blogger. Silakan disimak..

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template.

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

5. Biasanya kode id untuk widget Pengikut atau Follower seperti di bawah ini.

<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>

Maka untuk memberi scroll pada widget Pengikut silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#Followers1 .widget-content{
height:100px;
width:auto;
overflow:auto;
}

• 100px merupakan tinggi scroll, silakan diatur tingginya jangan sampai melebihi tinggi widget Follower aslinya agar terbentuk penggulung atau scroll.

7. Klik tombol SIMPAN TEMPLATE.

Tampilan Baru Halaman Hasil Pencarian Google

P

ada pertengahan bulan Agustus ini, saya menemukan sesuatu yang baru di halaman hasil pencarian Google (www.google.co.id). Bila saya memasukkan kata kunci atau keyword klik munadi, maka di bawah tautan atau link halaman beranda atau home page blog Klik Munadi (klikmunadi.blogspot.com) muncul tautan-tautan posting blog tersebut yang disajikan dalam dua kolom seperti yang terlihat pada screenshot di bawah ini.

Pada screenshot tampak posting-posting yang ditampilkan Google jauh lebih banyak dibanding waktu sebelumnya. Selain itu, Google juga mempunyai tampilan navbar baru yaitu navbar yang dibalut warna hitam seperti yang terlihat pada screenshot di bawah ini.

Bagaimana dengan blog Anda? Cobalah cek di Google. Apakah mengalami hal yang sama?

Cara Membuat Link Text Menjadi Huruf Miring Saat Disorot Mouse

S

atu hal yang dapat kita lakukan untuk membuat link text di blog menjadi tampak menarik dan terlihat berbeda. Apa itu? Kali kita akan membuat link text pada blog menjadi huruf miring saat disorot dengan mouse. Bagaimana cara melakukannya? Caranya dapat disimak pada penjelasan di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat back-up template. Hal ini berguna kalau kita ingin mengembalikan template seperti semula jika ada kesalahan dalam pengeditan.

4. Cari kode yang mirip dengan kode di bawah ini yaitu kode yang mengandung a:hover.

a:hover {
color:#5588AA;
text-decoration:underline;
}

5. Tambahkan kode font-style:italic; sehingga hasilnya menjadi seperti di bawah ini.

a:hover {
color:#5588AA;
text-decoration:underline;

font-style:italic;
}

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai dan lihat link text yang ada di blog Anda.

Cara Membuat Link Saat Berkomentar di Blogger

T

erkadang saat berkomentar kita perlu menyisipkan sebuah link atau tautan. Kita dapat membuat link pada saat berkomentar karena saat menulis di kotak komentar ibarat kita sedang membuat posting pada posisi Edit HTML. Jadi, bila kita ingin membuat link saat berkomentar, tinggal ditambahkan saja tag pembuat link saat menulis di kotak komentar. Tag sederhana untuk membuat link adalah seperti ini:

<a href="URL target">teks yang diberi link</a>

Contoh:

Untuk membuat link, silakan cek  <a href="http://klikmunadi.blogspot.com/2011/02/cara-membuat-link-di-blogger.html">di sini</a> gan..

Maka setelah komentar diterbitkan, hasilnya akan seperti di bawah ini.

Untuk membuat link, silakan cek di sini gan..

Selain itu, kita juga dapat membuat komentar menjadi efek huruf tebal dengan menambahkan tag <b> dan </b>. Misalnya, <b>ini adalah huruf tebal</b> maka hasilnya menjadi ini adalah huruf tebal. Kita juga dapat menggunakan tag-tag yang lainnya.