Rabu, 16 Mei 2012

Memunculkan Lebih Dari Satu Label pada Menu Breadcrumbs

Pada template Thesis SEO Blogger yang sedang saya gunakan ini (saat artikel ini ditulis) memang sudah tertanam 'menu breadcrumbs'. Namun, jika artikel atau posting yang mempunyai label lebih dari satu, label yang tampil pada 'menu breadcrumbs' tersebut hanya satu. Tidak semua label yang dimiliki artikel tersebut muncul.

Untuk menyiasati agar artikel yang mempunyai beberapa label dapat tampil label-labelnya pada 'menu breadcrumbs', maka kita perlu mengedit sedikit kode 'menu breadcrumbs' tersebut.

Menu Breadcrumbs dengan Hanya Satu label yang Tampil
Label yang muncul hanya satu pada menu breadcrumbs.

Berikut ini langkah-langkah untuk membuat semua label tampil pada 'menu breadcrumbs' pada template Thesis SEO Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian pilih menu "Template".

3. Selanjutnya klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template. Hal ini berguna untuk memudahkan mengembalikan template ke keadaan semula bila terjadi kesalahan dalam pengeditan.

4. Klik tombol "Edit HTML" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</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>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>

7. Perhatikan kode <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> lalu tambahkan kode &#187; sehingga menjadi <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

Selanjutnya amati kode:

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Kemudian ganti tanda"=" yang pertama dengan "!" dan tukar letak kedua kode tersebut sehingga menjadi seperti di bawah ini:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

8. Setelah kode nomor 6 diedit, maka hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:loop values='data:posts' var='post'>
<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;'> &#187;
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>

9. Klik tombol "Simpan template" dan periksa hasilnya pada artikel yang mempunyai lebih dari satu label.

Label-label pada Menu Breadcrumbs
Semua label tampil pada menu breadcrumbs.

Selasa, 15 Mei 2012

Membuat Simbol Matematika, Huruf Yunani, dan Simbol Lainnya dengan Kode HTML

Sebelumnya di blog ini telah diulas mengenai cara membuat simbol atau karakter khusus dengan menggunakan kode HTML pada posting yang berjudul Cara Membuat Karakter-karakter Khusus dalam Postingan. Namun, pada artikel tersebut hanya dibahas beberapa simbol saja.

Kali ini masih akan membahas tentang cara membuat simbol menggunakan kode HTML tetapi dengan jumlah simbol yang lebih banyak. Baik dengan kode HTML yang berupa angka maupun kode HTML dengan huruf atau kata. Kedua kode tersebut menghasilkan simbol yang sama di bagian "Compose" atau setelah posting dipublikasikan. Yang harus diingat adalah menuliskan kode tersebut pada bagian "HTML".

Cara Membuat Simbol dengan Kode HTML
Simbol-simbol ini terbagi menjadi 3 kelompok tabel. Tabel yang pertama memuat simbol-simbol yang berhubungan dengan matematika. Tabel yang kedua berisi simbol dan tulisan Yunani. Sedangkan tabel yang terakhir memuat simbol-simbol yang lainnya.

Berikut 3 tabel yang memuat simbol-simbol beserta kode HTML-nya. Selamat menyimak dan semoga bermanfaat.

I. SIMBOL MATEMATIKA

SIMBOLHTML ANGKAHTML KATAKETERANGAN
&#8704;
&forall;
for all
&#8706;
&part;
part
&#8707;
&exists;
exists
&#8709;
&empty;
empty
&#8711;
&nabla;
nabla
&#8712;
&isin;
isin
&#8713;
&notin;
notin
&#8715;
&ni;
ni
&#8719;
&prod;
prod
&#8721;
&sum;
sum
&#8722;
&minus;
minus
&#8727;
&lowast;
lowast
&#8730;
&radic;
square root
&#8733;
&prop;
proportional to
&#8734;
&infin;
infinity
&#8736;
&ang;
angle
&#8743;
&and;
and
&#8744;
&or;
or
&#8745;
&cap;
cap
&#8746;
&cup;
cup
&#8747;
&int;
integral
&#8756;
&there4;
therefore
&#8764;
&sim;
simular to
&#8773;
&cong;
approximately equal
&#8776;
&asymp;
almost equal
&#8800;
&ne;
not equal
&#8801;
&equip;
equivalent
&#8804;
&le;
less or equal
&#8805;
&ge;
greater or equal
&#8834;
&sub;
subset of
&#8835;
&sup;
superset of
&#8836;
&nsub;
not subset of
&#8838;
&sube;
subset or equal
&#8839;
&supe;
superset or equal
&#8853;
&oplus;
circled plus
&#8855;
&otimes;
circled times
&#8869;
&perp;
perpendicular
&#8901;
&sdot;
dot operator


