Cara Mengubah Lebar Menu Navigasi

Di penghujung tahun 2011 ini, saya ingin berbagi informasi kepada pembaca sekalian khususnya bagi yang menggunakan template seperti yang saya pakai saat ini yaitu Thesis SEO Blogger Template karya dari Blog Juragan.

Sebelumnya pada template ini, saya hanya dapat memasukkan maksimal lima tautan menu navigasi dalam satu baris. Bila saya memasang tautan yang ke-enam maka posisinya akan berada di bawah baris menu navigasi tersebut seperti yang terlihat pada gambar di bawah ini.

Tampilan menu navigasi sebelum diubah lebarnya.

Nah, agar tautan menu yang ke-enam dapat berada di sebelah tautan yang ke-lima, seperti yang terlihat pada gambar di bawah ini, maka kita perlu mengubah lebar dari menu navigasi tersebut.

Tampilan menu navigasi setelah diubah lebarnya.

Bagaimana cara untuk mengubah lebar dari menu navigasi tersebut? Silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga kalau nanti terjadi kesalahan kita sudah mempunyai back-up-nya.

4. Cari kode seperti di bawah ini. Gunakan fungsi pencarian dengan menekan tombol Ctrl + F lalu masukkan kata kunci #menu ul {.

#menu ul {
border-left:1px solid #DDDDDD;
float:left;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:630px;
}

5. Ganti lebarnya, yaitu 630px menjadi 900px (sesuai lebar wrapper) sehingga hasilnya menjadi seperti di bawah ini.

#menu ul {
border-left:1px solid #DDDDDD;
float:left;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:900px;
}

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai.

Cara Mudah Menambahkan Scroll pada Komentar Blog

Jumlah komentar pada suatu artikel blog yang telah mencapai puluhan membuat tampilan memanjang ke bawah. Hal ini dapat membuat pengunjung berikutnya yang ingin memberikan komentar harus menggulung deretan komentar tersebut terlebih dahulu untuk menemukan kotak komentar. Bila tersedia link yang langsung mengantarkan pengunjung ke kotak komentar maka hal ini tidak begitu menjadi masalah. Namun, bila tidak tersedia link tersebut kita dapat menambahkan scroll atau penggulung pada kolom komentar tersebut. Selain dapat memudahkan pengunjung, adanya scroll ini juga bisa membuat blog terlihat simpel.

Kolom komentar dengan scroll.

Untuk menambahkan scroll pada komentar, kita dapat menggunakan kode CSS tertentu. Langkah-langkahnya dapat disimak di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template.

4. Cari kode untuk komentar yang biasanya ditandai dengan #comments-block{. Gunakan tombol Ctrl + F untuk memudahkan pencarian. Contoh kode lengkapnya seperti di bawah ini:

#comments-block{border:0px dotted #ccc;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

5. Kemudian hapus kode border:0px dotted #ccc; dan tambahkan kode max-height:300px;border:1px solid #eee;overflow:auto; sehingga hasilnya seperti di bawah ini:

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

Tinggi scroll adalah 300 px, tebal border 1 px, gaya border solid dan warna border #eee, poin-poin ini dapat diganti sesuai selera Anda.

6. Klik tombol SIMPAN TEMPLATE.

Cara Membuat Tombol Share Hanya Muncul di Halaman Posting

S

ebelumnya telah dibahas mengenai pemasangan share button atau tombol berbagi dari AddThis pada bagian bawah postingan. Silakan klik di sini untuk membaca posting tersebut. Ternyata setelah dipasang, tombol berbagi ini tidak hanya muncul pada halaman posting tetapi juga akan tampil pada halaman beranda atau home page. Hal ini berpotensi memperlambat loading saat membuka halaman beranda blog.

Nah, agar loading halaman beranda tidak terasa berat, kita dapat membuat tombol berbagi dari AddThis ini tampil atau muncul hanya pada halaman posting saja. Caranya bisa dilihat pada langkah-langkah di bawah ini. Namun, sebelum mengikuti cara ini, pastikan Anda telah memasang tombol share dari AddThis ini terlebih dahulu.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di Dasbor, klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari widget id untuk tombol share AddThis ini. Berikut cara mudah untuk menemukan widget id tersebut:

Pertama, masuk ke halaman Rancangan >> Elemen Laman. Kemudian klik Edit pada box widget AddThis yang terletak di bawah posting.

Kemudian akan muncul jendela Mengonfigurasi HTML/JavaScript. Silakan maximize jendela tersebut untuk melihat URL lengkap pada address bar. Lalu perhatikan pada bagian ujung dari URL widget tersebut maka Anda akan menemukan widget id dari tombol share AddThis ini.

Sekarang kita sudah menemukan kalau widget id tombol share AddThis adalah HTML1. Nantinya, widget id tombol berbagi ini akan berbeda-beda sesuai dengan keadaan template blog masing-masing. Selanjutnya cari widget id untuk widget ini dengan cara tekan Ctrl + F lalu masukan kata kunci widget id='HTML1' maka Anda akan menemukan kode seperti di bawah ini:

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

<b:includable id='main'>

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

  <b:if cond='data:title != &quot;&quot;'>

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

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

  <b:include name='quickedit'/>

</b:includable>

</b:widget>

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

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

