Cara Membuat Slideshow Jquery New Version - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Slideshow Jquery New Version !! Semoga tulisan dengan kategori
Slide !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Slideshow Jquery New Version ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->
Cara Membuat Slideshow Jquery New Version - 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 sobat amati gambar dibawah ini :
Cara Membuatnya :
Masuk ke Blogger
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
- Masuk ke Dasbor
- Pilih Rancangan Bagian Elemen Halaman.
- Klik Tambah Gadget.
- Pilih HTML/Javascrpt
- 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>
Terakhir klik save dan lihat hasilnya.
Source : epg-studio.blogspot.com/2011/04/jquery-slide-show-1.html
Demikian info Cara Membuat Slideshow Jquery New Version, Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi Cara Membuat Slideshow Jquery New Version ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.