Seperti disebutkan pada pembuatan tanda tangan menggunakan image (gambar), penambahan tanda tangan pada setiap postingan akan menambah beban loading blog, karena akan meload image (jika menggunkan gambar) atau akan meload link font yang dipergunakan jika menggunakan teks, kenapa font menjadi faktor penghambat loading blog? ya karena pemilihan font yang akan kita pergunakan adalah font dengan bentuk font handwriting yang sifatnya bukan Web Safe Font.
Untuk pemilihan jenis font handwriting kita bisa manfaatkan situs penyedia layanan font, sebagai contoh kita bisa pergunakan Google Web Fonts yang banyak menyediakan berbagai macam bentuk font dengan pilihan yang variatif, google web font menyediakan 4 kelompok jenis font yang bisa kita pergunakan dengan bebas, yang salah satu jenisnya adalah handwriting, yang menurut saya lebih cocok dipergunakan untuk pembuatan tanda tangan teks (signature).
Membuat Tanda Tangan CSS (teks)
Setelah menentukan bentuk font yang akan kita pergunakan, perhatikan script Css dibawah ini:
CSS
@font-face {
font-family: 'Grand Hotel';
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(http://themes.googleusercontent.com/static/fonts/grandhotel/v1/NrGQkrs9rbHm5EYx0Eil0obN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.signature {
float: right;
color: #333333;
line-height: 1;
margin: 10px 100px 10px 10px;
font-size: 75px;
font-weight: bold;
font-family: 'Grand Hotel';
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}untuk meletakan tanda tangan dibawah postingan, letakan HTMl dibawah ini dibawah <data:post.body/> dan save template.
HTML
<div class="signature">Tanda Tangan</div>Pada script css diatas menggunakan @font-face sebagai link untuk memuat font terpilih pada google web font. Penggunaan @font-face merupakan alternatif pilihan untuk memanggil font-font yang akan dipergunakan (yang sifatnya bukan web safe fonts), atau bisa juga menggunakan cara pada pemasangan google web font dengan menanamkan link font dibawah <head> dan mengambil font-family-nya untuk ditempatkan pada css (untuk jelasnya pada posting penggunaan google web fonts), penggunaaan @font-face pada script css diatas hanya terikat pada judul posting.
Tanda tangan akan tampil pada semua halaman, untuk menampilkan tanda tangan hanya tampil pada halaman postingan saja, bisa tambahkan tag kondisional yang cara penggunaaannya seperti pada membuat tanda tangan menggunakan image (gambar) atau jika ingin tanda tangan tersebut tampil pada halaman tertentu, kalian bisa melihat macam tag kondisional yang bisa dipergunakan.
Penggunaan image atau teks (css) mempunyai kelebihan dan kekurangan masing-masing, tentunya setelah mencoba kedua cara membuat tanda tangan menggunakan image atau teks tentu akan mengetahui kelebihan dan kekurangannya, kalian hanya tinggal memilih mau menggunakan yang mana.
Manteb gan tutorialnya, dua jempol buat anda. Artikel-artikel anda banyak membantu saya. Trim's..
ReplyDeleteterima kasih, sangat membantu saya artikelnya
ReplyDeleteIdem ama yg diatas........ hehe.......
ReplyDelete