<b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

  <b:if cond='data:title != &quot;&quot;'>

    <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>

7. Klik tombol SIMPAN TEMPLATE.

8. Selesai.

Beberapa Istilah Seputar Dunia Internet

Benchmark

Jenis pengujian untuk mengukur kemampuan software/hardware yang dimiliki oleh ponsel tertentu.

Bug

Istilah untuk suatu cacat/kesalahan pada sofware atau hardware yang membuatnya tidak dapat berfungsi sebagaimana mestinya. Proses untuk mengatasi adanya cacat/bug disebut sebagai debbunging.

Banner adalah media informasi dalam bentuk image/gambar untuk menayangkan iklan bergambar pada sebuah halaman webpage. Hosting Istilah untuk jasa penyewaan server internet untuk keperluan website dan email. Pengguna umum menyewa jasa hosting dan mendapatkan account hosting serta dapat mengupload file-file website yang kemudian nanti dapat dilihat oleh pengunjung website. Kbps Dihitung dalam satuan Kilobits per second adalah ukuran kecepatan trasmisi sinyal digital yang dinyatakan dalam ribuan bit per detik. PHP singkatan dari Programming Hypertext Processor, adalah sebuah bahasa pemrograman yang didesain untuk menciptakan halaman web yang bergerak. RAS adalah singkatan dari Remote Access Service adalah paduan perangkat keras dan perangkat lunak yang memungkinkan akses jarak jauh terhadap alat atau informasi yang tersimpan di jaringan perangkat. Server RAS adalah komputer khusus yang menggabungkan berbagai saluran komunikasi.

Search Engine adalah sebuah program/mesin pencari di internet (website tertentu) yang digunakan untuk mencari informasi yang diperlukan oleh pengguna. Misal: Google, Yahoo, Lycos, Bing, dan lainnya. Shareware Software yang diedarkan secara gratis/free untuk dapat dicoba oleh calon pengguna selama jangka waktu tertentu. Apabila calon pengguna tertarik, maka dapat membeli versi komersial. SLI kepanjangan dari Sambungan Langsung Internasional adalah layanan yang memungkinkan pelanggan melakukan panggilan internasional tanpa bantuan atau campur tangan operator dari suatu terminal telepon. Spam suatu praktek pengiriman pesan komersial atau iklan kepada sejumlah besar news group atau email yang sebetulnya tidak berkeinginan atau tidak tertarik menerima pesan tersebut. TCP/IP singkatan dari Transmission Control Protocol/Internet Protocol. Satu set protokol standar yang digunakan untuk menghubungkan jaringan komputer dan mengamati lalu lintas dalam jaringan. URL akronim dari Uniform Resource Locator. URL mencakup nama domain dan protokol yang digunakan. Contoh URL adalah http://www.yahoo.com atau www.tabloidpulsa.co.id

Sumber: Tabloid PULSA Edisi 220 Th IX / 2011 / 2 - 15 November

Membuat Widget Statistik dari Blogger Menjadi Rata Tengah

Biasanya bila saya memasang widget atau gadget Statistik yang disediakan oleh Blogger pada sidebar, maka letaknya akan berada di sebelah kiri seperti yang terlihat pada gambar di samping ini.

Lalu agar tampak menarik, saya menginginkan agar posisi widget tersebut menjadi rata tengah atau berada di tengah-tengah dari lebar sidebar. Kalau untuk mengetengahkan widget yang didapat dari pihak ke-tiga, saya tinggal mengapit script dari widget tersebut dengan tag <center> dan </center>. Sedangkan untuk membuat widget Statistik dari Blogger menjadi rata tengah saya perlu mengedit HTML dari template blog.

Berikut cara yang saya gunakan untuk membuat posisi widget Statistik dari Blogger menjadi rata tengah.

1. Masuk ke akun Blogger.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template.

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

5. Kemudian copy kode di bawah ini dan paste di atas kode tersebut.

#Stats1 .widget-content{
text-align:center;
}

6. Klik tombol SIMPAN TEMPLATE.

Hasilnya akan tampak seperti pada gambar di bawah ini.

Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot

Sebelumnya saya sudah memposting artikel tentang cara membuat menu navigasi breadcrumbs di Blogger. Untuk membaca postingan tersebut silakan klik di sini. Kali ini saya akan membahas hal yang sama. Namun, cara yang berikut ini agak sedikit berbeda. Bila pada cara yang sebelumnya tidak berhasil, Anda dapat mencoba cara yang satu ini.

Langsung saja, berikut ini langkah-langkah dalam membuat menu navigasi breadcrumbs di Blogger atau Blogspot. Silakan disimak dan semoga sukses.

1. Masuk ke akun Blogger.

2. Klik Rancangan > Edit HTML.

3. Silakan klik Download Template Lengkap untuk membuat salinan template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode ]]></b:skin>, lalu letakkan kode di bawah ini di atas kode tersebut. Gunakan tombol Ctrl + F untuk mempercepat pencarian.

.breadcrumbs {

padding: 5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height:1.4em;

border-bottom:3px double #e6e4e3;

}

6. Selanjutnya cari kode yang seperti di bawah ini.

<b:include data='top' name='status-message'/>

      <data:adStart/>

    <b:loop values='data:posts' var='post'>

