Print this pageKode yang digunakan untuk membuat Slide Show Popular Post seperti Klik DISINI adalah : (silahkan ganti URL-nya dengan URL kamu termasuk javanya juga boleh anda kreasikan sendiri atas nama anda):
<html>
<head>
<style type='text/css'>body {background:#333;top:-95px}
.dg-container {
width:100%;
height:450px;
position:relative;
margin-bottom:-5em;
}
.dg-wrapper {
width:481px;
height:316px;
margin:0 auto;
position:relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
}
.dg-wrapper a {
display:block;
position:absolute;
left:0;
top:0;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_5I0QeOXwy1ewWlAKFhYAFVAFPmJuXK22iq_-IYjnak5hGnx3z5tT8GWv-eFzI3MJJ3daUCJPfVGf_sj6Rt3dI-zZj-ckRhSHRbuZFsnGDvasW_LHMAfeL6AqUY0uub4rt_RLE2kM53g/w482-h316-no/01AMARAJEN.jpg') no-repeat 0 0;
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
background-size:100% 100%;
-webkit-box-shadow:0 5px 10px rgba(225,225,225,.5);
-moz-box-shadow:0 5px 10px rgba(225,225,225,.5);
box-shadow:0 5px 10px rgba(225,225,225,.5);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.dg-wrapper a.dg-transition {
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dg-wrapper a img {
display:block;
margin:0;
padding:41px 0 0 1px;
border:none;
outline:none;
}
.dg-wrapper a .dg-caption {
font:italic normal 16px/45px Helvetia;
text-align:center;
width:100%;
height:45px;
white-space:nowrap;
overflow:visible;
text-overflow:ellipsis;
color:#fff;
display:none;
position:absolute;
bottom:-60px;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
box-shadow: inset 0 4px 0 0 rgba(225,225,225, 0.6);
-webkit-border-radius:45px;
-moz-border-radius:45px
border-radius:45px;
}
.dg-wrapper a.dg-center .dg-caption {display:block}
.dg-container .dg-nav {
width:58px;
position:absolute;
z-index:1000;
bottom:40px;
left:50%;
margin-left:-29px;
}
.dg-container .dg-nav span {
text-indent:-9000px;
float:left;
cursor:pointer;
width:24px;
height:25px;
opacity:0.8;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTX_CK8ENwjarPV4kt9mpIAc-Ygto4F2kwsUeu9Ijf970xIyduGARN5ATTDYz8lgwJrcSdIVsrEXCvMVhYPMShEpDuCwJcB5BfEKRRqKguls95nefK0l4UNEMEtB_b4ioWS1EZDK6EmA/s1600/arrows.png') no-repeat 0 0;
}
.dg-container .dg-nav span:hover {opacity:1}
.dg-container .dg-nav span.dg-nav-next {
background-position:100% 0;
margin-left:10px;
}
.dg-caption-date:before,
.dg-caption-comment:before {content:" - "}
.dg-caption-comment {display:none}
</style>
</head><br />
<section id="dg-container" class="dg-container"><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br />
<script>
var gallery_config = {
url: 'http://amarajenhht.blogspot.com',
numPost: 5,
labelName: null,
monthArray: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: false,
containerId: 'dg-container',
slider: {
itemWidth: 480,
itemHeight: 260,
prevText: '<',
nextText: '>',
current: 0,
autoplay: false,
interval: 2000
}
};
</script><br />
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>
</html>
<head>
<style type='text/css'>body {background:#333;top:-95px}
.dg-container {
width:100%;
height:450px;
position:relative;
margin-bottom:-5em;
}
.dg-wrapper {
width:481px;
height:316px;
margin:0 auto;
position:relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
}
.dg-wrapper a {
display:block;
position:absolute;
left:0;
top:0;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_5I0QeOXwy1ewWlAKFhYAFVAFPmJuXK22iq_-IYjnak5hGnx3z5tT8GWv-eFzI3MJJ3daUCJPfVGf_sj6Rt3dI-zZj-ckRhSHRbuZFsnGDvasW_LHMAfeL6AqUY0uub4rt_RLE2kM53g/w482-h316-no/01AMARAJEN.jpg') no-repeat 0 0;
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
background-size:100% 100%;
-webkit-box-shadow:0 5px 10px rgba(225,225,225,.5);
-moz-box-shadow:0 5px 10px rgba(225,225,225,.5);
box-shadow:0 5px 10px rgba(225,225,225,.5);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.dg-wrapper a.dg-transition {
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.dg-wrapper a img {
display:block;
margin:0;
padding:41px 0 0 1px;
border:none;
outline:none;
}
.dg-wrapper a .dg-caption {
font:italic normal 16px/45px Helvetia;
text-align:center;
width:100%;
height:45px;
white-space:nowrap;
overflow:visible;
text-overflow:ellipsis;
color:#fff;
display:none;
position:absolute;
bottom:-60px;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
box-shadow: inset 0 4px 0 0 rgba(225,225,225, 0.6);
-webkit-border-radius:45px;
-moz-border-radius:45px
border-radius:45px;
}
.dg-wrapper a.dg-center .dg-caption {display:block}
.dg-container .dg-nav {
width:58px;
position:absolute;
z-index:1000;
bottom:40px;
left:50%;
margin-left:-29px;
}
.dg-container .dg-nav span {
text-indent:-9000px;
float:left;
cursor:pointer;
width:24px;
height:25px;
opacity:0.8;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTX_CK8ENwjarPV4kt9mpIAc-Ygto4F2kwsUeu9Ijf970xIyduGARN5ATTDYz8lgwJrcSdIVsrEXCvMVhYPMShEpDuCwJcB5BfEKRRqKguls95nefK0l4UNEMEtB_b4ioWS1EZDK6EmA/s1600/arrows.png') no-repeat 0 0;
}
.dg-container .dg-nav span:hover {opacity:1}
.dg-container .dg-nav span.dg-nav-next {
background-position:100% 0;
margin-left:10px;
}
.dg-caption-date:before,
.dg-caption-comment:before {content:" - "}
.dg-caption-comment {display:none}
</style>
</head><br />
<section id="dg-container" class="dg-container"><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br />
<script>
var gallery_config = {
url: 'http://amarajenhht.blogspot.com',
numPost: 5,
labelName: null,
monthArray: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: false,
containerId: 'dg-container',
slider: {
itemWidth: 480,
itemHeight: 260,
prevText: '<',
nextText: '>',
current: 0,
autoplay: false,
interval: 2000
}
};
</script><br />
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>
</html>
0 komentar:
Posting Komentar