Cari Artikel Blog Ini

Total Tayangan Laman

JQUERY SLIDE SHOW VERSI 1

Selain dapat membuat tampilan blog lebih cantik, slide show juga berfungsi untuk menampilkan postingan terbaru, promosi dari suatu produk, atau berupa informasi penting lainnya dari blog yang anda kelola mupun blog lain yang memang patut ditampilan pada slide show.
Tips membuat Slide Show ini menggunakan dua file java script serta kode-kode lainnya.
Sebagai contoh coba anda amati gambar dibawah ini :



CARA MEMBUAT
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Edit HTML
LANGKAH PERTAMA

Copy kode dibawah, kemudian paste dibawah kode :<body>

<script type="" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"judul image 1","desc":"Keterangan image 1"},{"id":"slide-img-2","client":"judul image 2","desc":"Keterangan image 2"},{"id":"slide-img-3","client":"jjudul image 3","desc":"Keterangan image 3"},{"id":"slide-img-4","client":"judul image 4","desc":"Keterangan image 4"},{"id":"slide-img-5","client":"judul image 5","desc":"Keterangan image 5"},{"id":"slide-img-6","client":"judul image 6","desc":"Keterangan image 6"},{"id":"slide-img-7","client":"judul image 7","desc":"Keterangan image 7"}];
</script>


Ganti tulisan Judul image dan keterangan image dengan tulisan yamg ingin ditampilkan

LANGKAH KEDUA

Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:20px;
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:550px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:550px;
height:52px;
margin:22px 0 0;
}
div#top div#nav ul{
float:left;
width:550px;
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#header{
margin:-1px 0 0;
}
div#video-header{
height:550px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
}
div#header div#slide-holder{
z-index:40;
width:550px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:550px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:550px;
height:46px;
display:none;
position:absolute;
background:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZax8SMwKoI/AAAAAAAACQU/jKYyP3pkefo/s128/slide-bg.png) 0 0;
}
div#header 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#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header 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#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZatkNZ9vdI/AAAAAAAACQE/XnxeOeqYwF8/silde-nav.png);}
div#nav ul li a{background:url(https://lh5.googleusercontent.com/_1j80TgNqd_8/TZax-eNRtRI/AAAAAAAACQY/ci4_hxU0QgM/s912/header-bg.png) no-repeat;}


Ganti seluruh ukuran width yang berwarna kuning yang disesuaikan dengan lebar tempat meletakan slide show

LANGKAH KETIGA

Copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script src='https://sites.google.com/site/epgstudiosite/javascript/jquery.js' type='text/javascript'/><script src='https://sites.google.com/site/epgstudiosite/javascript/scripts.js' type='text/javascript'/>


Klik Tombol Simpan Template


LANGKAH KEEMPAT
  1. Masuk ke Dasbor
  2. Pilih Rancangan Bagian Elemen Halaman.
  3. Klik Tambah Gadget.
  4. Pilih HTML/Javascrpt
  5. Copy kode dibawah ini kemudian paste pada kolom yang tersedia

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayimDclcI/AAAAAAAACQ0/K75d647i9Bs/s912/nature-photo6.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayfqs2MiI/AAAAAAAACQw/WJQfcd1EK-g/s912/nature-photo5.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZaycXbtn7I/AAAAAAAACQs/eFOr4ZS0EZo/s912/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZaya8bZTwI/AAAAAAAACQo/PmJHp4a1-BY/s912/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZayQFzxRqI/AAAAAAAACQk/-ZHpEai9IG8/s912/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayM8T_5eI/AAAAAAAACQg/5Ld-3JKMqyM/s912/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayJcVzcEI/AAAAAAAACQc/nykm8K_RVZY/s912/nature-photo.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>


Klik Tombol Simpan

Selamat mencoba, semoga bermanfaat...!!!

Sumber : Dream Css

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
2 Comments

2 komentar :

Rino Prantama mengatakan...

mas , saya mau tanya ,. kalo kodenya dimasukan pada postingan apakah bisa ? jika bisa apakah ada penyesuaian tertentu ? terimakasih ... salam kenal mas

Ades Sambas mengatakan...

@Rino Prantama Jika ingin dipasang pada postingan, kode langkah 1 s/D 3 tetap harus pada template.
Jadi yang dipasang pada postingan hanya langkah ke 4.
Cuma jika dipasang pada postingan, slide show hanya akan terlihat jika postingan yang ditaroh kode langkah ke-4. Jadi pada beranda dan postingan lainnya, slide show akan tersembunyi (tidak terlihat)

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!