Jump to content
puspita

[ASK] Bagaimana terjadinya fenomena slider ini?

Recommended Posts

Halo kakak-kakak :)

Sebelumnya mohon maaf sudah buat judul thread yg fenomenal :D

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

Yang jawab selanjutnya juga sama :D

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More