Cara Membuat Box Warna Pada Artikel di Blogspot dan WordPress


Cara Membuat Box Warna Pada Artikel di Blogspot dan Wordpress
thumbnail-caption

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

[su_spoiler title=”Gambar : Penggunaan Box Pada Posting Blogger” style=”simple” icon=”arrow”]

Penggunaan Box Pada Posting Blogger
Penggunaan Box Pada Posting Blogger

[/su_spoiler]

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

[su_spoiler title=”Gambar : Hasil Penerapan Code Box Warna” style=”simple” icon=”arrow”]

Hasil Penerapan Code Box Warna
Hasil Penerapan Code Box Warna

[/su_spoiler]

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.

[su_note note_color=”#bcff66″]Contoh box warna dengan plugin[/su_note]

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


Mungkin Kamu Juga Suka :

What's Your Reaction?

Cute Cute
0
Cute
Cuek Cuek
0
Cuek
Lol Lol
0
Lol
Love Love
0
Love
OMG OMG
0
OMG
Angry Angry
0
Angry
Like Like
0
Like
Dislike Dislike
0
Dislike

Comments 0

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

log in

Become a part of our community!

Captcha!
Don't have an account?
sign up

reset password

Back to
log in

sign up

Captcha!
Back to
log in
Open
Close
Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Open List
Open List
Ranked List
Ranked List
Meme
Upload your own images to make custom memes
Image
Photo or GIF
Gif
GIF format

Send this to a friend