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          = http://1.bp.blogspot.com/-csyc8Wa11BM/UR80Iwn1PXI/AAAAAAAABb0/j8611mJVyFo/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="http://1.bp.blogspot.com/-nX7VdQVSNgA/UD2VCHITchI/AAAAAAAAARU/C9RbJQxyvNs/s1600/nav_left.png" width="24" height="43" alt="Arrow Prev" />
        </a>
        <a href="#" class="next">
            <img src="http://4.bp.blogspot.com/-4aDJC9Hh0tU/UD2VG9qN0vI/AAAAAAAAARc/Ih8fRMVRWyU/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.
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates