earth
/* Iklan google ads */
Tampilkan postingan dengan label HTML Tutorials. Tampilkan semua postingan
Tampilkan postingan dengan label HTML Tutorials. Tampilkan semua postingan

Cara Membuat Navigasi Breadcrumbs Pada Blogspot

Breadcrumbs, makhluk apa pula nih? Saya sendiri kurang begitu ngerti mengapa istilahnya menjadi "remah roti" seperti ini. Tapi menurut wikipedia, breadcrumbs "is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents".

Konon, dengan navigasi breadcrumbs ini dapat meningkatkan SEO. Benar atau tidaknya belum tahu juga, soalnya dalam logika awam seperti saya, breadcrumbs ini sama saja dengan tag yang terdapat di bawah judul artikel (ada juga yang di bawah artikel) dan blog-pager. Namun sekalipun
Setelah Threaded Comments yang pertama, yang telah dibahas sebelumnya, kali ini saya akan membahas tentang Threaded Comments lain yang bisa diterapkan pada blogspot, seperti yang diterapkan pada blok komentar SC Community.

Pengetahuan tentang Threaded Comments yang satu ini saya peroleh gara-gara pertanyaan Mbak Reni bulan Februari lalu mengenai kemungkinan yang bakal terjadi jika menggunakan Threaded Comments ini. Waktu itu saya belum bisa menjelaskannya karena belum menjajal script-nya, maklum masih dalam keadaan hiatus, hehehe...
Tahu kan Threaded Comments? Itu lho, rangkaian komentar yang bisa dibalas. Nah, mengenai "makhluk" ini entah bermula dari siapa, soalnya begitu banyak blogger yang sudah memuat tulisan ini dengan cara copy paste tanpa menyebutkan sumbernya (hehehe...). Akibatnya, kesalahan penyebutan banyaknya kode yang harus diganti pun sama (padahal cuma satu, hehehe...).

Sebenarnya jika sobat rajin gonta-ganti template, banyak template sekarang yang sudah menambahkan kode HTML untuk Threaded Comments, seperti template WP Zine. Kalau Threaded Comments-nya tidak berfungsi, hal itu

Mambuat Comment Reply Pada Blogspot Alakadarnya

Sesuai dengan judul, reply komentar ini memang alakadarnya. Disebut demikian karena reply yang dihasilkan dimuat di paling bawah komentar, bukan di bawah komentar yang diingin di-reply. Memang kelihatannya kurang memuaskan, tapi sebagai perbendaharaan ilmu ada baiknya kita tahu mengenai "makhluk" yang satu ini. Sebagai contoh bisa dilihat disini.

"Makhluk" ini saya dapatkan secara tidak sengaja dari coderdesire.com, ketika mencari gambar untuk tulisan Threaded Comments yang tengah saya persiapkan. Daripada pengetahuan ini terlewatkan, lebih baik saya menulis masalah ini terlebih dahulu.
Pada bahasan sebelumnya, mengenai auto readmore, saya sudah berjanji akan membahas mengenai cara mengganti readmore versi 1 dan versi 2 dengan auto readmore. Karena bagi beberapa sobat yang sudah terlanjur menggunakan readmore versi 1 atau versi 2, mungkin masih kesulitan jika harus menggantinya dengan auto readmore.

Sebenarnya jika sobat masih ingat kode yang digantikan ketika membuat readmore versi 1 atau versi 2, tidaklah susah untuk mengubahnya menjadi auto readmore ini, karena hanya tinggal menghapus kode-kode tersebut dan menggantikannya dengan kode auto readmore.
Setelah Tabview Section, yang telah dibahas beberapa hari lalu, ilmu lain yang saya peroleh dari hasil ngoprek blog saudara adalah membuat auto readmore (readmore otomatis). Dibanding membuat readmore jenis ke-1 atau jenis ke-2, auto readmore ini lebih enak diterapkan, terutama bagi yang merasa kesulitan atau merasa ribet dalam melakukan pemenggalan paragraf untuk readmore, karena auto readmore ini akan melakukan pemenggalan sendiri secara otomatis.

Namun sayangnya auto readmore ini sangat tidak cocok untuk tulisan berbentuk puisi, lirik, atau dialog, karena pemenggalannya didasarkan pada jumlah karakter yang ditentukan sehingga tulisan-tulisan tersebut akan terlihat seperti sebuah artikel yang tersusun dalam satu paragraf.

Membuat Scroll Pada Halaman Posting Blog

Beberapa waktu lalu saya telah memuat artikel tentang cara membuat scroll pada blok komentar, blog archive, label, link list, dan blog list pada blog ini (SC Community). Dan kali ini, atas tuntutan permintaan salah seorang sobat blogger, saya masih akan membahas seputar scroll tersebut, namun kali ini peletakkannya pada halaman posting blog.

Membuat scroll pada halaman posting dapat dijadikan sebagai salah satu alternatif untuk mengirit halaman blog, selain menggunakan readmore. Disamping itu, selain caranya yang mudah dibandingkan dengan membuat readmore, scroll pada halaman posting dapat membuat tampilan blog menjadi agak berbeda dari blog-blog lain yang umumnya menggunakan readmore.

