Menu


Menu Tab

Pages

Memasang Jam Pada Postingan




Memasang jam digital pada postingan
Login ke akun blog klik tataletak dan klik tambah gadged
copy kode berikut
pastekan kedalam gadged tersebut dan klik simpan selesai


All Sources
Edited by. Myscript2010

Labels:

Gambar Efek Hover

Memasang Gambar dengan Efek Hover
dan menjadi tombol link ke arah postingan langkah penerapannya sebagai berikut
Login ke akun blog klik tataletak dan klik tambah gadged
copy kode dibawah ini pastekan kedalam gadged tersebut dan klik simpan selesai

Kode 1. Gambar ( oval ) dengan efek hover
<style>#image {
margin: 0px;
padding: 5px;
text-align: center; }

#image img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:90px;
-moz-border-radius:90px;
-o-border-radius:90px;
border-radius:90px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}

#image img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
} </style>

<div id="image">
<a target="_blank" href="Your Link"><img src="http://Link Gambar.JPG" border="0"/></a>
Kode 2. Gambar ( bulat ) dengan efek hover
<style>#image {
margin: 0px;
padding: 5px;
text-align: center; }

#image img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}

#image img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
} </style>

<div id="image">
<a target="_blank" href="http://Your Link">
<img src="http://Link Gambar" style="border-radius: 70px; height:  80px;"" alt="Hover" border="0" />
Kode 3. Gambar ( berputar ) dengan efek hover
<style> #Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style>
<div id="Mys2010"> <a title="Berputar" href="http://Your Link">
<img src="http://Link Gambar" style="border-radius: 3px; height:  75px;"" alt="Berputar" border="0" />
All Sources
Edited by. Myscript2010
DEMO SHOW
Labels:

CSS3 Slideshow Full Screen B.3



Memasang Slide Show auto CSS 3
menggunakan kode CSS dan HTML
yang menampilkan gambar di webblog secara otomatis
tampil bergantian. Berikut cara penerapannya :
.
Login ke akun blog klik edit HTML  temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin>  
dan klik simpan selesai
.my-slideshow,
.my-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.my-slideshow:after {
content: '';
background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left;
}
.my-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.my-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.my-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.my-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF29MlKr0eRmEjRtcdg01wiXFGtbNkoxgdGfdnTK9Qf2-YQbGJQs_1E8wEPi6erRPPqmkdTBlC127hsP38_rdF-kNKoqJncn7XFV6Im8UrXoL5aEoSY6xaWNlBD3ZFixtVBsLOEgrW5Xym/s1600-r/spMys2010a1.jpg)
}
.my-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaF_7LjhoYljKgiTZ1riOtS9V1-kS-3FqPtvF9hJHpRbTLfTsgewEkLCtomABjaeeKeqFIfKplUCo3mNxsNFBpgKqVJmjkeNvF5xHO5dDRI-bG7KhItgUzRLaaXNNczirROk4Z0Rfi6sZI/s1600-r/spMys2010s3.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Z52-Y4uvzuPFLQoDDiEROQT_PHdEWEEE5A4PkAdf9-YDWNJNQlypCX_co-Z_dxwgWfsc8jmYEVxWSXNhV35Pyc6B-H-XFseRi3FkHdJDYaEYhePMQqdCM8U_kMC__ZUtssj5CnHXWrpf/s1600-r/spMys2010s2.jpg );
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipKmG4jIbFtRBOxfdBh0pw4P_u8x2a77-7R0ZROl7npUayzmk-exFEYzHxZmNJD85uExlXaMDo00Mh424qTncC_zZ494ScBHLhlMpnWscD6CdUqWKl7lGDFOaXjfMt56D1rGS-xRELBpI/s1600-r/01mys2010.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQHAikwzIsbOGnvAl1tACFqFj6s80f7UcRh9-86X6ZFt32foJvANmZHc6mNMDnoipqoHPikeljAo1pFvoEvNL3RPuF3TnXcjO_wJPufzFXX_22UfWt4_tyOzj1t6-UOzYrvRlwKb1uaTY/s1600-r/03mys2010.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVceJPIvW_Xm9ywbtt6cE7v_fBJaFUEpKLNs2pQNiKL6I1T3GMfageWvEIAApEM98LYHxBPaz5WvBKpxieBD_JNXSv40ckRHbbO2XKKN0LWW96UsXOY3xz5U2WCU_Lx7f_WgKTZNyImtV/s1600-r/sp.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.my-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-slideshow li span{
opacity: 1;
}

