Cara Membuat Label Animasi Terbuka Di Jendela Depan


cara membuat label animasi terbuka di jendela depanNah loo,,bingung dengan judul artikel saya,??sebenarnya saya juga bingung mau kasih judul apa,yang penting intinya adalah bahwa label ini adalah label animasi.Label animasi ini bekerja dengan memperluas secara horisontal kemudian vertikal sampai memenuhi layar. Animasi ini cukup cepat dan tidak terlalu Membosankan.

Berbeda dengan label standar yang biasa ada di sidebar,label ini bisa di buat sebagai daftar isi karena bisa berfungsi juga jika di pasang di dalam postingan dan tentu dengan syarat posting di bagian HTML bukan compose.

Oke langsung saja ke cara membuat label animasi terbuka di jendela depan,sobat bisa ikuti caranya sebagai berikut;


  • Pertama copy dulu javascript yang ada di bawah ini,.
  • Kemudian buka tata letak dan tambah gadget baru pilih yang HTML/javascript.
  • Simpan / save.


<script language=javascript>
<!-- Begin

//Animated Window- By Selladrt (selladrt@gmail.com)
//Modified by Selladrt
//Visit http://bloggertutoria.blogspot.com/

function expandingWindow(website) {
var windowprops='width=100,height=100,scrollbars=yes,status=yes,resizable=yes'
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7;  // horizontal scrolling speed (higher = slower)
var leftdist = 10;    // distance to left edge of window
var topdist = 10;     // distance to top edge of window

if (window.resizeTo&&navigator.userAgent.indexOf("Opera")==-1) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +","+ windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("1", sizeheight);
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, sizeheight);
sizer.location = website;
}
else
window.open(website,'mywindow');
}
//  End -->
</script>




  • Langkah berikutnya copy script di bawah ini.
  • Letakan sesuai dengan keinginan sobat,terserah mau sebagai postingan atau di sidebar.
  • Selanjutnya ganti semua URL label milik saya dengan URL label milik sobat.
  • Lihat yang sengaja saya kasih warna biru adalah contoh URL label blog saya,dan yang warna hitam adalah judul label tersebut.
  • Simpan,dan selesai.


<div align="center">
<button class="bt5">Daftar Isi</button></div>
<br />
<form>
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/berita&#039;)" type="button" value="Berita" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/daftar%20isi&#039;)" type="button" value="Daftar Isi" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/family')" type="button" value="Family" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/flora%20dan%20fauna')" type="button" value="Flora dan Fauna" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/google%20plus')" type="button" value="Google Plus" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/hiburan')" type="button" value="Hiburan" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/kuliner')" type="button" value="Kuliner" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/lain-lain')" type="button" value="Lain-Lain" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/maruyungsari')" type="button" value="Maruyungsari" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/olahraga')" type="button" value="Olahraga" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/otomotif')" type="button" value="Otomotif" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/pengalaman')" type="button" value="Pengalaman" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/puisi')" type="button" value="Puisi" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/religi')" type="button" value="Religi" />
<input onclick="expandingWindow('http://harysukasuka.blogspot.com/search/label/tutorial%20dan%20trik%20blog')" type="button" value="Tutorial dan Trik Blog" />
</form>

 Maka hasilnya akan seperti yang sobat lihat di bawah ini



Untuk melihat demo nya silahkan sobat klik tulisan DEMO berikut;



Bagaimana sobat semuanya?setelah melihat demo nya,apakah sobat juga tertarik untuk membuat label animasi tersebut?jika ia,,semoga berhasil dan happy blogging..........
Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat Label Animasi Terbuka Di Jendela Depan
Ditulis Oleh Hary Muhlia
DILARANG KERAS Copy Paste 100% artikel ini!!! Artikel ini dilindungi dengan setifikat DMCA.com Protection Status Protected, silahkan edit minimal 60% adalah hasil narasi anda sendiri dan jangan lupa sertakan link yang menuju ke artikel Cara Membuat Label Animasi Terbuka Di Jendela Depan ini sebagai sumbernya. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya

Bagikan ke

Iklan Anda
Berkomentar dengan
atau
silahkan tentukan pilihan sobat!

26 komentar:

  1. met pgi genk wao kretif juga'y genk. selamat aktifitas sobat. sukses slalu buat anda sob.

    BalasHapus
    Balasan
    1. wkwkwk...lebih kretif lagi mas brebes ..
      sekali lagi ijin share mas.. :D

      Hapus
    2. mandi2 mas dah sore kalu dah mandi minum kopi hahahahaha

      Hapus
    3. haa,,sdah atuhh..
      malm mingguan dlu sob,,nnti di lanjut lagi

      Hapus
  2. buttonx simple banget ya.., gk bnyk gaya tp gk mati gaya *smile

    BalasHapus
    Balasan
    1. smile juga sob..
      thanks dh berkunjung..

      Hapus
  3. jadi label bisa dibuat seperti ini ya? baru tahu nih, terima kasih infonya

    BalasHapus
  4. keren sob, bisa dicoba

    izin follow ya...
    follow back jika berkenan :)

    BalasHapus
    Balasan
    1. silahkan sob..
      makasih follownya..
      followback sukses..
      makasih knjungannya... :D

      Hapus
  5. Terimakasih sob, infonya keren-keren!

    BalasHapus
  6. Wah keren bos, terimakasih atas informasinya.

    BalasHapus
    Balasan
    1. sama2 boss..
      makasih dh mau mampir..

      Hapus
  7. asli keren banget sobb..
    mungkin nanti jika jumlah postku mencapai 50 bakal saya pakai tuh..??

    BalasHapus
  8. saya sudah pernah mencoba membuat label animasi seperti ini sob..bagus hasilnya

    BalasHapus
    Balasan
    1. ya sob,,emang bagus label ini,apalagi kalau di modif terus.. :D

      Hapus
  9. wahahaha unik nih :D

    tapi kayanya buttonnya perlu di modif lagi tuh :D

    BalasHapus
    Balasan
    1. Haa,,Ya silahkan mas achmad coba modif lagi button nya..
      nnti kalau ada yg baru,jangan lupa di kabarin.. :)

      Hapus
  10. wa mantap ni sobat...nambah2 ilmu ^^

    BalasHapus
  11. Abis dari blog demo, pas liat hasilnya kreen,, kyaknya boleh juga nih coba...

    BalasHapus
  12. blog walking tengah malam wkwkwkwkw

    BalasHapus

1.Jangan lupa koment yah kawan,untuk mempererat silaturahim.
2.Komentar Tanpa Moderasi. Yang mau pasang Link,gunakan NAME/URL atau Open ID.
3.Silahkan kawan becanda,asal dengan etika.
4.Terimakasih kunjungan dan komentarnya kawan,Mohon maaf jika belum bisa berkunjung balik
5.Tetap tersenyum meskipun sedih.

© 2013 Harysukasuka - All Rights Reserved | Disclaimer | Privacy Policy
Template by IdleCreative
Back to Top