jasa SEO

Kode CSS Buat Bikin Sudut Tumpul (Rounded Corner) + Mengganti Font

Blogging, Web Design
belajar SEO

Saya berikan referensi kode dan aplikasi online CSS cara bikin sudut tumpul dan mengganti font (jenis huruf) blog/website anda supaya lebih terlihat elegant. Apa yang akan anda dapat dari artikel ini semuanya gratis asalkan tahu bagaimana caranya menentukan dan merubah CSS yang telah ada.

Untuk melakukan itu semua khusus untuk pengguna Firefox, Chrome dan Opera bisa menginstall plugin gratisan bernama Web Developer Toolbar yang bisa anda download secara langsung di http://chrispederick.com/work/web-developer/ atau bisa juga langsung melalui browser yang anda gunakan. Sayangnya untuk pengguna Safari dan Internet Explorer (IE) semua versi belum tersedia jadi harap bersabar ya..

Aplikasi Online Membuat Sudut Tumpul (Rounded Corner) Gratis

Membuat kotak dengan sudut yang tidak lancip (tumpul) cukup mudah tapi dalam penggunaannya ada variasi-variasi yang harus kita sesuaikan dengan bermacam-macam browser. Biasanya kode setiap CSS untuk membuat sudut tumpul berbeda karena tergantung dari browser yang digunakan.

Kode CSS sudut tumpul pada Firefox, IE dan Opera biasanya berbeda apalagi IE versi lama yang kerap berbeda sendiri dibandingkan dengan browser yang lainnya. Untuk mensiasatinya kita harus membuat beberapa kode CSS berbeda yang disesuaikan dengan browser.

Referensi

Dibawah ini akan saya berikan referensi beberapa situs online yang bisa anda gunakan untuk membuatnya dengan sangat mudah.

Cssround.com

Cssround.com adalah berupa web aplikasi dimana anda bisa membuat rounded corner dengan kode CSS dengan sangat mudahnya. Cara buatnya cukup kunjungi Cssround.com lalu bikin berbagai variasi sudut tumpul lengkap dengan pemilihan background, radius, warna dan semacamnya.

Kesitimewaan dari aplikasi CSS online dari cssround.com ini adalah anda bisa membuat nilai radius berbeda untuk setiap sudut. Selain itu anda juga dapat mengatur opacity warna latar yang diinginkan.

Cara menggunakannya juga sangat gampang sekali yakni silahkan kunjungi cssround.com lalu isikan setiap kotak sesuai dengan value yang anda inginkan. Setelah itu gunakan CSS kode yang (copy) dan paste pada file CSS yang anda gunakan.

Cara Mengganti Font Menggunakan CSS

Memiliki web/blog dengan jenis font yang berbeda cukup menyenangkan karena selain bisa kreasi sesuai dengan keinginan website kita pun akan terlihat unik.

CSS bisa mengatur jenis font berbeda untuk setiap atribut html yang terdapat pada website misalnya:

  1. Font yang digunakan untuk: paragraph, blockquote, title, text pada ID dan class tertentu dst
  2. Font pada Heading 1, 2 s.d 6

Gunakan “Class” bila anda ingin lebih unik lagi dengan kata lain ingin membuat perbedaan pada setiap penggunaan font seperti contoh berikut ini:

GRUMPY WIZARDS MAKE TOXIC BREW

GRUMPY WIZARDS MAKE TOXIC BREW

GRUMPY WIZARDS MAKE TOXIC BREW

Cara membuatnya sangat mudah sekali yakni dengan menambahkan div class pada text  “GRUMPY WIZARDS MAKE TOXIC BREW” :

<p class="namaclass">GRUMPY WIZARDS MAKE TOXIC BREW</p>

Referensi Font Bagus Gratis Dari Google

Kunjungi http://www.google.com/fonts/ untuk mendapatkan berbagai macam jenis font yang sesuai dengan keinginan dan anda bisa menggunakannya secara gratis.

Hal yang harus anda lakukan adalah dengan mengambil (copy) CSS Code yang harus dimasukan kedalam file CSS yang anda gunakan dan Source yang harus anda inject kedalam script sebelum </body>

Tips Penggunaan CSS dan SEO

Jauh lebih penting dari itu semua adalah anda harus mempertimbangkan faktor SEO. Banyak pemilik web yang hanya ingin bentuk dan tampilan websitenya terlihat sangat bagus sehingga tanpa sadar mempengaruhi SEO.

Apalah artinya website dengan design yang super wah, keren, canggih tapi ada dihalaman 10 Google! semuanya akan menjadi sia-sia. Tapi hal ini juga bukan berarti web semacam bungkus kacang goreng juga pasti berada diposisi teratas karena yang benar adalah kita harus tahu bagaimana cara menggunakan CSS untuk membuat website lebih bagus dilihat tapi juga SEO friendly. Bagaimana caranya?

Perhatikan Proses Rendering dan Speed Website

Seberapa cepat website dimata Google? untuk mengetahuinya silahkan berkunjung ke: https://developers.google.com/speed/pagespeed/insights/ yakni sebuah fitur yang diberikan Google untuk mengetahui seberapa cepat website anda bila diakses menggunakan dua buah browser berbeda (PC dan Mobile).

Bila anda melakukan test pada https://developers.google.com/speed/pagespeed/insights/ maka Google akan memberikan informasi bila ada hal yang kurang maksimal didalam website terutama sekali pada sisi kecepatan. Ingat! kecepatan website berada pada posisi 5 besar dari 200 signal perankingan Google.

Tags:
Jasa Web

Related Posts

Comments are closed.