@media screen and (max-width: 1140px) {
.my-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.my-slideshow li div h3 { font-size: 80px }
}
Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 02</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 03</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 04</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 05</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 06</span><div>
<h4>  </h4>
</div>
</li>
</ul>
Penjelasan :
Ganti Link gambar dan teks yang berwarna orange sesuai keinginan
untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010
DEMO SHOW
Labels:

CSS3 Slideshow Full Screen B.2


Memasang Slide Show Auto CSS 3
dengan efek zoom teks yang menampilkan gambar di webblog
secara otomatis tampil bergantian. Berikut cara penerapannya :
Login ke akun blog klik edit HTML temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin> 
dan klik simpan selesai
.my-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.my-slideshow:after {
content: '';
background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left;
}
.my-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.my-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.my-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
color: rgba(169,3,41, 0.8);
}
.my-slideshow li:nth-child(1) span { background-image: url(https://wallpaperscraft.com/image/randis_albion_art_girl_sword_feathers_bird_94348_1920x1080.jpg) }
.my-slideshow li:nth-child(2) span {
background-image: url(https://wallpaperscraft.com/image/dragon_fantasy_art_feathers_98978_1920x1080.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) span {
background-image: url(https://wallpaperscraft.com/image/dragon_cave_light_art_94937_1920x1080.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) span {
background-image: url(https://wallpaperscraft.com/image/art_nick_deligaris_dragon_rider_mountain_castle_tower_94138_1920x1080.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) span {
background-image: url(https://wallpaperscraft.com/image/unicorn_wood_stars_autumn_bird_4771_1920x1200.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) span {
background-image: url(https://wallpaperscraft.com/image/unicorn_fight_battle_dragon_3312_1920x1200.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.my-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
8% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
8% {
opacity: 1;
-moz-transform: translateY(0px);
}
17% {
opacity: 1;
-moz-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
8% {
opacity: 1;
-o-transform: translateY(0px);
}
17% {
opacity: 1;
-o-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
8% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
transform: scale(10);
}
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.my-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.my-slideshow li div h3 { font-size: 50px }
}
Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h3>Myscript2010 </h3>
</div>
</li>
<li><span>Gambar 02</span><div>
<h3>Belajar Webblog </h3>
</div>
</li>
<li><span>Gambar 03</span><div>
<h3>Full Screen </h3>
</div>
</li>
<li><span>Gambar 04</span><div>
<h3>Desainer </h3>
</div>
</li>
<li><span>Gambar 05</span><div>
<h3>Copyright:2015 </h3>
</div>
</li>
<li><span>Gambar 06</span><div>
<h3>Cibeber Cimahi </h3>
</div>
</li>
</ul>
Penjelasan :
Ganti Link gambar dan teks yang berwarna orange sesuai keinginan
untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010
DEMO SHOW
Labels:

CSS3 Slideshow Full Screen B.1

         

Memasang Slide Show auto CSS 3
menggunakan animation linear infinite
yang menampilkan gambar di webblog secara otomatis
tampil bergantian. Berikut cara penerapannya

Login ke akun blog klik edit HTML temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin> 
dan klik simpan selesai
.my-slideshow,
.my-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.my-slideshow:after {
content: '';
background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left;
}
.my-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.my-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.my-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJkTfxY69wyzjUAR749FjiTIIEGV35lpXdWxIu-7ZwFD7SVfndp_vpqKuRPHjFvd3mc7BXHx9VtGd0JvJnUe_4wCWwicFUhp1zKUASL6Z-aSbhqg15wpcMlUjB1JmiikNenbvhOrPC69a/s1600/Sunset+Wallpapers.jpg) }
.my-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_OGDhe4A8kwcZZKkJ23DO0AYDiutIT3TVLt9DCO5jMJXI52vHjlTMw421vb_ie1nPp5Ixl52MihSSeV_b942NEWaQvFVXbpmbP9qIHSjAzY4optp4m2AEg5iXzv7OgDgiHduw0Ltx6eb/s1600/Sunset+Wallpapers+%25286%2529.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOJyTSXQ2z-RTGsB3Seq1q4DF_xS7JFG9-dQIAWh2GD1cNLHYVT0Ic4vd2Aea-yV2vRnTInde0ROB2pZ2IzKF15yGONPbicgKpfE9oN8cl3YJ1omLYFhDhciw1DyI_37qtgb_HievPFpy4/s1600-r/Mys2010b.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5U_dUOo5pWkMuvAAqpWWaqo8KCLsIvEAizHoQIjXo-IHmJPC5wCnG3AgfN5F8O_o3Hbz9LXS6rKLVYldF99XBqyKdUhG2wBYxYltuFdrMP1jQ_fy_KfKOp7eGHZXqPVNoHy_JDeWkKY/s1600-r/Landscapes-3-Mys2010.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8zhn1Y_Ox3rB1GfEbsPDR3Q047cUKTLgHEAHd4ukt1M3lbr-R_c2QUarF8PsIclvI46wHHpZC4B1mr6ODKFlAje_k2sGv9pmCUqYTpOyfbq-TYpK-nEcERemluk0oZWwqW63Zr4nH5Tlz/s1600-r/Mys2010a.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQTd89j1NlfwXzL6KkWqKcpXHmuEde1x9l_PpY_czzvoLK3TaggWgx3RWRWxbVz7ZZ_a1GUtZq7pFc06hai9eVDOfSC46IlZQj5RBrruwewx6DKcRk8kVMKfG9aQA9iIvNueRDNDvl7M/s1600-r/Landscapes-5-Mys2010.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.my-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
 0% {
     opacity: 0;
     -ms-transform: translateX(200px);
 }
 8% {
     opacity: 1;
     -ms-transform: translateX(0px);
 }
 17% {
     opacity: 1;
     -ms-transform: translateX(0px);
 }
 19% {
     opacity: 0;
     -ms-transform: translateX(-400px);
 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
@keyframes titleAnimation {
 0% {
     opacity: 0;
     transform: translateX(200px);
 }
 8% {
     opacity: 1;
     transform: translateX(0px);
 }
 17% {
     opacity: 1;
     transform: translateX(0px);
 }
 19% {
     opacity: 0;
     transform: translateX(-400px);
 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-Slide  li span{
 opacity: 1;
}
@media screen and (max-width: 1140px) {
.my-Slide  li div h3 { font-size: 60px }
}
@media screen and (max-width: 600px) {
.my-Slide  li div h3 { font-size: 50px }
}
Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h3>Myscript2010 </h3>
</div>
</li>
<li><span>Gambar 02</span><div>
<h3>Belajar Webblog </h3>
</div>
</li>
<li><span>Gambar 03</span><div>
<h3>Full Screen </h3>
</div>
</li>
<li><span>Gambar 04</span><div>
<h3>Desainer </h3>
</div>
</li>
<li><span>Gambar 05</span><div>
<h3>Copyright:2015 </h3>
</div>
</li>
<li><span>Gambar 06</span><div>
<h3>Cibeber Cimahi </h3>
</div>
</li>
</ul>
Penjelasan :
Ganti Link gambar dan teks yang berwarna orange sesuai keinginan
untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010
DEMO SHOW
Labels:

Slider Auto


Memasang Slider Auto
Kode ini hanya menampilkan poto atau gambar
yang kita pasang tanpa ada tombol link yang mengarah kesatu tujuan.
berikut cara penerapannya :
Login ke akun blog klik tataletak, klik tambah gadged kemudian, copy kode berikut pastekan kedalam gadged tersebut
</script><script rel="stylesheet" src="http://yourjavascript.com/510115912525/slideauto1.js"></script>
</script><script rel="stylesheet" src="http://yourjavascript.com/152235010116/slideauto2.js"></script> <script type="text/javascript">$(document).ready(function() {
$('#my2-slider').cycle({
fx: 'fade'
});
});
</script> <style type="text/css">
#my2-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#my2-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style> <br />
<div id="my2-slider">
<img src="http://Link Gambar.jpg" /> <img src="http://Link Gambar.jpg" /> <img src="http://Link Gambar.jpg" /><img src="http://Link Gambar.jpg" /><img src="http://Link Gambar.jpg" /><img src="http://Link Gambar.jpg" /><img src="http:/Link Gambar.jpg" />   </div>
All Sumber
Edited by. Myscript2010
DEMO SHOW
Labels:

Slider Auto dengan teks



Memasang Slider Auto
dengan teks sebagai tombol link
yang menuju ke postingan maupun home page.
caranya sebagai berikut Klik tataletak dan klik tambah gadged kemudian copy kode berikut pastekan kedalam gadged tersebut dan klik simpan selesai
<center>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>     <script src="http://yourjavascript.com/21231915763/slidertextauto.js" type="text/javascript"></script>     <script type="text/javascript">
        $(document).ready(function() {
       $('#my-slider').s3Slider({
          timeOut: 3000
       });
    });
    </script>     <style>
    #my-slider {
       width: 600px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 385px;
       position: relative;
       overflow: hidden;
       margin-left: 0;
    }
    #my-sliderContent {
       width: 550px;
       position: absolute;
       top: 0;
       margin-left: 0;
    }
    .my-sliderImage {
       float: left;
       position: relative;
       display: none;  top: 0;
       border:0px solid #000;
    }
    .my-sliderImage span {
    position: absolute;
        font: 10px/15px sans-serif,Arial, Helvetica;
        padding: 10px 10px;
        background-color: #000;
        color: #fff;
        filter:'alpha(opacity=70)';
        -moz-opacity: .5;
        -khtml-opacity: .5;
        opacity: .5;
        text-align:justify;
    }
    .my-sliderImage span a {
    text-decoration:underline;
    color:#fff;
    }
    .clear {
       clear: both;
    }
    .top {
        top: 0;
        left: 0;
        width: 600px !important;
        height: 70px;
    }
    .bottom {
        bottom: 0;
        left: 0;
        width: 550px !important;
        height:90px;
    }
    .left {
        left: 0;
        top: 0;
        width: 110px !important;
        height: 335px;
    }
    .right {
        right: 0;
        bottom: 0;
        width: 110px !important;
        height: 315px;
    }
    </style>   
<div id="my-slider">
<ul id="my-sliderContent">
<li class="my-sliderImage">     <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 1</h3>
Your Text 1</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>     </li>
<li class="my-sliderImage">     <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 2</h3>
Your Text 2</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>     </li>
<li class="my-sliderImage">  <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 3</h3>
Your Text 3</span>     </a></li>
<li class="my-sliderImage">     <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 4</h3>
Your Text 4</span>     </a></li>
<li class="my-sliderImage">   <img height="385" src="https://Link Gambar.jpg" width="600" /><a href="https://Your Link"><span class="top"><h3>
Your Text 5</h3>
Your Text 5</span>     </a></li>
<div class="clear my-sliderImage">
</div>
</ul>
</div>
</center>
All Sumber
Edited by. Myscript2010
DEMO SHOW

Labels:

Poto dengan Efek Hover 3D

Memasang Poto dengan Efek Hover 3D
Kode ini berfungsi untuk menjadikan sebuah gambar menjadi tobol link yang menuju baik ke postingan maupun home page cara penerapannya sperti biasa klik edit HTML temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian
copy kode berikut pastekan diatas kode ]]></b:skin>
klik simpan selesai
/*custom font - Montserrat*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
    background: #544; /*fallback*/
    background: linear-gradient(#544, #565);
}

/*Thumbnail Background*/
.thumb {
    width: 400px; height: 300px; margin: 70px auto;
    perspective: 1000px;
}
.thumb a {
    display: block; width: 100%; height: 100%;
    /*double layered BG for lighting effect*/
    background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url("http://t3.gstatic.com/images?q=tbn:ANd9GcRvIqd_PZnn6K13uw-9gEKqGD5f_OizbJZgifPL7X_wlmnJ6Uqg");
    /*disabling the translucent black bg on the main image*/
    background-size: 0, cover;
    /*3d space for children*/
    transform-style: preserve-3d;
    transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
    /*36px high element positioned at the bottom of the image*/
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 36px;
    /*inherit the main BG*/
    background: inherit; background-size: cover, cover;
    /*draw the BG bottom up*/
    background-position: bottom;
    /*rotate the surface 90deg on the bottom axis*/
    transform: rotateX(90deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
    color: yellow; text-transform: uppercase;
    position: absolute; top: 100%; left: 0; width: 100%;
    font: bold 12px/36px Montserrat; text-align: center;
    /*the rotation is a bit less than the bottom surface to avoid flickering*/
    transform: rotateX(-89.99deg); transform-origin: top;
    z-index: 1;
}
/*shadow*/
.thumb a:before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    /*by default the shadow will be almost flat, very transparent, scaled down, and */
    opacity: 0.15;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: bottom;
}
.thumb:hover a:before {
    opacity: 1;
    /*blurred effect using box shadow as filter: blur is not supported in all browsers*/
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    /*pushing the shadow down and scaling it down to size*/
    transform: rotateX(0) translateZ(-60px) scale(0.85);
}
Kemudian klik tata letak klik tambah gadged
copy kode berikut, pastekan kedalam gadged tersebut dan klik simpan selesai
<!-- Container -->
<div class="thumb">
    <!-- Image--!>
<a href="http:// Your Link .blogspot.co.id">
<!-- Label -->
        <span>Nama Postingan</span>
    </a>
</div>
Sumber by. Kode Player
Edited   by. Myscript2010
DEMO SHOW
Labels:

Slider with stylized CSS3

Memasang CSS3 image Slider with stylized thumbnails
dengan gambar format JPG.
kode slide ini berfungsi juga untuk gambar format Gif.
Langkah penerapannya sebagai berikut :
login ke akun blog klik template klik edit HTML
temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut
pastekan diatas kode ]]></b:skin> klik simpan selesai.
.slider{ 
width: 640px; /*Same as width of the large image*/
position: relative;        
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 100px auto;
/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left; 
cursor: pointer;
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6;
}
.slider label img{
&display: block;
}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
Kemudian klik tataletak dan klik tambah gadged,
copy kode berikut pastekan kedalam gadged tersebut dan klik simpan selesai
<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>         
<label for="id1">       
<img src="https://Your Link.gif" width='100' height='100'>
</label>
<img src="https://Your Link.gif"width='650' height='320'>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="https://Your Link.gif" width='100' height='100'>         
</label>         
<img src="https://Your Link.gif"width='650' height='320'>
<input type="radio" name="slide_switch" id="id3"/>          
<label for="id3">         
<img src="https://Your Link.gif" width='100' height='100'>       
</label>        
<img src="https://Your Link.gif"width='650' height='320'>
<input type="radio" name="slide_switch" id="id4"/>        
<label for="id4">          
<img src="https://Your Link.gif" width='100' height='100'>                  
</label>           
<img src="https://Your Link.gif"width='650' height='320'>
<input type="radio" name="slide_switch" id="id5"/>        
<label for="id5">        
<img src="https://Your Link.gif" width='100' height='100'>          
</label>       
<img src="https://Your Link.gif"width='650' height='320'>             
</div>
Sumber by. Kodeplayer
Edited   by. Myscript2010 on Codepen
DEMO SHOW
Labels:

Slide Auto Show


Cara memasang Slide Auto untuk menampilkan Foto, Wallpaper di postingan blog
seperti biasa copy kode berikut pastekan kedalam gadged ataupun kedalam entri halaman baru HTML dan klik simpan selesai

<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
wap design by. Myscript2010
Sumber by. JavaScript Kit
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

<a href="http://Your link.blogspot.co.id/"><img border="0" src="http://Your link.jpg" height="500" name="slide" width="700" /></a>
<script>
<!--

 //configure the paths of the images, plus corresponding target links
slideshowimages("http://Your link.jpg","http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>

Sumber by. JavaScript Kit
Edited   by. Myscript2010
Demo Show


Labels:

Slider Efek Chop

Chop Slider Auto
adalah slider yang menapilkan
beberapa slide  menarik dan tempaltenya pun harus sudah mendukung slide tersebut. berikut cara penerapannya :
Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini 
Get Blank Template    edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7fk9cfBmxqtD6g853Gj1QGJrECRulpgdRAQQ_8jmwb8Q0VDsvSREmVDvegg7bStmZP84VxVtVsVDlSb3kBndd0pO02gHGBoRnXLOBKjIHC4uLXAaZS2WHh166xOJ0KsW4LUzbPoYhUvh/s1600-r/Darkwood-mys2010.jpg);color:red;height:100%;overflow:hidden;} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
}

.wrapper {
    position: relative;
    margin: 0 auto 15px;
    width: 500px;
    height: 350px;
    display: block;
    padding: 5px;
    background: #;
    z-index: 2
    }
#slide-prev, #slide-next {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    padding: 15px;
    bottom: 50%;
    position: absolute;
    z-index: 4
    }
