Tutorial

Halaman Depan Blog Jejak-jejak yang Terserak

Seperti yang sudah pernah saya ceritakan di postingan “My Blog My Style” , saat pertama memasuki dunia blog, saya jarang membuat tulisan sendiri kecuali puisi. Saya lebih sering melakukan copy-paste artikel dari internet ke blog intranet. Tentunya dengan menyertakan sumber aslinya. Selain itu, saya lebih sering mengutak-atik tampilan blog.

Kebiasaan mengutak-atik tersebut masih terbawa hingga saat ini. Meskipun saya tidak rutin melakukannya. Khusus untuk tampilan halaman depan di blog saya ini, saya melakukannya kurang lebih 4 kali.

Awalnya, tampilan halaman depan blog jampang ini mengikuti template yang ada. Semisal menampilkan postingan terakhir plus sticky post. Namun dengan adanya sticky post, saya harus rajin-rajin mengupdate agar para pengunjung tidak tertipu karena menganggap saya tidak mempublikasikan coretan baru.

Tampilan halaman depan berikutnya saya ubah dengan membuat halaman yang berisi judul coretan saya berdasarkan kategori. Sayangnya, saya juga harus rajin mengupdate halaman tersebut ketika saya mempulikasikan coretan terbaru karena judul dan linknya tidak otomatis terupdate. Saya harus melakukannya secara manual.

Dua cara di atas kurang efektif dan efisien. Hingga suatu ketika saya mengenal yang namanya display post shortcode yang merupakan salah satu fitur yang disediakan wordpress. Fungsi dari kode tersebut adalah untuk menampilkan beberapa judul tulisan yang memiliki kategori atau tag yang sama. Bisa tiga, lima, atau sepuluh judul.

Apakah ada yang memperhatikan yang terdapat di bagian akhir setiap coretan di blog ini? Terdapat tambahan 10 link judul coretan saya yang lain yang berkategori atau memiliki tag yang sama dengan coretan di atasnya. Nah, saya menggunakan display post shortcode untuk mebuatnya.

Jika di tutorial sebelumnya saya membahas bagaimana cara membagi sebuah postingan menjadi beberapa halaman, maka di tutorial kali ini saya akan membahas penggunaan display post shortcode untuk mengubah tampilan halaman depan blog Anda menjadi sedikit berbeda.

Display post shortcode yang saya gunakan di akhir setiap coretan ada dua macam, yaitu :

1. Menampilkan 10 judul tulisan sebelumnya yang memiliki kategori yang sama dengan coretan di atasnya dengan menggunakan kode berikut :

[ display-posts category=”jejak-cerita” ]

Kode tersebut ditulis tanpa spasi setelah tanda “[” dan sebelum “]”. Fungsi kode tersebut adalah untuk menampilkan 10 judul tulisan terakhir yang berkategori “jejak cerita”. Kata “jejak-cerita” dalam kode tersebut bisa diganti dengan apa saja sesuai dengan penamaan ketegori di dalam blog. Yang perlu diperhatikan adalah penggunaan tanda baca “-“ untuk setiap kata jika penamaan kategori lebih dari satu kata.

Lantas, bisakah beberapa kategori digabungkan di dalam kode tersebut? Jawabnya bisa. Caranya dengan memisahkan setiap kategori dengan tanda “,” di dalam penulisannya di kode tersebut. Misalnya menjadi :

[ display-posts category=”jejak-cerita, jejak-foto, jejak-aksara” ]

2. Menampilkan 10 judul tulisan sebelumnya yang memiliki tag yang sama dengan coretan di atasnya dengan menggunakan kode berikut :

[ display-posts tag=”pelangi-kehidupan” ]

Kode tersebut ditulis tanpa spasi setelah tanda “[” dan sebelum “]”. Fungsi kode tersebut adalah untuk menampilkan 10 judul tulisan terakhir yang memiliki tag “pelangi kehidupan”. Kata “pelangi-kehidupan” dalam kode tersebut bisa diganti dengan apa saja sesuai dengan penamaan tag setiap tulisan di dalam blog. Yang perlu diperhatikan adalah penggunaan tanda baca “-“ untuk setiap kata jika penamaan tag lebih dari satu kata.

Lantas, bisakah beberapa tag digabungkan di dalam kode tersebut? Jawabnya bisa. Caranya dengan memisahkan setiap tag dengan tanda “,” di dalam penulisannya di kode tersebut. Misalnya menjadi :

[ display-posts tag=”pelangi-kehidupan, sedekah, hadiah-lomba” ]

