Cara Menciptakan 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 sanggup mempercantik tampilan postingan Anda, serta sanggup menawarkan kesan bab penting pada artikel yang Anda buat.
Beberapa box yang biasanya dipakai sanggup diberikan warna sesuai kebutuhan Anda. Beberapa pola bo yang saya gunakan biasanya yaitu :
[box type=”info” align=”aligncenter” class=”” width=”100%”]box ini untuk menunjukan gosip 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 menawarkan gosip penting dalam tutorial yang bertahap[/box]
[box type=”error” align=”aligncenter” class=”” width=”100%”]box ini saya gunakan kalau terdapat pesan error ketika menciptakan artikel jenis tutorial[/box]
[box type=”d0wnl0ad” align=”aligncenter” class=”” width=”100%”]box ini saya gunakan untuk menempatkan link d0wnl0ad[/box]
[box type=”note” align=”aligncenter” class=”” width=”100%”]Box ini biasanya saya gunakan untuk menciptakan footnote[/box]
Baiklah, eksklusif saja kita bahas bagaimana Cara Membuat Box Warna Pada Artikel.
Cara Membuat Box Warna Pada Artikel di Blogspot :
Pada blogger atau blogspot, kita tidak sanggup menambahkan plugin layaknya pada wordpress. Kaprikornus untuk menciptakan box kita harus menciptakan css-nya secara manual.
- Cara Membuat Code Box Pada Blogger
Untuk menciptakan CSS secara manual pada blogger, Anda sanggup menuju tab Template » Edit HTML.
Kemudian buat code CSS menyerupai 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 sempurna dibawah code <style type=’text/css’> atau sebelum </style>
Note :
1. Margin dan padding yaitu instruksi untuk mengatur jarak keluar dan kedalam.
2. Background color yaitu instruksi untuk mengatur warna box
3. Color yaitu instruksi untuk memilih warna yang ada di dalam box tersebut
Ada beberapa cara untuk mendapat instruksi warna, beberapa diantarnya :
- Melalui aplikasi digital imaging menyerupai Adobe ilustrator dan phosotop, Corel dan sebagainya.
- Melalui Website orang lain dengan memakai add on firebug (mozilla firefox)
- Melalui CSS generator dari online, dan ambil instruksi 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 menciptakan postingan gres dan membuatnya dalam tab HTML menyerupai gambar dibawah
[su_spoiler title=”Gambar : Penggunaan Box Pada Posting Blogger” style=”simple” icon=”arrow”]
[/su_spoiler]
Note :
1. Pastikan Anda memulai dengan tag <div> dan menutup tag dengan menambahkan tag </div> sebagai epilog box warna.
2. Untuk menciptakan “enter” pada tab HTML Anda harus memakai tag <br> pada setiap selesai kalimat yang inging Anda sisipi “enter”.
[su_spoiler title=”Gambar : Hasil Penerapan Code Box Warna” style=”simple” icon=”arrow”]
[/su_spoiler]
Cara Membuat Box Warna Pada Artikel di WordPress :
Jika di blogger kita hanya sanggup melakukannya hanya dengan cara manual, tetapi tidak dengan wordpress. Di wordpress kita sanggup memakai 2 cara yaitu dengan manual atau otomatis (plugin).
- Secara manual
Untuk cara manual tidak jauh beda dengan blogger, Anda tinggal menyisipkan instruksi diatas pada sajian 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 bab yaitu dari plugin pihak ketiga dan orisinil dari template yang Anda gunakan.
Contoh box warna diatas saya buat dari bawaan template yang saya gunakan. Namun kalau ternyata template yang Anda gunakan tidak mendukung penerapan box warna, Anda sanggup memakai plugin Shortcodes.
Baca juga artikel : Plugin WordPress Terbaik Untuk Website Anda
Setelah menginstal plugin diatas, Untuk menggunakannya sangat mudah.
Buat posting gres dan pilih tombol Insert shortcode pada bab atas sajian 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 sanggup memberi ide 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.
Sumber https://bacaanku.com/
0 Response to "Cara Menciptakan Box Warna Pada Artikel Di Blogspot Dan Wordpress"
Posting Komentar