7. Kemudian letakkan kode <b:include data='posts' name='breadcrumb'/> setelah kode <b:include data='top' name='status-message'/> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:include data='top' name='status-message'/>

  <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

    <b:loop values='data:posts' var='post'>

8. Berikutnya cari kode <b:includable id='main' var='top'> dan letakkan kode di bawah ini tepat di atas kode tersebut.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

&#187; <span><data:post.title/></span>

</b:if>

</b:loop>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel

<b:else/>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Artikel pada Label <data:blog.pageName/>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

9. Klik tombol SIMPAN TEMPLATE.

10. Lihat blog Anda untuk mengetahui hasilnya.

Kiat-kiat Memilih Suami Sholeh

P

ada kesempatan sebelumnya telah diterbitkan postingan mengenai kiat-kiat mencari jodoh yang baik dan kiat-kiat memilih istri sholehah. Kali ini blog Klik Munadi akan memposting kiat-kiat dalam memilih suami sholeh. Kiat-kiat ini diambil dari salah satu isi status Fan Page Facebook K.H. Muhammad Arifin Ilham. Berikut ini kiat-kiat memilih suami sholeh selengkapnya:

1. Faham dan mengamalkan ALQUR'AN dan ASSUNNAH, minimal sholat 5 wajib dan puasanya.
2. Akhlaknya santun dan rendah hati.
3. Tidak mau berduaan dan tidak mau menyentuhmu sampai ALLAH halalkan.
4. Pekerja aktif pada rizki yang halal.
5. Figur penyayang pada orang tua, kakak-adik, dan sanak familynya.
6. Pribadi yang menyenangkan dan disenangi para sahabatnya.
7. Sangat hormat pendapat dan keluargamu.

Kalau bertemu cowok sholeh ini, terimalah lamarannya!.

Sumber: http://www.facebook.com/kh.muhammad.arifin.ilham/posts/10150411092309739

Kiat-kiat Memilih Istri Sholehah

Kiat-kiat memilih istri sholehah:

1. Faham dan mengamalkan ALQUR'AN dan ASSUNAH.
2. Auratnya terjaga.
3. Tidak mau berduaan apalagi disentuh.
4. Penyayang pada orang tua, kakak, adik, dan sanak familynya.
5. Kalau bicara menundukkan wajahnya, santun, dan rendah hati.
6. Tidak suka banyak bicara, jauh dari sifat genit.
7. Terpelajar.
8. Para sahabatnya menyenanginya.
9. Tidak suka pacaran, maunya segera dinikahi.
10. Tidak menentukan harga mahar.
11. Menerimamu karena istiharahnya.

Sumber: http://www.facebook.com/kh.muhammad.arifin.ilham/posts/10150413683229739

Kiat-kiat Mencari Jodoh yang Baik

Kiat-kiat dalam mencari jodoh yang baik:

1. Ikhtiar yang maksimal.
2. Doa di penghujung malam, "Robby la tadzarny fardan", Ya ALLAH, jangan biarkan hamba membujang, (QS 21:89)
3. Perhebat istighfar.
4. Sholat Dhuha, diantara rizki adalah jodoh yang baik.
5. Optimis, Insya ALLAH, ALLAH tunjukkan jodohku.
6. Sedekah sebagai pendongkrak agar doa mustajab.
7. Mohon doa kepada orang tua, keluarga, dan guru yang istiqomah.
8. Mengaktifkan diri pada grup kajian.
9. Tidak salah meminta bantuan pada sahabat.
10. Tawakkal.

Sumber: http://www.facebook.com/kh.muhammad.arifin.ilham/posts/10150417636289739

Cara Pasang Flag Counter di WordPress

F

lag Counter merupakan sebuah tool gratis yang dapat ditambahkan ke blog WordPress kita. Tool ini berguna untuk mengetahui dari negara mana saja para pengunjung blog kita berasal. Dengan memasang Flag Counter di blog maka blog kita akan terlihat lebih cantik dan menarik. Bila mengklik Flag Counter-nya maka kita akan mendapati informasi yang menakjubkan mengenai pengunjung dan ada grafiknya pula. Setiap seseorang mengunjungi blog kita maka bendera dari negara dia berasal akan ditambahkan ke konter kita.

Berikut ini langkah-langkah pemasangan Flag Counter di blog WordPress.

1. Kunjungi http://flagcounter.com

2. Pilih Top Countries pada “Show on your site:”.

3. Kemudian kustomisasi widget Flag Counter, seperti:

• Berapa jumlah maksimum bendera yang ingin ditampilkan (Maximum Flags to Show).
• Berapa jumlah kolom bendera yang diinginkan (Columns of Flags).
• Atur label pada bagian atas konter (Label on Top of Counter).
• Atur warna latar belakang, teks, dan border.
• Beri tanda cek pada “Show Country Codes” bila ingin menampilkan kode negara.
• Beri tanda cek pada “Show Pageview Count” bila ingin menampilkan total tayangan laman.
• Beri tanda cek pada “Show Number of Flags” bila ingin menampilkan total jumlah bendera.
• Pratinjau hasil kustomisasinya bisa dilihat pada bagian bawahnya.

4. Jika sudah yakin, kemudian klik tombol GET YOUR FLAG COUNTER.

5. Isikan alamat email lalu klik tombol Continue.

6. Copy kode yang ada pada bagian “Code for websites:” seperti di bawah ini.

