Membuat 'Slider Image' Pada Blog adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Membuat 'Slider Image' Pada Blog ini.
Wah.... Pertama-tama saya ucapkan selamat datang kembali pada blog Kang Fathur yang berbagi informasil online. Disini tempatnya berbagi informasi mulai dari Tutorial, Design Grafis, CorelDRAW, PowerPoint, Blogger, Photoshop, Islami, Template, dan banyak sekali.
Pada malam ini, saya akan membagikan cara membuat slider image pada blogger yang mana tampilannya banyak digunakan para pengguna blogger ataupun wordpress. Akan tetapi artikel kali ini, hanya share-kan tutorial pada pengguna blogspot soalnya untuk design wordpress jelas Kang Fathur gak tau.... hehhehhe.
Pernah sebelumnya saya membuat Slider pada Populer Post (artikel populer) scara otomatis, Slide pada Googe Adsense, Membuat Panel Slide dan saat ini membuat Slide manual pada gambar blog.
Sebenarnya slider image ini sudah lama saya buat untuk Blog Portal Informasi Online kan tetapi karena bnyak kerjaan yang gak bisa ditinggalkan baru kali ini saya sempat sharekan bagi temen-temen pengunjung setia blog ini.
Imi merupakan konsep perubahan dalam blog ini, yang sebelumnya menggunakan slider image seperti gambar berikut :
Menjadi
Langkah I
- Login Blogger dengan account anda;
- Pilih Rancangan atau Design;
- Klik tab Edit HTML;
- cari Kode ]]></b:skin>
- Copy paste code berikut sebelum kode diatas :
#s3slider {
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #FFFFFF;
box-shadow: 0 0 4px #CCCCCC;
height: 300px;
margin-bottom: -30px;
margin-left: 0px;
margin-top: -35px;
overflow: hidden;
position: relative;
text-shadow: 0 1px 0 #000000;
width: 603px;
}
#s3sliderContent {
background: none repeat scroll 0 0 #FFFFFF;
height: 300px;
list-style: none outside none;
margin-left: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: -14px;
width: 600px;
}
.s3sliderImage {
float: left;
position: relative;
width: 600px;
}
.s3sliderImage span {
background-color: #000000;
color: #FFFFFF;
display: none;
font-size: 12px;
height: 300px;
line-height: 16px;
opacity: 0.7;
overflow: hidden;
padding: 10px 13px;
position: absolute;
right: 0;
top: 0;
width: 180px;
}
.s3sliderImage strong a {
font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
font-size: 20px;
}
.s3sliderImage strong a:hover {
color: #FFFFFF;
}
- Selanjutnya cari kode </head>
- Jika ketemu Copy paste kode dibawah sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
Membuat 'Slider Image' Pada Blog
(C)2012 by Kang Onk Design
http://kang-fathur.blogspot.com/2012/04/membuat-slider-image-pada-blog.html-------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
- Simpan Template.
Langkah II
Tetap pada Rancangan, pilih tab Tambahkan Elemen (Gadget);Pilih HTML/JavaScript;
dan copy paste kode berikut :
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://2.bp.blogspot.com/-0UQvce3Ubew/T3i0JC_jmaI/AAAAAAAAAEU/lYhqHZUBF4g/s1600/family_2.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/membuat-foto-fantasi-dengan-warna-pada.html">Sweet Memory on the 2008</a></strong>
<p>Sweet Memory on the 2008 mengenang masa lalu yang begitu indah, indahkah anda sekarang?.....</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/-jjJyeMgH9RQ/T3i0JLVZCGI/AAAAAAAAAEM/annTJKwCVfQ/s1600/family_1.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/makna-dan-arti-kata-farheisty-putih.html">My Family is The Best</a></strong>
<p>Tepatnya pada tanggal 28 Juli tahun 2009 lalu, saya berbahagia karena dikarunia seorang putri yang cantik, imut dan kuberi nama Farheisty Putih Rahman....</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/-kfsdhBrU5qI/T3i01gua0xI/AAAAAAAAAEk/1v4HXwD3dfc/s1600/family_3.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/tips-mendidik-anak-pra-sekolah.html">Educating Children Pre-School</a></strong>
<p>Oh.. My Baby. Kedisiplinan pada balita adalah ketika si anak mengenali, meniru sikap kita sehari-hari.....</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/-jjJyeMgH9RQ/T3i0JLVZCGI/AAAAAAAAAEM/annTJKwCVfQ/s1600/family_1.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/makna-dan-arti-kata-farheisty-putih.html">My Family is The Best</a></strong>
<p>Tepatnya pada tanggal 28 Juli tahun 2009 lalu, saya berbahagia karena dikarunia seorang putri yang cantik, imut dan kuberi nama Farheisty Putih Rahman....</p>
</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
- Lalu Simpan.
Catatan : Silakan ganti huruf-huruf yang berwarna biru dan bercetak tebal sesuai dengan keinginan anda.
Sekian dan semoga bermanfaat. SELENGKAPNYA atau SEPENUHNYA Sistem Komputer Sitemap 1 2 3 4 5
