Membuat tanda tangan di blog dengan CSS sederhana
Bicara soal Tanda tangan di blog, Saya sudah pernah menyinggung hal terkait pada postingan Hanya demi tanda tangan online, mau-maunya kamu di bodohi, Nah, setelah sekian lama waktu berselang, akhirnya ke pikiran untuk menulisnya di sini. Yah, jika berguna ya syukur lah, jika ga, juga ga apa.
Yang saya bagikan ini adalah Tanda tangan berupa Teks dengan memanfaatkan CSS sebagai pengayanya. Otomatis, ini mampu mengurangi penggunaan gambar yang berlebihan di blog.
Sebelum mencoba lebih jauh, silahkan main dulu ke google.com/fonts untuk memilah-milah font yang akan di gunakan.
Jika sudah bertemu dengan font yang akan di gunakan pilih Quick use, seperti gambar di bawah ini,
Nanti kamu akan di bawa ke laman teks terkait.
Pada opsi pertama➀, akan ada tampilan berat loadingnya, pastikan font yang kamu pilih masih dalam meteran Hijau. Semakin kecil angkanya, semakin baik dan pastikan kamu memilih 1 style (gaya) saja.
Pada opsi ke dua➁, kita akan di beri kesempatan untuk mengatur karakternya. Sebaiknya ini di biarkan pada setingan default (Latin).
Pada opsi ke tiga➂, Salin kodenya dan tempatkan di bawah kode <head> atau di atas kode </head> pada template blog.
Pada opsi ke empat➃, Itu adalah Nama fontnya, kode ini lah yang nantinya akan memanggil kode yang telah kamu tempatkan pada opsi ketiga➂.
Masih di template blog, cari kode ]]></b:skin> dan tempatkan kode CSS ini di atasnya.
.tanda-tangan {
font-family: Nama font;
font-size: 40px;
text-align: right;
margin: 20px;
}Keterangan:
font-family: Nama font; adalah nama font yang akan kamu gunakan.
font-size: 40px; adalah ukuran font, silahkan sesuaikan berdasarkan kebutuhan.
text-align: right; adalah letak tanda tangannya, (left=kiri, center=tengah, right=kanan).
margin: 20px; adalah jarak antara teks (tanda tangan) dengan element sekitar.
Jika sudah, cari kode yang kurang lebih seperti ini,
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <div class='post-footer'>
Jika telah ketemu, tambahkan kode di bawah ini antara </b:if> dan <div class='post-footer'>.
<b:if cond='data:blog.pageType == "item"'> <div class='tanda-tangan'><data:post.author/></div> </b:if>
Nanti hasilnya akan seperti ini,
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:if cond='data:blog.pageType == "item"'> <div class='tanda-tangan'><data:post.author/></div> </b:if> <div class='post-footer'>
Jika ingin menyisipkan link pada tanda tangan, ubah kodenya menjadi
<b:if cond='data:blog.pageType == "item"'> <div class='tanda-tangan'><a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></div> </b:if>
Simpan template dan selesai.
Sebenarnya tutorialnya ga panjang, namun di buat panjang biar lebih detail lagi. jadi selamat mencoba!
*cara-ngeblog-di.blogspot.com adalah website saya yang lama.
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.