Menu


Menu Tab

Pages

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

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


Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi