Template nganggur berikutnya yang ingin saya share ini bervariasi dengan warna silver dan coklat, dengan konsep sederhana yang saya sukai tapi entah menurut orang lain dapat disukai atau tidak yang pasti saya ingin dokumentasi template yang saya buat ini.
Kalo ditanya keistimewaanya, entahlah saya kurang tau hanya membuat template yang sesuai dengan isi pikiran dan kesenangan saya, jika bermanfaat silahkan dipakai.
More about → Silver calm blogger template
Demo | Download
Saya tambahakan Content slider diatas artikel post di homepage, cukup tambahkan kode dibawah ini dan simpan menu Tata Letak, Html/Java script :<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>
<!-- disini belum pakai frame jquery-->
<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>
<script type="text/javascript">
var showPostDate_g = false,
showComm_g = false,
slideOpenNewTab = false,
idMode = true,
slidebyLabels = false,
slideLabelName = "Mengenai",
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUa9SwCntEUmAL2Ve4iD2F3ojnMYq_tKtbXAkRuXAJe8ff3B4-3ZYORc_JAZJCc57k7tCvTfYwUO1J-WCV2Onpu5K62tFPliORvrDxYD6LY-G2OCUUu8bQQ_kOIxJOe5mwjDZPaAUDj6I/s1600/Jellyfish.jpg",
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/AVvXsEhKPefjTqZRIVJ-FAmWSqaUZsaEz5q78g6vJQ7bzWi2b9_8SFewg-dS6_flnay7dGNjBvmeunMd32TLkfvHKxORDNZyVsMNr_3biN36aqU1DcoB8-mJMXq3s4hdkr1MYnlq9y4Ivnirc1o4/s1600/prev.jpg" width="24" height="43" alt="Arrow Prev" />
</a>
<a href="#" class="next">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSKefJK_kXSgNwMmJrRsTlFxgGMhtf6sgzMrc3w91DKfzkkd8frvVbWA988psGx48MtoZLcRDoQli6dYVR8GazhXiGKu9Umm3CjIOREcM7toFRIEw0z7kWwjkZKGtbDhK_ZgxhqQDdwyq/s1600/next.jpg" width="24" height="43" alt="Arrow Next" />
</a>
</div>
</div>
Kalo ditanya keistimewaanya, entahlah saya kurang tau hanya membuat template yang sesuai dengan isi pikiran dan kesenangan saya, jika bermanfaat silahkan dipakai.
