CSS3 Rotating Image Hover

Memasang Gambar dengan effect hover
Menampilkan gambar dan gambar akan menampilkan Link Title  ketika cursor menyentuh gambar tersebut, berikut cara penerapannya : Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru HTML dan klik simpan selesai. Untuk penerapan gunakan Kode Blank Template

<style>
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:    0px 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%, pink 50%, transparent 90%); 
}

*{    margin:0px;
 padding:0px;}
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib77D3CtqUisVw8uiyCwAtt97g6U8X9MlVJiVyL0ESz0K9HU-DVkWP0Ha1KAEt2TELgTV-kNhDBFfe_MLc0UNpPmm_xM6SpZ7Y-q6_mkJr_SywJRNTsPWBJ2DLkcgDGtEHUGhwjGRZF1vn/s1600-r/pSGRMWg.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family:Arial, Helvetica, sans-serif;
 }
.container{
 width:85%;
 min-height:500px;
 margin:0px auto;
 padding:0px; 
}
header
{
 width:100%;
 height: 45px;
 float:left;
 text-align:center;
 margin-top: 0px;
}
.text
{
 font-size:46px;
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 text-shadow:-1px 2px 1px #999;
 font-weight:bolder;
 line-height:50px;
 padding: 0px;
 color:rgba(51,0,102,1);
}
section
{
 width:100%;
 float:left;
 height:auto;
}
h3
{
 padding: 0px;
 font-size:24px;
 color:#fff;
 font-weight:bold;
 font-family:cursive, sans-serif, serif; 
}p{
 color:#fff;
 font-size:14px;
 padding:0px  0px;
 
}img{
 width:100%;
 height:100%;
 background-size:contain;
}
button
{
 opacity:1;
 width:100px;
 height:30px;
 background-color:#000;
 border:none;
 outline:none;
 color:#fff;
}
.outer
{
 width:250px;
 height:250px;
 float:left;
 background-size:contain;
 overflow:hidden;
 box-sizing:border-box;
 margin:10px 18px 10px 18px;
 box-shadow:0px 0px 5px #000;
}
.hvr-rotate
{
 width:100%;
 height:100%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #2098d1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
 position:relative;
}
.mask-rotate
{
 content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(0,0,0,0.40);
  opacity:0;  
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  text-align:center;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
 transform: rotate(100deg); /* div rotate by 100 deg*/
 /* -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  -webkit-transform: rotate(100deg);*/
  text-align:center;
  backface-visibility: hidden;
}
.drop
{
 top:150px;
 left:65px;
 position:absolute;
 transform: translateZ(0);
 opacity:1;
 backface-visibility: hidden;
}
.hvr-rotate:hover .mask-rotate
{
 opacity:1;
  transform: rotate(0deg); /* default*/
 /*
 ******** These are prefix for different Browsers*********
 
  -moz-transform: rotate(10deg); // Mozilla
  -ms-transform: rotate(10deg);  // Microsoft Internet Explored
  -o-transform: rotate(10deg);  // Opera
  -webkit-transform: rotate(10deg);  // Chrome and Safari */ 
}
button:hover
{
 background-color:rgba(255,0,0,1);
}
</style>

<center>
<p class="text">
Image Hover Effects</p>
<table  border"2px solid">
<tr><td>
<section>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnFoYkLOSxUuvnV8wgOFdcqsDgxCFhIC2y5OhSuoOOIXNl6-X6zYwCJ0-gIPEg0nRzmcoH5Fn_rCTPGEHdp1S0jZ1fXKoqw2byur8t4BfmTtEeBO6PzLPFJ2HkxPo1J_aq47StKTID878/s1600-r/yayang5.jpg" >
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 1</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yJgYZ5fzM507tQQZ3Ngqi4j6DQ0aBFP0OaYhyzosbCqAY3flDmiXQgf6c3WbkvtUL8oYjovsSjLdbfDLcXhMmTifleWUVwjupjZoi7P_Iaw-_iRX1p6ImNd04wbSzcbTV7zW7O5SQk_e/s1600-r/yayang6.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 2</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3rLZP0G-_MkGbG2KtNJpmKt27OcM-idU1GD1awonCT1sIV1UexUpGzF2kjGOwvIjdH4DwMMRZKYgkqB6DZUdQIwg2DYQlZXXwTa22VWDgl4OHv1CySeTwEtDM7mMyXOXspUqEgk7715iM/s1600-r/yayang5.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 3</button>
</div>
</div>
</div>
</table>
<table><table  border"2px solid">
<tr><td>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4qjTjZ0DdNRt9yz4mwJA94-3qgzJZlMHYqFj7D-l191xsg82NrIeRbgvzdCIksU6mcpxG6E9r5mN0HBKka1Z7bWbSM160u04bgrP2Kp4aG0KJzYQdiXBf3pXg7NDCTNzL0N-MEqfLNMS/s1600-r/yayang3.jpg">
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 1</button>
</div>
</div>
</div>
</td><td>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTko9b20oD3_wZLsBpRs1t5sE_60VUi6Z0JCamv4G85Rhpfs40MZ2iB_LEHRzhdT7f13cjQZN6wl-VHqIA4HyrxHgKdtTK88Yugu-SVjdXy2BvTczvHTEHwB66rG-KllBL0f3UsiCRzwdt/s1600-r/yayang2.jpg">
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 2</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJ003GlC_uFrusbhMqHRfZ6HVRyB5qYqBFw8J6fb1KK-hRbTe7ZVmIcLp0FZQ-bY_vla5iHhf0i5nSwIx5rHHvkbho5jtWPkeE7_ZfTAlcGdwtEu-LgauTKTzh0fauez9DH-JAFC3kx1Z/s1600-r/yayang1.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 3</button>
</div>
</div>
</div>
</section>
</div>
</table>