<a href="http://s08.flagcounter.com/more/22s"><img src="http://s08.flagcounter.com/count/22s/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_50/viewers_Pengunjung/labels_1/pageviews_1/flags_1/" alt="free counters" border="0"></a><br><a href="http://www.flagcounter.com/">Free counters</a>

7. Selanjutnya masuk ke halaman Dasbor blog WordPress Anda.

8. Klik Tampilan > Widget.

9. Seret widget “Teks” ke bagian sidebar untuk mengaktifkannya.

10. Berikan judul, misalnya Konter Pengunjung.

11. Paste kode yang tadi di-copy pada tempat yang disediakan.

12. Agar widget berada di tengah dan tidak terlalu dekat dengan judul widget, kita dapat menambahkan kode “center” dan “padding-top” sehingga kodenya menjadi:

<div style="text-align:center;padding-top:10px;"><a href="http://s08.flagcounter.com/more/22s"><img src="http://s08.flagcounter.com/count/22s/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_50/viewers_Pengunjung/labels_1/pageviews_1/flags_1/" alt="free counters" border="0"></a><br><a href="http://www.flagcounter.com/">Free counters</a></div>

13. Kemudian klik tombol Simpan dan hasilnya terlihat seperti gambar di bawah ini.

Cara Pasang Jam di WordPress

U

ntuk mempercantik tampilan blog WordPress, kita dapat memasang aksesoris berupa widget jam pada sidebar blog kita. Namun, tidak seperti memasang jam pada blog Blogger, untuk memasang  jam di WordPress kita perlu memodifikasi kode widget jam tersebut agar dapat berjalan dengan baik. Nah, berikut ini adalah langkah-langkahnya.

1. Silakan mengunjungi ClockLink.com.

2. Kemudian pilih widget jam yang diinginkan melalui menu Gallery. Misalnya jam Analog dengan nama 0009 seperti gambar di bawah ini.

3. Selanjutnya klik tombol View HTML Tag.

4. Klik tombol Accept.

5. Lalu pilih warna jam yang diinginkan, atur waktu jam menurut zona waktu atau kota, dan ukuran widget jam.

6. Copy kode yang di "If the above does not work, please try the following code." seperti di bawah ini dan paste di notepad terlebih dahulu.

<embed src="http://www.clocklink.com/clocks/0009-dkbrown.swf?TimeZone=Indonesia_Jakarta&"  width="250" height="250" wmode="transparent" type="application/x-shockwave-flash">

7. Hapus bagian "<embed" dan penutup ">"dan ganti dengan "[gigya" dan "]". Agar widget menjadi rata tengah tambahkan "center" sehingga kodenya akan menjadi seperti di bawah ini.

<div style="text-align:center;">[gigya src="http://www.clocklink.com/clocks/0009-dkbrown.swf?TimeZone=Indonesia_Jakarta&"  width="250" height="250" wmode="transparent" type="application/x-shockwave-flash"]</div>

8. Masuk ke halaman wp-admin (Dasbor) blog WordPress.

9. Klik Tampilan > Widget.

10. Pilih widget "Teks" kemudian seret ke bagian sidebar untuk mengaktifkannya.

11. Beri judul sesuai keinginan.

12. Masukkan kode pada langkah nomor 7.

13. Klik tombol Simpan.

14. Selesai.

Melihat Kiriman di Facebook Page Melalui m.facebook.com

S

ekarang ini bila kita mengunjungi suatu Halaman atau Fans Page Facebook melalui m.facebook.com di ponsel, maka kita langsung disuguhi hanya postingan-postingan dari admin page pada "Dinding" halaman tersebut. Kalau sebelumnya kita dapat langsung melihat atau membaca kiriman dari para penggemar atau penyuka halaman tersebut. Tapi kini, kita harus melakukan beberapa langkah dulu agar dapat melihat postingan dari para fans page itu.

Misalnya, kita mengunjungi halaman klikmunadi.blogspot.com. Setelah kita berada di halaman tersebut, silakan gulir halaman ke bawah dan klik link "Lihat Kiriman Lainnya".

Kemudian klik link "Hanya Teman-Teman" bila hanya ingin melihat kiriman dari para fans atau klik link "klikmunadi.blogspot.com + Teman-teman" kalau mau melihat kiriman dari admin page dan fans.

Physical Format

D

alam membuat artikel di Blogger, kita sering memformat karakter agar tampilan artikel tersebut menjadi menarik. Salah satu hal yang termasuk pemformatan karakter adalah physical format. Physical format merupakan format terhadap fisik suatu huruf atau font. Di Blogger, saat kita mengetik dalam posisi Compose maka kita akan menemui toolbar yang berisi beberapa tool untuk memformat suatu karakter atau huruf. Penggunaannyapun mudah, tinggal mengeblok karakter yang akan diformat lalu diklik tool yang diinginkan. Bila kita telah terbiasa menggunakan MS Word, maka tidak ada yang sulit dalam hal ini.

Selain itu, kita juga dapat melakukan physical format pada posisi Edit HTML yaitu dengan cara menggunakan tag-tag HTML tertentu. Berikut ini beberapa tag HTML yang dapat kita pakai dalam membuat physical format.

