Flashing Link Animation: Panduan BoGGeR Cara Membuat Teks Link Animasi

Tutorial Blogger spesial : Cara termudah membuat flashing link yang "ditanggung" kompatible dengan semua browser yang ada adalah seperti berikut :

1. Login ke Blogger.
2. Lakukan pengamanan template terlebih dahulu (Lihat di Special Tutorials)
3. Simpan KODE CSS di atas KODE ]]></b:skin>
4. Gunakan xHTML saat posting dilakukan.

Contoh bentuk Flashing Link Animation :

Red Background


Blue Background


Lime Background


Green Background


Yellow Background


Colorfull Background

KODE CSS - Flashing Link Animation :

<style type="text/css">
.RedFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_RedFlashingLink.gif);padding:0 3px;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.BlueFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_BlueFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.LimeFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_LimeFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.GreenFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_GreenFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.YellowFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/bgsGR_YellowFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.ColorfullFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_ColorfullFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.RedFL{background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_RedFlashingLink.gif);padding:0 3px;text-decoration:none;font-weight:bold;color:black;border-top:1px dotted orange;border-bottom:1px dotted orange;}
.RedFL:hover, .BlueFL:hover, .LimeFL:hover, .GreenFL:hover, .YellowFL:hover, .ColorfullFL:hover{text-decoration:none; background:#222;color:#FF0000;}
li{line-height:30px;}
</style>

xHTML - Flashing Link Animation :

<a class="RedFL" href="http://gubhugreyot.blogspot.com">Red Background</a>
<a class="BlueFL" href="http://gubhugreyot.blogspot.com">Blue Background</a>
<a class="LimeFL" href="http://gubhugreyot.blogspot.com">Lime Background</a>
<a class="GreenFL" href="http://gubhugreyot.blogspot.com">Green Background</a>
<a class="YellowFL" href="http://gubhugreyot.blogspot.com">Yellow Background</a>
<a class="ColorfullFL" href="http://gubhugreyot.blogspot.com">Colorfull Background</a>

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

» Happy Blogging - gubhugreyot «

18.38 | 0 komentar | Read More

Cara Bikin atawa Membuat Simple Hightlight Text

Cara membuat highlight text yang satu ini amat sangat simple dan mudah serta praktis digunakan. Script yang dipakai langsung diterapkan pada posting yang kita lakukan. Input Button kita pergunakan sehingga bentuk KODE yang digunakan semakin irit. Silahkan untuk melihat DEMO-nya yang sekaligus berisi tutorial.

D E M OD E M O

Untuk mengamankan template sebelum menggunakan Simple Highlight Text, kamu bisa lihat di posting Highlight Text

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

» Happy Blogging - gubhugreyot «

09.38 | 0 komentar | Read More

Cara Membuat Highlight Text: Panduan BloGGeR Percantik Blog

Highlight text akan membuat pembaca blog lebih cepat dan lebih mudah pada saat ingin mengcopy teks yang disajikan. Hanya dengan KLIK atau menyentuhkan Cursor pada "Highlight" atau "select All", maka ketika selanjutnya kita KLIK copy atau Ctrl+C maka secara otomatis semua teks akan tercopy. Javascript yang sangat dan bekerja pada daerah texarea membuat fungsi seperti ini dapat kita lakukan. Untuk membuat Highlight Text seperti dimaksud di atas, kamu bisa copy seluruh KODE CSS, javascript dan tutorial penggunaanya pada DEMO yang telah saya sediakan.

Buka demo kedua jika yang pertama gagal/bermasalah!

D E M OD E M O

O...ya.., sebelum kamu lakukan semuanya, jangan lupa amankan template terlebih dahulu. Caranya bisa kamu lihat di sini.

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

» Happy Blogging - gubhugreyot «

03.31 | 0 komentar | Read More

Merubah tampilan hover link

Hover yang sering dipergunakan pada sebuah blog, umumnya hanya berupa perubahan warna teks ketika cursor menyentuh link. Dengan melakukan modifikasi pada KODE css yang terdapat pada template, hover bisa kita rubah sehingga ketika cursor menyentuh link, maka tidak hanya warna teks saja yang berubah. Beberapa KODE tambahan, seperti background, border, style teks dan ukuran font mampu memberikan nuansa yang berbeda ketika sebuah link tersentuh oleh cursor.

Sebuah demo di bawah ini bisa sebagai contoh bentuk hover link yang coba kita buat.
Jika pada contoh ini background pada link langsung bekerja tanpa berdasar fungsi hover dikarenakan hanya dibuat pakai kode html tanpa bantuan kode css dan css3. Yanga akan kita buat nanti hasilnya akan jauh lebih menarik dibandingkan contoh di bawah ini.

D E M O

Link baru akan terlihat seperti ini!

Cara merubah tampilan hover pada link:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template).
6. Simpan file template di folder PC.
7. Tetap di Edit HTML
8. Cari kode css seperti yang terlihat di bawah ini.
   

   Kode CSS ini harus di rubah:

   a:hover {
     text-decoration:underline;
     color: $(link.hover.color);
   }

Kode CSS di atas mungkin tak akan sama persis dengan yang ada di blog namun yang terutama perlu diperhatikan adalah pada syntax-nya (a:hover).
9. Ganti kode di atas dengan kode css berikut:
   

   Kode CSS pengganti

   a:hover {
          background: url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-bghover-link-anima.gif);
          padding:2px 4px;
          color:#f00;
          tansition:1s;
          -o-tansition:1s;
          -moz-tansition:1s;
          -webkit-tansition:1s;
          -ms-tansition:1s;
          text-decoration:none;
          font-style:oblique; 
   }

10. Klik Simpan Template (Save Template).

Keterangan/Catatan :

• KODE a:hover terletak sedikit di bawah KODE <head>
• Apabila menghendaki background-image yang berbeda, gantilah URL dengan URL dari gambar yang lain.
• color = warna font.
• obligue bisa digantikan dengan normal, italic atau inherit.

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

Update » Senin PAHING, January, 30, 2012

» Happy Blogging - gubhugreyot «

16.23 | 0 komentar | Read More