Slide |
Langsung saja Tutornya dibawah ini
1. Lagi-lagi masuk Edit HTML hehehee (Capek dot com)
2. Cari kode ini
]]></b:skin>
3. Copy kode dibawah ini dan LETAKKAN di ATAS-nya
/* START -------------------------------------------------------------------- Awesome Automatic Content Sliders for Blogger using jQuery By http://www.abu-farhan.com -------------------------------------------------------------------- Slick Slideshow */ #slideshow { margin:0 auto; width:640px; height:263px; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/ slick-bg_slideshow.jpg) no-repeat 0 0; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; } /** * Slideshow controls style rules. */ .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; } .slide h2, .slide p { margin:15px; font:normal 11px Verdana, Geneva, sans-serif; color:#ccc; } .slide h2 { font:italic 24px Georgia, "Times New Roman", Times, serif; color:#ccc; letter-spacing:-1px; } .slide img { float:right; margin:0 15px; } /* END -------------------------------------------------------------------- Awesome Automatic Content Sliders for Blogger using jQuery By http://www.abu-farhan.com -------------------------------------------------------------------- Slick Slideshow */
PENTING !!!
Khusus tulisan berwarna merah keterangannya dibawah ini
- width:640px; height:263px; >> ukuran tinggi dan lebar kotak nya.
- background:transparent >> Warna latar kotak
- http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg >> gambar latar kotak.
- http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg >> gambar panah sebelah kiri.
- http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg >> gambarpanahsebelah kanan.
- color:#ccc; >> warna tulisan artikel nya.
EITSSS....
Masih lanjut jangan stop disini ntar kaga jadi hehehee
4. Masuk ke Tata Letak > Tambah Gadget > Pilih HTML/Java Script
5. Copas kode dibawah ini
4. Masuk ke Tata Letak > Tambah Gadget > Pilih HTML/Java Script
5. Copas kode dibawah ini
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $(.slide);
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$(#slidesContainer).css(overflow, hidden);
// Wrap all .slides with #slideInner div
slides
.wrapAll(<div id="slideInner"></div>)
// Float left to display horizontally, readjust .slides width
.css({
float : left,
width : slideWidth
});
// Set #slideInner width equal to total width of all slides
$(#slideInner).css(width, slideWidth * numberOfSlides);
// Insert controls in the DOM
$(#slideshow)
.prepend(<span class="control" id="leftControl">Clicking moves left</span>)
.append(<span class="control" id="rightControl">Clicking moves right</span>)
;
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$(.control)
.bind(click, function(){
// Determine new position
currentPosition = ($(this).attr(id)==rightControl) ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(#slideInner).animate({
marginLeft : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $(#leftControl).hide() } else{ $(#leftControl)
.show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $(#rightControl).hide() }
else{ $(#rightControl).show() }
}
});
</script>
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<script type="text/javascript" src="http://accordion-template.googlecode.com/svn/
trunk/galleryposts-slick-slideshow-min.js"></script>
<script style="text/javascript">
var numposts_gal = 10;
var numchars_gal = 150;
var caption_position = right; // top,bottom,left,right ->
choose one
</script>
<script src="http://adybakom.blogspot.com/feeds/posts/default?orderby=
published&alt=json-in-script&callback=showgalleryposts"></script>
</div>
</div>
<!-- Slideshow HTML -->
1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $(.slide);
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$(#slidesContainer).css(overflow, hidden);
// Wrap all .slides with #slideInner div
slides
.wrapAll(<div id="slideInner"></div>)
// Float left to display horizontally, readjust .slides width
.css({
float : left,
width : slideWidth
});
// Set #slideInner width equal to total width of all slides
$(#slideInner).css(width, slideWidth * numberOfSlides);
// Insert controls in the DOM
$(#slideshow)
.prepend(<span class="control" id="leftControl">Clicking moves left</span>)
.append(<span class="control" id="rightControl">Clicking moves right</span>)
;
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$(.control)
.bind(click, function(){
// Determine new position
currentPosition = ($(this).attr(id)==rightControl) ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(#slideInner).animate({
marginLeft : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $(#leftControl).hide() } else{ $(#leftControl)
.show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $(#rightControl).hide() }
else{ $(#rightControl).show() }
}
});
</script>
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<script type="text/javascript" src="http://accordion-template.googlecode.com/svn/
trunk/galleryposts-slick-slideshow-min.js"></script>
<script style="text/javascript">
var numposts_gal = 10;
var numchars_gal = 150;
var caption_position = right; // top,bottom,left,right ->
choose one
</script>
<script src="http://adybakom.blogspot.com/feeds/posts/default?orderby=
published&alt=json-in-script&callback=showgalleryposts"></script>
</div>
</div>
<!-- Slideshow HTML -->
PENTING !!!
Selamat Mencoba good Luck.
- Tulisan berwarna biru anda ganti dengan URL blog sobat.
- Var numposts_gal = 10; angka ini untuk menampilkan berapa artikel yang ingin sobat tampilkan bisa 12,15,18 dll.
- widget ini bisa anda letakkan di bawah posting, di header, di sidebar, dimana aja boleh hehehee
Selamat Mencoba good Luck.
0 komentar:
Posting Komentar