Menu


Menu Tab

Pages

Mengganti Logo Twitter

Cara menggati logo twitter
menggunakan Link Hosting serta logo twitter yang diinginkan
Langkah awal siapkan logo serta link Hosting copy kode berikut
pastekan kedalam Notepad kemudian edit sesuai keinginan
/* TripleFlap - http://floern.com/software/tripleflap 
 * @Copyright   Copyright (C) 2010 floern
 * @licencse  GNU/GPL http://www.gnu.org/copyleft/gpl.html
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.

 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 * @author  floern
 * @author mail info@floern.com
 * @website  http://www.floern.com
*/
/************************************************************************/
/* Script edited by www.imemovaz.com                                    */
/* Script edited by www.imemovaz.com                                    */
/************************************************************************/


if(typeof(twitterAccount)!="string"||twitterAccount=="")var twitterAccount="http://twitter.com/";
if(typeof(tweetThisText)!="string"||tweetThisText=="")var tweetThisText=document.title+" "+document.URL;
var tweetthislink=null;

var birdSpeed=12;
var birdSpaceVertical=16;
var birdSetUp=2;
var spriteWidth=64;
var spriteHeight=64;
var spriteAniSpeed=72;
var spriteAniSpeedSlow=Math.round(spriteAniSpeed*1.75);

