Efek Link warna-warni

Saat cursor menyentuh link, maka link tersebut akan berwarna-warni berikut cara membuatnya :

1. Log in ke blog anda
2. Pilih tata letak>>add Gadget>>HTML
3. Lalu copy widget berikut 
<script src="https://sites.google.com/site/tutorialcursorsparkle/rainbow.user.js" type="text/javascript"> /*********************************************** http://jombinabelog.blogspot.com/ ***********************************************/ </script>
4. Save dan test dengan meletakan cursor pada link blog anda
5. Selamat mencob, cukup mudah bukan!

Scroll Box Blog Archive

Banyak cara untuk membuat scroll box blog archive sesuai dengan template yang digunakan, salah satunya seperti ini :

1. Masuk ke dashboard>>log in ke blogger>>Template>>HTML
2. Cari kode <div id='ArchiveList'> dengan menggunakan ctrl+f supaya lebih mudah
3. Anda akan menemukan kode html <div class='widget-content'>
4. Lalu ganti <div class='widget-content'> dengan  menggunakan kode html berikut
<div class='widget-content' style='overflow:auto; height:200px'>
5. Preview terlebih dahulu sebelum anda save
6. Selamat mencoba semoga bermanfaat
7. Jika masih gagal anda bisa menggunakan cara lain, itu berarti template anda tidak sesuai dengan cara yang saya jelaskan di atas.

Widget Tombol Like Faceebook

 

Untuk meningkatkan trafik pengunjung blog biasanya blogger memasang beberapa fasilitas untuk share,like atau sejenisnya, berikut aufa bagi sedikit tetang cara membuat tombol LIKE FACEBOOK tanpa harus login ke Facebook anda. 

Caranya cukup mudah anda hanya tinggal memasang widget ini dengan cara : Login ke blog anda > Dashboard > tata letak > Add Gadget > HTML/Javascript >copy pasate kode di bawah ini > save

Catatan "Anda masukan URL BLOG ANDA dalam kolom yang telah di sediakan dalam kode HTML yang ada copy paste"

Tombol Like Facebook

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=MASUKAN URL BLOG ANDA&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

Selamat mencoba semoga bermanfaat.

Cara Membuat Text Box

Text box biasanya di gunakan untuk membuat banner atau memasukan kode HTML biar terlihat rapih, cara memasangnya pun tidak begitu sulit

1. Anda tinggal copy paste bentuk-bentuk text Box di bawah ini ke dalam post yang sedang anda buat dengan mengklik kolom HTML bukan dalam kolom Compose.
2. Lalu masukan Tulisan </textarea> diakhir kode HTML dari bentuk text box yang anda copy atau letakan setelah Tulisan "TEKS/HTML ANDA DISINI"
3. Ganti tulisan TEKS/HTML ANDA DISINI dengan teks atau kode HTML yang akan anda post.
4. Preview terlebih dahulu dengan mengklik kolom compose seblum anda klik save posting anda.
5. Lanjutkan menulis posting anda jika belum selesai di kolom compose

Berikut beberapa bentuk text box yang bisa anda gunakan untuk keperluan blog anda.

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()">TEKS/HTML ANDA DISINI"

<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;" onclick="this.focus();this.select()" >TEKS/HTML ANDA DISINI

<textarea cols="20" name="code" rows="3" style="background: #DAFFBF; border: 2px #295F00 dashed; color: #295f00; line-height: 1.5em; padding: 5px;" onclick="this.focus();this.select()" >TEKS/HTML ANDA DISINI

<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;" onclick="this.focus();this.select()">TEKS/HTML ANDA DISINI

<textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;" onclick="this.focus();this.select()" >TEKS/HTML ANDA DISINI

<textarea name="code" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;" onclick="this.focus();this.select()">TEKS/HTML ANDA DISINI

Sekian tutorial tentang cara membuat text box semoga bisa membantu

Tulisan Berjalan diblog

Walapun sudah banyak bertebaran di situs web yang lain tapi tidak ada salahnya aufa berbagi kumpulan widget untuk blog beikut ini :

1. Widget Tulisan berjalan

<marquee direction="left" scrollamount="2" align="center"><span style="font-weight:bold;">SILAHKAN TULIS DI SINI</span></marquee>

2. Login ke blog Anda, Tata Letak > Add gadget > HTML > copy paste code di atas > Edit Tulisan > Save

3. Singkat jelas padat, Semoga bermanfaat

Cara membuat link terbuka di new tab

Bagi anda yang ingin membuat link diblog anda secara otomatis akan terbuka di new tab, ga sah bingung simak saja caranya cukup mudah dan simple banget, berikut tutorialnya :

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

2. Lalu pilih Dashboard > templates > edit HTML

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

<head>

4. Selanjutnya letakan code berikut tepat di bawah <head>

<base target='_blank'/>

5. Setelah proses diatas selesai tinggal anda save templates dan langsung lihat hasilnya

Selamat mencoba

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