Cara Memasang Slider JQuery Keren

sahabat Focus.. tutirial blogging kali ini saya akan memenuhi permintaan salah satu rekanan focus atas pemasangan slider yang pernah saya pake untuk blog ini. Slider ini sesungguhnya bukan ciptaan saya, melainkan di ambil dari Visionwidget jika anda membukanya maka ada beberapa silder yang tersedia, silder yang saya jelaskan kali ini adalah slider bernomor urut 3 pada situs tersebut. Mudah-mudahan bermanfaat dan dapat membantu blog sahabat focus sekalian menjadi "semakin hidup", (repost from: rekanan yang memesan slider ini). oke, langsung aje ye... nih caranya:

1. masuk ke akun blogger anda
2. klik RANCANGAN, dan
3. masuk ke EDIT HTML

Ditahap ini anda belum perlu mencentang expand template widget.

Pasang kode berikut tepat diatas kode ]]></b:skin>

*{
margin:0;
padding:0;
}
html{
height:100%;
}
ning-ning{
width:960;
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:960px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:960px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:667px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#kepala{
margin:-1px 0 0;
}
div#video-kepala{
height:683px;
margin:-1px 0 0;
}
div#kepala div.wrap{
height:299px;
background:url(http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/images/header-bg.png) 50% 0 no-repeat;
}
div#kepala div#slide-holder{
z-index:40;
width:960px;
height:299px;
position:absolute;
}
div#kepala div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:943px;
height:278px;
overflow:hidden;
position:absolute;
}
div#kepala div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#kepala div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:943px;
height:46px;
display:none;
position:absolute;
background:url(http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/images/slide-bg.png) 0 0;
}
div#kepala div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#kepala div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#kepala div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#kepala div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#kepala div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

pastingan kode diatas diletakkan tepat diatas kode ]]></b:skin>, lalu letakkan kode script berikut ini tepat diatas kode </head>

<script type='text/javascript'>var _siteRoot='index.html',_root='index.html';</script>
<script language='javascript' src='http://h1.ripway.com/tropicboy/jquery.js' type='text/javascript'/>
<script language='javascript' src='http://h1.ripway.com/tropicboy/scripts.js' type='text/javascript'/>

pastingan kode diatas diletakkan tepat diatas kode </head>

setelah dua tahapan diatas terlaksana dengan benar, simpan template anda.

langkah selanjutnya adalah meletakkan slider pada tempat yang anda inginkan, pada langkah ini anda diharuskan untuk meng-klik centang expand template agar semua kode template dapat terlihat. Dalam hal ini saya mengasumsikan anda akan memasang slider pada kolom HEADER, maka berikut ini kode slider dan cara menempatkannya:

jika header anda telah terisi gambar, judul, blog, atau gadget lainnya maka anda terlebih dahulu harus menghapus gadget yang telah mengisi kolom header. caranya:

cari kode berikut

<div id='header-wrapper'>

jika kolom header telah terisi, tentu kode selanjutnya adalah

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='(judul blog anda)' type='Header'/>
</b:section>

skarang, untuk menghapus gadget yang mengisi kolom header, anda perlu menghapus yang berada dibawah kode berwarna merah diatas (<b:widget id='Header1' locked='true' title='(judul blog anda)' type='Header'/>). lalu simpan template anda, berhubung tindakan yang anda lakukan adalah menghilangkan salah satu gadget maka blogger akan meminta konfirmasi penghapusan gadet, klik HAPUS GADGET.