<header> 
<div class="Top Title Header">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Rotating-Image-Hovers-Mys2010.css"title="Myscript2010s"><font size="1" color="orange"face="arial"> <b>DOWNLOAD FULL CODE</b>
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/2016/01/rotating-image-hover.html" target="_blank" title="Rotating Image Hover">
<h2>
ROTATING IMAGE HOVER EFFECTS</2></a>  
</div>

Source Code by. Phpludhiana 
Design code is edited by. Mys2010 on Codepen 

DEMOSHOW

If you want to directly copy and paste you canDownload Here Rotating Image Hover

Category: CSS3 Rotating Image Hover

Kode Iklan Melayang

Kode Script Iklan melayang
kode ini dapat menampilkan gambar dengan format jpg, gif, png, serta dapat menampilkan script dengan cara menambahkan kode textarea. Untuk penerapannya Login ke akun blog, klik tata letak dan klik tambahgadged, copy kode dibawah ini : terapkan kedalam ruang gadged tersebutkemudian klik simpan selesai

<style type="text/css">

#topbar {
 position:absolute;
 z-index: 80;
 padding: 7px;
 background: #444;
 background: #333)));
 border: 1px solid #000;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-box-shadow: #444 0 2px 15px;
 -moz-box-shadow: #444 0 2px 10px;
 margin:0 auto 10px;
 float:left;
 color:rgba(0, 0, 0, 0.75);
 font-size: 12px;
 font-family: Verdana, serif;
 text-shadow:0 1px 0 #444;
}
#topbar img {
 border:none;
}
#topbar .tombol {
 margin:0;
 padding-bottom:5px;
 text-align:right;
}
#topbar .tombol button {
 color:#fff;
 border: solid 1px #000;
 margin:0;
 padding:2px 110px;
 cursor: pointer;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);
 background: #444;
 background: -webkit-gradient(linear, left top, left bottom, from(red), to(#333));
 background: -moz-linear-gradient(top, red,  #333);
}
#topbar .isi_iklan {
 background-color:#fff;
 margin:0;
 padding:4px;
 width: 250px;
 border: 1px solid #444;
}
</style>

<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<a href="http://toyotanasmoco.net/category/rush" target="_blank"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0xkhqXUTkhBpw0cyQX280cUg2TLOSgsBPf5G7hsx7pVYazlAB-VFHOhy1CwDDu425AZps4_luYNltHyALscalOv3VAWtnSOe7VTZRDStvIvr57tAjXMAz6kjfhLSTIK62Z2VbJ6EKQE/s1600/iklan-rush.gif
" name="e902" border="0" width="250" height="150" /></a></script>

<script src="https://sites.google.com/site/code6916/file/Kode-Iklan-Melayang-Mys2010.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>

Source Code by. Blogcunayz
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Floating ad code

Category: Kode Iklan Melayang

Movie Credits

Memasang Code Movie Credit :
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">
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #222;
border-top: 2px solid #f0f;
z-index: 9999;
}  

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: radial-gradient(ellipse at top left, #334455 0%, #112233 100%);
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  font: 300 30px/1 'Open Sans Condensed', sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  animation: 60s credits linear infinite;
}

.movie {
  margin-bottom: 50px;
  font-size: 50px;
}