#slide-prev {
    left: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKAOjUwXu2M34uH5A1Eb1vRcAr4grScePyAiijDg2gPILW4K5oQLwtJsTof_gA5JbZhRg06Nvs_62NV8GuDU96xQjRkC1oXbAQWVhZXx4c44KK2LNUsmXjmeE84MK-GHSDbVdLdjQpYA/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXi3v2ffsr1BSk9DdcyM0BW_LDeFsWK03YM3RxSewxQccwpXLPO0tIBX9v-mm4_NqorslGCmV3Mj04Kk2NHkAxT7ybcR67p1L0wY9OocROz4ywFXTiYFToASoeORsUlvjdZpJrQv7Y2A/s1600/arrow_right.png) no-repeat center
    }

#slider {
    width: 500px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    display: block
    }

#slider img {
    width: 100%;
    height: 100%
    }

.slide {
    display: none
    }

.cs-activeSlide {
    display: block
    }

.slide-descriptions {
    display: none
    }

.caption {
    background: rgba(238, 238, 238, 0.83);
    color: #333;
    display: none;
    padding: 5px 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 3;
    font: normal 13px/20px Arial, sans-serif
    }
</style> 

<div class="wrapper">
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-next"></a>
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-prev"></a>
<div id="slider">
<div class="slide cs-activeSlide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEOkrVdJmKKfC4TZNdrrM2uXBcVyNTy6hzfeIyQTe5w_VUW1WtL2HKHXazswisx1F1WTGjalfDm6ZpUeegIwj44MAzOYEozKPkDjq_ioicAemG3LUPlDhE6900bo3FXfqurp8rsnwjFAg9/s1600-r/Scottadkins_Mys2010s2.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRGl1kSfsfVTyJWI-pMKceoyNrsVbBe7BdKbaqYi30wzK4K9OMCElqwIK_jmmjACyOW0d0oUlKqBQTUupp80ff1C0vLpwey0yztp91I4inlTwxgivhclksF8IGRPNeTLdCqEaaz3gmSFA/s1600-r/Scottadkins_Mys2010s1.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcmSnNq-h3a3WsR38LU5iN_SZpeX8VN7AK-5ZFgkBOSslV9e2tlwifbs6ou9KPA8g6LEtm0eU0ZVWeBRZ7IHtEZxa5QhbMwACezIh8s2az-HWkQpHJCuWRiHZnabWsJOcGBPDbjtz8gU7S/s1600-r/Scottadkins_Mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBZuUcaKCEUdtpJpwltr9E7tnMJ1xvHn2FyMLNyDLhyipzBI5DfMrJd5y-hYxcWTyb6RztoNcXEOG3tc-2uPQMx7BeX-iYzGpBbgW7yd0ZCBoTFDXwc_cf3swM5Y30nk2yRIjUpGgwkxl/s1600-r/Scottadkins_Mys2010.jpg" /></div>
</div>