No.	Tag HTML	Fungsi
1.	<b>	Untuk menampilkan huruf tebal.
2	<i>	Untuk menampilkan huruf miring.
3.	<u>	Untuk menampilkan garis bawah pada suatu kata atau kalimat.
4.	<strike>	Untuk menampilkan garis horizontal pada bagian tengah huruf.
5.	<sub>	Untuk menampilkan subscript.
6.	<sup>	Untuk menampilkan superscript.
7.	<big>	Untuk menampilkan ukuran huruf yang lebih besar.
8.	<small>	Untuk menampilkan huruf yang lebih kecil.
9.	<tt>	Untuk menampilkan huruf seperti huruf mesin ketik.

Semua tag di atas membutuhkan tag penutupnya masing-masing. Tag penutup akan diberi karakter garis miring (/). Nah, di bawah ini adalah contoh dari masing-masing tag di atas.

No.	Contoh	Hasil
1.	<b>Ini merupakan huruf tebal.</b>	Ini merupakan huruf tebal.
2	<i>Ini merupakan huruf miring.</i>	Ini merupakan huruf miring.
3.	<u>Kalimat ini bergaris bawah.</u>	Kalimat ini bergaris bawah.
4.	<strike>Garis pada bagian tengah</strike>	Garis pada bagian tengah
5.	Ini adalah contoh <sub>subscript</sub>	Ini adalah contoh subscript
6.	Ini adalah contoh <sup>superscript</sup>	Ini adalah contoh superscript
7.	<big>Huruf ini berukuran lebih besar.</big>	Huruf ini berukuran lebih besar.
8.	<small>Huruf ini berukuran lebih kecil.</small>	Huruf ini berukuran lebih kecil.
9.	<tt>Huruf ini mirip dengan huruf mesin ketik.</tt>	Huruf ini mirip dengan huruf mesin ketik.

Cara Memasang Penghitung Pengunjung pada WordPress

S

alah satu situs yang menyediakan widget penghitung jumlah pengunjung untuk blog adalah FREE BLOG HIT COUNTER. Di sana kita dapat menemukan widget untuk melacak berapa jumlah pengunjung blog kita secara gratis dan tanpa perlu mendaftar atau registrasi. Nah, berikut ini langkah-langkah dalam memasang widget penghitung jumlah pengunjung pada blog WordPress yang didapat dari situs tersebut.

1. Silakan kunjungi halaman http://www.freebloghitcounter.com/signup

2. Isikan alamat blog WordPress Anda, tentukan di angka berapa untuk memulai penghitungan, kemudian pilih untuk menghitung "all hits" atau unique visitor". Jika sudah, klik tombol CONTINUE TO STEP 2.

3. Langkah selanjutnya adalah memilih style konter yang diinginkan. Kemudian klik tombol GET MY CODE.

4. Berikutnya silakan copy atau salin kodenya.

5. Selanjutnya masuk ke akun WordPress Anda dan menuju ke halaman Dashboard.

6. Klik menu Tampilan, lalu pilih Widget.

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

8. Berikan judul sesuai keinginan Anda.

9. Lalu paste kode tadi di kotak di bawah kolom judul.

10. Klik tombol Simpan.

11. Lihat blog WordPress Anda.

Cara Membuat Link "klik di sini" di Blogger

L

ink dapat dikatakan sebagai suatu teks atau gambar yang terkait dengan suatu alamat tertentu. Bila suatu link diklik, maka kita akan dibawa menuju ke alamat yang terdapat di link tersebut. Berbicara mengenai link tidak terlepas dari istilah yang disebut dengan anchor. Anchor adalah sesuatu yang dapat dipakai untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut difungsikan sebagai link atau alamat tujuan dari link. Suatu anchor ditandai dengan tag <a> dan mempunyai tag penutup </a>.

Jika sebuah anchor akan digunakan sebagai suatu link, maka tag <a> ini beratributkan "href" seperti yang tertera di bawah ini.

<a href="alamat tujuan">anchor</a>

Sesuai judul di atas, kali ini kita akan membuat link "klik di sini". Maksudnya dalam postingan, teks "klik di sini" akan kita jadikan link. Dengan demikian, teks "klik di sini" akan bertindak sebagai anchor.

Untuk membuat link "klik di sini" dalam postingan, silakan ketikkan teks artikel seperti biasa pada posisi Compose. Misalnya, saya mempunyai teks seperti di bawah ini.

Bila Anda ingin mengetahui berapa ukuran blog Anda, silakan klik di sini.

Sekarang kita akan memberi link pada teks "klik di sini", maka bloklah teks "klik di sini" tersebut. Kemudian klik ikon Link pada toolbar. Selanjutnya masukkan alamat tujuannya pada Web address, misalnya http://klikmunadi.blogspot.com/2011/02/mengukur-berat-atau-size-blog.html. Lalu klik tombol OK. Sampai di sini, link telah selesai dibuat.

Bila teks di atas dilihat pada posisi Edit HTML, maka akan terlihat seperti di bawah ini.

Bila Anda ingin mengetahui berapa ukuran blog Anda, silakan <a href="http://klikmunadi.blogspot.com/2011/02/mengukur-berat-atau-size-blog.html">klik di sini</a>.

Bila diterbitkan, hasilnya akan seperti di bawah ini.

Bila Anda ingin mengetahui berapa ukuran blog Anda, silakan klik di sini.

