Blogging

Cara Membuat Box Warna Pada Artikel di Blogspot dan WordPress

Cara Membuat Box Warna Pada Artikel di Blogspot dan Wordpress

Cara Membuat Box Warna Pada Artikel di Blogspot dan WordPress

Pernahkah Anda melihat ada box warna pada artikel di dalam posting website yang Anda baca?

Box warna tersebut dapat mempercantik tampilan postingan Anda, serta dapat memberikan kesan bagian penting pada artikel yang Anda buat.

Beberapa box yang biasanya digunakan bisa diberikan warna sesuai kebutuhan Anda. Beberapa contoh bo yang saya gunakan biasanya adalah :

[box type=”info” align=”aligncenter” class=”” width=”100%”]box ini untuk menandakan info penting[/box] [box type=”success” align=”aligncenter” class=”” width=”100%”]box ini untuk mempertegas artikel yang penting[/box] [box type=”warning” align=”aligncenter” class=”” width=”100%”]box ini saya gunakan untuk memberikan info penting dalam tutorial yang bertahap[/box] [box type=”error” align=”aligncenter” class=”” width=”100%”]box ini saya gunakan jika terdapat pesan error saat membuat artikel jenis tutorial[/box] [box type=”download” align=”aligncenter” class=”” width=”100%”]box ini saya gunakan untuk menempatkan link download[/box] [box type=”note” align=”aligncenter” class=”” width=”100%”]Box ini biasanya saya gunakan untuk membuat footnote[/box]

Baiklah, langsung saja kita bahas bagaimana Cara Membuat Box Warna Pada Artikel.

Cara Membuat Box Warna Pada Artikel di Blogspot :

Pada blogger atau blogspot, kita tidak bisa menambahkan plugin layaknya pada wordpress. Jadi untuk membuat box kita harus membuat css-nya secara manual.

  • Cara Membuat Code Box Pada Blogger

Untuk membuat CSS secara manual pada blogger, Anda bisa menuju tab Template » Edit HTML.

Kemudian buat code CSS seperti dibawah ini.

/* Boxes Shortcode */
.box-merah {
    padding: 20px;
    background-color: #f97e76 ;
    margin-bottom: 20px;
    color: #FFFFFF;
}
.box-biru {
    padding: 20px;
    background-color: #99a8d1 ;
    margin-bottom: 20px;
    color: #FFFFFF;
}
.box-hijau {
    padding: 20px;
    background-color: #BFD73B ;
    margin-bottom: 20px;
    color: #FFFFFF;
}

Kemudian cari code <style type=’text/css’> dan paste code diatas tepat dibawah code <style type=’text/css’> atau sebelum </style>

Note :
1. Margin dan padding adalah kode untuk mengatur jarak keluar dan kedalam.
2. Background color adalah kode untuk mengatur warna box
3. Color adalah kode untuk menentukan warna yang ada di dalam box tersebut

Ada beberapa cara untuk mendapatkan kode warna, beberapa diantarnya :

  • Melalui aplikasi digital imaging seperti Adobe ilustrator dan phosotop, Corel dan sebagainya.
  • Melalui Website orang lain dengan menggunakan add on firebug (mozilla firefox)
  • Melalui CSS generator dari online, dan ambil kode warna dengan awalan #
[divider style=”dotted” top=”5″ bottom=”5″]
  • Cara Menggunakannya Pada Blogger

Seperti yang saya sampaikan diatas, pada blogger kita harus menggunakannya secara manual.

Yaitu dengan membuat postingan baru dan membuatnya dalam tab HTML seperti gambar dibawah

Gambar : Penggunaan Box Pada Posting Blogger

Note :
1. Pastikan Anda memulai dengan tag <div> dan menutup tag dengan menambahkan tag </div> sebagai penutup box warna.
2. Untuk membuat “enter” pada tab HTML Anda harus menggunakan tag <br> pada setiap akhir kalimat yang inging Anda sisipi “enter”.

Gambar : Hasil Penerapan Code Box Warna

Cara Membuat Box Warna Pada Artikel di WordPress :

Jika di blogger kita hanya bisa melakukannya hanya dengan cara manual, tetapi tidak dengan wordpress. Di wordpress kita bisa menggunakan 2 cara yaitu dengan manual atau otomatis (plugin).

  • Secara manual

Untuk cara manual tidak jauh beda dengan blogger, Anda tinggal menyisipkan kode diatas pada menu Appearance » Editor » Style.css » Paste code.

Dan menerapkannya sama dengan penerapan pada blogger, yaitu pada tab posting HTML/text.

  • Secara otomatis / Plugin

Untuk cara otomatis dari wordpress ini terdapat 2 bagian yaitu dari plugin pihak ketiga dan asli dari template yang Anda gunakan.

Contoh box warna diatas saya buat dari bawaan template yang saya gunakan. Namun jika ternyata template yang Anda gunakan tidak mendukung penerapan box warna, Anda bisa menggunakan plugin Shortcodes.

Baca juga artikel : Plugin WordPress Terbaik Untuk Website Anda

Setelah menginstal plugin diatas, Untuk menggunakannya sangat mudah.

Buat posting baru dan pilih tombol Insert shortcode pada bagian atas menu posting » Note

Silahkan atur warna dan style sesuai kebutuhan Anda.

Contoh box warna dengan plugin
[divider style=”double” top=”5″ bottom=”5″] Sekian artikel Blogging mengenai Cara Membuat Box Warna Pada Artikel di Blogspot dan WordPress kali ini, Semoga bisa memberi inspirasi kepada Anda, Terima Kasih.

Jika Ada yang ingin ditambahkan atau ditanyakan silahkan mengisi kolom komentar.

Silahkan Like Fanspage kami dan Share artikel ini Jika Menurut Anda Bermanfaat Untuk Anda dan Orang Lain.

REAKSI KAMU?
Bagikan Votingmu!!
0
0
0
0
0
0
0
0
0

Artikel Terkait :

Click to comment

Facebook Comment

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

To Top