Semua code dan gambar yang digunakan dalam step ini merupakan code dan gambar dari slidesjs.com.
1. Panggil framework jQuery
Dimana fungsi panggil framework jQuery akan diletakkan? Nah biasanya
fungsi ini dipanggil diantara syntax <head> dan </head>. Sudah tahu
bagaimana struktur blogspot? Kalau belum maka sebenarnya struktur
blogspot itu adalah seperti ini
<html>
<header>
<title></title>
a. diantara kedua header ini lah ditempatkannya fungsi panggil framework jQuery dan juga tempat meletakkan code javascript.</header>
b. stylesheet (css) juga diletakkan pada bagian ini.
<body>
syntax2 html dan page element dari suatu blogspot ada diantara dua syntax ini </body></html>
Letakkan script berikut pada bagian setelah <header> atau sebelum </header>, jangan letakkan pada bagian di antara <b:skin><![CDATA[/* dan </b:template-skin> pada bagian ini merupakan stylesheet (css). Letakkan script berikut setelah </b:template-skin>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'/> <script src='http://blank017.googlecode.com/svn/slides.min.jquery.js' type='text/javascript'/>
Script di atas juga dapat ditempatkan pada bagian sebelum <![CDATA[/*. Silahkan pilih salah satunya.
2. Pasang plugin slides
Letakkan script berikut tepat di bawah script pemanggilan jQuery pada poin 1 (satu) di atas.
<script>
//<![CDATA[
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtv-BwYpb49DlJAiu1YwEAuQXJ-4t8BSuCSxFKYbqanUMq4643ce8qSigVZZnIJ9PwhyLSUDs75YnISXCLL6MmOd4BXQSKqzDbMJYp08YYxHR_wbrvn1bwhbvaoND-HQG7jgEXQ3BQWCg/s800/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
//]]>
</script>
3. Tampilkan melalui blog menggunakan html
Lalu tampilkan gambar dan background dari slide tersebut. Sebagai contoh saya meletakkannya pada bagian header. Silahkan berkreasi sendiri untuk meletakkan picture slider tersebut di blog. Syntax htmlnya sebagai berikut :
<div id='container'> <div id='example'> <img alt='New Ribbon' height='112' id='ribbon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3xjeVEKuS8jjhDDZHyU2OlZXJQklSl7DOSMwjnc7yimK_IMuoLnKOjm2oexiCMtse4iaiZrE-R0WCaVhXpUhOLoJWcMKas_L8tfvt0LkSd3ogcRqEeC10j7xaI4AKO4cuxXZwKPbHsHs/s800/new-ribbon.png' width='112'/> <div id='slides'> <div class='slides_container'> <a href='http://www.flickr.com/photos/jliba/4665625073/' target='_blank' title='145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!'><img alt='Slide 1' height='270' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUD4nlIpurRRkLQPfC1NJUTUMw3u4b7rdAzY2bSG0bo33zmKJvGE_33NP491xYOMPc8aRADHvQl5mLISaQ-BFNSndYJJXeb8ZGM_-MRS_8xMOFeMgBXH-p1-y695d1MaXt2JI1TgYVPdT/w480-h314-no/1.jpg' width='570'/></a> <a href='http://www.flickr.com/photos/stephangeyer/3020487807/' target='_blank' title='Taxi | Flickr - Photo Sharing!'><img alt='Slide 2' height='270' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrveEr0HqyTKfjtRdd9TwkWILlw_Mga7-xo2gcMNjnKjpJC8fTvAC3j3HhWroPf8i5ckP8CH7COc1dadfFKEN4hIRw6P7YLXv1zjbrD0NujihpxTUZEP8TVjN0FlJKTCXGEWSDoPV60gV/w569-h314-no/2.jpg' width='570'/></a> <a href='http://www.flickr.com/photos/childofwar/2984345060/' target='_blank' title='Happy Bokeh raining Day | Flickr - Photo Sharing!'><img alt='Slide 3' height='270' src='http://slidesjs.com/examples/standard/img/slide-3.jpg' width='570'/></a> <a href='http://www.flickr.com/photos/b-tal/117037943/' target='_blank' title='We Eat Light | Flickr - Photo Sharing!'><img alt='Slide 4' height='270' src='http://slidesjs.com/examples/standard/img/slide-4.jpg' width='570'/></a> <a href='http://www.flickr.com/photos/bu7amd/3447416780/' target='_blank' title='I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by. | Flickr - Photo Sharing!'><img alt='Slide 5' height='270' src='http://slidesjs.com/examples/standard/img/slide-5.jpg' width='570'/></a> <a href='http://www.flickr.com/photos/streetpreacher/2078765853/' target='_blank' title='twelve.inch | Flickr - Photo Sharing!'><img alt='Slide 6' height='270' src='http://slidesjs.com/examples/standard/img/slide-6.jpg' width='570'/></a> <a href='http://www.flickr.com/photos/aftab/3152515428/' target='_blank' title='Save my love for loneliness | Flickr - Photo Sharing!'><img alt='Slide 7' height='270' src='http://slidesjs.com/examples/standard/img/slide-7.jpg' width='570'/></a> </div> <a class='prev' href='#'><img alt='Arrow Prev' height='43' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXq-2GYWX_Cw_Wyiga9MxyICvR551_eaze051yxVxk6HS9CTaqBCvSD5QtvOXN6z-lFeRpgiQF0zFg5Kyx6MiQo8XRu0kuYQBssihcqJCM1Gll5K8qr9GKQup43u8CxQIYtN4LcFDFFQU/s800/arrow-prev.png' width='24'/></a> <a class='next' href='#'><img alt='Arrow Next' height='43' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKwk3ISputUbPaI2j94HT146onDgADrjralniU60IzmOh9EcYdjQLr5DsFlOsX2RAkm1jkmuCt0BVf4Fj9CQ0sPo1RsHXdw8QE9gau0tUclsKDwOUiF7JwOq4noHq7TmG2_7vKXBSq2gw/s800/arrow-next.png' width='24'/></a> </div> <img alt='Example Frame' height='341' id='frame' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8QenngmCpfzro3yy9mM-dNh5yNSI0Ny_EwilIPn5K-hgUQSZkThKUEV8w-eCwHI60vygrzoOQ-Qz3fXCMvVBxFRqAVk4WVB4bq3gGa8_Ecd9OF06ArEDoZFcnK6byAmLvbxaOtyUz1BA/s800/example-frame.png' width='739'/> </div> <div id='footer'> <p>For full instructions go to <a href='http://slidesjs.com' target='_blank'>http://slidesjs.com</a>.</p> <p>Slider design by Orman Clark at <a href='http://www.premiumpixels.com/' target='_blank'>Premium Pixels</a>. You can donwload the source PSD at <a href='http://www.premiumpixels.com/clean-simple-image-slider-psd/' target='_blank'>Premium Pixels</a></p> <p> 2010 <a href='http://nathansearles.com' target='_blank'>Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href='http://www.apache.org/licenses/LICENSE-2.0' target='_blank'>Apache license</a>.</p> </div> </div>
Syntax html tersebut diletakkan di atas syntax
</div>atau di bawah syntax
<b:include name='description'/>
4. Definisikan tampilan html dengan css untuk menentukan warna, background, posisi dll.
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
Nah akhirnya kita sampai pada bagian akhir. Copy lalu paste script css berikut di atas syntax ]]></b:skin>.
/*JQUERY-------------------*/
#container {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
}
#example {
width:600px;
height:350px;
position:relative;
}
#ribbon {
position:absolute;
top:-3px;
left:-15px;
z-index:500;
}
#frame {
position:absolute;
z-index:0;
width:739px;
height:341px;
top:-3px;
left:-80px;
}
/*
Slideshow
*/
#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:570px;
overflow:hidden;
position:relative;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:570px;
height:270px;
display:block;
}
.slides_container a img {
display:block;
}
/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:585px;
}
/*
Pagination
*/
.pagination {
margin:26px auto 0;
width:100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjijUkVFRgmVR6LpGdMN6HHHxeW9HSKj-X7RG7p5r0BfTCAxN6OhITHK844eGwyj9Z9-OFOzQGqWnvRfRlGtEDOUCDKnkfudELIRF1ywcirXZbSBS0kQcPUpFgXqrVJSppMdC4q7TpCP-M/s800/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}
/*
Footer
*/
#footer {
text-align:center;
width:580px;
margin-top:9px;
padding:4.5px 0 18px;
border-top:1px solid #dfdfdf;
}
#footer p {
margin:4.5px 0;
font-size:1.0em;
}
/*
Anchors
*/
a:link,a:visited {
color:#599100;
text-decoration:none;
}
a:hover,a:active {
color:#599100;
text-decoration:underline;
}
Silahkan berkreasi sendiri untuk mengembangkannya. Selamat mencoba
See the demo here
0 komentar:
Post a Comment