Mengatasi Masalah Comment Editor Pada Blogger

Pernah kesulitan menuliskan komentar pada salah satu blog akibat kotak verifikasinya tidak muncul sehingga agar bisa memasukkan komentar kita harus mengklik sana klik sini? Jika pernah, sebenarnya itu akibat comment editor-nya yang sedikit bermasalah, terutama jika diberlakukan verifikasi kata pada setingan komentarnya.

Memang bagi admin (pemilik blog) comment editor-nya kelihatan baik-baik saja, karena verifikasi kata tidak akan muncul jika admin yang menuliskan komentar. Tapi bagi komentator yang lain comment editor-nya akan terlihat seperti ini, dimana kotak untuk memasukkan kata verifikasi tidak muncul:

Memberi Penomoran Komentar Pada Blogger

Memberi penomoran pada komentar mungkin tidak terlalu penting tapi untuk supaya tampilan blog terlihat lebih menarik dan tampil beda hal itu sah-sah saja dilakukan, apalagi bagi kamu yang senang mengutak-ngatik blog dan memiliki posting-an yang banyak dikomentari orang.

Untuk menambahkan penomoran pada komentar ini sebenarnya mudah saja kamu dapat mengunjungi situs bloggerstop.net yang telah membuat kreasi menarik untuk penomoran komentar ini. Namun jika kamu lagi males buka-buka situs, apalagi harus menerjemahkannya kedalam bahasa RI, baca saja artikel ini, hehehe.....
Bagi template yang tidak mengalami masalah, untuk menampilkan formulir komentar yang disemat di bawah entri (Embed Comment Form) tidaklah susah, hanya cukup mengaturnya pada Pengaturan - Komentar. Namun bagi template yang tidak mendukung, seperti template WP-Polaroid, Aspire, Jeans 3C, atau template lainnya, kita akan dibuat repot karena harus menambahkan beberapa kode HTML kedalam template-nya, karena jika hanya sekedar melakukan pengaturan pada Pengaturan - Komentar-nya, salah-salah malah kita tidak bisa berkomentar.

Untuk menambahkan formulir komentar disemat di bawah entri (Embed Comment Form) pada template-template yang bermasalah seperti itu, kamu dapat melakukan langkah-langkah berikut:
Bagi yang menggunakan setelan editor entrinya menggunakan Editor yang diperbaharui, menambahkan readmore pada artikelnya sangatlah mudah, cukup dengan mengklik icon break yang terdapat pada bar menu entri. Namun bagi yang menggunakan setelan Editor lama, untuk membuat readmore ini harus menambahkan kode HTML pada template-nya, seperti yang sudah dijelaskan pada artikel tentang readmore sebelumnya. Hanya saja, jika kode HTML yang ditambahkan seperti kode pada penambahan readmore terdahulu (versi 1) maka artikel-artikel yang dibuat sebelumnya akan memunculkan kata readmore di setiap akhir postingan. Tentu saja hal ini sangat mengganggu dan perlu dilakukan editing ulang terhadap artikel-artikel lama tersebut agar readmore berfungsi juga padanya.
Bagi sobat yang tidak menggunakan shoutbox chat, kotak komentar di bawah postingan merupakan ruang yang tepat untuk dijadikan sebagai tempat bertegur-sapa. Namun adakalanya ketika hendak melakukan kunjungan balik, cara yang dilakukan cukup merepotkan karena harus mengklik kanan mouse, lalu memilih Open Link in New Tab supaya link tersebut dibuka pada halaman tab baru.

Sebenarnya link komentator tersebut bisa kita ubah supaya dapat membuka pada halaman tab baru. Cara untuk mengubahnya pun tidaklah sulit. Jika penasaran dan ingin tahu caranya, silahkan kamu ikuti langkah-langkah berikut ini:
Beberapa sobat yang kurang begitu faham dalam menuliskan sebuah link dalam bentuk HTML, biasanya memilih gadget linklist (daftar link) yang sudah disediakan oleh blogger untuk blogroll-nya. Memang gadget linklist ini cukup mudah untuk diterapkan, namun, sebagaimana yang pernah saya jelaskan pada tulisan mengenai membuat blogroll dengan bloglist (daftar blog), linklist (daftar link) ini memiliki kelemahan, yaitu: Pertama, akan berurut secara memanjang kebawah sehingga memenuhi halaman blog, dan kedua, tidak bisa membuka link di tab baru (open link in new tab).

Untuk mengatasi masalah pertama, kamu bisa mempelajarinya pada artikel "Cara Membuat Scroll Pada Linklist". Dan untuk mengatasi masalah kedua, kamu bisa melakukannya dengan langkah-langkah berikut:

Cara Membuat Gambar (Image) Berjalan

Ada saja kawan yang menanyakan bagaimana cara membuat gambar (image) berjalan seperti foto berjalan pada footer (halaman bawah) SC Community. Sebenarnya jika kawan tersebut mau sedikit mencarinya pada artikel-artikel SC Community yang terdapat pada tab content, hal tersebut sudah dijelaskan secara gamblang pada artikel "Cara Membuat Tulisan Berjalan".

