Animasi Gambar Buat Dropcap Artikel

: 00.50 1 comment

L
ama sekali kang mahfid ingin membuat Artikel ini ,beberapa tampilan artikel memang sudah banyak yang pasang cara ini coba sobat lihat pada awal penulisa ,disitu nampak fonts yang lebih besar dari pada yang lain nya ,Nah penulisan seperti itulah yang akan kang Mahfid Posting pada pertemuan kali ini (disini jam menunjukkan 00.15 WIB)penulisan jenis tersebut sering kita sebut penulisan jenis DROPCAP atau juga penulisan Koran ,nah oleh karena penulisan jenis tersebut sudah sering kita lihat bahkan kita pasang ,maka dari itu kang mahfid akan membuat penulisan jenis Dropcap akan tetapi kali ini kang mahfid akan memberi sedikit sentuhan animasi,Animasi Gambar Buat Dropcap Artikel

Untuk cara membuatnya sangat lah mudah kita hanya menambahkan sedikit sentuhan CSS3 Key frame ,silahkan sobat loggin dulu ke blogger lalu sobat masuk ke pengeditan HTML jangan lupa save template dulu untuk jaga jaga jika terjadi kesalahan saat pengeditan nantinya .
Cari kode ]]></b:skin Lalu sobat taruh kode berikut tepat di atas kode ]]></b:skin> berikut kode nya :
.koran{float: left; color: #903; font-size: 75px; line-height: 60px; padding-top:5px; padding-right: 8px; padding-left: 3px; font-family: Georgia;background: url(http://www.angelfire.com/sk/sonicknuckles/images/amy.gif )no-repeat bottom ;animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */}
@-moz-keyframes mymove /* Firefox */
{
0% {color:red}25% {color:blue}75% {color:yellow}100% {color:green}

}
Lalu Save Template
Setiap sobat akan melakukan penulisan artikel silahkan gunakan kode di bawah ini :
<div class="koran">L</div>
Coba sobat lihat huruf L yang berwarna hijau huruf itulah yang nantinya akan menjadi besar sedang untuk penulisan selanjutnya setelah text penutup</div>  Semoga penjelasan saya tadi dapat di mengerti jika ada pertanyaan silahkan saja sobat ajukan di kotak komentar (Wassalam)










photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Animasi Gambar Buat Dropcap Artikel Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih

1 komentar:

Mohammad Fanirifanto delete 5 Februari 2013 pukul 13.06

Tulisan kita jadi lebih menarik ya Kang dengan trik ini ... Makasih banyak ...

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>