Cara Membuat Slide Gallery Foto di Blog Anda

Kali ini saya akan berbagii trik/tips blogger, langsung saja simak langkah-langkah Cara Membuat Slide Gallery Foto di Blog Anda berikut.

Untuk langkah-langkah pembuatan slide gallery foto ini yaitu:

• Login ke akun blog Anda
• Masuk ke menu Rancangan/Tata Letak
• Pada menu Elemen Laman klik Tambah Gadget
• Pilih HTML/JavaScript
• Kemudian masukkan script di bawah ini

<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  = "Tahukah Anda",

    pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9LwLI8nsQHV7f8rzcDF8_-cEaWvA7BZxv8vB4OknUO0sOPTMteYyeCrQd3dssctrK4_OqlC28soAmCpWjYbUvtXBOd8KY_X9FsTu-aYSKnvyoDrMnkevDr803k56psn4YfLaItLETZDm/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/AVvXsEhAFYg-UX46wHpAFeyP6nToxe4EzJHloBWP9uewXchu8ch0vIaSQdpwTtTImSKspMluY3hBpT6i026qoKB5zkLiOJKQaFeLiRVXDTZw9UeniicTalBPfE0OPaNpJnKWdr0U32tHpkaGdydT/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/AVvXsEg47KWxGSvXmJuCTCkkPteflAYkNskEm1oOAY_i7ZARSl-2qogQt0Il_f_3btc09tWbSdpW3I5KIc_O9mHC3_ir5JhRTasyw8fU372v4ZlSRN1EorUDqFnckuC70yZgm1hlHOhH1LFVKoHj/s1600/nav_right.png" width="24" height="43" alt="Arrow Next" />

        </a>

    </div>

</div>

• Lalu klik Save

Keterangan

- Jika pada template Anda sudah ada kode jquery.min.js maka kode berwarna Biru di atas tidak usah ditambahkan..

- Ganti tulisan Tahukah Anda berwarna merah dengan label yang Anda inginkan..

- Jika Anda ingin Menampilkan Artikel Terbaru pada Slide ini, maka ganti tulisan true berwarna Merah dengan False.

Gallery foto ini sudah otomatis berdasarkan Label atau kategori yang kita masukan, jadi Anda semua gak usah repot-repot masukin gambar dan ngasih judul. Gimana, berminat untuk dipasang di Blognya?

Sumber