var neededElems4random=10;
var minElemWidth=Math.round(spriteWidth/3);
var scareTheBirdMouseOverTimes=4;
var scareTheBirdTime=1000;
var birdIsFlying=false;
var scrollPos=0;
var windowHeight=450;
if(typeof(window.innerHeight)=="number")windowHeight=window.innerHeight;
else if(document.documentElement&&document.documentElement.clientHeight)windowHeight=document.documentElement.clientHeight;
else if(document.body&&document.body.clientHeight)windowHeight=document.body.clientHeight;
if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;
var windowWidth=800;
if(typeof(window.innerWidth)=="number")windowWidth=window.innerWidth;
else if(document.documentElement&&document.documentElement.clientWidth)windowWidth=document.documentElement.clientWidth;
else if(document.body&&document.body.clientWidth)windowWidth=document.body.clientWidth;
if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;
var birdPosX=Math.round(Math.random()*(windowWidth-spriteWidth+200)-200);
var birdPosY=-2*spriteHeight;
var timeoutAnimation=false;
var timeoutFlight=false;
var showButtonsTimeout=null;
var hideButtonsTimeout=null;
var scareTheBirdLastTime=0;
var scareTheBirdCount=0;
function tripleflapInit(reallystart){
if(typeof(reallystart)=="undefined"){
window.setTimeout("tripleflapInit(1)",250);
return;
}
if(!is_utf8(tweetThisText))tweetThisText=utf8_encode(tweetThisText);
var tweetthislink="http://twitter.com/home?status="+escape(tweetThisText);
var theBird=document.createElement("a");
theBird.setAttribute("id","theBird");
theBird.setAttribute("href",twitterAccount);
theBird.setAttribute("target","_blank");
theBird.style.display="block";
theBird.style.position="absolute";
theBird.style.left=birdPosX+"px";
theBird.style.top=birdPosY+"px";
theBird.style.width=spriteWidth+"px";
theBird.style.height=spriteHeight+"px";
theBird.style.background="url('"+birdSprite+"') no-repeat transparent";
theBird.style.backgroundPosition="-0px -0px";
theBird.style.zIndex="947";
theBird.onmouseover=function(){scareTheBird();showButtonsTimeout=window.setTimeout("showButtons(0,"+windowWidth+")",400);window.clearTimeout(hideButtonsTimeout);};
theBird.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50);};
document.body.appendChild(theBird);
var theBirdLtweet=document.createElement("a");
theBirdLtweet.setAttribute("id","theBirdLtweet");
theBirdLtweet.setAttribute("href",tweetthislink);
theBirdLtweet.setAttribute("target","_blank");
theBirdLtweet.setAttribute("title","tweet this");
theBirdLtweet.style.display="none";
theBirdLtweet.style.position="absolute";
theBirdLtweet.style.left="0px";
theBirdLtweet.style.top="-100px";
theBirdLtweet.style.background="url('"+birdSprite+"') no-repeat transparent";
theBirdLtweet.style.opacity="0";
theBirdLtweet.style.filter="alpha(opacity=0)";
theBirdLtweet.style.backgroundPosition="-64px -0px";
theBirdLtweet.style.width="58px";
theBirdLtweet.style.height="30px";
theBirdLtweet.style.zIndex="951";
theBirdLtweet.onmouseover=function(){window.clearTimeout(hideButtonsTimeout);};
theBirdLtweet.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50);};
document.body.appendChild(theBirdLtweet);
var theBirdLfollow=theBirdLtweet.cloneNode(false);
theBirdLfollow.setAttribute("id","theBirdLfollow");
theBirdLfollow.setAttribute("href",twitterAccount);
theBirdLfollow.setAttribute("title","follow me");
theBirdLfollow.style.backgroundPosition="-64px -30px";
theBirdLfollow.style.width="58px";
theBirdLfollow.style.height="20px";
theBirdLfollow.style.zIndex="952";
theBirdLfollow.onmouseover=function(){window.clearTimeout(hideButtonsTimeout);};
theBirdLfollow.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50);};
document.body.appendChild(theBirdLfollow);
var timeoutAnimation=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed);
window.onscroll=recheckposition;
recheckposition();
}
function animateSprite(row,posStart,posEnd,count,speed,onlySet){
if(typeof(count)!="number"||count>posEnd-posStart)count=0;
document.getElementById("theBird").style.backgroundPosition="-"+Math.round((posStart+count)*spriteWidth)+"px -"+(spriteHeight*row)+"px";
if(onlySet==true)return;
if(typeof(speed)!="number")speed=spriteAniSpeed;
timeoutAnimation=window.setTimeout("animateSprite("+row+","+posStart+","+posEnd+","+(count+1)+","+speed+")",speed);
}
function animateSpriteAbort(){
window.clearTimeout(timeoutAnimation);
}
function recheckposition(force){
if(force!=true)force=false;
if(birdIsFlying)
return false;
if(typeof(window.innerHeight)=="number")windowHeight=window.innerHeight;
else if(document.documentElement&&document.documentElement.clientHeight)windowHeight=document.documentElement.clientHeight;
else if(document.body&&document.body.clientHeight)windowHeight=document.body.clientHeight;
if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;
if(typeof(window.innerWidth)=="number")windowWidth=window.innerWidth;
else if(document.documentElement&&document.documentElement.clientWidth)windowWidth=document.documentElement.clientWidth;
else if(document.body&&document.body.clientWidth)windowWidth=document.body.clientWidth;
if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;
if(typeof(window.pageYOffset)=="number")scrollPos=window.pageYOffset;
else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;
else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;
birdPosY=parseInt(document.getElementById("theBird").style.top);
birdPosX=parseInt(document.getElementById("theBird").style.left);
if(scrollPos+birdSpaceVertical>=birdPosY||scrollPos+windowHeight-spriteHeight<birdPosY||force){
hideButtons();
elemPosis=chooseNewTarget();
if(elemPosis.length<1){
elemType=null;
elemNr=null;
elemTop=scrollPos+Math.round(Math.random()*(windowHeight-spriteHeight));
elemLeft=Math.round(Math.random()*(windowWidth-spriteWidth));
elemWidth=0;
}
else{
newTarget=elemPosis[Math.round(Math.random()*(elemPosis.length-1))];
elemType=newTarget[0];
elemNr=newTarget[1];
elemTop=newTarget[2];
elemLeft=newTarget[3];
elemWidth=newTarget[4];
}
targetTop=elemTop-spriteHeight;
targetLeft=Math.round(elemLeft-spriteWidth/2+Math.random()*elemWidth);
if(targetLeft>windowWidth-spriteWidth-24)
targetLeft=windowWidth-spriteWidth-24;
else if(targetLeft<0)
targetLeft=0;
birdIsFlying=true;
flyFromTo(birdPosX,birdPosY,targetLeft,targetTop,0);
}
}
function chooseNewTarget(){
var elemPosis=new Array();
var obergrenze=scrollPos+spriteHeight+birdSpaceVertical;
var untergrenze=scrollPos+windowHeight-birdSpaceVertical;
for(var ce=0;ce<targetElems.length;ce++){
var elemType=targetElems[ce];
var sumElem=document.getElementsByTagName(elemType).length;
for(var cu=0;cu<sumElem;cu++){
var top=document.getElementsByTagName(elemType)[cu].offsetTop;
var left=document.getElementsByTagName(elemType)[cu].offsetLeft;
var width=document.getElementsByTagName(elemType)[cu].offsetWidth;
if(top<=obergrenze||top>=untergrenze||width<minElemWidth||left<0){
continue;
}
elemPosis[elemPosis.length]=new Array(elemType,cu,top,left,width);
if(elemPosis.length>=neededElems4random)
return elemPosis;
}
}
return elemPosis;
}
function flyFromTo(startX,startY,targetX,targetY,solved,direction){
justStarted=(solved==0);
solved+=(solved>birdSpeed/2)?birdSpeed:Math.round((solved==0)?birdSpeed/4:birdSpeed/2);
solvedFuture=solved+((solved>birdSpeed/2)?birdSpeed:Math.round(birdSpeed/2));
distanceX=targetX-startX;
distanceY=targetY-startY;
distance=Math.sqrt(distanceX*distanceX+distanceY*distanceY);
solvPerc=Math.abs(1/distance*solved);
solvDistX=Math.round(distanceX*solvPerc);
solvDistY=Math.round(distanceY*solvPerc);
solvPercFuture=Math.abs(1/distance*solvedFuture);
solvDistXFuture=Math.round(distanceX*solvPercFuture);
solvDistYFuture=Math.round(distanceY*solvPercFuture);
if(typeof(direction)!="string"){
direction=null;
angle=((distanceX!=0)?Math.atan((-distanceY)/distanceX)/Math.PI*180:90)+((distanceX<0)?180:0);
if(angle<0)angle+=360;
if(angle<45)direction='o';
else if(angle<135)direction='n';
else if(angle<202.5)direction='w';
else if(angle<247.5)direction='sw';
else if(angle<292.5)direction='s';
else if(angle<337.5)direction='so';
else direction='o';
}
if(Math.abs(solvDistXFuture)>=Math.abs(distanceX)&&Math.abs(solvDistYFuture)>=Math.abs(distanceY)){
animateSpriteAbort();
switch(direction){
case 'so':animateSprite(1,0,0,0,null,true);break;
case 'sw':animateSprite(1,2,2,0,null,true);break;
case 's':animateSprite(0,2,2,0,null,true);break;
case 'n':animateSprite(4,0,0,0,null,true);break;
case 'o':animateSprite(1,0,0,0,null,true);break;
case 'w':animateSprite(1,2,2,0,null,true);break;
default:animateSprite(0,0,0,0,null,true);
}
timeoutAnimation=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed);
}
if(Math.abs(solvDistX)>=Math.abs(distanceX)&&Math.abs(solvDistY)>=Math.abs(distanceY)){
solvDistX=distanceX;
solvDistY=distanceY;
birdIsFlying=false;
window.setTimeout("recheckposition()",500);
}
else{
if(justStarted){
animateSpriteAbort();
switch(direction){
case 'so':animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,1,1,0,null,true)",spriteAniSpeed);break;
case 'sw':animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,3,3,0,null,true)",spriteAniSpeed);break;
case 's':animateSprite(0,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(0,3,3,0,null,true)",spriteAniSpeed);break;
case 'n':timeoutAnimation=window.setTimeout("animateSprite(4,0,3,0,"+spriteAniSpeedSlow+")",1);break;
case 'o':animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(2,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;
case 'w':animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(3,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;
default:animateSprite(0,0,0,0,null,true);
}
}
timeoutFlight=window.setTimeout("flyFromTo("+startX+","+startY+","+targetX+","+targetY+","+solved+",'"+direction+"')",50);
}
hideButtons();
document.getElementById("theBird").style.left=(startX+solvDistX)+"px";
document.getElementById("theBird").style.top=(startY+solvDistY+birdSetUp)+"px";
}
function scareTheBird(nul){
newTS=new Date().getTime();
if(scareTheBirdLastTime<newTS-scareTheBirdTime){
scareTheBirdCount=1;
scareTheBirdLastTime=newTS;
}
else{
scareTheBirdCount++;
if(scareTheBirdCount>=scareTheBirdMouseOverTimes){
scareTheBirdCount=0;
scareTheBirdLastTime=0;
recheckposition(true);
}
}
}
function showButtons(step,minWidth){
birdPosY=parseInt(document.getElementById("theBird").style.top);
birdPosX=parseInt(document.getElementById("theBird").style.left);
if(step==0&&document.getElementById("theBirdLtweet").style.display=="block")step=100;
if(birdIsFlying)step=0;
opacity=Math.round(step*15);
if(opacity<0)opacity=0;
if(opacity>100)opacity=100;
if(birdPosX<minWidth-300||birdPosX<minWidth/2){
buttonPosX1=birdPosX+spriteWidth-15;
buttonPosX2=birdPosX+spriteWidth-10;
}
else{
buttonPosX1=birdPosX+16-parseInt(document.getElementById("theBirdLtweet").style.width);
buttonPosX2=birdPosX+11-parseInt(document.getElementById("theBirdLfollow").style.width);
}
buttonPosY1=birdPosY-4;
buttonPosY2=birdPosY-4+parseInt(document.getElementById("theBirdLtweet").style.height);
document.getElementById("theBirdLtweet").style.left=buttonPosX1+"px";
document.getElementById("theBirdLtweet").style.top=buttonPosY1+"px";
document.getElementById("theBirdLtweet").style.display="block";
document.getElementById("theBirdLtweet").style.opacity=opacity/100;
document.getElementById("theBirdLtweet").style.filter="alpha(opacity="+opacity+")";
document.getElementById("theBirdLfollow").style.left=buttonPosX2+"px";
document.getElementById("theBirdLfollow").style.top=buttonPosY2+"px";
document.getElementById("theBirdLfollow").style.display="block";
document.getElementById("theBirdLfollow").style.opacity=opacity/100;
document.getElementById("theBirdLfollow").style.filter="alpha(opacity="+opacity+")";
if(opacity>=100)return;
step++;
showButtonsTimeout=window.setTimeout("showButtons("+step+","+minWidth+")",60);
}
function hideButtons(){
window.clearTimeout(showButtonsTimeout);
document.getElementById("theBirdLtweet").style.display="none";
document.getElementById("theBirdLtweet").style.opacity="0";
document.getElementById("theBirdLtweet").style.filter="alpha(opacity=0)";
document.getElementById("theBirdLfollow").style.display="none";
document.getElementById("theBirdLfollow").style.opacity="0";
document.getElementById("theBirdLfollow").style.filter="alpha(opacity=0)";
}
function utf8_encode(str){
str=str.replace(/\r\n/g,"\n");
utf8str="";
for(n=0;n<str.length;n++){
c=str.charCodeAt(n);
if(c<128){
utf8str+=String.fromCharCode(c);
}
else if(c>127&&c<2048){
utf8str+=String.fromCharCode((c>>6)|192);
utf8str+=String.fromCharCode((c&63)|128);
}
else{
utf8str+=String.fromCharCode((c>>12)|224);
utf8str+=String.fromCharCode(((c>>6)&63)|128);
utf8str+=String.fromCharCode((c&63)|128);
}
}
return utf8str;
}
function is_utf8(str){
strlen=str.length;
for(i=0;i<strlen;i++){
ord=str.charCodeAt(i);
if(ord<0x80)continue;
else if((ord&0xE0)===0xC0&&ord>0xC1)n=1;
else if((ord&0xF0)===0xE0)n=2;
else if((ord&0xF8)===0xF0&&ord<0xF5)n=3;
else return false;
for(c=0;c<n;c++)
if(++i===strlen||(str.charCodeAt(i)&0xC0)!==0x80)
return false;
}
return true;
}
Lihat Contoh Kode yang sudah diedit

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

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

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

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

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

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

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

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

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


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 barubuat 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
If you want to directly copy and paste you canDownload Here Chop Slider Auto

Myscript2010

Home Page