Link di atas bila diklik maka akan terbuka pada tab yang sama. Jika Anda ingin link tersebut terbuka di tab baru, Anda dapat menambahkan atribut target="_blank". Anda juga bisa menambahkan atribut judul yaitu title="judul" seperti di bawah ini.

Bila Anda ingin mengetahui berapa ukuran blog Anda, silakan <a href="http://klikmunadi.blogspot.com/2011/02/mengukur-berat-atau-size-blog.html" target="_blank" title="Mengukur Berat atau Size Blog">klik di sini</a>.

Setelah diterbitkan, hasilnya akan seperti ini.

Bila Anda ingin mengetahui berapa ukuran blog Anda, silakan klik di sini.

Mengapa Huruf Judul Widget dan Judul Posting Blog Ini Tebal?

I

ngin tahu mengapa huruf pada judul posting dan judul widget pada sidebar template blog ini tebal? Berikut ini jawabannya, silakan disimak. Untuk membuat huruf menjadi tebal pada kedua judul di atas, kita perlu menambahkan kode font-weight:bold; pada CSS kedua komponen di atas. Nah, berikut ini CSS untuk judul widget template blog ini selengkapnya:

h2 {
color:#000000;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
font-size:16px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;

font-weight:bold;

letter-spacing:1;
line-height:3em;
margin-bottom:1px;
margin-top:1px;
}

Dalam kode di atas terdapat kode yang membuat judul widget menjadi huruf tebal yaitu font-weight:bold;. Bila ingin huruf judul widget menjadi biasa alias tidak tebal, maka kata bold diganti dengan normal sehingga kodenya menjadi font-weight:normal;.

Sedangkan kode font-weight:bold; yang membuat huruf judul posting menjadi huruf tebal sekali terdapat pada CSS sebagai berikut:

.post h1 a, .post h1 a:visited, .post h1 strong,  .post h2 a, .post h2 a:visited, .post h2 strong {
color:#333;
display:block;

font-weight:bold;

text-decoration:none;
}

Bila ingin mengubahnya menjadi tidak tebal sekali, maka kode font-weight:bold; diganti menjadi font-weight:normal;.

Pasang Jadwal Sholat di Sidebar Blog

P

ada postingan terdahulu di blog ini telah dibahas mengenai pemasangan jadwal sholat di blog. Kali ini blog Klik Munadi akan membahas hal yang serupa dan jadwal sholat tersebut masih bersumber dari Republika. Namun, jadwal sholat yang berikut ini memiliki beberapa perbedaan bila dibanding dengan jadwal sholat dari Republika lainnya.

Ukuran jadwal sholat ini tingginya jauh lebih rendah dari yang sebelumnya. Jadwal sholat ini dilengkapi dengan hari, tanggal, dan tahun serta jam kapan jadwal sholat tersebut diakses. Selain itu, tampilannya disertai dengan pesan sponsor. Jadwal sholat ini memuat waktu sholat untuk 56 wilayah atau kota di Indonesia. Embed dari jadwal sholat tersebut adalah:

<iframe src="http://www.republika.co.id/jadwal_sholat/index.php" scrolling="no" width="300" height="130" frameborder="no" framespacing="0"> </iframe>

Jadwal sholat yang satu ini cocok dipasang di sidebar sebuah blog yang mempunyai lebar 300 piksel atau lebih. Namun, bila ingin tetap menaruhnya di sidebar yang kurang dari 300 piksel, kita dapat menggunakan fungsi scroll untuk menyiasatinya. Misalnya, kita akan memasang jadwal sholat ini pada sidebar yang mempunyai lebar 262 piksel atau kurang dari itu, maka kita apit embed jadwal sholat tersebut dengan kode <div style="overflow:auto; width:100%px;"> dan </div>. Sehingga kodenya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px;"><iframe src="http://www.republika.co.id/jadwal_sholat/index.php" scrolling="no" width="300" height="130" frameborder="no" framespacing="0"> </iframe></div>

Maka hasilnya adalah seperti di bawah ini:

Untuk memasangnya di sidebar, silakan masuk ke akun Blogger >> Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavasScript. Lalu masukkan kodenya di Konten dan Simpan.

Cara Memasang Favicon di WordPress

F

avicon atau favorite icon atau ikon favorit merupakan sebuah ikon berupa gambar kecil yang diasosiasikan dengan logo sebuah blog atau website. Favicon ini biasanya muncul pada bagian tab dan address bar dari suatu browser. Gunanya favicon untuk memudahkan mengidentifikasi sebuah blog atau situs.

Berikut ini salah satu cara untuk memasang favicon pada blog WordPress gratisan. Silakan simak langkah-langkahnya di bawah ini.

1. Siapkan gambar (jpg/jpeg/png) yang akan dijadikan favicon, misalnya saya mempunyai gambar berukuran 320 piksel x 240 piksel seperti di bawah ini.

2. Silakan masuk ke halaman wp-admin (Dashboard) akun WordPress Anda.

3. Klik menu Pengaturan, selanjutnya arahkan pandangan ke bagian Blog Picture / Icon. Kemudian cari gambar Anda dengan mengeklik tombol Telusuri. Jika sudah ketemu, klik tombol Upload Gambar >>.

