Slideshow Otomatis Blogger dengan SLIDES

Temukan kode ini:
]]></b:skin>
Salin kode di bawah ini, kemudian letakkan di atasnya:

/*
 * Slides, A Slideshow Plugin for jQuery
 * Intructions: http://slidesjs.com
 * By: Nathan Searles, http://nathansearles.com
 * Version: 1.1.9
 * Updated: September 5th, 2011
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
*/

#slides-outer {
  width:570px;
  height:270px;
  position:relative;
  margin:30px auto 0px;
  background-color:#efefef;
}

/* 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;
}
#ribbon,
#frame,
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */

#ribbon {
  position:absolute;
  top:-3px;
  left:-15px;
  z-index:500;
}

#frame {
  position:absolute;
  z-index:0;
  width:739px;
  height:341px;
  top:-3px;
  left:-80px;
}

#slides {
  position:absolute;
  top:15px;
  left:4px;
  z-index:100;
  font:normal 12px Arial,Sans-Serif;
}

.slides_container {
  width:570px;
  overflow:hidden;
  position:relative;
  display:none;
}

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

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

#slides .next,
#slides .prev {
  position:absolute;
  top:107px;
  left:-39px;
  width:24px;
  height:43px;
  display:block;
  z-index:101;
}

#slides .next {
  left:585px;
}

.pagination {
  margin:26px auto 0;
  padding:0px 0px;
  width:auto;
  text-align:center;
}

.pagination li {
  display:inline-block;
  *display:inline;
  margin:0px 1px;
  padding:0px 0px;
  list-style:none;
}

.pagination li a {
  display:block;
  width:12px;
  height:0px;
  padding-top:12px;
  background-image:url('http://1.bp.blogspot.com/-kBxWiSmnR0U/T0pmXN_FqHI/AAAAAAAACOE/HgB4YfcCvgE/s1600/pagination.png');
  background-position:0 0;
  overflow:hidden;
}

.pagination li.current a {
  background-position:0 -12px;
}

#slides .caption {
  z-index:500;
  position:absolute;
  bottom:-35px;
  left:0;
  height:30px;
  padding:5px 20px 0 20px;
  background-color:#000;
  background-color:rgba(0,0,0,0.5);
  width:540px;
  font:normal 13px Helvetica,Arial,sans-serif;
  color:white;
  border-top:1px solid #000;
  text-shadow:none;
}

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

/* End SLIDES */

Kemudian temukan kode ini:
</head>
Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/svn/trunk/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>

Klik Simpan Template.

Pilih Tata Letak

Tambahkan Gadget HTML

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 4,
    home_page       = "http://latitudu.blogspot.com/";
</script>
<div id="slides-outer">
    <img src="http://4.bp.blogspot.com/-NYp6Cx-vy6A/T0plh0PkkdI/AAAAAAAACNs/NFkZdqeP8hY/s1600/example-frame.png" width="739" height="341" alt="Example Frame" id="frame" />
    <img src="http://4.bp.blogspot.com/-T1K0fQGXHn8/T0pmUCTEjEI/AAAAAAAACN8/zJ1CEvvEzLo/s1600/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon" />
    <div id="slides">
        <script src="http://reader-download.googlecode.com/svn/trunk/autoContent4SLIDES.js" type="text/javascript"></script>
        <a href="#" class="prev">
            <img src="http://4.bp.blogspot.com/-YBh6RVIP6rM/T0plXL_Z94I/AAAAAAAACNc/JYe-5VPD4Bs/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
        </a>
        <a href="#" class="next">
            <img src="http://2.bp.blogspot.com/-bJqPep9dJZU/T0plVM2OuBI/AAAAAAAACNU/at-rT9KkcYw/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next">
        </a>
    </div>
</div>

Ganti URL http://latitudu.blogspot.com/ dengan alamat blog Anda lalu simpan.