Cara membuat icon TOP button

Untuk mempermudah kembali ke atas, biasanya dalam setipa blog selalu di letakan petunjuk untuk kembali ke atas, nah bagaimna cara membuatnya? Berikut tutorialnya :

1. Log in ke akaun blogger anda

2. Masuk ke Dashboard > Tata Letak > Add  Gadget > HTML / Javascript 

3. Copy paste code dibawah ini pada halaman  HTML / Javascript

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

Anda bisa gunakan url gamabar di bawah ini, stelah memasukan url gambar  tinggal klik save dan lihat hasilnya

 

http://img205.imageshack.us/img205/7824/74211510.gif

 

http://img266.imageshack.us/img266/3325/81258407.png

 

http://img267.imageshack.us/img267/7242/36935517.png

 

http://img857.imageshack.us/img857/4428/12543870.png

 

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/12.gif

Selamat Mencoba

Link menjadi besar saat disentuh cursor

Langsunga ja aufa kasih sedikit cara membuat efek tulisan jadi besar saat link disentuh oleh mouse/cursor, simak dengan seksama ya :

1. Masuk/log in ke blooger
2. Lalu pilih Dashboard > templates > edit templates
3. Setelah itu dengan menggunakan crtl+f cari code berikut :

    a:hover

3. Letakan code berikut tepat di bawah code a:hover 

font-size: 22px;font-weight: bold;text-decoration: none;

Angka 22 menunjukan besar kecilnya (Ukuran) huruf yang akan muncul saat cursor/mouse mendekati link, anda bisa merubahny sesuai keinginan anda Example :

a:hover font-size: 14px;font-weight: bold;text-decoration: none;

Langkah selanjutnya anda bisa preview dulu sebelum save templates anda, kalau sudah benar  klik SAVE dan anda bisa lihat hasilnya sendiri.

Selamat Mencoba

Cara Membuat icon Newer, home dan older post

Biar Blog kelihatan lebih menarik kali ini aufa mau bagi sedikit ilmu Cara membuat icon NEWER, HOME dan OLDER Post pada blog, caranya :

1. Seperti biasanya masuk/log in ke account blog anda

2. Lalu pilih Dashboard > templates > edit templates

3. Setelah itu dengan menggunakan crtl+f cari code berikut :

expr:title='data:newerPageTitle'><data:newerPageTitle/>
4. Jika ketemu ganti tulisan <data:newerPageTitle/> dengan menggunakan code ini

img src="http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png" 

contoh yang sudah jadi (anda bisa langsung copy paste code berikut) :

expr:title='data:newerPageTitle'><img src="http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png"/>

5. Masih dengan menggunakan ctrl+f cari code berikut :

expr:title='data:olderPageTitle'><data:olderPageTitle/>

Sama seperti penjelasan no 4 gantikan code <data:olderPageTitle/> dengan menggunakan code berikut

<img src="http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/go5.png"/>

6. Langkah berikutnya Masih dengan menggunakan ctrl+f cari code berikut :

expr:href='data:blog.homepageUrl'><data:homeMsg/> 

Masih sama seperti penjelasan sebelumya gantikan code <data:homeMsg/> dengan menggunakan code berikut :

<img src="http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png"/>

Setelah semua langkah di atas selesai coba PREVIEW dulu sebelum anda save templates dan anda bisa lihat hasilnya, cukup mudah bukan...!!!

 

Selain menggunakan icon di atas, anda bisa mencoba dengan tulisan berikut codenya :

1. Newer : <img src="http://img26.imageshack.us/img26/1240/yellownewer3.png"/>

2. Older  : <img src="http://img638.imageshack.us/img638/9353/yellowolder3.png"/>

3. Home  : <img src="http://img856.imageshack.us/img856/1944/yellowhome3.png"/>

Good Luck 

 

Cara Membuat efek Link Bergoyang

 

Assalamu'alaikum wr.wb

Salam sejahtera buat semua bloger, kali ini aufa mo bagi sedikit tentang cara membuat efek link bergoyang diblog (kaya dangdut ja ya hehehe)

Langsung ja menuju TKP :

1. Log in ke blogger anda semuanya (Pastinya dah pada lebih pinter lah dibandingkan aufa)

2. Lalu masuk ke Dashboard > Tata letak > Add gadget > HTML/java script

3. Selanjutnya Copy Paste HTML/java script berikut :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

4. Angka 400 menunjukan kecepatan goyangan, anda bisa merubahnya sesuai keinginan

Jika sudah seselasi > save > dan lihat hasilnya Link di blog anda akan bergoyang, dan lebih indah jika dibandingakn goyang itik hehehehe.

Selamat Mencoba, semoga bermanfaat