Cara Mengubah Tampilan Halaman Depan Blog

Halaman Depan Blog Jejak-jejak yang Terserak
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 :

  1. Masuk ke halaman dashboard
  2. Pada menu sebelah kiri, klik menu “Tampilan” atau “View”, lalu pilih “Kustomisasi” atau “Customize”.
  3. Pada bagian pemilihan halaman depan, pilih opsi jalaman statis, lalu pilih nama halaman yang sudah dibuat sebelumnya.
  4. Simpan.
  5. 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 :

63 thoughts on “Cara Mengubah Tampilan Halaman Depan Blog

  1. Andik Taufiq Maret 4, 2015 / 14:12

    technical details berbicara… 😀
    mantab Bang

    • jampang Maret 4, 2015 / 14:29

      😀
      semoga bsia memberikan manfaat

  2. naniknara Maret 4, 2015 / 14:57

    Kapan-kapan di coba ah
    Makasih sharingnya

  3. nengwie Maret 4, 2015 / 14:57

    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…

    • Ryan Maret 4, 2015 / 18:39

      Teteh masih utang sama aku.

      • nengwie Maret 4, 2015 / 18:40

        Utang…?? Beli apa ya kemaren itu..? 😁

      • Ryan Maret 4, 2015 / 18:41

        Hahahaha. Topik blogging buat aku post. Hahaha

  4. lazione budy Maret 4, 2015 / 15:08

    pantesan tampilan blog sampeyan ‘home’ nya berubah drastis.
    Dari awal saya ga pernah otak atik, hehe…

    • jampang Maret 4, 2015 / 15:46

      itu ngubah karena pengen suasana baru 😀

  5. Gara Maret 4, 2015 / 15:42

    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.

    • jampang Maret 4, 2015 / 16:11

      begitulah kira-kira 😀
      pasti bisa lah

  6. Ryan Maret 4, 2015 / 18:40

    Makasih Mas tutorialnya.
    Harus sambil coba nih. Kalau gak sih susah yak.

    • jampang Maret 5, 2015 / 07:27

      sama-sama.
      yup. harus dicoba langsung

      • Ryan Maret 5, 2015 / 07:44

        Baru baca dr hape mas.
        Ini bener2 mulai main coding yak. Haha

      • jampang Maret 5, 2015 / 07:48

        iyap. tapi coding sederhana aja

      • Ryan Maret 7, 2015 / 16:12

        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?

      • jampang Maret 8, 2015 / 05:34

        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

      • Ryan Maret 8, 2015 / 06:23

        Jadi tinggal ketik nama sub kategorinya aja gt mas?

      • jampang Maret 8, 2015 / 14:10

        yup. cukup itu aja

      • Ryan Maret 8, 2015 / 14:17

        Okay mas. Makasih ya mas.

      • jampang Maret 9, 2015 / 05:40

        sama-sama

  7. yosbeda Maret 4, 2015 / 19:34

    Panduan yang sangat bermanfaat untuk teman-teman yang baru belajar mas, mantap

  8. vizon Maret 4, 2015 / 22:20

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

    • jampang Maret 5, 2015 / 07:29

      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!

  9. rhey Maret 5, 2015 / 00:24

    Aaaaaaah…., sungguh saya terhura baca postingannya secara blog saya g ada modifikasinya sedikitpun padahal pengeeen huuuuu

    • jampang Maret 5, 2015 / 07:34

      kalau di blogspot, template pilihannya lebih banyakkan. tinggal copy paste kodenya aja

  10. zizadesita Maret 5, 2015 / 04:06

    👍👍👍
    Saya kadang juga nyoba ngutak-atik blog, tapi udah trauma ama kegagalan ngutak-atik sistem di hape😢 jadinya trimo ing pandum ajah..

    • jampang Maret 5, 2015 / 07:35

      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 😀

      • zizadesita Maret 5, 2015 / 07:38

        Ho’o bener Bang, memang patut dicoba kok.

      • jampang Maret 5, 2015 / 07:47

        selamat mencoba kalau begitu 😀

  11. Tita Bunda Aisykha Maret 5, 2015 / 09:41

    Aaahh,,pengeen,,haruskah pakai laptop untuk bikin sepuluh tulisan yg sama itu muncul di bagian akhir, bang? Atau bisa dr tablet saja?

    • jampang Maret 5, 2015 / 09:57

      dari tablet bisa, mbak. yambahin aja kodenya di atas. disesuaikan dengan penamaan kategori atau tag di blog mbak

  12. dani Maret 5, 2015 / 11:35

    mantabh Bang, jadi lebih banyak konten yang bisa ditampilkan ya Bang jadinya.. 🙂 instead of hanya menampilkan similiar post aja ya 🙂

    • dani Maret 5, 2015 / 11:36

      Oiya, makasih ilmunya Bang 🙂

      • jampang Maret 5, 2015 / 13:19

        sama-sama, mas

    • jampang Maret 5, 2015 / 13:19

      iya, meskipun cuma sekedang judulnya aja

  13. MS Maret 6, 2015 / 23:04

    mantap, trims ilmunya bang

  14. Titik Asa Oktober 28, 2015 / 11:21

    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,

    • jampang Oktober 28, 2015 / 13:25

      diopreknya terbatas, kang. namanya juga versi gratisan 😀

  15. alrisblog Februari 10, 2016 / 08:52

    Kayaknya saya juga pengen ganti suasana blog nih. Terima kasih sudah berbagi.

    • jampang Februari 10, 2016 / 09:06

      sama-sama, mas.
      ganti suasana juga bisa ngusir rasa bosan 😀

  16. @dodon_jerry April 21, 2016 / 17:11

    with. pantesan tampilan depannya cantik, saatnya nyoba nyoba di blog sendiri

  17. Sri Lestari Mei 24, 2016 / 14:31

    Sepertinya kapan kapan boleh juga dicoba nih caranya.

  18. baiqrosmala Agustus 30, 2016 / 13:06

    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?

    • jampang Agustus 30, 2016 / 13:23

      iya, mbak. itu untuk menampilkan 10 tulisan terakhir di blog berdasarkan kategori atau tag.

      • baiqrosmala Agustus 30, 2016 / 13:24

        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 🙂

      • jampang Agustus 30, 2016 / 13:26

        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

      • baiqrosmala Agustus 30, 2016 / 13:28

        iyaaa, untung ada cara mudah seperti ini ^^

      • jampang Agustus 30, 2016 / 13:53

        😀

      • baiqrosmala Agustus 30, 2016 / 13:30

        oiya mas, itu nulisnya di bagian visual atau text yaa?

      • jampang Agustus 30, 2016 / 13:53

        saya biasanya nulis di bagian text, mbak

      • baiqrosmala Agustus 30, 2016 / 13:55

        ooh oke, sudah berhasiiiil, yeay! ^^

  19. awhy Januari 6, 2017 / 10:03

    akhirnya ketemu, cuman bahasanya kurang ngerti dikit.. izin nyoba yaaaa,,hehehehe
    semoga sukses selalu..

    Salam

Tinggalkan jejak anda di sini....

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s