Cara membuat CSS Play seperti di atas sama sekali tidak menggunakan kode javascript. Ini murni menggunkan kode CSS dan HTML. Tampilan seperti ini bisa berguna untuk photo blog galery, dan di setiap photo bisa pula dibuat anchor link hingga ketika photo diklik, langsung menuju halaman yang dikehendaki. Kode ini saya modifikasi biar bisa diterapkan pada blogspot dan tentu saja buat blog lain yang setipe dengan itu. Cara membuat CSS Play saya temukan ketika googling untuk mencari tahu cara membuat javascript play seperti yang ada di website mizan.com. Alih-alih bukan seperti script mizan yang saya temukan, tetapi CSS Play yang kegunaannya hampir sama. Thank U Stu Nicholis.Meski begitu saya masih berharap bisa memodifikasi kode ini agar bisa seperti yang saya harafkan sejak awal. Pun begitu, CSS Play seperti ini sudah saya simpan.
Jika ingin menerapkan pada blog anda, berikut ini caranya:
Langkah pertama:
Masukkan kode berikut ke dalam CSS anda, Caranya, Login ke blogger >> Layout >> Edit HTML, lalu paste sebelum kode ]]></b:skin>.
a, a:visited, a:hover, a:active, a:focus {font-weight:normal;} /* for IE6 */
ul#gallery {
padding:0;
margin:100px auto;
width:448px;
height:336px;
position:relative;
background:#888 url(graff/g26.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}
Langkah kedua:
Masukkan kode berikut ini keblog anda. Tempatkan di posisi yang anda kehendaki. Bisa juga di tempatkan di dalam blog bersama tulisan anda yang lain, atau juga di Widget HTML Javascript jika ingin menempatkan CSS Play di sidebar, atau di navbar. Kodenya adalah:
<ul id="gallery">
<li><a href="#nogo">
<img src="graff/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="graff/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="graff/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="graff/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="graff/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="graff/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="graff/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo">
<img src="graff/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="graff/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo">
<img src="graff/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="graff/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo">
<img src="graff/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="graff/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo">
<img src="graff/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="graff/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo">
<img src="graff/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="graff/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo">
<img src="graff/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo">
<img src="graff/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo">
<img src="graff/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo">
<img src="graff/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo">
<img src="graff/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo">
<img src="graff/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="graff/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
Selamat mencoba...
