Cara Mudah Membuat Blok Warna Dalam Postingan Blog

Blok warna dalam sebuah postingan blog biasanya digunakan untuk menyoroti kalimat/paragraf tertentu dalam postingan/artikel blog agar terlihat mencolok dan mudah dibaca oleh pengunjung.
Blok warna tersebut biasanya digunakan untuk menunjukan kalimat penting ataupun kesimpulan dari sebuah artikel yang sedang dibahas. Untuk membuat sebuah blok warna tertentu pada postingan blog, kita hanya cukup membuat sebuah "class" baru didalam template blog kemudian memanggil class tersebut pada saat ingin memblok text tertentu dengan warna yang sudah kita definisikan didalam class/CSS yang telahkitabuat sebelumnya. Konsepnya memang sama seperti pada artikel Menambahkan Garis Bawah Secara Otomatis Untuk Penomoran di Blog , yaitu membuat class CSS kemudian memanggilnya
Gambar ilustrasi membuat blok didalam postingan blog



Berikut adalah Cara Mudah Membuat Blok Warna Dalam Postingan Blog
1. Seperti biasa masuk ke menu Template > Edit HTML
2. Cari kode <b:skin><![CDATA[/* dan taruh kode ini dibawahnya atau taruh pada pada sekitar susunan CSS yang sudah ada dalam template blog

/*Blok Warna Dalam Postingan */
.tipsroot93{
 background-color: #E99333;
}
.tipsroot93{
 overflow: hidden;
 position: relative;
 margin: .5rem 0 1rem;
 transition: box-shadow .25s;
 border-radius: 2px;
 color: #fff;
 box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
 padding: 20px;
}


3. Simpan template, kemudian buatlah sebuah postingan atau artikel baru.
4. Buat sebuah text yang ingin diblok menggunakan warna tertentu
5. Selanjutnya masuk ke dalam mode HTML
6. Terakhir tambahkan "class" pada bagian kode<p>, <div> atau <span>


class yang di panggil di elemen div




Bila berhasil nanti akan text akan terlihat seperti dibawah ini 
 
Contoh Text yang di blok menggunakan warna orange, untuk mengaktifkannya Anda hanya cukup menambahkan/memanggil "class" kemudian disusul dengan paramaeter nama class

Bila Anda ingin membuat class atau background warna yang baru, Anda hanya cukup membuat class baru untuk backgroundnya kemudian merubah properti warnanya menggunakan warna yang lain 
Contoh misal classnya jadi seperti ini


.ahmadganteng{
 background-color: #FF0000;
}

Selanjutnya nanti Anda tidak perlu membuat class box shadow ataupun transisinya, jadi Anda hanya cukup menambahkan class "ahmadganteng" ke class "tipsroot" secara berdampingan dengan dipisahkan tanda koma. Jadi nanti properti cssnya akan terlihat seperti berikut

/*Blok Warna Dalam Postingan */
.tipsroot93{
 background-color: #E99333;

.ahmadganteng{
 background-color: #FF0000;
}


.tipsroot93, .ahmadganteng{
    overflow: hidden;
    position: relative;
    margin: .5rem 0 1rem;
    transition: box-shadow .25s;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    padding: 20px;
}

Kesimpulan Jadi untuk membuat blok warna dalam postingan/artikel blog, maka Anda hanya cukup membuat CSS/Class di dalam template kemudian memanggilanya di dalam postingan blog. Kemudian untuk membuat blok warna dengan background lain, Anda  hanya cukup membuat class baruuntuk backgroundnya saja

36 Responses to "Cara Mudah Membuat Blok Warna Dalam Postingan Blog"

  1. Info bagus nih, Mas.

    Thanks. Mungkin Nanti saya coba di postingan saya selanjutnya.

    ReplyDelete
    Replies
    1. coba ajah gan... saiapa tahu beruntung

      Delete
  2. wah lumayan mas....buat koleksi background.....langsung coba ah....

    ReplyDelete
    Replies
    1. Langhsung di praktekin mas, biar nggak lupa

      Delete
    2. langsung saja praktekin mas... :D

      Delete
  3. Jadi keren ya mas blognya makasih nih

    ReplyDelete
    Replies
    1. iya dong kang,,, yang punya nya aja keren :v

      Delete
  4. Saya jadi tertarik mengganti warna
    Supaya blog berwarna bunga
    Indah dilihat mata
    Dan betah kan sang pembaca,...

    ReplyDelete
    Replies
    1. Mba ayu memang seorang pembuat puisi sjati,,, komennya saja berirama dan berakhiran 'a" :D

      Delete
  5. Ini bisa jadi koleksi backgroud nih kang :) keren dong ya kang gak bakal jenuh kalau di edit2 kaya gini mh

    ReplyDelete
    Replies
    1. luamayan lah kang,, buat menghiglight sebuh text di dalam postingan biar jelas...

      Delete
  6. siipp nih biar postingan lebih ganteng.., hehe

    ReplyDelete
    Replies
    1. haha. jd postingan blog itu bergenre male/cowok yaa.. :D mentang" nih mas rival nya cowok dibilang postingan jd ganteng.

      Delete
    2. biar ganteng dan cantik... :D

      Delete
  7. Wah, bagus nih buat nge-highlight kalimat penting atau quotes :)

    ReplyDelete
    Replies
    1. nah itu dia mba,, biar jelas kudu di highlight...

      Delete
  8. mantab nih mas biar postingan blog jd cantik yaa.. :))

    ReplyDelete
    Replies
    1. mentang2 mba nya cewek jadi bilang blog nya jadi cantik :p

      Delete
    2. kalau cantikmah,, langsung dipraktekin mba...

      Delete
  9. Ada cara yg lebih sederhana gak kang, saya sedikit pusing kalo harus utak-atik HTML...

    ReplyDelete
    Replies
    1. waduuh,, ini yang paling sederhana kang.. :D

      Delete
  10. Blok warna atau bisa juga disebut highlight text memang membuat tampilan postingan jadi lebih menarik, blogger yang suka skimming (membaca cepat) juga bisa-bisa tertarik ngebacanya. Salam kenal kang:)

    ReplyDelete
    Replies
    1. Saya juga terinspirasi dari para pembaca yang suka membaca skimming,,, makanya bikin yang kek gini...

      Delete
  11. pantesan warna kolom komentarnya jadi berwarna warni ginih, nggak taunya pake cara ngblok kaya diatas itu ya mang....

    (sambil mlongo....heran)

    ReplyDelete
    Replies
    1. kalau kolom komentarnya beda lagi mang..:D

      Delete
  12. wah begitu rupanya caranya ya mas :D

    ReplyDelete
  13. Nah yang ini nih kang yang penting juga sih kalau menurut saya mah karena fungsinya sangat penting karena kalau nanti ada kalimat yang penting bisa digunakan blok ini. Okeh kang hatur nuhun sedih yeuh persib sama.

    ReplyDelete
    Replies
    1. benar kang untuk memblok kalimat - kalimat penting

      Delete
  14. terus kalau untuk warna - warna di komnetar ini gimana mas

    ReplyDelete
    Replies
    1. nah itumah beda lagi caranya,, akan saya bahas pada next efisode

      Delete
  15. saya takut malah eror mau coba nih

    ReplyDelete
    Replies
    1. lah gak bakalan error mang,, kan dibuat pada class baru,, jadi kalau misal error yah tinggal hapus aja,,, heheh,,, asakan mengikuti cara yang seperti diatas,, insyallah lancar lah

      Delete
  16. Komentar nya cantik di beri warna kaya gini, tapi sayang nya admin menghilang entah kemana..

    ReplyDelete
    Replies
    1. menghilang karena spedy telkomnya tadi gangguan kang,,, :D

      Delete
  17. nah ini, tampilan kolom komentar blognya jadi lebih fresh mas,, colorfull hehehe

    ReplyDelete
    Replies
    1. heheh lumayan kang,, biar kolom komentarnya terlihat lebih jelas... :D

      Delete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...