Cara Membuat Warna Background Text Pada Postingan Artikel Di WordPress

Hosting Murah Berkualitas

Pada kesempatan kali ini saya ingin berbagi tips bagaimana cara membuat tulisan yang ada pada artikel postingan anda itu bisa berwarna latar belakang berbeda dari postingan biasa yang lainnya. Cara ini biasa dilakukan oleh sebagian Blogger dalam artikel yang berbentuk tutorial, contohnya seperti artikel yang sedang anda baca ini. Cara ini digunakan  tujuannya yaitu untuk membedakan antara text paparan yang sedang anda jelaskan dengan text lain yang lebih penting yaitu seperti misalnya adalah kode HTML, Kode PHP dan kode-kode penting lainnya yang anda include contohnya langsung pada halaman artikel. Cara ini juga bisa anda gunakan untuk memberi catatan penting yang harus diperhatikan dan diketahui oleh para pengguna tutorial dari artikel blog anda.

Jika cara kita menayangkan bagian-bagian penting ini disamakan dengan text-text biasa yang lain, maka tentunya hal ini akan tampak kelihatan kurang menarik dari segi estetika, bahkan mungkin akan membuat para pembaca bosan karena kurang menarik perhatian para pengunjung. Bisa jadi juga akan ada informasi yang miss atau terlewat diperhatikan karena dari sebagian para pengunjung ada yang tipikalnya ingin langsung ke inti bahasan tanpa membacanya dari awal sampai akhir. Menampilkan sebagian informasi dalam blog anda secara kontras dan berbeda tentunya akan langsung menarik perhatian pengunjung website anda ketika pertama kali mereka landing di website anda.  Untuk itu silahkan gunakan cara yang akan saya paparkan pada artikel ini. Walaupun sebetulnya masih banyak cara lainnya lagi untuk melakukan hal ini.

Banyak cara yang bisa kita lakukan untuk memberi tanda pada bagian-bagian penting pada postingan artikel pada wordpess anda. Caranya bisa dengan memberikan perbedaan warna yang kontras dengan huruf-huruf,  memberikan efek stabilo pada teks tulisan atau bisa juga dengan memberikan latar belakang berwarna pada bagian penting tersebut. bahkan pemberian tanda cetak tebal, cetak miring dan garis bawah pun sebetulnya sudah termasuk kedalam tujuan ini, namun kayaknya agar lebih nampak kentara anda bisa lakukan dengan alternatif cara yang lain lagi. Dalam artikel ini saya jelaskan teknik memberikan latar belakang berwarna atau Membuat Warna Background Text dulu, untuk teknik yang lain nanti akan saya bahas di artikel yang lainnya.

Nah, sekarang mari lanjutkan saja ke prakteknya langsung. Anda bisa lihat contoh tampilannya melalui gambar dibawah ini. Tapi perlu diketahui bahwa tampilan contoh dibawah ini sebetulnya bukan gambar, tapi memang tampilannya seperti itu di halaman artikel anda nantinya. Jadi intinya tampilan ini bukan file gambar yang saya upload kedalam artikel ini. Tapi tampilan dari script yang saya pasangkan langsung di artikelnya ini.

Agar anda lebih faham apa yang saya maksud, maka silahkan copy paste saja salah satu script atau kode dibawah ini. Pilih salah satu contoh kode saja dulu agar anda faham, lalu anda masukkan satu salah script dibawah ini ke dalam text editor blog wordpress anda. Mohon diingat-ingat dan perhatikan, ketika anda melakukan paste script ini di text editor wordpress anda, pastikan dulu bahwa anda melakukan paste script ini pada text editor dalam mode TEXT bukan VISUAL. Untuk membantu anda tentang bagaimana cara memilih mode TEXT pada Text Editor WordPress anda, silahkan anda baca juga artikel saya yang lain yang berjudul Cara Membuat Kotak Scroll/Scroll Box di Artikel WordPress dulu.

<div style=”color: blue; background: #ADE4AD; border: 2px dashed #006600; margin: 10px; padding: 5px;”>
~~tulis kalimat yang ingin anda tampilkan disini~~
</div></p>

Silahkan Copy Paste Script diatas kedalam Text Editor WordPress anda alam mode TEXT. Lalu jangan lupa SAVE atau klik tombol Terbitkan. Untuk melihat perubahan tampilannya silahkan anda klik tombol Pratinjau Post (jika blog wordpress anda dalam mode bahasa indonesia). Jika Tampilannya tidak sama dengan tampilan yang ada pada website saya ini anda jangan heran dulu karena itu wajar. Sebenarnya script anda sudah bekerja dengan normal.

