Membuat Slider (mini) Otomatis di Sidebar Blog

Saya sarankan anda jangan mencoba untuk memasang slider mini ini di blog anda. Karena itu akan membahayakan loading blog. Silahkan beralih membaca artikel lain di blog ini, misalnya membaca artikel tentang Membuat Slider Melayang di Blog atau Cara Menginstal Printer di Windows 8. Tapi jika anda tidak berkenan membaca artikel-artikel tersebut juga memaksa untuk tetap melanjutkan bacaan dan ingin sekali memasang slider mini di blog yang anda sayangi, dengan segala kerendahan hati dan juga dengan senang hati saya tunjukkan caranya. Kurang lebih tampilan sidebar mini tersebut seperti terletak di sidebar kanan blog ini atau gambar di bawah ini:

 Dan beginilah cara menggunakannya:

1.      Sediakan kopi segelas untuk merangsang saraf-saraf yang sempat terdiam.

2.      Login ke blog anda,masuk ke menu rancangan/tata letak, tambahkan gadget baru pilih HTML/java Script

3.      Kopi kode di bawah ini :

<style>
#slides-outer {width:300px;height:210px;position:relative;margin:0 auto;background-color:#becf00;border:0 #058a00 solid;-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);}

/* Menetralkan gambar */
#slides-outer img {margin:0px 0px;padding:0px 0px !important;background:transparent !important;border:none !important;outline:none !important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */

#slides {position:absolute;z-index:100;font:normal 12px Arial,Sans-Serif;}
.slides_container {width:300px;overflow:hidden;position:relative;display:none;}
.slides_container div.slide, .slides_container div.slide img {width:300px;height:210px;display:block;overflow:hidden;}
.slides_container div.slide img {height:auto !important;}
.pagination{ display:none;}
#slides .next,
#slides .prev {position:absolute;top:75px;left:0px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:276px;}
#slides .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 10px 0 10px;background: #fadfb1; opacity: 0.7;width:300px;font:normal 13px arial;color:#000;text-shadow:none;}
#slides .caption a {text-decoration:none;color:#c40202; font-size:12px; text-align: center;}
#slides .caption a:hover {text-decoration:underline;}
/* End SLIDES */
</style>

<!-- pake jquery-->
<script src='https://sites.google.com/site/bungfrangkicom/slide/slides.min.jquery%5BBUNGFRANGKi.COM%5D.js.txt' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 4000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            slideSpeed         : 350,
            slideEasing        : '',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>
</script>

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = true,
    slideLabelName  = "Download",
    pBlank          = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglv62DnQ8XO-FP2e5cVVoxXW5U44T3GZa1tGUKRCZR_cfhjWNXjfoV6jKI5C2uIQanlwKPrJ1A5vsU88GERLqIpFaSf8NKHLHC7cWkSvRqaWULrHJo0rJRHywZTpzXWPCc51SlLfmnQXM/s1600/NOimg.png",
    text            = "Komentar",
    numposts_g      = 6,
    home_page       = "http://bung-frangki.blogspot.com/";
</script>
<div id="slides-outer">
    <div id="slides">
        <script src="https://sites.google.com/site/bungfrangkicom/slide/autoContent4SLIDES%5BBUNGFRANGKi.COM%5D.js.txt" type="text/javascript"></script>
        <a href="#" class="prev">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGb2U529koYrD8S5v6wWmmAQ7poHNUQsN12pvW-rcX56dSQE-eWsQHnRlehr64CrF9TQFLwKzzGda9o8LUDTigKvx1TMADhUEpl5pvqUhh5I_hl-ASaAbJ7LS3G1sF9WUG7yoVgcpcOuBO/s1600/nav_left.png" width="24" height="43" alt="Arrow Prev" />
        </a>
        <a href="#" class="next">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiww9NJYts_9qa9Uy6x5PLJzVHnIjxUHgnF36Agder0wNn_PpegAZGdYe-JegeVRUfzm2Q4CTXNZG6dLISI760rcvb3VYGv9ULkl2xYilydZzQ-qiDuYyRtVW1zGni1QvdvTW9fPON-67Rf/s1600/nav_right.png" width="24" height="43" alt="Arrow Next" />
        </a>
    </div>
</div>

KETERANGAN 

1. Jika pada template sobat sudah ada kode jquery.min.js maka kode berwarna Biru di atas tidak usah ditambahkan..
2. Ganti tulisan Download berwarna merah dengan label yang sobat inginkan..
3. Jika sobat ingin Menampilkan Artikel Terbaru pada Slide ini silahkan ganti tulisan true berwarna Merah dengan False
4. Ganti http://bung-frangki.blogspot.com/ dengan alamat blog anda

Perhatian:
Ukuran lebar dari sidebar mini tersebut adalah 300px, jika anda ingin mengubahnya silahkan saja, itu kan hak anda.

Semoga tutorial ini bermanfaat, selamat mencoba, jika anda yang perlu ditanyakan, langsung saja berkomentar pada kotak komentar yang tersedia.