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
- Masuk ke Blogger
- Pilih Rancangan bagian Edit HTML
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>Klik Tombol Simpan
Selamat mencoba, semoga bermanfaat...!!!
Tidak ada komentar:
Posting Komentar