.job {
  margin-bottom: 5px;
  font-size: 18px;
}

.name {
  margin-bottom: 50px;
  font-size: 35px;
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -500%;
  }
}
</style> 

<div class='wrapper'>
<div class='movie'>
Welcome</div>
<div class='job'>
Myscript2010</div>
<div class='name'>
LEARN EDITING SCRIPT</div>
<div class='job'>
WITH CODE</div>
<div class='name'>
CSS HTML EFFECT</div>
<div class='job'>
SOURCES CODE</div>
<div class='name'>
CODEPEN GITHUB</div>
<div class='job'>
SOURCE NEXT</div>
<div class='name'>
ALL SOURCES CODE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SHINE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ROTATE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SLIDE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT HOVER</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSISI</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TOOLTIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT RADIAL</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT MULTIPLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ANIMATED</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT EXPANDING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSFORMS</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OVERLAY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LOADING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT CIRCLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT NAPIGATION</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT DROPDOWN</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LIGHTING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ZOOM</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SCALE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OPACITY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLASHING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFCET SMOKE</div>
<div class='job'>
CODE EDITED BY.</div>
<div class='name'>
MYSCRIPT2010</div>
<div class='job'>
</div>
<div class='name'>
CIBEBER CIMAHI</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
@
</div>
<div class='name'>
@</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>

<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://sample-mys2010.blogspot.co.id/2016/04/movie-credits.html"target="_blank" title="Myscript2010s"> <b>LET'S STUDY</b> </a>
</div>
</header>

Source Code by. Oliver Knoblich
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Movie Credits 

Category: Movie Credits

Chop Slider With Audio

Chop Slider With Audio adalah slider yang menapilkan
beberapa slide  menarik dan juga dapat memainkan music mp3. 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 {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}

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: 70px;
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: 5px; 
 background: -webkit-linear-gradient(transparent 10%, green 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 50%, transparent 60%);  
}

.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/AVvXsEhyTMJG2Utmk3HoXvQ5Uvi91Kg6jQayshU0Xx3U1CudxMXMgyROIOTnXX__Ylf2z4bbVRhaOr0Qnx4WoamdrFsJsjfBn_tfzDyjV3Gkfa9UTOyXWqZUVvC46TBYunvVIuIKxNQvcwxYY5s/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMiKMQX541HWaELAz8nkBOeUIU3ZWviOHmVPjFIKrfXMiSOJwLGAyi91C-hF0Qzh-mFGgnkTEDX0VJtMVruMc33juQLSjktj5ZOUYWwzgsZvW2bjD1QZbgWf1NqU4X3edptqYxgsA5Ms/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
    }

.player {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 210px;
height: 100px;
background: # ;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #fff;
font-family: arial, sans-serif;
}
.player .source-ctrl-container {
height: 50px;
width: 50px;
background: #  ;
border-radius: 50%;
float: left;
position: relative;
cursor: pointer;
color: #000;}
.player .volume-ctrl-container {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 10px;
height: 50px;
width: 118px;
float: right;
}
.player .fa-pause {
position: absolute;
top: 18px;
left: 18px;
}
.player .fa-play {
position: absolute;
top: 18px;
left: 20px;
}
.player .time-info {
clear: both;
position: relative;
top: 8px;
text-align: center;
font-size: 13px;
}
.player .time-current {
color: #ffff00;
}
.player .volume-slider {
display: inline-block;
height: 2px;
width: 50px;
background: #666;
margin: 0 10px;
position: relative;
top: -10px;
}
.player .volume-knob {
background: #fff;
width: 13px;
height: 13px;
border-radius: 50%;
position: relative;
top: -6px;
}
</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/AVvXsEilnYvhLxpOkH3nnA387x_1e7UunLQ8LCogONOvIpfSV_oiBkZSXfB0gmW9sQ-KmQFVCWiuBODH9UicR2s4JzzrFP3-TqWcwBtNqvCeIcMJIy8KP13NS-JORqGu_Yr_ERmIEt-Kyspe5Dic/s1600-r/katie-mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfbN2289UMlTNC8rnhEp9O1hcfqJ29Drci8rH0lad_F2ysa7u2F9bNzefiRLhscchQ5vKGjzbFzu1EwA_Ht3z94tdWVN_maF6h2MSk-TMAACra6I-ljNub3hz900SL70JMabTv_yaJk4hs/s1600-r/blonde-mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYam9BcOJ3qVG10hNbMktu7hiD8UfLakTJqhpYaiA7WpbTX833bdzIOjIhuvohDc9kr8_actEmWnUlsIObN6Z9sLHOa1N4CZ55tnsEyPWVnyRp80acweGzGRkW2ZhQD14x5WPojMfocqE-/s1600-r/blonde-mys2010.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZBC_DIE3AmkIie_61c-MoDInKKA4idwbS0zarqMOVkp7pHYQoQUdQ3F3AaAZ0S1Y-qtiPiQ21I2Pmt_VglYSFoSMUucFvRK_UYSGRIs9yKsdX6ay6Dq_UltXXhVEsvAsxjm4zfc9wk_5r/s1600-r/ashley-mys2010.jpg" /></div>
</div>

<div class="slide-descriptions">
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
<div class="sl-descr">
<a href="http://www.mrwallpaper.com/woman-with-martini-cocktail-wallpaper/" target="_blank" title="Myscript2010">Source  </a> Wallpaper</div>
</div>
<div class="caption">
</div>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<center>
<h2>
<audio id="player"><source src="https://sites.google.com/site/code6916/lagu/Christine-Mys2010s.mp3" type="audio/mpeg"></audio></h2>
</a></div>

<header>
<div align="center">
<a href="https://Link Download"title="Myscript2010s"><b>DOWNLOAD CODE</b></a>
</div>
</header>

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

<script>
"use strict";
/**
 * Requires mootools core and mootools more Slider
 */
var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;
    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };
    this.render = function() {
        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);
        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );
        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );
        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };
    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };
    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };
    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);
        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }
        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;
        return time;
    }
    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };
}
var player = new Player('player');
player.init();
</script>

