Membuat Menu Slide Show Versi 2

tabslideshowmagev2.0

1. Login ke Account Blogger Anda
2. Masuk ke "Layout/Tata Letak"
3. Klik "Edit HTML"
4. Cari kode ]]></b:skin>
5. Copy kode HTML di bawah ini, pastekan diatas kode ]]></b:skin>

 

.img400{width:340px;height:250px;}.img400 img{width:340px;height:250px;border:0;z-index:80;}.cursor{cursor:pointer;}.h250{height:250px;}.min250{margin-top:-250px;}.des_4{background:#000;padding:3px 8px;filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;width:60px;color:#F60;margin-bottom:2px;z-index:990;}.des_1{background:#000;height:57px;padding:3px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;z-index:990;}.des_1a{background:#000;height:50px;padding:10px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;margin-top:-60px;}.font16{font-size:13px;}.font16{font-size:14px;}.c_white{color:#FFF;}.c_white a{text-decoration:none;color:#FFF;}.c_white a:hover{text-decoration:underline;}.page_hl a{font:bold 12px arial;color:#FFF;text-decoration:none;padding:2px 5px;display:inline;background:#000;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;}.page_hl a:hover,.page_hl a.selected{color:#FFF;text-decoration:none;background:#000;filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;}.page_hl span a{color:#FFF;text-decoration:none;background:#F30;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;}.pd_5{padding:5px;}.clearit{clear:both;margin:0;padding:0;}.pb_10{padding-bottom:10px;}

 

6. Copy script di bawah ini, dan pastekan di bawah kode ]]></b:skin>

<script src='http://akhatamdotcom.googlecode.com/files/jquery-1.3.2.min-min.js' type='text/javascript'/>

 

NB: jika jquery-1.3.2 sudah ada di template kamu, jangan dipasang. Karena akan menumpuk, dan akan membuat loading page lama.


7. Masuk ke "Layout/Tata Letak", kemudian "Add Elemen Halaman" >> "HTML/Javascript" dan masukkan kodenya seperti di bawah ini.

 

<div id="gal1" class="img400">
<div class="h250"><img alt="" src="http://akhatamdotcom.googlecode.com/files/holiday.jpeg" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
<div class="des_1 font16 c_white"><span class="font11 c_orange">ADVERTISING</span><br /><a href="http://www.akhatam.com/2010/02/prepare-your-holiday.html"><strong>Prepare Your Holiday</strong></a>
</div>
</div>
</div><div id="gal2" style="display:none;" class="img400">
<div class="h250"><img alt="" src="http://akhatamdotcom.googlecode.com/files/wanita-tidur-2-minggu.jpg" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
<div class="des_1 font16 c_white"><span class="font11 c_orange">Berita Unik</span><br /><a href="http://www.akhatam.com/2010/02/inilah-gadis-yang-suka-tidur-sampai-2.html"><strong>Inilah gadis yang suka tidur sampai 2 minggu</strong></a>
</div>
</div>
</div><div id="gal3" style="display:none;" class="img400">
<div class="h250"><img alt="" src="http://akhatamdotcom.googlecode.com/files/sammy.jpg" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
<div class="des_1 font16 c_white"><a href="http://www.akhatam.com/2010/02/sammy-akhirnya-masuk-penjara.html"><strong>Sammy akhirnya masuk penjara</strong></a>
</div>
</div>
</div><div id="gal4" style="display:none;" class="img400">
<div class="h250"><img alt="" src="http://akhatamdotcom.googlecode.com/files/wordpress-2.jpeg" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
<div class="des_1 font16 c_white"><a href="http://www.akhatam.com/2010/01/jakarta-pengakses-wordpress-terbesar-di.html"><strong>Jakarta Pengakses Wordpress Terbesar didunia?</strong></a>
</div>
</div>
</div><div id="gal5" style="display:none;" class="img400">
<div class="h250"><img alt="" src="http://akhatamdotcom.googlecode.com/files/boediono%20-%20srimulyani.jpg" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
<div class="des_1 font16 c_white"><a href="http://www.akhatam.com/2010/02/bagaimana-jika-fraksi-konsisten.html"><strong>Bagaimana jika Fraksi Konsisten?</strong></a>
</div>
</div>
</div><div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div></div><div class="clearit"></div>
<div class="clearit pb_10"></div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000)
</script>

 

8. Klik "SIMPAN"

sumber : http://www.akhatam.com

Artikel Terkait:

0 comments:

Post a Comment

 
© 2009 - The Inspitarion Of Weblog | Free Blogger Template designed by Choen

Home | Top

/* Google Analytics */ /* navigasi page number */