Cara Membuat Slideshow Foto Di Blog

 Bagaimana Sich Cara Mudah Membuat Slideshow Foto Di Blog ?.Hallo Sobat Facewoman Di manapun Anda berada.Salam sejahtera dari Blog Cah Trenggalek.Pada Kesempatan Kali Ini saya akan membahas tentang membuat Slide Foto Di Blog dengan Mudah.Jika anda tertarik Membuatnya maka hasil dari SlideShow Image tersebut akan seperti Menu home WALLPAPER BLOGGER Blog facewoman.Untuk lebih jelas dalam proses pembuatannya ikuti langkah-langkah di bawah ini :

Screenshot Slideshow Image Facewoman

1.Pertama-tama Login Blogger.
2.Langkah kedua Dasboard - Tata Letak - Tambah Gatget - Add Java Scrip - Kemudian Masukkan Kode scrip di bawah Ini Kedalam Add Java Scrip :

<style>



#slides-outer {width:310px;height:200px;position:relative;margin:0 auto;background-color:#f4f5f0;border: 3px #ccc 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);}



/* Netralisasi 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:310px;overflow:hidden;position:relative;display:none;}

.slides_container div.slide, .slides_container div.slide img {width:450px;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:83px;display:block;z-index:101;}

#slides .next {left:287px;}

#slides .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 10px 0 10px;background: #ff6600;filter:alpha(opacity=80);opacity:0.8; width:310px;font:bold 14px Arial;color:#fff;text-align: center;}

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

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

/* End SLIDES */

</style>

<!-- pake jquery-->

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

<script src='http://facewoman.googlecode.com/files/andikwin-wallpeper.js' type='text/javascript'></script>

<script type='text/javascript'>

//<![CDATA[

    $(function() {

        $('#slides').slides({

            generatePagination : true,

            preload            : true,

            preloadImage       : 'http://www.telegraph.co.uk/template/ver1-0/i/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  = "Profile",

    pBlank          = false,

    text            = "Komentar",

    numposts_g      = 6,

    home_page       = "http://facewoman.blogspot.com/";

</script>

<div id="slides-outer">

    <div id="slides">



        <script src="http://facewoman.googlecode.com/files/andikwin-slide.js" type="text/javascript"></script>

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

            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_e-QYhfRp-iY-tIbDAt9zzKg1VLFhOOIydmchF8XN7a8tLYuxcxHeXT_daEozpzrBn_WPcO-R24zFLykJ11GAgEFPYenbWY43s87uATlMNEQwhqLHHN3zJizIHbIZLR1v5Z-xkNFp45Hz/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/AVvXsEhy-TpxpR6-1IAG9t1UyOiz70SsrxSGMChe1Tex-Rrskp_IHVu3t7pekQgdR2a1Od7dyIov9KhFkYJigmfslyZGZbxnNpnrCvlSodN3RSBVG_EdpeCqTRrXAoTjbU8BiAD7u64Me8LreDHz/s1600/nav_right.png" width="24" height="43" alt="Arrow Next" />

        </a>

    </div>

</div>



<div class='clear'></div>

Keterangan :

• Ganti Link  home_page       = "http://facewoman.blogspot.com/"; dengan Nama Link Blog anda.
• Ganti Nilai  width:310px;height:200px; dengan Nilai yang pass dengan sidebar Blog anda.
• Ganti Nilai numposts_g      = 6, dengan jumlah slide yang muncul nanti.
• Ganti Nama   slideLabelName  = "Profile", Dengan nama label anda.

3.Langkah Terakhir Simpan Java Scrip.

Kelebihan SlideShow Image Mirip Facewoman Ini :

1. Tidak Terlalu memberatkan Loading Blog.
2. Slideshow sudah berjalan dengan Otomatis

 Itulah cara singkat dan begitu Mudah Untuk Membuat Slide Image Di Blog.Jika dalam Proses diatas Slide Image Anda tidak Muncul.anda bisa komplain di papan komentar.Untuk dicari letak permasalahannya.kenapa Slide Image tidak bisa muncul?