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 ...


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..........

COMMENTS

BLOGGER: 26
Loading...

Ads 970x90

Nama

allianz,1,andro textile,1,android,6,asmara,1,asuransi,1,award,3,berita,45,bisnis,4,cap kaki tiga,1,commonwealth,2,daftar isi,5,decoder,1,download,15,efek blog,5,elektronik,2,entertainment,3,facebook,18,family,3,flora dan fauna,7,gadet,1,galuh,8,google,17,google adsense,2,google plus,24,hiburan,28,HostingPangeran,1,hotel murah,1,ICAN Education,1,iddetik.com,1,iklan,1,jadwal timnas,1,jasa,1,keindahan alam,2,keluarga,1,kesehatan,1,klasemen,6,komputer,2,kontes,22,kuliner,3,lain-lain,52,Margahayuland 42 tahun membangun,1,maruyungsari,9,olahraga,35,otomotif,9,paket wisata,1,pengalaman,2,persib,2,profil,2,puisi,2,religi,25,review produk,2,sambut brazil,2,seluler,2,software,1,superwash,1,tutorial dan trik blog,74,twitter,4,video,3,widget,1,wisata,5,youtube,11,
ltr
item
BLOG MASHARI: Cara Membuat Label Animasi Terbuka Di Jendela Depan
Cara Membuat Label Animasi Terbuka Di Jendela Depan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiMiHRBdsv1u546jXh9qb3xBF1duZgOB_gCBJXYkRMEvaRN4bIfmNMaTy-R8BaYsi9d4HbFzdIlzNJhDeYnlg5DfSTt5TO_2wimBSIZIli9mZHXpNWhkpvsXijnTJdtVnvBhjZCqXNMDM/s320/label.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiMiHRBdsv1u546jXh9qb3xBF1duZgOB_gCBJXYkRMEvaRN4bIfmNMaTy-R8BaYsi9d4HbFzdIlzNJhDeYnlg5DfSTt5TO_2wimBSIZIli9mZHXpNWhkpvsXijnTJdtVnvBhjZCqXNMDM/s72-c/label.png
BLOG MASHARI
https://harysukasuka.blogspot.com/2013/02/cara-membuat-label-animasi-terbuka-di.html
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/2013/02/cara-membuat-label-animasi-terbuka-di.html
true
1510860441598238899
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy