Membuat Button Next dan Pause pada Slider di Tema BlogDetik Simple Scheme Magazine - Orange SSM

21 Oct 2011

img_slider_simple-scheme-magazine

Jika sampeyan salah satu d’blogger yang menggunakan “tema terpopuler” blogdetik “Simple Scheme Magazine”, modifikasi ini akan sangat tepat karena mampu membuat slider yang ditampilkan di halaman utama memmpunyai penambahan fungsi “Next“. Dengan sekali klik slider akan bergeser dan “ringkasan posting berikutnya ditampilkan”. Satu lagi yang berubah adalah difungsikannya “pause”. Jadi ketika cursor berada di atas slider maka pergerakan slider menjadi terhenti sehingga pembaca akan dengan leluasa membaca “ringkasan posting yang ditampilkan melalui slider”.

Modifikasi Slider di Tema Simple Scheme Magazine

Merubah atau memodifikasi jQuery slider pada tema blogdetik Simple Scheme Magazine dan Orange Simple Scheme Magazine merupakan sebuah upaya memaksimalkan fungsi jQuery slider yang pada dasarnya memang bisa dikembangkan lebih maksimal dengan menambah button NEXT, PREV, STOP, PAUSE, serta membuat animasi pergeseran slider dalam bentuk berbeda. Beberapa perubahan dapat dilakukan secara sederhana dengan mengembangkan fungsi pada kode CSS slider atau menambah CSS baru serta merubah javascript. Pada tips dan trick kali ini kita akan membuat sedikit perubahan pada slider dan semoga tricks ini akan memberi sesuatu yang berbeda dan sekaligus bermanfaat.

Kode CSS Slider

<style type="text/css"> 
#featured{ 
	position:relative;
	height:285px;
	overflow:hidden; 
}
#featured:after {
	position:absolute;
	content:"Next-Click";
	font-size:22px;
	padding:3px 8px;
	border:1px solid #999;
	background:#777;
	color:#aaa;	
	right:20px;
	font-weight:bold;
	top:230px;
	text-shadow:0 0 6px #000;
}
#featured .post{
	background: url(https://sites.google.com/site/jqueryprojects/image-effects/slider/simple-scheme-magazine/white_transparan-opa-70.png);
}
</style>

Javascript Slider

<script type="text/javascript">
$(function() {
$('#featured').cycle({
	fx: 'scrollLeft',
    speed: 300,
    timeout: 5000,
    next: '#featured', 
    pause: 1.0		
	});
});
</script>

D E M O

Agar sampeyan dapat membandingkan slider sebelum dan sesudah modifikasi silahkan buka link demo berikut:

  1. D e m o Slider Tema blogdetik Simple Scheme Magazine
  2. Jika demo di atas tidak bekerja silahkan buka yang berikut ini:

    D e m o Slider Tema blogdetik Simple Scheme Magazine

Cara Menggunakan/Menyimpan Kode CSS & Javascript

  1. Login di blogdetik.
  2. Dasbor
  3. Arahkan cursor di atas link menu Appearance kemudian pilih dan klik Widget.
  4. Pilih Widgetize Any HTML dan simpan seluruh kode (Kode CSS dan Javascript) di dalam box Widgetize Any HTML.
  5. Save Changes
Keterangan/Catatan:

  1. Slider dapat lebih dikembangkan lagi untuk mendapatkan tampilan yang lebih menarik dengan menambahkan beberapa background RGBA atau background transparan.
  2. Kecepatan slider dapat diatur dengan merubah speed slider. Semakin besar nilainya maka akan semakin lambat (speed: 300).
  3. Animasi pergeseran slider dapat dirubah dengan merubah fx: ‘scrollLeft‘,. Anda dapat merubahnya dengan kode yang lain misalnya scrollRight, scrollUp, scrollDown serta beberapa bentuk kode lain yang memberi bentuk animasi slider berbeda pula.

Tutorial Lain

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan :

Happy Blogging


TAGS Tutorial BlogDETIK Panduan BlogDETIK Javascript


-

Author

Follow Me