Cara Mengganti Font Menu Navigasi Blog

Posted by

Terinspirasi dari CB blogger, bahwa jenis font yang digunakan di blog berpengaruh pada seo dan kecepatan loading, kalau loadingnya lambat pengunjungnya nggak betah dan kemudian mencari blog yang lain yang fast.

Kata CB Jenis huruf yang paling populer adalah Arial, Tahoma, Helvetica, Verdana, Roboto, Georgia, Oswald, dan Open Sans.

Setelah ane ubrak-abrik tuh template dengan otodidak hanya bekal membaca di blog CB akhirnya ane bisa mengubah font pada menu navigasi, supaya ane nggak lupa ane tulis di posting, sekalian share barangkali berguna untuk blogger lain. 

Saat ini, ane memakai font punya twitter "Helvetica Neue" dan ane taruh di template bagian yang diberi warna merah berikut ini:
/*-----Responsive Menu ----*/
body {margin: 0px;}
#menu {background: #3b5998;color: #dd4b39;height: 35px;border-bottom:5px solid #55ACEE}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:100%}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Helvetica Neue;text-transform: Capitalize Each Word;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #FFF;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #55acee;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Helvetica Neue;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:18px;position:absolute;left:35px}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #3b5998;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 0.9em Helvetica Neue;text-transform: Capitalize Each Word;border-bottom: 1px dashed #31AFDB;} 
Keterangan:
  1. Font Helvetica Neue bisa ente ganti dengan pilihan font yang direkomendasikan oleh user, silahkan pilih di atas pilihan font yang paling populer atau bisa cek di Google font
  2. Capitalize Each Word, seperti tulisannya huruf awalnya saja yang besar, kalau pengin font-nya besar semua ganti Capitalize Each Word dengan uppercase


Blog, Updated at: 1:02 AM

2 comments:

Silahkan komentar kalau anda masih bingung !
Komentar utamakan pakai OpenID !
Hindari kata-kata kotor dan porno !