Membuat 'Slider Image' Pada Blog

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:0;
  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() {
	$(&#39;#s3slider&#39;).s3Slider({
	timeOut: 4000
	});
	});
</script>

Jika dalam blog anda sudah terdapat jQuery, kode yang bergaris bawah diatas diabaikan dan disarankan menggunakan jQuery versi terbaru

• 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="URL Image Anda" />
			<span>
				<strong><a href="URL Tujuan anda">Title anda</a></strong>
				<p>Tulisan Anda......</p>
			</span>
		</li>
		<li class="s3sliderImage">
			<img src="URL Image Anda" />
			<span>
				<strong><a href="URL Tujuan anda">Title anda</a></strong>
				<p>Tulisan Anda......</p>
			</span>
		</li>
		<li class="s3sliderImage">
			<img src="URL Image Anda" />
			<span>
				<strong><a href="URL Tujuan anda">Title anda</a></strong>
				<p>Tulisan Anda......</p>
			</span>
		</li>
		<li class="s3sliderImage">
			<img src="URL Image Anda" />
			<span>
				<strong><a href="URL Tujuan anda">Title anda</a></strong>
				<p>Tulisan Anda......</p>
			</span>
		</li>
		<div class="clear s3sliderImage"></div>
	</ul>
</div>

• Lalu Simpan.

Sekian dan semoga bermanfaat.Satank MkrBerkomentar

Bagikan kepada teman!

DMCA

Garis