Saya sudah tahu, pasti yang tampil diwebsite anda hanya tulisan “tulis kalimat yang ingin anda tampilkan disini” saja. Lalu pertanyaannya kenapa tampilan diwebsite anda dengan tampilan diwebsite saya bisa berbeda? jawabannya adalah karena Tag-tag HTML tidak bisa ditampilkan langsung diarea text postingan artikel wordpress anda. Untuk agar tampilannya bisa sama dengan tampilan yang ada di website saya, maka kode–kode html itu harus di encode dulu ke kode lain agar bisa ditampilkan seperti contoh tampilan yang ada di website saya. Untuk bahasan Encode kode HTML ini nanti akan saya bahas di artikel lainnya. Jadi silahkan ikuti terus website peterwebs.com ini atau Bookmark website ini melalui browser anda, agar anda bisa mendapatkan update-update terbaru diwebsite ini.

Nah jika praktek pertama tadi sudah berhasil anda praktekkan maka silahkan lajutkan prakteknya dengan contoh-contoh tampilannya yang lain dibawah ini. Silahkan anda coba lagi kode-kode dibawah ini dengan teknik-teknik yang sama seperti yang sudah anda lakukan diatas tadi.

<div style=”color: red; background: #7CFDBC;”>~~tulis kalimat yang ingin anda tampilkan disini~~</div>
<div style=”color: blue; background: #E3FE63; border: 2px solid#FF5652; margin: 10px; padding: 5px;”>
~~tulis kalimatnya disini ya~~
</div></p>
<div style=”color: red; background: #92DEFE; border: 2px dotted#FF5652; margin: 10px; padding: 5px;”>
~~tulis kalimat yang ingin anda tampilkan disini~~
</div></p>

Atau Jika anda ingin tampilan yang tidak ada garis bordernya silahkan Copy Paste Script dibawah ini.

~~<div style=”color:red;background:#7CFDBC;”>
~~tulis kalimat yang ingin anda tampilkan disini~~
</div></p>~~

Nah, cukup sekian dulu tutorial dari saya tentang Cara Membuat Warna Background Text Pada Postingan Artikel Di WordPress ini. Jika anda ingin tahu bagaimana cara melakukan Encoding HTML agar bisa tampil persis seperti tampilan yang ada diwebsite ini maka silahkan baca lanjutannya di artikel saya yang lain yang berjudul Tutorial Belajar Praktek Cara Encode Decode HTML. Nantikan juga artikel saya yang lainnya diwebsite peterwebs.com ini agar anda bisa mendapat update-update informasi lainnya, jika perlu url website ini di bookmark pada browser anda agar anda lebih mudah lagi jika suatu saat akan mengunjungi kembali website ini. Semoga Bermanfaat dan selamat mencoba.

 

Tags: #belajar wordpress #blogging #trik wordpress

author
Penulis: 
Saya adalah Seorang Blogger yang aktif dan konsen di bidang programming, web design, graphic design dan bisnis online. Saya juga tertarik pada bidang Parenting, Kesehatan dan informasi bermanfaat lainnya.
Website Tempat Download Gambar Gratis
Website Tempat Download Gambar Gratis
Pada kesempatan kali ini, saya akan berbagi
Cara Posting Artikel Di Website Berbasis WordPress
Cara Posting Artikel Di Website Berbasis WordPress
Pada saat yang lalu saya sudah membahas
Cara Posting Artikel Di Blogspot
Cara Posting Artikel Di Blogspot
Setelah anda mengikuti artikel saya yang berjudul
Cara Membuat Blog Gratis Dengan Blogspot Untuk Blogger Pemula
Cara Membuat Blog Gratis Dengan Blogspot Untuk Blogger Pemula
Berdasarkan permintaan temen saya dan subscriber di
Konfigurasi WordPress Yang Penting Untuk Diketahui
Konfigurasi WordPress Yang Penting Untuk Diketahui
Pada kesempatan yang lalu saya sudah membahas
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Bagi anda yang ingin memiliki banyak website
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Langkah pertama yang harus anda lakukan ketika
Cara Membeli Domain Dan Hosting
Cara Membeli Domain Dan Hosting
Salah satu persyaratan untuk bisa memiliki sebuah
Cara Install WordPress Di Localhost Dengan Xampp
Cara Install WordPress Di Localhost Dengan Xampp
Sebagai lanjutan dari pembelajaran membangun website, kali

Beri komentar "Cara Membuat Warna Background Text Pada Postingan Artikel Di WordPress"

Baca juga×

Top