<div class="slide-descriptions">
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=GIQWR7qQzvQ" target="_blank" title="watch movies on youtube">Close Range</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=t03wigE8GK0" target="_blank" title="watch movies on youtube">Undisputed II</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a>&nbsp;Youtube</div>
</div>
<div class="caption">
</div>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Chop-Slider-mys2010s.css"title="Myscript2010s"> 
<h2>
<font size="1" color="blue"face="arial">DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/2016/04/chop-slider-auto.html"title="Myscript2010s"><b><font size="1" color="orange"face="arial">LET'S STUDY</b>
</div>
</header>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>

<script>jQuery(function () {
    $('#slider').chopSlider({
        slide: '.slide',
        nextTrigger: 'a#slide-next',
        prevTrigger: 'a#slide-prev',
        hideTriggers: true,
        sliderPagination: '.slider-pagination',
        useCaptions: true,
        everyCaptionIn: '.sl-descr',
        showCaptionIn: '.caption',
        captionTransform: 'scale(0) translate(-600px,0px) rotate(45deg)',
        autoplay: true,
        autoplayDelay: 3000,
        t3D: csTransitions['3DFlips']['random'],
        t2D: [
            csTransitions['multi']['random'],
            csTransitions['vertical']['random']
        ],
        noCSS3: csTransitions['noCSS3']['random'],
        mobile: csTransitions['mobile']['random'],
        onStart: function () {
        },
        onEnd: function () {
        }
    });
}); 
</script>
Source Code by. Irvan Efendy
Design code is edited by. Mys2010 on Codepen
DEMOSHOW
If you want to directly copy and paste you canDownload Here Chop Slider Auto
Labels:

