Script Untuk Membuat Animated Collapse Menu

Script Untuk Membuat Animated Colapse

Sekarang ini banyak sekali Script-script menarik yang disediakan oleh berbagai website, salah satunya adalah website javascript  favotite saya yaitu www.dynamicdrive.com , situs ini terbilang cukup lengkap dalam menyediakan berbagai macam script. dan salah satunya adalah script yang akan saya bahas kali ini, yaitu script untuk membuat animated collapse menu. atau show hide menu. dimana didalam menu tersebut kita bisa menyembunyikan bermacam content, seperti  isi postingan, gambar ,Link list dll. seperti pada contoh dibawah ini. coba anda klik gambar gambar yang bertuliskan show atau tulisan yang ada disebelahnya.

Britney Spear

Contoh Posting

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya

Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

Untuk anda yang berminat memasang widget shoutbox ini pada Blog ataupun website anda. Caranya adalah sebagai berikut :

Link Walpaper Artis

Avril Lavigne
Angelina Jolie
Britney Spears
Aishwarya Rai
Carmen Electra
Beyonce Knowles
Jessica Alba
Jennifer Lopez
Kelly Clarkson
Paris Hilton
Shakira
Jessica Simpson

Tanpa perlu berlama-lama lagi bagi anda yang berminat untuk membuat Animated Collapse menu tersebut.caranya aalah sebagai berikut.

1. Setelah anda login ke Blogger kemudian anda masuk ke menu Tata Letak/Layout >> Edit Html.

