Cara Membuat Slide show versi. 2

Tutorial kali ini saya membahas tentang slide show versi lain, yah bisa dibilang slideshownya ala kompas.com. Sebelumnya saya memposting tentang slide show, kali ini saya share -kan lagi cara membuat slide show versi lainnya.



    * Login ke Blogger.com
    * Kemudian Tata Letak
    * Pilih Edit HTML
    * Centang Expand Widget
    * Copas kode berikut 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;}



Selanjutnya cari kode ]]> 
Paste script berikut dibawah kode tersebut.


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

Kemudian SAVE jika telah selesai.

Selanjutnya masul ke Elemen Laman
Klik Add Gadget > HTML/JAVA SCRIPT
kemudian copy paste Script HTML berikut.




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

Jika selesai Simpan template.

ket.
- Sesuaikan ukuran sehingga terlihat lebih menarik
- Ganti teks berwarna Merah dengan Link gambar kalian
- Ganti teks berwarna Kuning dengan Link judul artikel blog kalian.
- Ganti teks berwarna Purple dengan judul artikel blog kalian.

Selamat mencoba

Related Posts:

0 Response to "Cara Membuat Slide show versi. 2"

Post a Comment