Pada dasarnya, cara membuat gambar (image) berjalan sama dengan cara membuat tulisan berjalan, hanya saja kode yang diletakkan setelah perintah marquee bukan berupa tulisan melainkan perintah untuk menampilkan gambar (image). Untuk lebih jelasnya bisa melihat contoh berikut:
Cari-cari bahasan baru kadang membuat saya bingung. Mau nulis tutorial apalagi ya? Itu pertanyaan yang sering muncul. Lalu saya teringat blog sobat saya, Mas Munir. Di atas kotak komentar blognya ada link bertuliskan Form Komentar Klasik. Apaan nih? Saya coba klik. Ternyata eh, ternyata minuman itu haram, hehehe...

Rasa penasaran saya membuat saya melakukan inspect elements melalui Google Chrome terhadap komentar popup window (jendela munculan) ini. Dari situlah saya tahu bagaimana membuat link untuknya.
Pada kebanyakan template, tampilan comment-body untuk komentator dan author (pemilik/admin) tidak dibedakan sehingga warna huruf, background, maupun bingkai (border) kelihatan seragam. Akibatnya, agak sulit untuk membedakan mana komentar/jawaban admin dan mana yang bukan jika tidak diberi tanda @ pada saat admin me-replay komentar kita.

Untuk mengatasi hal tersebut kamu bisa membuat tampilan berbeda pada comment-body. Dengan membuat tampilan yang berbeda ini, selain untuk memudahkan "pembedaan" tadi, juga agar tampilan blok komentar menjadi lebih menarik.
Judul artikel (post), baik pada related post (artikel terkait) maupun pada recent posts, umumnya hanya bisa ditampilkan maksimal 25 judul. Sehingga pembaca yang ingin melihat judul-judul lain, terutama pada related post, akan terbatasi pada 25 judul tadi. Padahal ini cukup penting agar pembaca tidak perlu membuka blog archieve atau site map (peta situs/daftar isi) blog jika ingin mengetahui artikel-artikel lainnya.

Dengan menambahkan jumlah judul artikel yang lebih banyak pada recent posts, misalnya, malah recent posts ini bisa kita jadikan sebagai daftar isi blog. Begitupun dengan menambah jumlah judul artikel pada related post, bisa kita jadikan sebagai daftar isi dalam satu label.
Tentu kamu masih ingat artikel "Cara Membuat Scroll Pada Blok Komentar" yang pernah dimuat pada blog ini beberapa bulan lalu. Pada cara tersebut, scroll dibuat dengan menambahkan atribut pada CSS comments-block. Cara ini memang cukup mudah, sayangnya bagi kamu yang menampilkan avatar blogger profile pada kotak komentarnya, avatar-nya menjadi hilang (tidak ditampilkan). Membuat scroll dengan cara tersebut hanya efektif jika kita menggunakan avatar MyBloglog, seperti pada kotak komentar blog ini.

Cara lain untuk membuat scroll pada blok komentar ini adalah melalui penambahan kode pada HTML blog. Dengan cara ini avatar blogger profile pada kotak komentar akan tetap muncul (kelihatan). Hanya saja dalam menambahkannya perlu kehati-hatian dan ketelitian, salah-salah template blog kamu tidak dapat di-parse. Tapi jangan takut, jika kamu cukup sabar dalam mencari kodenya, cara inipun akan mudah kamu praktekkan.
Banyak sobat yang bertanya, bahkan ada yang melalui email Facebook, mengenai cara mematikan klik kanan mouse setelah melihat pesan yang muncul ketika melakukan klik kanan mouse di blog SC Community. Mungkin sobat tersebut merasa penasaran dan ingin blognya tidak bisa diplagiasi oleh orang lain.

Sebenarnya apabila kita googling, banyak situs yang membahas masalah ini. Tapi demi pengetahuan sobat, tidak ada salahnya saya jelaskan di sini. Namun apakah trik ini benar-benar ampuh untuk menghindari plagiarisme? Itu soal lain, karena bagi para master di bidang ini, bisa saja mereka melakukannya sekalipun sudah diakali sedemikian rupa. Tapi paling tidak, dengan cara ini dapat sedikit mengurangi tindakan plagiarisme.
Jika sobat membaca tiga tulisan sebelumnya, yakni: Membuat Scroll Pada Bloglist, Membuat Scroll Pada Linklist, dan Membuat Scroll Pada Label, pasti dapat menyimpulkan bahwa cara untuk membuat scroll pada gadget blogger/blogspot adalah sama, yaitu dengan cara menambahkan perintah overflow pada kode <div class='widget-content'>. Demikian juga jika kita membuat scroll pada blog archieve ini.

Blog archieve atau arsip blog yang mengunakan pilihan hierarki biasanya akan memanjang tak beraturan, sesuai dengan jumlah artikel yang kita publish tiap bulannya (bisa juga mingguan, tergantung pilihan kita). Tentu saja ini akan sedikit mengganggu penampilan blog kamu karena panjang sidebar menjadi tidak menentu. Untuk itulah perlu dibuatkan scroll agar panjangnya tetap sesuai aturan yang kita buat.