2. Pada halaman edit html, anda copy dan paste semua kode dibawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/vmart77/javascript/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<script type="text/javascript">
animatedcollapse.addDiv('01', 'fade=1,height=200px')
animatedcollapse.addDiv('02', 'fade=1,height=200px')
animatedcollapse.addDiv('03', 'fade=1,height=200px')
animatedcollapse.addDiv('04', 'fade=1,height=200px')
animatedcollapse.addDiv('05', 'fade=1,height=200px')
animatedcollapse.addDiv('06', 'fade=1,height=200px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    //$: Access to jQuery
    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Keterangan :
Tulisan yang dicetak tebal dan berwarna merah di atas bisa anda edit sesuai keinginan anda, misalnya untuk tulisan '01' yaitu untuk menandakan Id atau identitas menu, sedangkan untuk kode '200' yaitu ukuran tinggi tampilan menu tersebut bila diklik.bila anda ingin memperbanyak Id untuk tampilan menu, silahkan anda copy paste atau perbanyak kode animatedcollapse.addDiv('01', 'fade=1,height=200px') dan beri Id yang berbeda dengan yang lainnya.

3. Klik save/simpan template.

4. Setelah anda memasukan semua kode diatas pada halaman Html template anda, langkah selanjutnya adalah
anda copy dan paste kode dibawah ini paa gadget Html/Javascript dimana saja terserah anda mau menampilkan menu tersebut dimana.

<a href="javascript:animatedcollapse.toggle('01')"><img src="toggle.jpg" border="0" /></a> Nama Content</a>

<div id="01" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>


Bila anda ingin memperbanyak tampilan menu tersebut, silahkan anda copy paste kode diatas dan beri Id yang berbeda sesuai dengan yang ada pada halaman Html template yang anda masukan sebelumnya.contohnya seperti dibawah ini.

<a href="javascript:animatedcollapse.toggle('01')"><img src="toggle.jpg" border="0" /> Nama Content 01</a>

<div id="01" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>

<a href="javascript:animatedcollapse.toggle('02')"><img src="toggle.jpg" border="0" />Nama Content 02</a>

<div id="02" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>

<a href="javascript:animatedcollapse.toggle('03')"><img src="toggle.jpg" border="0" />Nama Content 03</a>

<div id="03" style="width: 300px; background: #cc0000; display:none">
<b>Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.</b><br />
</div>

 dan hasilnya akan seperti dibawah ini.

Nama Content 01

Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.

Nama Content 02

Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.

Nama Content 03

Isi dengan content apapun yang anda inginkan seperti gambar, postingan dll disini.

untuk gambar tombol, saya menggunakan gambar ini ,silahkan anda ganti sesuai keinginan anda dengan memasukan link gambar anda pada tulisan toggle.jpg pada kode di atas.begitu juga mengenai ukuran lebar tampilan menu tersebut bila diklik silahkan anda ganti ukuran Width:300px;

Untuk jelasnya silahkan anda praktekkan sendiri pada blog anda. dan bila ada yang kurang mengenai semua postingan saya, jangan merasa sungkan untuk menuliskan komentar anda. saya akan sangat berterima kasih sekali bila anda memberi komentar pada setiap postingan yang anda baca. saya rasa cukup sekian dulu,postingan saya kali ini. Semoga bermanfaat dan salam blogger mania.

Read More : Script Untuk Membuat Animated Collapse Menu

Membuat Tampilan Windows XP Progres Bar

Membuat Tampilan Windows XP Progres Bar

Bagi pengguna komputer pastinya sudah tak aneh lagi dengan yang namanya Windows XP, yaitu salah satu Operating System buatan microsoft, dan pastinya juga sudah tak aneh lagi dengan tampilan loading seperti pada contoh di atas pada windows XP tersebut, sebelum masuk ke tampilan wellcome screen. bagaimana bila anda menginginkan agar tampilan loading atau progres bar tersebut di pasang pada blog kita. untuk membuat tampilan Windows Xp progres bar seperti pada contoh di atas, caranya cukup simple yaitu hanya dengan memasukan Script dibawah ini pada halaman Html template anda tepat di atas kode </head>

<script language='javascript' src='http://sites.google.com/site/vmart77/javascript/xp_progress.js'>
</script>

Source : www.Dynamicdrive.com

Setelah itu anda copy dan paste kode dibawah ini pada gadget HTML / Javascript, posisinya dimana saja boleh, terserah keinginan anda mau menampilkannya dimana.entah itu pada sidebar, lower bar dll.

 <script type="text/javascript">
var bar1= createBar(160,25,'black',1,'white','blue',85,4,3,"");
</script>

keterangan :
silahkan anda rubah kode di atas sesuai dengan yang anda inginkan dengan ketentuan ini:
varbar=createBar=(lebar,tinggi,'background',border,'warnaborder','warnablock',speed,jumlahblock,string,"")

Silahkan mencoba dan semoga bermanfaat. salam blogger mania.

Read More : Membuat Tampilan Windows XP Progres Bar

Cara Membuat Slide show ala Zigmag Primuz

Cara Membuat Slide show ala Zigmag Primuz

Mungkin dari para blogger ada yang pernah berkunjung ke suatu blog yang menggunakan template Zigmag Primuz. dimana pada blog tersebut terlihat tampilan slide show yang berisi postingan dan gambar yang ada dalam postingannya. contoh tampilannya seperti gambar dibawah ini.

 

bagaimana bila anda yang tidak menggunakan template Zigmag Primuz tapi menginginkan agar templatenya mempunyai tempilan slide show tersebut. untuk membuat tampilan slide show bergaya Zigmag primuz tersebut, caranya adalah sebagai berikut.

1. Setelah anda login ke blogger, kemudian anda masuk ke menu Tata Letak/Layout, setelah itu masuk ke menu Edit Html.

2. Pada halaman Html template anda, silahkan anda copy dan paste kode CSS dibawah ini di atas kode ]]></b:skin> .

#slider        {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhisAEeVgZbrBTC7lJsbSQbouqAJOcrd3erhrWUccBUvNh7zJlbnetaZZNsgoGMmfR-_as07NkCuAc_InnXrUM57m0q5uCZuLDDfvujKDZXVrt59PuWAwSSWaqrqdYVjsZ1NKMU5ueeploR/s1600/Slide+BG+960.png);      /* Bacground Slide Show */

width: 960px;         /* Ukuran Lebar Slide Show */
 height: 220px;      /* Ukuran Tinggi Slide Show */

overflow: hidden;

position: relative;

margin: 5px 0;
}

#mover {

 width: auto;
 position:absolute;
 overflow:hidden;
}

.slide {

padding: 10px 0px;

width: 940px; /* Ukuran Lebar Tampilan dalam Slide Show */

float: left;

position: relative;

height:200px;  /* Ukuran Tinggi Tampilan dalam Slide Show */

}