<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 With Audio

Lihat juga chop untuk background yang berbeda Klik di sini  Chop Slider With Audio

Category: Chop Slider With Audio

Chop Slider Auto

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/AVvXsEjwHy3bSUmgCTWLhhYIWL-iLwvu-Ks4pcu76gryPSjKEW_0VPYfklp71SouJr30SYzdQxBKLGCSu4oiGbsneRVDuTwMBUMgCoFWi4UnM-A01H3ObfFCSjTNzojAr_ITJhofoddWykaI2vSN/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/AVvXsEhyTMJG2Utmk3HoXvQ5Uvi91Kg6jQayshU0Xx3U1CudxMXMgyROIOTnXX__Ylf2z4bbVRhaOr0Qnx4WoamdrFsJsjfBn_tfzDyjV3Gkfa9UTOyXWqZUVvC46TBYunvVIuIKxNQvcwxYY5s/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMiKMQX541HWaELAz8nkBOeUIU3ZWviOHmVPjFIKrfXMiSOJwLGAyi91C-hF0Qzh-mFGgnkTEDX0VJtMVruMc33juQLSjktj5ZOUYWwzgsZvW2bjD1QZbgWf1NqU4X3edptqYxgsA5Ms/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/AVvXsEgnvzKHLiY-Xp-FmWB3kUTkyKqbj5Vr-zI9tuGn8JU20K6b5gYotmrMdbocn4-rdLVwNMCzcK758C1_b5u_BJWfQU7TZmGnFKxN95LKfgxOnpdTI9Qe0Dtz1URqZv6XUkRLZHplcTCfoT8k/s1600-r/Scottadkins_Mys2010s2.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcnYo_cziJ-IvkB-yg8PHOTgkTqHy6dTrt9kOugan6dwmqfQtIyVs8TfDL2cDcReU6iiLRpIVstiTYrp11yW_Q-CUN8DmZ2Rt9wRZZzggghQSXfuErRevEQaNAOlpMwiH-zggCzy4tv6v/s1600-r/Scottadkins_Mys2010s1.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3bxRsamMz0fdw_56kKGfy9Packtvdve85USjWBb2SjKpHA0DgAw3bdJ08deWkpRuGY98RtiKabOqxrU9GbNh-hMz2CPuaio7oH1amunZFB2YI7dx3uoAnDwLVKhmyc_nyL_U8c9My2mr/s1600-r/Scottadkins_Mys2010s.jpg" /></div>
<div class="slide">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2arQH0ziw2LVrnzgWyDTJvR5DrYMifD6N6vdzMla6nGM0QN2L-zSNuS1LAHYZplRfDJbMCXpXOCxeIwR0RJRvCTJPncR_2XRmBWiiSDSa8nkbXMs-BlbNP-QJ25ayrLKUpnzwHp2kKJOX/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

Category: Chop Slider Auto

Transparent Background

