Penggunaan Google Font API di Blogger

Hal ini sebenarnya sudah pernah saya jelaskan sebelumnya pada artikel Tutorial Penggunaan Google Fonts, namun kebetulan ada yang bertanya mengenai font yang saya gunakan di blog ini jadi tidak ada salahnya saya tulis kembali tutorial ini. Font yang saya gunakan di blog ini adalah Droid Sans, bagi yang belum mengerti silahkan baca kembali postingan saya yang lalu mengenai google fonts. Jika sobat ingin menggunakan font yang lain, silahkan kunjungi langsung Google Web Fonts.

 

Pada halaman depan, silahkan sobat sorting saja berdasarkan Popularity.

 

Setelah itu sobat bisa melihat font yang paling banyak digunakan termasuk 'Droid Sans' yang juga saya gunakan di blog ini, pilih font yang sobat suka dan klik Add to Collection.

 

Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.

 

Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.

 

Jangan lupa untuk menambahkan tanda [ / ] di akhir kode sehingga menjadi seperti berikut :

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>

 

Tahap selanjutnya memasukkan kode tersebut ke dalam template blogger, silahkan login ke blogger.

1. Klik Rancangan
2. Kemudian klik Edit HTML
3. Tambahkan kode tersebut sebelum kode </head>, sehingga menjadi seperti :

   <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
   </head>

4. Cari kode css untuk body, contohnya seperti berikut :

   body {
   width: 980px;
   background: #FFF;
   font-size: 13px;
   font-family: 'Droid Sans', verdana, arial;
   text-align: left;
   color: #000;
   margin: 0 auto;
   padding: 0;
   }

5. Perhatikan huruf yang saya tebalkan, itulah kode css yang harus sobat tambahkan.

Kode css tersebut sengaja saya letakkan dibagian body, sehingga font seluruh isi blog akan berubah menjadi Droid Sans. Jika sobat menemukan kode font : verdana, arial, trebuchet ms dan sebagainya dibagian css yang lain silahkan hapus saja, misal seperti ini :

 

.post {
text-align: left;
background: #FFF;
font-family: arial, verdana;
border: 1px solid #CCC;
margin-bottom: 10px;
padding: 10px 10px 0;
}

 

Baiklah selamat mencoba, semoga bermanfaat !

Cara Membuat Tulisan Besar Pada Awal Postingan

Kemarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini. Saya agak lupa apakah pernah menulis tutorial huruf besar pada awal postingan ini, jadi semalam saya bongkar-bongkar lagi semua judul post dan ternyata memang belum pernah saya tulis mengenai hal ini.

 

Sekedar info buat yang baru, huruf ini akan tampil besar dan berbeda sendiri dengan huruf lain yang ada di blog kita. Biasanya bisa kita lihat di koran atau majalah. Untuk membuatnya sangat mudah, karena hanya butuh satu kode css dan sedikit sentuhan pada saat membuat postingan.

 

1. Setelah masuk blogger, silahkan klik Edit HTML.
2. Tambahkan kode berikut sebelum kode ]]>< /b:skin>

   .huruf {
   float:left;
   color:#000;
   line-height:60px; 
   padding-right:5px;
   font-family:trebuchet ms,verdana;
   font-size:60px; 
   }

3. Simpan Template.

 

 

Cara Posting

 

Tambahkan kode <span class="huruf"> sebelum huruf pertama dan </span> setelahnya. Contohnya seperti ini :

 

<span class="huruf">K</span>emarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini.

 

Sip, semoga bermanfaat !

Tutorial Penggunaan Google Fonts

Google kembali memanjakan para blogger dengan menambahkan variasi fonts di blog. Semua font di google fonts directory berlisensi sehingga dapat digunakan pada web apapun, termasuk di blogspot yang penerapannya tergolong sangat mudah. Buat yang belum tahu, bisa sobat lihat pada contoh demo template dore zot pada bagian header dan avieri pada bagian header dan judul postingan.

 

Variasi hurufnya pun cukup banyak, tergantung kita memadu padankan dengan template yang kita gunakan. Dibawah ini ada beberapa fonts yang bisa sobat terapkan di blog sobat, dan cara penggunaannya.

 

<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,bold' rel='stylesheet' type='text/css'/>

 

1. Masuk ke Rancangan
2. Kemudian tuju bagian Edit HTML
3. Copy salah satu kode huruf tersebut dan letakkan  diatas kode </head> pada template sobat.
4. Kemudian tambahkan font yang sobat gunakan pada bagian css, contohnya seperti berikut :

   #header h1 { font-family: 'IM Fell Great Primer SC', arial, serif; }

   atau lengkapnya kira-kira seperti dibawah ini :

    

   #header h1 {
   font-family:'IM Fell Great Primer SC',arial,serif;
   font-size:46px;
   font-weight:bold;
   letter-spacing:0em;
   line-height:1.2em;
   color:#aaa;
   text-shadow:1px 1px 2px #000;
   margin:0;
   padding:60px 480px 0px 0px;
   }

5. Simpan Template

 

Perhatikan saja kode yang saya tandai dengan warna merah, karena hanya kode tersebut yang ditambahkan kedalam css template. Sobat juga bisa menggunakannya pada judul postingan (h3) atau judul sidebar (h2). Baiklah, selamat mencoba dan semoga berhasil.

Membuat Efek Tulisan Dengan CSS Text Shadow

Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

 

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

 

Safari 3.1 (Mac/Win)	yes, but no multiple shadows
Safari 4 (Mac/Win)	yes, full support
Opera 9.5 (Mac/Win/Lin)	yes, full support
Firefox 2/3 (Mac/Win/Lin)	no
Firefox 3.1/3.5 (Mac/Win/Lin)	yes, full support
Google Chrome 1 (Win)	no
Google Chrome 2 (Win)	yes, full support
IE 7/8 (Win)	no
Shiira (Mac)	yes, but no multiple shadows
Safari on iPhone	yes, but no multiple shadows
Opera Mini 4.1	yes, no blur radius

 

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;

• color : #000 adalah warna dasar tulisan
• background: #fff adalah warna latar
• 1px 1px 1px #424242 untuk warna bayangannya (shadow)

 

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

 

	color: #000; background: #fff; text-shadow: 2px 2px 3px #000;
	color: #000; background: #fff; text-shadow: 2px 2px #000;
	color: #000; background: #fff; text-shadow: 2px -2px 3px #000;
	color: #000; background: #666; text-shadow: 0px 1px 1px #fff;
	color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;
	color: #fff; background: #666; text-shadow: 0px 1px 1px #000;
	color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;
	color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
	color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
	color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;
	color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

 

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup.