Membuat Drop Cap Disertai Beberapa Efek dan Background Image

Pernah berpikir untuk menambahkan Drop Cap pada postingan yang kalian buat ?????

Postingan kali ini akan membahas bagaimana caranya bikin Drop Cap pada postingan, biar ga banyak cing cong.......langsung aja ke Te...Ka...Pe... :)

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://i1128.photobucket.com/albums/m498/abahvsan/Animasi_Abahvsan/bye.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://i1128.photobucket.com/albums/m498/abahvsan/Animasi_Abahvsan/babykick.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://i1128.photobucket.com/albums/m498/abahvsan/MetalEuy-1.jpg

      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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Tips-Trik Blog

• Cara Membuat Judul Blog Berjalan
• Cara Membuat Menu Navigasi Horizontal dengan Sub Menu Vertikal
• Pasang Tombol Like Facebook, Tweet Twitter, Google +1, dan Share
• Membuat Drop Cap Dengan Efek dan Image
• Cara Membuat Fungsi Scroll pada Daftar Komentar Blog
• Cara Memasang Icon Yahoo Di Blog
  
• Cara Membuat Lencana Facebook Terbuka di Tab Baru
• Cara Memasang Meta Tag Otomatis di Blogger
• Cara Membuat Tabel Dalam Blog
• Membuat Widget Statistik Dari Blogger Menjadi Rata Tengah
• Pasang Jadwal Sholat Di Sidebar Blogger
• Cara Membuat Widget Melayang Pada Blog 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Masih ada Tips-Trik Blog Yang Laen

Download Media Pembelajaran TIK

Pengen Tau Tips-Trik Windows ?

Download Software juga jangan lupa ya !