Membuat Slide Gallery Foto Otomatis pada Blogspot

Kali ini saya akan sedikit berbagi CaraGampang untuk membuat Slide Otomatis berupa Gallery Foto , tutorial ini sengaja saya buat untuk memenuhi salah satu permintaan dari pengunjung CaraGampang.Com melalui FansPage.. Untuk contoh kurang lebih seperti Gallery Foto pada Sidebar Situs ini..
Gallery foto ini sudah otomatis berdasarkan Label atau kategory yang kita masukan, jadi sobat semua gak usah repot-repot masukin gambar dan ngasih judul.. Gimana ada yang berminat untuk dipasang di Blognya.?
Langsung saja simak langkah-langkah Membuat Slide Gallery Foto Otomatis pada Blogspot berikut :

• Tentunya kudu masuk ke Blog masing-masing..
• Masuk ke menu Rancangan/TataLetak.
• Tambahkan Gadget Baru pilih HTML/Java Script.
• Kemusian masukan Script Berikut.

<style>

#slides-outer {width:290px;height:200px;position:relative;margin:0 auto;background-color:#efefef;border: 5px #9a9a9a 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:290px;overflow:hidden;position:relative;display:none;}

.slides_container div.slide, .slides_container div.slide img {width:290px;height:200px;display:block;overflow:hidden;}

.slides_container div.slide img {height:auto !important;}

.pagination{ display:none;}

#slides .next,

#slides .prev {position:absolute;top:70px;left:0px;width:24px;height:43px;display:block;z-index:101;}

#slides .next {left:266px;}

#slides .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 10px 0 10px;background: #9a9a9a; opacity: 0.7;width:290px;font:normal 13px arial;color:#000;text-shadow:none;}

#slides .caption a {text-decoration:none;color:#000; font-size:12px; text-align: center;}

#slides .caption a:hover {text-decoration:underline;}

/* End SLIDES */

</style>

<!-- pake jquery-->

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

<script src='http://caragampangcom.googlecode.com/files/slides.min.jquery.js' 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               : 5000,

            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  = "Ilmu Pertanian",

    pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDle_diQG20kmaYLahlYUHcYPfBBnYNgUMmdrE7ex4AfXyvnuDMqpUT0cfYw5gWowL45ymrcWWbAHi_BrJE52hU5pGFETI4IBSNp1R1HzvnpfGQacdBXCT6O5F_5vqPtt1s2AfiP0C_JUz/s1600/no-image-caragampang.jpg",

    text            = "Komentar",

    numposts_g      = 6,

    home_page       = "http://aa-solah.blogspot.com/";

</script>

<div id="slides-outer">

    <div id="slides">

        <script src="http://caragampangcom.googlecode.com/files/autoContent4SLIDES.js" type="text/javascript"></script>

        <a href="#" class="prev">

            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG5MQ-QY1hjFChpegMFoEdfiz3ID32PGafM8743EpbfIQst0TwVZvEwd0l1NpBR_1uTeBhxWW3StUJhn3q2ZnZnbWHUKstDZx-STI4C85tfgEzZh9nzaKS-sTS5Urn4s8V9POD_9PQjDfy/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/AVvXsEgYD0khYn4sKcNVlgwCi46FcXYRwZEfu1DvG_6rFPLs5KDhBeCXNGy5iQa5M0ZPHkkywTJCfvLpJX_MNKyVjoVomUpoK3GWAyOS7ArgvNuE01-CQ9IDpYx06M8S58bhCXsDR7SOJ2pTKddf/s1600/nav_right.png" width="24" height="43" alt="Arrow Next" />

        </a>

    </div>

</div>

• Langkah terakhir tinggal Save.

UPDATE :
Jika scriptnya tidak bisa di copy , download scriptnya DISINI

KETERANGAN 

1. Jika pada template sobat sudah ada kode jquery.min.js maka kode berwarna Biru di atas tidak usah ditambahkan..
2. Ganti tulisan Ilmu Pertanian 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://aa-solah.blogspot.com/ dengan alamat blog anda

Mungkin hanya ini yang dapat saya jelaskan jika , ada masalah atau ada yang ingin ditanyakan silahkan untuk berkomentar di bawah..
Semoga berhasil, Selamat mencoba Membuat Slide Gallery Foto Otomatis pada Blogspot

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →