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 :
- Cara Mengubah Tampilan Halaman Depan Blog
- Cara Membagi Sebuah Tulisan ke Dalam Beberapa Halaman
- New Look
- Sekadar Mengubah Suasana
- Tampilan Artikel Terkait Menggunakan Thumbnail
- Memunculkan dan Menyembunyikan Form Komentar di WordPress
- Cara Pasang Widget Alexa Rank Di WordPress
- Tools Migrasi MP : Sebuah Review
- Posting ke Blogspot via Email
- Siang-siang goreng kentang
Jejak-jejak yang Terserak 
technical details berbicara… 😀
mantab Bang
😀
semoga bsia memberikan manfaat
Kapan-kapan di coba ah
Makasih sharingnya
selamat mencoba mbak
Waaah teteh pusing bacanyaaa hehee
Udah gaptek trs ngga mau belajar pulaaa ..parah yaaa…😁😱😱
Jadi teteh mah pake yg sudah ada aja deh…hehe
Tp nuhuun buat infonya…
sama-sama, teh
Teteh masih utang sama aku.
Utang…?? Beli apa ya kemaren itu..? 😁
Hahahaha. Topik blogging buat aku post. Hahaha
pantesan tampilan blog sampeyan ‘home’ nya berubah drastis.
Dari awal saya ga pernah otak atik, hehe…
itu ngubah karena pengen suasana baru 😀
Terima kasih sekali sudah berbagi ilmu ini, Mas. Mantap, langkahnya jelas dan mudah dimengerti.
Ternyata dasarnya dari page yang ditambah dengan syntax-syntax HTML. Wow.
Syntax-nya itu yang sepertinya harus saya pelajari pelan-pelan :hehe.
begitulah kira-kira 😀
pasti bisa lah
Makasih Mas tutorialnya.
Harus sambil coba nih. Kalau gak sih susah yak.
sama-sama.
yup. harus dicoba langsung
Baru baca dr hape mas.
Ini bener2 mulai main coding yak. Haha
iyap. tapi coding sederhana aja
Makasih banyak Mas. Sudah coba untuk munculkan yang di bawah postingan sih. Belum yang page.
Kalau kita punya sub-kategori gak bisa ya mas ditampilkan yang sub-kategorinya aja?
sebenarnya itu diaggap kategori juga koq. jadi bisa. di page home itu yang saya tampilkan adalah subkategorinya. cuma beda peletakan aja saat milih kategori waktu mau posting
Jadi tinggal ketik nama sub kategorinya aja gt mas?
yup. cukup itu aja
Okay mas. Makasih ya mas.
sama-sama
Panduan yang sangat bermanfaat untuk teman-teman yang baru belajar mas, mantap
semoga bermanfaat.
Sudah lama sekali saya tidak otak-atik blog sejak terakhir kali mengalami kesalahan fatal dan mengakibatkan blog saya rusak total. Beruntung ada teman yang ahli, sehingga postingan saya bisa diselamatkan. Hal itu membuat saya menjadi lebih berhat-hati kalau melakukan perubahan tampilan blog saya.
Namun, postingan ini kembali menggoda rasa penasaran saya dan ingin mencobanya.. 😀
kalau yang pake domain sendiri mungkin perubahannya harus lebih teliti, soalnya kode-kodenya kan lebih rumit. beda dengan yang gratisan. utak-atiknya terbatas dan efeknya juga beresiko rendah 😀
selamat berkreasi!
Aaaaaaah…., sungguh saya terhura baca postingannya secara blog saya g ada modifikasinya sedikitpun padahal pengeeen huuuuu
kalau di blogspot, template pilihannya lebih banyakkan. tinggal copy paste kodenya aja
👍👍👍
Saya kadang juga nyoba ngutak-atik blog, tapi udah trauma ama kegagalan ngutak-atik sistem di hape😢 jadinya trimo ing pandum ajah..
kalau di HP saya nggak berani utak-atik, mbak.
kalau di blog ini seh berani saya. kalau bermasalah ya balikin aja ke themes semula atau pilih yang lain 😀
Ho’o bener Bang, memang patut dicoba kok.
selamat mencoba kalau begitu 😀
Aaahh,,pengeen,,haruskah pakai laptop untuk bikin sepuluh tulisan yg sama itu muncul di bagian akhir, bang? Atau bisa dr tablet saja?
dari tablet bisa, mbak. yambahin aja kodenya di atas. disesuaikan dengan penamaan kategori atau tag di blog mbak
mantabh Bang, jadi lebih banyak konten yang bisa ditampilkan ya Bang jadinya.. 🙂 instead of hanya menampilkan similiar post aja ya 🙂
Oiya, makasih ilmunya Bang 🙂
sama-sama, mas
iya, meskipun cuma sekedang judulnya aja
mantap, trims ilmunya bang
sama-sama, mbak
Selama ini saya pasrah dgn template yg saya pilih di wordpress. Rupanya bisa di oprek juga.
Kapan-kapan saya coba di blog saya deg…
Makasih sharingnya Mas.
Salam,
diopreknya terbatas, kang. namanya juga versi gratisan 😀
Kayaknya saya juga pengen ganti suasana blog nih. Terima kasih sudah berbagi.
sama-sama, mas.
ganti suasana juga bisa ngusir rasa bosan 😀
with. pantesan tampilan depannya cantik, saatnya nyoba nyoba di blog sendiri
selamat mencoba 😀
Sepertinya kapan kapan boleh juga dicoba nih caranya.
silahkan, mbak
mas cara yang pake [ display-posts category=”jejak-cerita” ] itu untuk menampilkan list tulisan di akhir setiap postingan yaa? kayak 10 list yang ada di bawah postingan yang lagi saya baca ini?
iya, mbak. itu untuk menampilkan 10 tulisan terakhir di blog berdasarkan kategori atau tag.
wahh asiiik, ilmu baru, saya awalnya ngira itu dibuat manual, aiih rajin sekali kalau beneran bikin manual, ternyata ada rumusnya ya.. thank you udah sharing 🙂
kalau manual pasti ribet, mbak. dan statis, nggak berubah-ubah. kalau dengan rumus itu kan simple dan dinamis. kalau ada postingan baru, otomatis akan mengubah susunan sebelumnya
iyaaa, untung ada cara mudah seperti ini ^^
😀
oiya mas, itu nulisnya di bagian visual atau text yaa?
saya biasanya nulis di bagian text, mbak
ooh oke, sudah berhasiiiil, yeay! ^^
terima kasih sarannya
sama-sama
akhirnya ketemu, cuman bahasanya kurang ngerti dikit.. izin nyoba yaaaa,,hehehehe
semoga sukses selalu..
Salam
silahkan 😀