Cara Membuat Slideshow Foto Di Blog
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 :
Cara Membuat Slideshow Foto Di Blog
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?

8 Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

  1. kalau begini, tampilan slide bisa menghemat space blog :)

    BalasHapus
    Balasan
    1. betul gan apa yang anda katakan,

      Bianya trik seperti ini di gunakan blog besar seperti Detik.com

      Hapus
  2. hehe ,, sama dengan yang di Blog saya.. :D

    http://www.caragampang.com/2012/09/membuat-slide-gallery-foto-otomatis.html

    BalasHapus
  3. Akhirnya dishared juga terimakasih mas,,Andik, Sukses selalu

    BalasHapus
  4. Ini Pernah Saya Coba Mas,Tapi Gagal,Malah Slide Yahoo Saya jadi Ga Fungsi,Kenapa Ya Mas?Apa Mungkin Bentrok Script Jquery Nya Atau Gmana??

    BalasHapus
    Balasan
    1. memang betul mas yang anda katakan! karena saya juga memperoleh problem yang sama.

      entah itu karena apa saya jg kurang tahu.

      kalau di blog saya, saya akali pakek trik http://facewoman.blogspot.com/2012/06/rahasia-dalam-mengedit-blogspot.html nantinya kita tinggal letakkan di mana slide image itu akan muncul! agar scrip diatas tidak bentrok dengan scrip lainya.

      Hapus

Posting Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

Lebih baru Lebih lama