[ASK] Bagaimana terjadinya fenomena slider ini?

[puspita]

Halo kakak-kakak

Sebelumnya mohon maaf sudah buat judul thread yg fenomenal

Mau tanya kak, aku pengen belajar buat theme seperti ini http://livedemo00.template-help.com/prestashop_37485/. Bagian manakah yang perlu diedit untuk membuat slider 2 jenis seperti itu. Sebelah kiri menu diskon. Sebelah kanan slider. Sementara ini saya cuman bisa pasang modul Nivo. Sedangkan menu diskon bagian kiri belum tahu dipasang di mana.. Lalu untuk membuat footer gmn juga kak? aku dah pasang modul Wcontent tapi gak jalan

Mohon pencerahan kakak-kakak. Makasih..

 

NB: Buat yang pertama jawab aku do'ain tambah ganteng / tambah cantik + rejeki nomplok

Yang jawab selanjutnya juga sama

[puspita]

duh.. kok belum ada yg jawab ya kak? tolong dong kak ?

[gonebdg - webindoshop.com]

Silahkan Anda download file yang dilampirkan disini lalu buka dengan browser favorite Anda.

prestashop_37485.html

Perhatikan isi filenya ...

 

Untuk membagi sebuah area menjadi 2 bagian kanan dan kiri bisa dlakukan dgn cara sbb :

 

<div style="float: left">
ISI BAGIAN SEBELAH KIRI
</div>

<div style="float: right">
ISI BAGIAN SEBELAH KANAN
</div>

 

file yang di edit umumnya adalah file header.tpl

 

Untuk menampilkan Block banner dan slider seperti website yang Anda ujuk, copy-paste script dibawah ini kedalam file header.tpl diantara body tag:

 

<!-- tmbannerblock -->
<div class="clearblock"></div>
<div id="tmbannerblock">
<a class="banner1" href='prices-drop.php'><img src='http://livedemo00.template-help.com/prestashop_37485/modules/tmbannerblock/slides/slide_00.jpg'alt="" title="" /></a>
<a class="banner2" href='best-sales.php'><img src='http://livedemo00.template-help.com/prestashop_37485/modules/tmbannerblock/slides/slide_01.jpg'alt="" title="" /></a>
<a class="banner3" href='cms.php?id_cms=1'><img src='http://livedemo00.template-help.com/prestashop_37485/modules/tmbannerblock/slides/slide_02.jpg'alt="" title="" /></a>
</div>
<!-- /bannerblock -->

<!-- piscesslider -->
<script type="text/javascript" src="http://livedemo00.template-help.com/prestashop_37485/modules/piscesslider/js/jquery.nivo.slider.pack.js"></script>
<div id="slide_holder">	
<div id="slider">				  
	<a href='product.php?id_product=12'><img src='http://livedemo00.template-help.com/prestashop_37485/modules/piscesslider/slides/slide_00.jpg' alt="" title="" /></a>
	<a href='category.php?id_category=5'><img src='http://livedemo00.template-help.com/prestashop_37485/modules/piscesslider/slides/slide_01.jpg' alt="" title="" /></a>
	<a href='product.php?id_product=7'><img src='http://livedemo00.template-help.com/prestashop_37485/modules/piscesslider/slides/slide_02.jpg' alt="" title="" /></a>
</div>
</div>	
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
	effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
	slices:9,
	animSpeed:500, //Slide transition speed
	pauseTime:5000,
	startSlide:0, //Set starting Slide (0 index)
	directionNav:false, //Next & Prev
	directionNavHide:false, //Only show on hover
	controlNav:true, //1,2,3...
	controlNavThumbs:false, //Use thumbnails for Control Nav
	controlNavThumbsFromRel:false, //Use image rel for thumbs
	controlNavThumbsSearch: '.jpg', //Replace this with...
	controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
	keyboardNav:true, //Use left & right arrows
	pauseOnHover:true, //Stop animation while hovering
	manualAdvance:false, //Force manual transitions
	captionOpacity:0.8, //Universal caption opacity
	beforeChange: function(){},
	afterChange: function(){},
	slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<!-- /piscesslider -->

 

dan sertakan juga css dan javascript yg diperlukan dengan meng copy-paste script dibawah ini kedalam file header.tpl diantara head tag :

 

<link href="http://livedemo00.template-help.com/prestashop_37485/themes/theme288/css/global.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://livedemo00.template-help.com/prestashop_37485/js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://livedemo00.template-help.com/prestashop_37485/js/jquery/jquery.easing.1.3.js"></script>

 

 

Hal diatas hanyalah contoh!

Untuk mengaplikasikannya kedalam website Anda, maka Anda harus menyesuaikan/menambahkan style yg diperlukan saja kedalam file global.css prestashop Anda, yaitu :

1. #tmbannerblock
   
2. div#slide_holder
   
3. div.nivo-controlNav
   

Gunakan firefox add-ons firebugs untuk melihat script css-nya, dan sesuaikan nilainya dengan themes/layout yg Anda gunakan sebelum Anda masukan kedalam global.css prestashop Anda

 

 

Sesuaikan semua lokasi gambar yang akan ditampilkan dengan lokasi penyimpan gambar Anda.

Download semua file jquery yang diperlukan untuk menjalankan slider, dan tempatkan didalam server website Anda (umumnya diletakan dalam directory /js/)

1. http://livedemo00.te....slider.pack.js
   
2. http://livedemo00.te...y.easing.1.3.js
   

Klik kanan mouse Save link as

[puspita]

Aku coba dulu kak.. makasih banyak... ntar kontak lagi..

[madesu]

script css-nya rumit gan,da yg simple gak