II. HURUF YUNANI

KARAKTERHTML ANGKAHTML KATAKETERANGAN
Α&#913;&Alpha;Alpha
Β&#914;&Beta;Beta
Γ&#915;&Gamma;Gamma
Δ&#916;&Delta;Delta
Ε&#917;&Epsilon;Epsilon
Ζ&#918;&Zeta;Zeta
Η&#919;&Eta;Eta
Θ&#920;&Theta;Theta
Ι&#921;&Iota;Iota
Κ&#922;&Kappa;Kappa
Λ&#923;&Lambda;Lambda
Μ&#924;&Mu;Mu
Ν&#925;&Nu;Nu
Ξ&#926;&Xi;Xi
Ο&#927;&Alpha;Omicron
Π&#928;&Pi;Pi
Ρ&#929;&Rho;Rho
Σ&#931;&Sigma;Sigma
Τ&#932;&Tau;Tau
Υ&#933;&Upsilon;Upsilon
Φ&#934;&Phi;Phi
Χ&#935;&Chi;Chi
Ψ&#936;&Psi;Psi
Ω&#937;&Omega;Omega
α&#945;&alpha;alpha
β&#946;&beta;beta
γ&#947;&gamma;gamma
δ&#948;&delta;delta
ε&#949;&epsilon;epsilon
ζ&#950;&zeta;zeta
η&#951;&eta;eta
θ&#952;&theta;theta
ι&#953;&iota;iota
κ&#954;&kappa;kappa
λ&#955;&lambda;lambda
μ&#956;&mu;mu
ν&#957;&nu;nu
ξ&#958;&xi;xi
ο&#959;&omicron;omicron
π&#960;&pi;pi
ρ&#961;&rho;rho
σ&#963;&sigma;sigma
τ&#964;&tau;tau
υ&#965;&upsilon;upsilon
φ&#966;&phi;phi
χ&#967;&chi;chi
ψ&#968;&psi;psi
ω&#969;&omega;omega
ϑ&#977;&thetasym;theta symbol
ϒ&#978;&upsih;upsilon symbol
ϖ&#982;&piv;pi symbol


III. SIMBOL-SIMBOL LAINNYA

SIMBOLHTML ANGKAHTML KATAKETERANGAN
Œ&#338;&OElig;capital ligature OE
œ&#339;&oelig;small ligature oe
Š&#352;&Scaron;capital S with caron
š&#353;&scaron;small S with caron
Ÿ&#376;&Yuml;capital Y with diaeres
ƒ&#402;&fnof;f with hook
ˆ&#710;&circ;modifier letter
˜&#732;&tilde;small tilde
&#8194;&ensp;en space
&#8195;&emsp;em space
&#8201;&thinsp;thin space
&#8204;&zwnj;zero width non-joiner
&#8205;&zwj;zero width joiner
&#8206;&lrm;center-to-right mark
&#8207;&rlm;right-to-center mark
&#8211;&ndash;en dash
&#8212;&mdash;em dash
&#8216;&lsquo;center single quotation mark
&#8217;&rsquo;right single quotation mark
&#8218;&sbquo;single low-9 quotation mark
&#8220;&ldquo;center double quotation mark
&#8221;&rdquo;right double quotation mark
&#8222;&bdquo;double low-9 quotation mark
&#8224;&dagger;dagger
&#8225;&Dagger;double dagger
&#8226;&bull;bullet
&#8230;&hellip;horizontal ellipsis
&#8240;&permil;per mille
&#8242;&prime;minutes
&#8243;&Prime;seconds
&#8249;&lsaquo;single center angle quotation
&#8250;&rsaquo;single right angle quotation
&#8254;&oline;overline
&#8364;&uero;uero
&#8482;&trade;trademark
&#8592;&larr;left arrow
&#8593;&uarr;up arrow
&#8594;&rarr;right arrow
&#8595;&darr;down arrow
&#8596;&harr;left right arrow
&#8629;&crarr;carriage return arrow
&#8968;&lceil;left ceiling
&#8969;&rceil;right ceiling
&#8970;&lfloor;left floor
&#8971;&rfloor;right floor
&#9674;&loz;lozenge
&#9824;&spades;spade
&#9827;&clubs;club
&#9829;&hearts;heart
&#9830;&diams;diamond

Jumat, 11 Mei 2012

Memodifikasi Tulisan Jumlah Komentar dan Menambahkan Link Menuju Formulir Komentar