.slide h2 {

font-family:georgia, Helvetica, Sans-Serif;    /* Jenis Teks untuk judul Posting  */

font-size: 20px;      /* Ukuran Teks untuk judul Posting  */

color: #fffc09;       /* Warna Teks untuk judul Posting  */

padding:0px 10px 0px 10px;

margin:0px 0px;

width:580px;         /* Ukuran Lebar ruangan  untuk judul Posting  */

overflow:hidden;
        }

.slide h2 a:link, .slide h2 a:visited  {
 color:#fffc09;
 background-color: transparent;
 }

.slide h2 a:hover  {
 color: #fffc09;
 background-color: transparent;
  }

span.slmet {

color: #ee0909;       /* Warna Teks untuk nama Author  */

font-size: 10px;      /* UkuranTeks untuk nama Author  */

font-family:Tahoma, georgia, Helvetica, Sans-Serif;   /* Jenis Teks untuk nama Author  */

line-height: 20px;

width: 400px;       /* Ukuran Lebar ruangan Teks untuk nama Author  */

padding:0px 40px 0px 40px;

margin:0px 0px;

text-transform:uppercase;
}
.slide p {

color: #fff;                         /* Warna Teks untuk Isi postingan  */

font-size: 12px;               /* Ukuran Teks untuk Isi postingan  */

font-family:georgia, Helvetica, Sans-Serif;   /* Jenis Teks untuk Isi postingan  */

text-align: justify;

line-height: 20px;

width: 580px;                        /* Lebar ruangan Teks untuk Isi postingan  */

padding:0px 0px 0px 30px;

margin:0px 0px;
        }

.slide img {

position: absolute;

top: 10px;

width: 250px;    /* Ukuran Lebar Thumbnail Gambar postingan  */

width: 188px;      /* Ukuran Tinggi Thumbnail Gambar postingan  */

left: 620px;          /* Jarak untuk posisi Thumbnail Gambar postingan  dengan sisi kiri blog*/

background:#000;

padding:0px;
        }

#slider-stopper {

position: absolute;

font-family: Georgia, Helvetica, Sans-Serif;

font-weight: bold;

top: 90px;  /* Jarak untuk posisi tulisan Stop/Start dengan sisi atas blog*/

right: 45px;   /* Jarak untuk posisi tulisan Stop/Start dengan sisi kanan blog*/

color: #fff;

padding: 3px 8px;

font-size: 12px;

text-transform: uppercase;

z-index: 1000;

}

Keterangan :

Untuk Backgroung Slide show pada kode CSS di atas yaitu menggunakan gambar yang saya buat seperti dibawah ini. bila anda ingin menggantinya engan karya anda sendiri silahkan anda ganti dengan ukuran 960px.

bila ukuran lebar template anda lebih atau kurang dari 960px, maka anda harus menambah atau mengurangi ukuran gambar backgroundnya, dan sebaiknya semua ukuran yang lebih dari 350pz pada kode CSS di atas anda tambah atau kurangi sesuai perbedaan antara ukuran lebar template anda dengan ukuran 960px. misalnya lebar template anda 1000px, maka semuanya ditambah 40px.

3. Langkah selanjutnya yaitu anda copy dan paste kode dibawah ini tepat dibawah kode  ]]></b:skin>.

<script src='http://www.templatesimages.com/images/ZinmagPrimus/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://www.templatesimages.com/images/ZinmagPrimus/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
        var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

4. Bila anda menginginkan slide show tersebut terletak bawah header, maka anda copy dan paste kode yang berwarna biru dibawah ini dibawah kode. <div id='header-wrapper'> ,  seperti dibawah ini..

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>

<div style='clear:both;'/>

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>

<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>

<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

<div class='clear'/>

Keterangan :

Silahkan anda Edit kode di atas sesuai dengan memasukan  isi postingan, Link Postingan, nama Author + Tanggal, dan Link Gambar yang akan di tampilkan.

5. Klik Save/simpan dan selesai.

Untuk Lebih Jelasnya silahkan anda praketekkan pada blog anda mengenai cara membuat slideshow bergaya Zigmag Primuz ini. Mungkin cukup sekian dulu postingan kali ini dan semoga bermanfaat,Salam blogger mania

Read More : Cara Membuat Slide show ala Zigmag Primuz