Adapun Cara membuat : ( Widget Slideshow Efek 3D Gallery ) sebagai berikut :
1. Login ke akun blogger
2. Klik tema
3. Edit html
temukan kode ]]></b:skin>
Copy CSS berikut, selanjutnya letakkan di atasnya
Masukan CSS di bawah ini :
.dg-container {width:100%;height:450px;position:relative}
.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/AVvXsEipKodAJ7mP2QWDhv2ofPYRnJkfjJx7W1sz54d701VaIjdgoLMsqMBDuDfOp7KU8ptZrcmE8BkCcNr4twm0O2TpBhCoZ0XItil_8gGu9E53L1Vemom_y6vkZgw-qfqC336iqs25KhiG3tM/s1600/01gambar.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:hidden;
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/AVvXsEgFUVym0fvB-8K7BvJ7CI8G2H9TO_drhVWRwA-_q13QX4idWXltnU72DNmQqASG0b1YzkB3Y7umRRY9cN3N5l6BARL0BdHXT348CMMoRqED7dU50qJXaxw6yTaJjnBR-5qHVTRTSTNK7OU/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}
Masukan Kode HTML / Javascript di bawah ini :
<section id="dg-container" class="dg-container">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var gallery_config = {
url: 'http://URL-Anda.blogspot.com',
numPost: 3,
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>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah
simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,
dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat ( Widget Slideshow Efek 3D Gallery ) semoga bermanfaat terima kasih.
Tidak ada komentar
Posting Komentar