Biasanya pada bagian atas kolom komentar terdapat tulisan yang menunjukkan ada berapa banyak jumlah komentar yang ada di bawahnya. Tulisan yang saya maksud adalah seperti yang terlihat pada screenshot di bawah ini. Screenshot ini diambil dari blog yang menggunakan template "Mudah" dari Blogger.

Tulisan tersebut dapat diganti sesuai dengan keinginan kita agar tampak lebih menarik. Misalnya saja, tulisan itu diganti dengan kalimat: Ada 3 komentar untuk "Link Judul Artikel". Selain itu, kita dapat pula menambahkan kalimat berikutnya yang mengandung link atau tautan untuk menuju langsung ke formulir komentar. Saat jumlah komentar telah banyak pada artikel tertentu,  hal ini dapat memudahkan pengunjung yang ingin memberi komentar baru karena tak perlu repot-repot lagi menggulung layar untuk menemukan form komentar yang terletak di bawah komentar terakhir.

Tulisan Jumlah Komentar
Tulisan jumlah komentar.
Berikut langkah-langkah untuk memodifikasi tulisan jumlah komentar serta menambahkan link menuju form komentar. Selamat menyimak.

1. Masuk ke akun Blogger.

2. Klik menu "Template" melalui "Opsi lainnya" (simbol segitiga hitam) pada Dasbor baru Blogger.

3. Untuk membuat salinan template, klik tombol "Cadangkan / Pulihkan" lalu klik Tombol "Unduh template lengkap". Hal ini berguna untuk memudahkan kita mengembalikan template ke keadaan sebelum pengeditan jika terjadi kesalahan dalam mengedit template. Bila sudah, klik tombol "Tutup".

4. Klik tombol "Edit HTML" pada bagian "Langsung di Blog" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Carilah kode yang mirip dengan kode di bawah ini. Kode pada masing-masing template dapat saja sedikit berbeda.

<h4>
      <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> <data:commentLabelPlural/>:
      </b:if>
    </h4>

Untuk menemukan kode dengan cepat, gunakan fitur pencarian teks pada browser. Misalnya, pada Mozilla Firefox, tekan tombol Ctrl+F di keyboard atau pada Google Chrome tekan tombol F3, lalu masukan penggalan kode yang akan dicari sebagai kata kunci utamanya.

7.  Hapus kode tersebut dan ganti dengan kode di bawah ini.

<h4>
      <b:if cond='data:post.numComments == 1'>
        Ada 1 komentar untuk &quot;<a expr:href='data:post.url'><data:blog.pageName/></a>&quot;. Baca komentar tersebut di bawah ini atau <a href='#comment-form' rel='nofollow'>poskan komentar</a>.
      <b:else/>
       Ada <data:post.numComments/> komentar untuk &quot;<a expr:href='data:post.url'><data:blog.pageName/></a>&quot;. Baca komentar-komentar tersebut di bawah ini atau <a href='#comment-form' rel='nofollow'>poskan komentar</a>.
      </b:if>
    </h4>

8. Selanjutnya klik tombol "Simpan template".

9. Jika berhasil, hasilnya akan tampak seperti gambar di bawah ini.

Tulisan Jumlah Komentar Hasil Modifikasi
Tulisan jumlah komentar yang sudah dimodifikasi.

Selamat mencoba dan semoga berhasil.

Rabu, 09 Mei 2012

Melihat Jumlah +1, Jumlah Komentar, dan Jumlah Tampilan untuk Setiap Posting

Sekarang ini dengan tampilan Blogger yang baru, saya dapat dengan mudah mengecek jumlah +1, jumlah komentar, dan jumlah tampilan (page view) untuk masing-masing tulisan atau posting. Pada antarmuka Blogger lawas saya hanya dapat mengetahui jumlah komentar saja. Sedangkan untuk jumlah tampilan (page view) dibatasi hanya 5 posting terpopuler saja yang dapat saya lihat pada tab "Statistik".

Jumlah +1, jumlah komentar, dan jumlah tampilan (page view) untuk setiap posting ini dapat saya lihat melalui tab atau menu "Post" pada tampilan Dasbor Blogger yang baru. Screenshot-nya seperti di bawah ini:

Statistik untuk Setiap Posting
Jumlah +1, Jumlah komentar, dan Jumlah tampilan

Dengan adanya fitur statistik baru Blogger ini saya dapat mengetahui berapa jumlah tampilan atau tayangan dari seluruh posting yang ada di blog saya. Selama ini saya hanya dapat mengetahui maksimal 10 artikel saja yang paling banyak dibaca pengunjung melalui gadget "Entri Populer".