Memasang kode Transparent Background
Untuk menerapkan kode tersebut 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 {#);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:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  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: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}
 /*end*/

body
{
  width: 95%; 
  height:100%;
  margin:0em 5%;
  background-color:#dad;
  background-image: url("http://vignette3.wikia.nocookie.net/scarfheroes/images/c/c3/Fancy-Swirl-Pattern-Grey-White-PNG.png/revision/20151009044909");
  background-position: center bottom;
  animation: animatedBackground 30s linear infinite;
  /* Safari and Chrome: */
   
-webkit-animation: animatedBackground 30s linear infinite;
}


@keyframes animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
@-webkit-keyframes  animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
#content
{
  position:fixed;
  top:5em;
  height:1em;
  width:19em;
  background-color:rgba(1,1,1,0.5);
  color:white;
  padding:2em;
  border-bottom-right-radius: 5em;
  -webkit-border-bottom-right-radius: 5em;
   border-top-left-radius: 5em;
  -webkit-border-top-left-radius: 5em;
}
/*end*/

.blurred-bg.tinted {
  background: rgba(4,000,000, .4);
   
}
      .box {
  width: 500px;
  height: 300px;
  left: -webkit-calc( 50% - 250px );
  top: 20%;
  position: absolute;
  border-radius: 5px;
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  transition: box-shadow .3s ease;
}
.box:active {
  cursor: move;
  -moz-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}
.box .content {
  margin: auto;
}

h1, h2, a, p {
  color: white;
  font-weight: 100;
}
.tinted h1, .tinted h2, .tinted a, .tinted p {
  color: black;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

h2 {
  font-size: 14px;
}

p {
  margin: 20px;
}
p.related {
  text-transform: uppercase;
  font-weight: 700;
  color: #444;
}
p.related a {
  font-weight: 700;
  text-decoration: none;
}
p.related a:hover {
  text-decoration: underline;
}</style>

<div id="box1" class="box blurred-bg tinted">
<div class="content">
<h1>
Transparent Background</h1>
<h2>
Edited By <a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" rel="follow" target="_blank">Myscript2010</a></h2>
<p>
Drag this box to move around</p>
<p class="related">
See also: <a href="http://codepen.io/Myscript2010/pens/popular/" target="_blank">Code in the edit codepen</a></p>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/laguhiburan/file/Transparent-Background-with-background-running-Mys2010.css"title="Myscript2010s"> 
<h2>
DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" target="_blank"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script> 
<script>$(function () {
    $('.box').draggable();
}); 
</script>

Blurred Background by. Rian Ariona
Background Example Code by. Vollnixx
Design code is edited by. by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Transparent-Background

Category: Transparent Background with background running

CSS3 Animated Clouds with Glass Quote

Memasang kode CSS3 Animated Clouds with Glass Quote
Code ini menggunakan CSS dan HTML serta Js. Untuk menerapkan kode tersebut Langkah awal 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 {);color:#111;height:100%;overflow:hidden;}
body {
  background: #f0f;
}
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;
}
 /*end*/

.clouds_one {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
.clouds_two {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
.clouds_three {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
@-webkit-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
@-webkit-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
@-moz-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
main {
  margin: 70px auto;
  position: relative;
  padding: -60px 5px;
   background: rgba(4,111,111, .4);
  font-size: 20px;
  font-family: 'agency fb', serif;
  line-height: -1.5;
  border-radius: 40px;
  width: 50%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}
main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  z-index: -1;
}
blockquote {
  font-style: italic;
}
cite {
  font-style: normal;
  font-size: 20px;
}

<body>
<div class="sky">
<div class="moon">
</div>
<div class="clouds_one">
</div>
<div class="clouds_two">
</div>
<div class="clouds_three">
</div>
</div>

<main>
<blockquote>
<center>
About Me</center>
<cite>
&mdash;" Hey there, I MyScript 2010. 
&mdash; Thank you for visiting my site!
&mdash; I’m a stay-at-home dad
&mdash; my address in Cibeber cimahi Bandung West Java, 
&mdash; hopefully article available on the Website can be useful and add to knowledge."</cite>
&mdash; <b><font size="5" color="#111"face="vivaldi"> Sulaeman Mys2010</b> 
</blockquote>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://LINK DOWNLOAD "title="Myscript2010s"> 
<h2>
DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>

CSS3 Animated Clouds by. Montana Flynn
Frosted Glass Quote Code by. Joni Trythall
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Clouds Glass Quote 

Category: CSS3 Animated Clouds with Glass Quote