Home » » Membuat Drop Cap Disertai Beberapa Efek dan Background Image

Membuat Drop Cap Disertai Beberapa Efek dan Background Image

AbahVsan | 16.29 | 0 comments
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


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


Masih ada Tips-Trik Blog Yang Laen
Pengen Tau Tips-Trik Windows ?
Download Software juga jangan lupa ya !
Share this article :

0 comments:

Poskan Komentar

Jangan Lupa Komentarnya Ya !

 
Support : Khiansantang | TipsTrikBlogger | Mas Template
Copyright © 2011. BALE-BALE PALUPUH - All Rights Reserved
Template Modify by Abahvsan
Proudly powered by Blogger