Cara Membuat Slide Show Keren Di Blog

Cara Membuat Slide Show Keren Di Blog - Nambah tutorial blogger lagi nih... Saya buat tutorial ini kemungkinan ide dari pengunjung setia saya yang berbaik hati memberi request kepada saya. :3 tutorial yang beliau request adalah Cara Membuat Slide Show Gambar Di Blog Dengan Efek Keren.

Permintaan pengunjung setia saya meminta untuk buatkan tutorial cara membuat slide show dengan jQuery. Sekarang, saya mengabulkannya. :v Bukti screenshot nya:

Nah, sekarang saya akan jelaskan tutorial tersebut. Cara memasang slide show gambar di blog keren sering dipakai oleh kalangan para blogger. Slide show adalah tampilan dari beberapa gambar yang diluncurkan. Buat sobat pasti dengar kata slide di tv tv. Misalnya acara talkshow yang menyuruh host untuk menampilkan sebuah tampilan beberapa gambar yang di slide/luncurkan.

Slide show juga akan menampilkan beberapa gambar satu per satu di blog dengan beberapa efek. Tapi, disini saya akan jelaskan tutorial cara mudah membuat slide show foto di blog dengan efek yang super keren. Beda dengan slide show yang ada di blog orang lain. Dan juga beda tutorial nya dengan tutorial yang dibuat orang lain. :3

Dan disini saya akan jelaskan tutorial tersebut dengan 2 slide show yang berbeda. Sebelum saya akan beri tutorial nya, masing-masing mempunyai efek slide yang berbeda. Cara 1, cara yang mungkin sering di pakai oleh para blogger dan untuk cara 1 mempunyai slide yang biasa. Efek nya hanya transparan kemudian muncul gambar selanjutnya. Untuk cara 2, efek slide show nya keren. Tapi, slide show untuk cara 2, tidak menampilkan gambar yang sobat dimaksud. Namun, slide show yang menampilkan tiap postingan atau artikel sobat dan juga disertai deskripsi dari masing-masing post atau artikel dan juga readmore. (Baca juga: Cara Mudah Membuat Auto Read More Otomatis Di Blog)

Cara 1. Cara Membuat Slide Show Gambar Di Blog

1. Login Blogger

2. Tata letak/layout
3. Add gadget/tambahkan gadget
4. HTML/JavaScript
5. Copy kemudian paste kode dibawah ini pada kolom HTML/JavaScript

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 230px;
}
</style>
<div id="content-slider">
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
</div>

Cara 2. Cara Membuat Slide Show Post Keren Di Blog

1. Login Blogger
2. Template/rancangan
3. Edit HTML
4. Cari kode

 ]]></b:skin> atau kode </style>

(agar mempermudah pencarian, klik kolom Edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)
5. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>

.easyslider-wrapper { 
    width: auto; 
    float: left; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.easyslider { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 350px; 
    background: #eee; 
    }
.image_reel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }
.image_reel img { 
    float: left; 
    width: 20%; 
    height: 350px;
    }
.paging { 
    background: none; 
    position: absolute; 
    bottom: 15px; 
    right: 20px; 
    padding:4px 0 2px; 
    z-index: 100; 
    display: none; 
    }
.paging a { 
    margin: 3px; 
    background: #fff; 
    width: 10px; 
    height:10px; 
    display: inline-block; 
    border: none; 
    outline: none;
    }
.paging a.active { 
    background: #15E3FF; 
    border: 1px solid #15E3FF; 
    }
.paging a:hover { }
.easytitledes { 
    width:70%; 
    display: none; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    z-index: 101; 
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6); 
    padding: 10px 15px; 
    }
.easytitledes a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    }
.easytitledes a:hover { 
    color:#29FF00 
    }
.easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
    }

6. Selanjutnya cari kode

</head>

7. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

8. Kode diatas merupakan jQuery. Masih di bagian edit HTML. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode </head>

<script type="text/javascript">
$(document).ready(function() {
    $(".paging").show(); 
    $(".paging a:first").addClass("active");

var imageWidth = $(".easyslider").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

rotate = function(){ var triggerID = $active.attr("rel") - 1; 

var image_reelPosition = triggerID * imageWidth;

    $(".paging a").removeClass('active');
        $active.addClass('active');

    $(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq( 
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 4000); };

rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
</script>

9. Simpan
10. Masih ada langkah berikut nya. Untuk script dibawah ini, merupakan kode JavaScript yang akan menampilkan post atau artikel secara manual di blog sobat. Copy kemudian paste dan letakkan tepat DIATAS kode

 <div class="main-wrapper"> atau kode <div id="main-wrapper">

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
   </div>
   <div class='descriptionslider'>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 1</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 2</a><p>Deskripsi</p>< /div>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 3</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 4</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL 
post atau artikel'>Post-Title 5</a><p>Deskripsi</p></div>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>

11. Simpan

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Taglines:

Judul	Cara Membuat Slide Show Keren Di Blog
Deskripsi	Cara membuat slide show keren di blog dengan berbagai efek slide yang super keren di blog
Author	Google
Author Rating	90%/ 100% Suara Dari 2841 votes