Cara Membuat Slideshow Versi 2 Ala Kompas.com di Blogspot

Kali ini saya akan membahas bagaimana cara membuat slideshow ala Kompas.com seperti yang anda liat jika anda mengunjungi situs berita tersebut. Slide tersebut bisa anda gunakan di blog anda sebagai promosi artikel-artikel anda yang mungkin tidak terlihat lagi dihalaman utama, sehingga pengunjung blog anda bisa melihat dan membaca artikel tersebut.

(screen capture slide)

Untuk mebuat slide tersebut, silahkan ikuti langkah-langkah dibawah ini:

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

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

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>