4. Silakan pilih bagian dari gambar yang ingin Anda gunakan sebagai favicon, kemudian klik tombol Potong Gambar >>.

5. Berikutnya akan muncul halaman "Semua selesai".

6. Dalam beberapa hari ke depan, favicon akan muncul.

Instant Preview Baru di Google SERP

H

ari ini, saya menemukan sesuatu yang baru pada halaman hasil pencarian mesin pencari Google atau Search Engine Result Page (SERP). Apa itu? Bila saya mengarahkan mouse ke area tautan dan deskripsi situs hasil pencarian, maka akan muncul tanda kurung tutup sudut dobel. Jika saya mendiamkan mouse di area tanda tersebut, maka akan muncul tautan situs yang dimaksud beserta instant preview berupa snapshot.

Dengan fitur ini kita dapat melihat secara sekilas  isi atau konten dari suatu tautan situs atau blog. Misalnya saja, saya mengetikkan kata kunci "200 posting" (tanpa tanda kutip), maka hasilnya akan terlihat seperti screenshot di bawah ini.

200 Posting

Alhamdulillah blog telah berhasil memublikasikan posting sebanyak buah sejak blog ini dibuat pada tanggal 1 Januari 2011. Posting yang sedang Anda baca ini merupakan posting yang ke-201. Total tayangan laman pada saat postingan ini dibuat berada di angka Untuk Alexa Traffic Rank secara global berada pada peringkat Sedangkan di Indonesia duduk pada posisi Pagerank blog ini masih berada di posisi

Pada kesempatan ini saya ingin mengucapkan terima kasih banyak kepada para pengunjung setia blog ini. Tanpa adanya kalian blog ini tidak ada apa-apanya. Terima kasih..

Beberapa Istilah dalam Dunia Selular

B

eberapa waktu yang lalu saya telah memposting tentang istilah-istilah dalam dunia selular. Kali ini saya masih memposting hal yang sama. Beberapa istilah dalam dunia selular di bawah ini diambil dari rubrik Kamus Tabloid PULSA Edisi 217 Th IX / 2011 / 21 September - 4 Oktober. Selamat menyimak dan semoga bermanfaat.

Istilah	Arti
Chat	Dalam dunia selular, chat diartikan sebagai kegiatan berkomunikasi antar-sesama pemakai yang sedang online. Komunikasi di sini dapat berupa teks, suara, ataupun menggunakan kamera untuk layanan video call.
Data Connectivity	Hal ini mengacu pada kemampuan ponsel untuk dihubungkan dengan perangkat lain seperti komputer atau ponsel yang lain. Koneksinya bisa berupa protokol tanpa kabel (wireless) seperti bluetooth ataupun melalui kabel data.
DNS	Kependekan dari Domain Name Service, merupakan layanan internet yang menggunakan TCP/IP. Layanan ini digunakan sebagai identifikasi sebuah komputer dengan nama dan bukan dengan menggunakan alamat IP address.
DSP	Singkatan dari Digital Signal Processor, merupakan komponen utama yang berfungsi melakukan koordinasi suara, sms, dan fitur pengiriman data. kemudian chipset ini melakukan proses deteksi aktivitas suara, mengatur transmisi, dan penerimaan GSM. Sinyal suara microphone (contoh pada jaringan GSM) berupa sinyal analog yang akan dikonversi ke digital.
E-Commerce	Adalah sebuah bisnis online yang proses transaksinya menggunakan bantuan komputer. Transaksi tersebut dapat berupa penjualan dan pembelian barang serta jasa dan sistem pembayarannya dilakukan lewat jalur online.
FTP	Adalah singkatan dari File Transfer Protocol. FTP merupakan sebuah protokol standar untuk kegiatan download maupun upload file antara dua komputer/ponsel yang saling terhubung dengan jaringan internet.
Gateway	Suatu istilah yang digunakan sebagai tempat keluar masuk/pintu gerbang untuk saling bertukar data. Gateway juga biasa digunakan untuk menyaring data-data apa saja dan siapa saja yang dapat saling bertukar data melalui pintu gerbang tersebut.
IP Address	Alamat IP adalah sistem alamat pada jaringan yang direpresentasikan dengan menggunakan angka berupa kombinasi 1 sampai 4 angka yang dipisahkan oleh tanda titik.
ISDN	Singkatan dari Integrated Services Digital Network, sebuah standar telekomunikasi internasional untuk suara, video, dan data melalui saluran telepon digital atau saluran telepon biasa. ISDN mendukung data transfer rates lebih dari 64 kbps (64,000 bits per second).
VOIP	Singkatan dari Voice Over Internet Protocol. Dengan menggunakan fitur VOIP, pengguna ponsel dapat melakukan panggilan telepon melalui koneksi internet dan tidak lagi melalui saluran telepon konvensional secara analog.

Cara Pasang Kalender di WordPress

D

alam blog WordPress sudah tersedia widget kalender jika Anda ingin mempercantik tampilan blog WordPress Anda. Di bawah ini merupakan langkah-langkah untuk memasang kalender pada blog WordPress.

1. Masuk ke akun WP Anda dan menuju ke halaman wp-admin.

2. Klik menu Tampilan >> Widget.

3. Seret widget Kalender ke sebuah bilah sisi di kanan untuk mengaktifkannya.

4. Beri judul sesuai keinginan Anda.