Google Plus top right corner

Kode tombol Share GGplus 
yang terletak dipojok kanan atas
Kode ini menggunakan Kode CSS dan HTML
Jika sahabat blogger membutuhkannya
Silahkan Copy Paste Kode berikut ini :
Masuk ke edit HTML Letakan kode tersebut Diatas kode   ]]></b:skin>
.profil-photo{ background-size: 32px 32px; border-radius: 50%; display: block; height: 33px; width: 33px; position:fixed; top:21px; right:25px; z-index:10000; } .profil-photo img{ border-radius: 50%; } .profile-img { float : left; margin : 0 15px 0 0; } .profile-data { margin : 0; } .profile-datablock { margin : 0 0 20px; } .profile-name-link { background : left top no-repeat; display : inline-block; min-height : 20px; padding-left : 20px; } .profile-textblock { margin : 0.5em 0; } #profilbox{ background:#fff; border:1px solid #ccc; color:#333; font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height:1.2em; top:75px; right:-300px; padding:15px; position:fixed; width:250px; height:80px; box-shadow: 0 2px 10px rgba(0,0,0,.2); z-index:10000; } #profilbox:before{ content:""; width:0; height:0; position:fixed; top:-22px; right:14px; border:11px solid transparent; border-color:transparent transparent #ccc; } #profilbox:after{ content:""; width:0; height:0; position:absolute; top:-19px; right:15px; border:10px solid transparent; border-color: transparent transparent #fff; } .closeprofil{ background:none; border:none; position:absolute; top:0px; right:0px; cursor:pointer; font-size:18px; font-weight:700; color:#888; } .closeprofil:focus{ outline:none }
Jika sudah selesai temukan kode  </body>
gunakan CTRL F untuk pencarian
Copy kode HTML dibawah ini,
Pastekan kode HTML diatas kode  </body>  dan klik simpan Selesai
<div class='profil-photo' onclick='document.getElementById(&#39;profilbox&#39;).style.right=&#39;15px&#39;;'> <img alt='Foto' class='profile-img' height='56' src='http://google plus.png' title='Click me!' width='56'/> </div> <div id='profilbox'> <a href='https://plus.google.com/u/0/101254379497511200564/posts' target='_blank' title='My Profil'><img alt='My Photo' class='profile-img' height='80' src='http://google plus.png' title='My Profile' width='80'/></a> <div class='profile-datablock'> <div class='profile-data'> <a class='profile-name-link g-profile' href='https://plus.google.com/u/0/101254379497511200564/posts' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);' target='_blank' title='Mys2010'> Myscript2010 </a> <br/> <div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/u/0/101254379497511200564/posts'></div> </div> </div> <a class='profile-link' href='https://plus.google.com/u/0/101254379497511200564/posts' rel='author' target='_blank' title='View my profile'>View my profile</a> <input class='closeprofil' onclick='document.getElementById(&#39;profilbox&#39;).style.right=&#39;-300px&#39;;' title='Close this' type='button' value='×'/> </div>
Catatan :
Yang ditandai warna biru
No. Link ID serta Link Logo GGplus atau Poto 
ganti dengan link sobat, Lihat Contoh Tombol GGplus di pojok kanan atas
All Sources
Edited by. Myscript2010



Foto Saya
Labels:
Subscribe to: Comments (Atom)

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi