Silver Calm Blogger Template

Demo - Download

Description :

Name : Silver Calm Blogger Template
Author : Dadang Herdiana
Url : http://www.dadangherdiana.com/

Don't Change or Delete Credit Link

Note :

Untuk Conten Slider Diatas Posting Blog Cukup Tambah Kode Dibawh Ke HTML/JavaScript

<style>
/*

* 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:420px;
  height:270px;
  position:relative;
  margin:0 auto 20px 5px;
  background-color:#efefef;
  border: 7px #f7f7f7 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:420px;
  overflow:hidden;
  position:relative;
  display:none;
}

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

.slides_container div.slide img {height:auto !important;}
.pagination{ display:none;}
#slides .next,
#slides .prev {
  position:absolute;
  top:107px;
  left:0px;
  width:24px;
  height:43px;
  display:block;
  z-index:101;
}

#slides .next {
  left:400px;
}

#slides .caption {
  z-index:500;
  position:absolute;
  bottom:-35px;
  left:0;
  height:30px;
  padding:5px 20px 0 20px;
background: #f7f7f7; opacity: 0.9;
  width:540px;
  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>

<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>

text            = "Komentar",
    numposts_g      = 4,
    home_page       = "http://dadangherdiana.blogspot.com/";
</script>
<div id="slides-outer">
    <div id="slides">
        <script 
src="http://reader-download.googlecode.com/svn/trunk/autoContent4SLIDES.js"
 type="text/javascript"></script>
        <a href="#" class="prev">
            <img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggbNYt6EEjDrvgsi5NPRRSuX4_NckviFj8jxG1fNhCH_LBmuwwL-c_FNZ6TaR05bD7bV8q4cpKVdkPyllnT5MgubTBt7aZm7XJ1guOwFMfp3UthgfX8_CSDGciW2JAFb6IXZbVf8_LdIMU/s1600/prev.jpg"
 width="24" height="43" alt="Arrow Prev" />
        </a>
        <a href="#" class="next">
            <img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix4o1fyLzkj_VtU1eB8ZedlBdX2nHKmdqBcQTVsny873EKdIFLsV_R0nzszUFx5QQtFVPGAJVLoKrp-mRiXamdZygcPHnWBAq3UvdA3f2AMYd5Vu-TyQKZjI6AYC_LXhI7WCbZGCqn-oDM/s1600/next.jpg"
 width="24" height="43" alt="Arrow Next" />
        </a>
    </div>
</div>

Posted by Huda