Setelah mengetahui display post shortcode tersebut, saya menggunakannya untuk tampilan halaman depan di blog ini. Jika Anda melihat tampilan halaman depan blog jampang ini, maka akan ada lima judul tulisan untuk setiap kategori yang ada. Kode yang saya gunakan adalah :

[ display-posts category=”me-n-my-self” posts_per_page=”5″ ]

Kode tersebut ditulis tanpa spasi setelah tanda “[” dan sebelum “]”. Fungsi kode tersebut adalah untuk menampilkan 5 judul tulisan terakhir yang berkategori “jejak cerita”. Modifikasi bisa dilakukan untuk penulisan nama kategori dan mungkin jumlah judul tulisan yang ingin ditampilkan.

Jika Anda ingin menggunakan kode di atas untuk halaman depan blog yang Anda kelola, Anda bisa mencoba dengan membuat sebuah halaman dengan isi seperti berikut :

KATEGORI SATU
[ display-posts category=”kategori-satu” posts_per_page=”5″ ]

KATEGORI DUA
[ display-posts category=”kategori-dua” posts_per_page=”5″ ]

KATEGORI TIGA
[ display-posts category=”kategori-tiga” posts_per_page=”5″ ]

KATEGORI EMPAT
[ display-posts category=”kategori-empat” posts_per_page=”5″ ]

Perhatikan penamaan dan penulisan nama kategori yang harus disesuaikan dengan kategori yang terdapat di blog Anda. Jika sudah, simpan halaman tersebut dengan nama sesuai keinginan Anda. Lalu lihat bagaimana penampakan hasilnya.

Hasilnya sudah bisa dilihat, tetapi mengapa tampilannya memanjang ke bawah, tidak menyamping seperti tampilan halaman depan blog jampang?

Baiklah, sekarang kita ke tahap berikutnya. Untuk menghasilkan tampilan seperti di halaman depan blog jampang, saya menambahkan kode HTML untuk membuat tabel dua kolom. Kode HTML untuk membuat tabel dengan dua kolom standar adalah sebagai berikut :

<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>KOLOM SATU</td>
</tr>
<tr>
<td>KOLOM DUA</td>
</tr>
</table>

Nilai 0 pada border menujukkan tingkat ketebalan garis pada tabel yang dibuat.
Nilai 0 pada cellspacing menujukkan jarak spasi antar sel.
Nilai 0 pada cellpadding menunjukkan jarak spasi dari border ke tulisan dalam kolom

Kode HTML di atas kemudian digabungkan dengan penulisan display post shortcode sebelumnya sehingga menjadi seperti berikut :

<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
KATEGORI SATU
[ display-posts category=”kategori-satu” posts_per_page=”5″ ]
KATEGORI DUA
[ display-posts category=”kategori-dua” posts_per_page=”5″ ]
</td>
</tr>
<tr>
<td>
KATEGORI TIGA
[ display-posts category=”kategori-tiga” posts_per_page=”5″ ]
KATEGORI EMPAT
[ display-posts category=”kategori-empat” posts_per_page=”5″ ]
</td>
</tr>
</table>

Untuk penulisan kode di atas harus dilakukan pada form pembuatan halaman dengan tampilan “teks” atau “text” dengan mengklik tab “Teks” atau “Text” yang terdapat di pojok kanan atas untuk mengubah menjadi tampilan teks.

Jika sudah selesai. Segera simpan dan lihat hasilnya.

Untuk menampilkan halaman yang baru saja dibuat menjadi halaman depan blog, maka langkah-langkah yang harus dilakukan adalah sebagai berikut :

Masuk ke halaman dashboard
Pada menu sebelah kiri, klik menu “Tampilan” atau “View”, lalu pilih “Kustomisasi” atau “Customize”.
Pada bagian pemilihan halaman depan, pilih opsi jalaman statis, lalu pilih nama halaman yang sudah dibuat sebelumnya.
Simpan.
Buka blog Anda.

Mungkin masih sedikit ada perbedaan penampilan halaman tersebut dengan halaman depan blog jampang. Perbedaan tersebut disebabkan karena saya menggunakan gambar untuk menggantikan oenulisan judul dengan huruf. Jika Anda memiliki gambar yang bisa dijadikan sebagai judul atau kepala masing-masing kategori, maka ganti setiap judul atau kepala kategori dengan gambar yang Anda miliki dengan cara menambahkan gambar tersebut seperti menambahkan gambar pada postingan. Sesuaikan saja peletakkannya agar pas.

Selamat mencoba!

Tulisan Terkait Lainnya :