Membuat Drop Cap Disertai Beberapa Efek dan Background Image

Panduan BloGGeR kali ini mencoba memberikan sebuah tips dan triks untuk menampilkan bentuk huruf yang berbeda dan dipadukan dengan berbagai efek pada huruf terdepan sebuah posting baik disetiap alinea atau paragraf. Bentuk huruf terdepan seperti yang tertampilkan dalam blog ini bisa dilakukan secara berulang atau hanya pada huruf terdepan posting.

Terus terang saja ..., bingung juga aku ketika mau menuliskan judul untuk posting ini. Hayo ..., coba seandainya sampeyan yang posting mo di kasih judul apa? Ho yo .... apa coba? Lha ..., bingung to?! Lho ..., kok malah komat-kamit! Emang ada hantu lewat, ya? Ha .... ha ... rasain, tuh! Biar sama-sama bingungnya! Dah ... sambil mikir judulnya mo di kasih kalimat seperti apa, silahkan sampeyan sambil lihat barangnya. Lihat yang cermat, tuh, pantat si bocah jorok yang sukanya membeledingkan pantat!

Untuk membuat model huruf depan dengan tampilan lebih besar dengan background tertentu, kita hanya perlukan sebuah syntax yang terdiri dari beberapa kode CSS. Penggunaanya tergantung selera dan berbagai bentuk tambahan kode CSS seperti misalnya efek kedip (blink sffects) dan efek bayangan teks (text-shadow), efek transparansi atau efek blur (opacity effects) dan efek background lengkung (rounded corners) bisa dijadikan pelengkap untuk membuat tampilannya semakin "nganeh-anehi". Ho ... ho ... super komplit toh, jadinya. Sampeyan silahkan lakukan modifikasi dengan menambah atau mengurangi kode CSS yang nanti aku sertakan. Misalnya background image-nya mau diganti photo tetangga atau photo simbah juga boleh. Mau dihilangkan juga boleh. Mau diperbesar hurufnya juga bisa. Udah, pokoknya terserah sampeyan mo ditampilkan seperti apa. Yang penting blog tambah keren dan punya tampilan berbeda. Oye ...?!

Cara membuat seperti tampilan huruf di atas

1. Login to BloGGer (Login ke BloGGeR) : Seperti biasanya, tuliskan "User Nameatau Email Address" kemudian tulis "Password (Sandi)".
2. Dasboard (Dasbor) : KLIK link "Design (Rancangan)".
3. Design (Rancangan) : KLIK link "Edit HTML".
4. Find Code (Cari Kode) : Cari Kode "]]></b:skin>". Posisi kode tersebut di atas kode </head>. Gunakan "Ctrl+F" untuk mencarinya.
5. Copy-Paste : Copy Kode CSS di bawah kemudian Paste di atas kode "]]></b:skin>".
6. SAVE Template (Simpan Template) : KLIK "SAVE Template (Simpan Template)".

Kode CSS :

.bgsGRhd {
    float:left;
    color:#0000CC;
    line-height:45px; 
    background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/LatemBleding.gif) center no-repeat;
    margin:-3px 10px 0 0;
    font-family:Times New Roman; 
    padding:3px; 
    -moz-border-radius:12px;
    font-size:4em; 
    font-weight:700;
    text-shadow:white 0.02em 0.02em 0.1em;
    opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);
    text-decoration:blink;
    border:1px solid blue;
    }
.bgsGRhd:hover{
    background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/BlueDog_bgDropCapHov.gif) center no-repeat;
    opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
    }

Cara menggunakan di posting :

<span class="bgsGRhd">H</span>uruf depan dipotong dan diletakkan diantara kode (tag) pembuka span dan tag penutupnya.
Terlihat di atas pada kata Huruf, huruf H dipisahkan dari  uruf.

Ganti background dan kode CSS

1. Untuk membuat background pada huruf yang diperbesar tersebut, silahkan ganti URL gambarnya.
   Gambar 1 : http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/LatemBleding.gif
   Gambar 2 : http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/BlueDog_bgDropCapHov.gif.
2. Ukuran Gambar di max 50px (height) dan 50px (width).
3. text-decoration:blink; : untuk menciptakan efek berkedip.
4. Opacity : untuk menciptakan efek blur atau transparansi.
5. -min-border-radius:12px; : untuk menciptakan efek lengkung di ke-4 sisinya.
6. font-size : Apabila ukuran huruf diperbesar atau diperkecil, maka line-height juga harus dirubah. Sesuaikan dengan perubahan yang dilakukan pada ukuran huruf.

Drop Caps Otomatis

Jika sampeyan ingin membuat drop caps otomatis yang yang dapat digunakan di halaman posting, kolom komentar atau yang lain, silahkan ikuti tutorialnya dengan klik link di bawah ini:

Tutorial Cara Membuat Drop Caps Otomatis

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «

Bagi yang ingin mengikuti panduan cara cepat mencari kode html menggunakan Ctrl+F, sampeyan bisa KLIK di sini!