Rabu, 15 Desember 2010

Membuat Headlines Slide Show Ala Detik.com dan kompas.com

Memang awalnya sangatlah rumit namun setelah saya coba mengutak-aktik berulang-ulang akhir bisa juga. Tutorial ini bisa kita jumpai di situs situs besar yang website Koran Online Kompas.com dan detik.com

Membuat tab slide show image versi 1“, memang tidak segampang yang di bayangkan, tapi shobat semuat gak usah bingung lagi. yaitu Galtabs seperti ada yang di website kompas.com. Bagi yang belum tahu, silakan kunjungi Kompas.com atau anda bisa melihat di web ini. Tepatnya di “Berita Foto” bar. atau lihat gambar dibawah ini.


BAGAIMANA?...Menarik bukan! Ingin coba silakan ikuti tutorialnya, It.... jangan lupa minum copy dulu. heheheeee
1. Login ke Account Blogger Anda
2. Masuk ke “Layout/Tata Letak”
3. Klik “Edit HTML”
4. Cari kode ]]>
5. Copy kode HTML di bawah ini, pastekan diatas kode ]]>

.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 atas kode
7. Masuk ke “Layout/Tata Letak“, kemudian “Add Elemen Halaman” >> “HTML/Javascript” dan masukkan kodenya.

Selamat mencoba.

3 komentar:

Srie mengatakan...

Untuk langkah no. 6. script-nya mana ya? terima kasih.

martabaya mengatakan...

mas kalo di applikasi lain gimana? saya bikin pake dreamweaver bisa gak?

Anonim mengatakan...

tutorialnya memang yang sedang saya cari mas, tapi kok ga lengkap.
tolong agar dilengkapi mas. dan beritahu saya ke emotionalacandroid@gmail.com
salam http://beritaeducation.blogspot.com

Posting Komentar