Membuat Slider Otomatis Dari URL

Agt

07

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Slider Otomatis Dari URL dan semoga artikel ini bermanfaat.

---

Membuat Slider Otomatis Dari URL ini maksudnya adalah membuat slider dengan menggunakan URL atau alamat web/blog yang bisa sesuai keinginan dan ini sangat cocok buat sobat yang mempunyai beberapa blog dan ingin mempromosikan blognya di blog yang lain, ini cocok juga buat blog/web yang menawarkan produk sebagai info froduknya. penempatan yang idealnya adalah di sidebar sehingga tidak memakan banyak tempat untuk ukurannya bisa sobat atur pada kode CSSnya.

Slider ini bernama  s3Slider dan sudah banyak yang menggunakan slider ini terutama situs atau web jualan karena ini memang sangat cocok.

Buat sobat yang penasaran dengan slider ini silahkan lihat dulu demonya.

Sudah lihat demonya? ya ga usah panjang lebar menjelaskan tentang slider ini, yang penting hasilnya saja yang utama proses kerja dan lainnya biar yang ahli saja yang neranginnya. hehehehe...

Lankah Pertama Membuat Slider Otomatis Dari URL;

• Seperti biasa saja login dahulu ya..
• klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
• Klik edit HTML klik lanjutkan kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

#slider, #slider ul#sliderContent, #slider img {
width:450px; /* Tentukan lebar slideshow */
height:300px; /* Tentukan tinggi slideshow */
}
#slider {
margin:0px auto 10px;
border:2px solid white;
background:#fff url(&#39;http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif&#39;) no-repeat 50% 50%;
position:relative;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
overflow:hidden;
}
ul#sliderContent {
position:absolute;
top:0px;
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}
#slider img {
border:none;
padding:0px 0px;
margin:0px 0px;
outline:none;
}
.sliderImage {
float:left;
position:relative;
list-style:none;
margin:0px 0px;
padding:0px 0px;
display:none;
}
.sliderImage span {
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:auto;
font:normal 11px Arial,Sans-Serif;
color:white;
background-color:black;
opacity:0.8;
filter:alpha(opacity=80);
padding:7px 10px 12px;
display:none;
}
.sliderImage span a {
font-size:12px;
font-weight:bold;
color:white;
text-decoration:none;
}

• Selanjutnya sobat cari kode </head> setelah ketemu letakan kode dibawah ini sebelumnya atau diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://my-project-favicon.googlecode.com/files/s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).bind('load', function() {
$('#slider').css('background-image', 'none').s3Slider({
timeOut:3000 });
});
//]]>
</script>

• Setelah selesai simpan dulu templatenya, 

Lankah kedua Membuat Slider Otomatis Dari URL;

• Pada langkah kedua ini sobat harus sudah keluar dari halaman edit HTML dan klik Tata letak selanjutnya klik tambah gadget yang berada dibawah judul header. atau dimana saja terserah sobat.
• Setelah klik tambah gadget selanjutnya klik HTML/javascript dan masukan kode dibawah ini

<script type="text/javascript">
showPostDate_g     = true;
slideOpenNewTab   = false;
idMode                   = true;
slidebyLabels          = false;
var slideLabelName = "Mengenai",
pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
text                = "Komentar",
numposts_g    = 10,
home_page     = "http://azzam10.blogspot.com/";
</script>
<script src="http://my-project-favicon.googlecode.com/files/Content4s3Slider.js" type="text/javascript"></script>

Silahkan ganti tulisan yang berwarna merah dengan URL yang sobat mau pasang.
Silahkan konfigurasikan sendiri untuk mengatur true atau false pada kode diatas sehingga cocok dengan selera sobat.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Slider Otomatis Dari URL kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 12:58