5. Klik tombol Simpan.

6. Lihat blog Anda untuk melihat hasilnya.

Laman Masuk Baru Blogger

H

ari ini, Jumat, 16 September 2011, saat saya masuk ke akun Blogger, saya mendapati tampilan laman masuk yang baru. Sebelumnya Blogger telah meluncurkan antarmuka yang diperbarui. Secara umum tampilan laman masuk baru ini tidak jauh berbeda dengan yang lama. Laman masuk baru tersebut tampak lebih luas, berwarna dominan putih sehingga terkesan bersih dan rapi serta elegan. Berikut ini screenshot dari laman masuk baru Google atau Blogger tersebut.

Cara Membuat Karakter-karakter Khusus dalam Postingan

K

adang-kadang dalam membuat suatu artikel di Blogger, kita ingin menampilkan karakter-karakter tertentu, misalnya tanda lebih dari atau sama dengan, tanda kurang dari atau sama dengan, tanda derajat, atau tanda-tanda yang lainnya. Kita dapat menampilkan karakter-karakter tersebut pada postingan dengan cara mengetikkan kode-kode khusus di bagian Edit HTML. Berikut ini beberapa di antara karakter-karakter tersebut.

Simbol	Karakter
&le; &ge; &lt; &gt;	≤ ≥ < >
&cent; &pound; &yen;	¢ £ ¥
&frac14; &frac12; &frac34;	¼ ½ ¾
&copy; &reg; &trade;	© ® ™
&deg;	°
&divide;	÷
&pi;	π
&amp;	&
&spades; &clubs; &hearts; &diams;	♠ ♣ ♥ ♦

Cara Membuat Fungsi Scroll pada Daftar Komentar Blog

B

ila komentar-komentar yang telah diberikan oleh para pengunjung blog sudah cukup banyak, tentunya hal ini akan membuat daftar komentar menjadi memanjang ke bawah. Belum lagi ditambah komentar-komentar dari sang pemilik blog karena merespon komentar-komentar dari pengunjung tersebut. Hal ini membuat halaman blog menjadi sangat panjang karena sudah banyaknya komentar sehingga terkesan memakan tempat.

Untuk mengatasinya kita dapat menggunakan fungsi scroll pada daftar komentar tersebut seperti yang terlihat pada gambar di atas. Caranya adalah dengan menambahkan kode CSS pada HTML template blog kita. Berikut ini adalah langkah-langkah membuatnya. Cara di bawah ini masih menggunakan antarmuka Blogger yang lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat backup template. Gunanya untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode yang mirip-mirip dengan kode di bawah ini.

#comments h4 {

color:#666666;

font-weight:normal;

letter-spacing:0.2em;

line-height:1.4em;

margin:1em 0;

font-size:14px;

text-transform:none;

}

6. Kemudian letakkan kode berikut di atas kode tersebut.

#comments {

height:400px;

overflow:auto;

}

Sehingga susunan kodenya menjadi seperti di bawah ini.

#comments {

height:400px;

overflow:auto;

}

#comments h4 {

color:#666666;

font-weight:normal;

letter-spacing:0.2em;

line-height:1.4em;

margin:1em 0;

font-size:14px;

text-transform:none;

}

• height:400px; menunjukkan tinggi scroll sebesar 400 piksel. Anda dapat mengubahnya sesuai keinginan Anda.

7. Selanjutnya cari kode yang mirip dengan kode di bawah ini. Intinya cari kode yang ada id='comments-block'-nya.

<b:if cond='data:post.numBacklinks != 0'>

     <dl class='comments-block' id='comments-block'>

        <b:loop values='data:post.comments' var='comment'>

          <dt class='comment-author' id='comment-author'>

            <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>

          <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'>

            <span class='comment-timestamp'>

                <i><data:comment.timestamp/></i>

              <b:include data='comment' name='commentDeleteIcon'/>

                </span>

          </dd>

        </b:loop>

      </dl>

  </b:if>

8. Lalu tambahkan kode <div style='overflow:auto; width:ancho; height:400px;'> di atas kode <dl class='comments-block' id='comments-block'> dan tambahkan kode penutup </div> di bawah kode </dl> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:post.numBacklinks != 0'>

<div style='overflow:auto; width:ancho; height:400px;'>

     <dl class='comments-block' id='comments-block'>

        <b:loop values='data:post.comments' var='comment'>

          <dt class='comment-author' id='comment-author'>

            <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>

          <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'>

            <span class='comment-timestamp'>

                <i><data:comment.timestamp/></i>

              <b:include data='comment' name='commentDeleteIcon'/>

                </span>

          </dd>

        </b:loop>

      </dl>

</div>

  </b:if>

9. Klik tombol SIMPAN TEMPLATE.

10. Selesai dan lihat blog Anda.

Bila Anda ingin menambahkan border atau garis tepi pada fungsi scroll seperti yang terlihat pada screenshot di atas, maka tambahkan kode border:1px solid #ccc; setelah kode overflow:auto; sehingga susunan kodenya akan menjadi seperti di bawah ini.

#comments {

height:400px;

overflow:auto;

border:1px solid #ccc;

}

• border:1px solid #ccc; merupakan garis tepi atau border dengan ketebalan 1 piksel bergaya solid berwarna #ccc;