Cara Membuat Efek Stabilo Keren Didalam Artikel Blog

KURAZONE ~ Pada kesempatan kali ini saya berbagi mengenai "Cara Membuat Efek Stabilo Keren Didalam Artikel Blog", sahabat Kurazer mungkin tidak asing lagi dengan istilah stabilo ini, dan mungkin juga sudah bisa menerapkan efek stabilo pada artikel blog. Namun, pada efek stabilo kali ini saya memberikan beberapa tips supaya efek stabilo ini terlihat lebih keren dari yang biasanya.

Sebagai contoh, bandingkan 2 kalimat dibawah ini :
  1. Bila diberikan dua pilihan antara pekerjaan dan hobby, maka saya memilih hobby
  2. Bila diberikan dua pilihan antara pekerjaan dan hobby, maka saya memilih hobby
Nah, dari 2 contoh kalimat diatas, efek stabilo nomor 2 lah yang akan kita bahas.

Berikut adalah langkah - langkah nya :
[1]  Masuk ke akun Blogger >> Pilih Template (Tema) >> Edit HTML
[2] Carilah kode ]]></b:skin> , lalu copy script dibawah ini dan letakkan (paste) diatas kode ]]></b:skin> kemudian SIMPAN TEMPLATE
.sotabilo {padding: 1px 4px 2px;border-radius: 3px;color:#fff;font-weight:bold}
[3] Selanjutnya tinggal menggunakan efek stabilo tersebut kedalam artikel
Untuk menggunakan efek stabilo tersebut, maka pada saat membuat artikel ubahlah ke mode HTML, lalu cukup menambahkan class='sotabilo' pada <span> atau tulisan yang diberi efek stabilo tersebut.  
Contoh :
Sebelum
<span style='background-color:red'>contoh tulisan</span>
Sesudah
<span class='sotabilo' style='background-color:red'>contoh tulisan</span>

Hasilnya :

Sebelum
contoh tulisan
Sesudah
contoh tulisan

[4] Selesai

Note : Apabila kamu ingin merubah bentuk lengkungan dan jarak pada efek stabilo maka tinggal memodif pada bagian padding (jarak) atau border-radius (lengkungan), contoh modifikasi bisa melihat beberapa pengaturan dibawah ini :
  • padding: 1px 4px 2px;border-radius: 3px;color:#fff;font-weight:bold}
    Hasilnya >> contoh tulisan stabilo
  • padding: 4px 7px 9px;border-radius: 3px;color:#fff;font-weight:bold}
    Hasilnya >> contoh tulisan stabilo
  • padding: 2px 8px 3px;border-radius: 20px;color:#fff;font-weight:bold}
    Hasilnya >> contoh tulisan stabilo
  • padding: 3px 5px 4px;border-radius: 50px;color:#fff;font-weight:bold}
    Hasilnya >> contoh tulisan stabilo
  • padding: 4px 10px 8px;border-radius: 100px;color:#fff;font-weight:bold}
    Hasilnya >> contoh tulisan stabilo
  • dan lain-lain, silahkan berkreasi sendiri sesuai keinginan


Note : Jika kamu ingin memiliki efek stabilo lebih dari 1, maka cukup membuat CSS yang sama dengan selektor yang berbeda (tinggal menambahkan huruf 's' di selektor berikutnya)

CONTOH :

.sotabilo {padding: 1px 4px 2px;border-radius: 3px;color:#fff;font-weight:bold}
.sotabilos {padding: 4px 7px 9px;border-radius: 3px;color:#fff;font-weight:bold}
.sotabiloss {padding: 2px 8px 3px;border-radius: 20px;color:#fff;font-weight:bold} 

Lalu, untuk menggunakan efek-efek stabilo tersebut maka contoh penulisannya adalah sebagai berikut :
<span class='sotabilo' style='background:red'>Stabilo pertama</span>
<span class='sotabilos' style='background:orange'>Stabilo kedua</span>
<span class='sotabiloss' style='background:blue'>Stabilo ketiga</span>

Hasil :

Stabilo pertama

Stabilo kedua

Stabilo ketiga


CONTOH LAIN :
Berikut ini adalah <span class='sotabilo' style='background-color:red'>contoh tulisan stabilo</span> yang <span class='sotabilos' style='background-color:orange'>memiliki</span> beberapa efek <span class='sotabiloss' style='background-color:blue'>berbeda</span>

Hasilnya akan nampak seperti dibawah ini :

Berikut ini adalah contoh tulisan stabilo yang memiliki beberapa efek berbeda
Dari sini kalian bisa berkarya menciptakan model efek stabilo versi kalian sendiri. Ingat!! perhatikan padding dan radius nya, dan jangan lupa untuk menyertakan warna background agar stabilo bisa memiliki variasi warna. Selamat Berkarya!!
Itulah informasi mengenai "Cara Membuat Efek Stabilo Keren Didalam Artikel Blog", selamat mencoba dan semoga bermanfaat. Goodluck!!







Lebih baru Lebih lama