Cara Buat Featured Box pada Konten WordPress dan Blogger

Ini adalah tutorial singkat mengenai cara buat featured box sederhana pada blog WordPress dan Blogger dengan memakai shortcode dan CSS.

Seperti namanya, featured box adalah sebuah kotak/area khusus yang bisa digunakan untuk menonjolkan salah satu bagian konten. Beberapa penggunaan featured box yang cukup populer adalah untuk menampilkan link CTA atau link download.

Contoh penggunaan featured box sederhana bisa kamu lihat pada contoh di bawah ini;

Contoh <em>featured box</em> sederhana untuk menonjolkan salah satu bagian konten.
Contoh featured box sederhana untuk menonjolkan salah satu bagian konten.

Untuk membuatnya, ada dua cara yang bisa kamu lakukan. Pertama dengan membuat shortcode, kedua dengan menggunakan CSS.

Cara Membuat Featured Box dengan Shortcode

Dengan shortcode, kita bisa menyimpan sebuah fungsi dan menggunakannya hanya dengan menulis sebuah perintah sederhana. Sebagai contoh, misalnya saja saya membuat shortcode [ubahteks] untuk mengubah ukuran dan warna sebuah teks. Dengan begitu, saya hanya perlu menulis [ubahteks]KATA/KALIMAT[/ubahteks] pada editor visual WordPress untuk mengubah tampilan kata atau kalimat tersebut.

Untuk membuat featured box dengan shortcode, kamu bisa menambahkan kode berikut pada file functions.php

function buat_featured_box ($atts, $content = null) {
    return '<p style="background:#FFEE58; padding:1em; border:1px solid #eaeaea">'.do_shortcode($content).'</p>';
}

add_shortcode ('featuredbox', 'buat_featured_box')

Setelah itu, kita hanya perlu menambahkan tag [featuredbox] untuk membuat featured box seperti contoh di bawah ini

[featuredbox]KONTEN[/featuredbox]

Satu catatan penting, jika kamu memutuskan untuk tidak lagi menggunakan shortcode ini, pastikan kamu mengganti nilai shortcode dengan nilai kosong atau menghapus shortcode tersebut. Dengan begitu shortcode yang tidak terpakai tidak akan terlihat ‘mengotori’ sebuah artikel.

Cara Membuat Featured Box dengan CSS

Cara membuat featured box dengan shortcode dapat dilakukan dengan mudah pada WordPress namun akan cukup sulit pada Blogger. Sebagai alternatif, kita bisa menggunakan kode CSS.

Untuk melakukannya, kita akan membuat class khusus dengan tampilan yang kita atur sendiri. Sebagai contoh, saya akan membuat class fbox dengan kode CSS seperti berikut ini:

.fbox {
    background: #FFEE58;
    padding: 1em;
    border: 1px solid #eaeaea
}

Untuk mengaplikasikan class ini pada konten, ubah editor WordPress ke mode TEXT/HTML dan tambahkan class ini secara manual seperti contoh berikut:

<p class="fbox">KONTEN</p>

Demikian tutorial cara buat featured box pada WordPress dan Blogger, mudah-mudahan bisa membantu. Jika kamu memiliki tips lainnya, jangan segan untuk berbagi pada kolom komentar di bawah ini.
Pos Terkait:

2 thoughts on “Cara Buat Featured Box pada Konten WordPress dan Blogger”

    1. Hi mas Dirman

      Hmmm, saya tidak tahu kalau ada plugin khusus untuk ini, tapi memang ada baiknya kalau untuk hal sederhana semacam ini dilakukan sendiri.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.