Cara Membuat Label Animasi Terbuka Di Jendela Depan

Nah 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;

DEMO

Bagaimana sobat semuanya?setelah melihat demo nya,apakah sobat juga tertarik untuk membuat label animasi tersebut?jika ia,,semoga berhasil dan happy blogging..........