oke, setelah gadget tadi dihapus maka tindakan selanjutnya adalah menempatkan kode slider pada kolom header yang telah dihapuskan tadi. letakkan kode berikut dibawah kode

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<div id='ning-ning'>
<div id='kepala'><div class='wrap'>
<div id='slide-holder'>
<div id='slide-runner'>
<a href=''><img alt='' class='slide' id='slide-img-1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoK4O4QNBq4b_ox8rvLfYfME3dYDjqrQ-_B_ybnqgnbyWAPQAKcY5XJVFu9OqprpgPh19EAUz-aok9J_55TBekxbIRErIUX2tFS_IyNtK13-3u95rjkCdNwT-njnEV_jLB4jCSOd7e74/s1600-r/rumah-tongkonan-tana-toraja1.jpg'/></a>
<a href=''><img alt='' class='slide' id='slide-img-2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGdlxl6fEq6yRCTmbbNNrE6izeLocj3L8pQgqEGkKWqAj0AzXGUUqk7QCxhHnF34yoz72mANYwUCzyS7NPY7xVrUiGYY5izZLIY9eCxZd8G4tojSQB8c-_P0LKAKzGA1saBX4mtvHPYI/s1600-r/detik_DSC_4913a.jpg'/></a>
<a href=''><img alt='' class='slide' id='slide-img-3' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLG_CZNcOuJhS9Sf_NPcjFTKY6H8MsF2-C1_hQlApveGPwOqyMIBu8-2Us1wuTcyrukZ6aIBDO88yBR5D3mjbuheJ6exHi_n8AOC7ZjmUdnICi6X_lb-RM_MOha0RazP-PSCG3CHdEcjc/s1600-r/cimg4289.jpg'/></a>

<a href=''><img alt='' class='slide' id='slide-img-4' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9CEDSIEuc6wEHL9w964yLNzQ2bC0MB2YK6ynsMCNG7HrgICMTtse66Qc_O3QMS9KLCl20FvvN-bI5gF2vFd5b-rRr5SNv_0R0NdfsErEEX_K5Bfn-CJJwMAxls1r17cRdFS6zX4GSiQU/s1600-r/allvew1.jpg'/></a>
<a href=''><img alt='' class='slide' id='slide-img-5' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5vpYcPzqQJE8AhCTwMfcM7CLCTzL32GRpD2fXpDZzEGgox-0J62XfDW6YnEVqWq_zm9y7EiUDim4Ygehb3kdxKSnASMCNzC5vZUVDLTC8Ur8p_2-9nkA1lhOpyOODlz7_Nxmo9ktS13I/s1600-r/bira.JPG'/></a>
<a href=''><img alt='' class='slide' id='slide-img-6' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj44jXQTEq0YfaXVDTUOYJZqKjrnhtdm3i6Ly7-0sm22YSrelkw2epvrYO49lKuS2AN0hge6g1XegJLa3tBeAMRWaOpwauwLkEyUMWSivcu8_Z8qg3yMDxG3IAkyqIeopWrzHY6G1k-hHM/s1600-r/malino.jpg'/></a>
<a href=''><img alt='' class='slide' id='slide-img-7' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgE19QgRldMqe6qB4mY3WmR4NKknUlYnwuXUGAlKA0cQCZQbzU5fWr2XqhD1FsLy_8TAmcP0S6FcW1Zpuexgx6JbuxCmVPaU9MfyV9LZLdwjK9kP3eesAkx6wA7MtWqlkpR3Reew9cO4/s1600-r/losari.2.jpg'/></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>

</div>


</div>
<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Tana Toraja","desc":"Location: Toraja, South Sulawesi, Indonesia"},{"id":"slide-img-2","client":"Mountain Lady","desc":"Location: Endekan, South Sulawesi, Indonesia"},{"id":"slide-img-3","client":"Bantimurong","desc":"Location: Maros, South Sulawesi, Indonesia"},{"id":"slide-img-4","client":"Pallette Cape","desc":"Location: Bone, South Sulawesi, Indonesia"},{"id":"slide-img-5","client":"Bira Beach","desc":"Location: Bulukumba, South Sulawesi, Indonesia"},{"id":"slide-img-6","client":"Malino","desc":"Location: Gowa, South Sulawesi, Indonesia"},{"id":"slide-img-7","client":"Losari Beach","desc":"Location: Makassar, South Sulawesi, Indonesia"}];
</script>

</div></div>
</div>

pastikan kode tersebut terletak dibawah kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

setelah semua proses panjang tadi terlewati, simpan template anda sekarang.

Cara Memasang Slider JQuery Keren

Random Post

Followers

Blog Directory