MEMBUAT SLIDER (MINI) OTOMATIS DI SIDEBAR BLOG

Unknown

Trik Blog, Tutorial Blog

10 Mar 2014

Belum ada komentar

 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/AVvXsEiRKeNCm9eXzt_xjVGK8NeqZACbl1HcpSFuCOltktPUk1xkWq6aIEUh9oxyxh-dpr3A5t8sZNriz4trUJzp_1fCvs8abY-zJuIOsFxvlwyCiSWywrNropWqfFPlh1UITGLQ7M70E7Ei9ik/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/AVvXsEjhy5-R53mvsoVmCtp6n3DoXM-NY45Jsn0RCF6TITpTvZbdZJ-Tp6aAqgREQ-Kp3mfiDGal6A8A-hwqDz-PINixxnG614ivspiZftRawC5T5OkMWNh2pzk2UOYZ3kgnK0CgOln39K43hjoJ/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/AVvXsEhWB789SAuGmB1kG_exCeVBn0O7wRwuKb1rFm84cRezFWWZC_a3Xd7FtpArjWM3eWK5ZWQPi6kHCPK2f902xLR18rtsB5LlhuyOiuIBpiwRNPeqSRGJgm-f2rSzP8Po5YWR2RS6u5Aulbg1/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.