Mys2010 on Codepen | SEO Friendly Responsive Blogger Myscript2010s

HomeAll Tutorials

Memasang Kode Animated Book Covers
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"> 
.animated-promos, .animated-promos li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.animated-promos li {
  float: left;
}
.animated-promos a {
  display: block;
}
.animated-promos li {
  position: relative;
  margin-right: 60px;
}
.animated-promos .book-cover {
  position: relative;
  z-index: 10;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos .promo-disc {
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 93px;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos a:hover .promo-disc, .animated-promos a:focus .promo-disc {
  transform: translate(20px, 0px) rotate(320deg);
}
.animated-promos a:hover .book-cover, .animated-promos a:focus .book-cover {
  transform: rotate(-2deg);
  transform-origin: 50% 100%;
}
.book-cover {
  border: 10px solid #fff;
}
body {
  background-color: #cecece;
  padding: 20px;
}
a {
  color: #a20000;
}
/* clearfix */
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
.clearfix {
  display: block;
}
/* extra for Safari */
.clearfix {
  *height: 1%;
}
/* trigger hasLayout for IE6 + 7*/
</style>

<ul class="animated-promos clearfix">
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover3-klein.png" alt="First book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Book #1</h3>
  </a>
 </li>
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover2-klein.png" alt="Second book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Another hillarious book</h3>
  </a>
 </li></ul>

<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>

Penjelasan :
Untuk memodifikasi kode tersebut tambahkan kode Outer di bawah ini :

.outer
{
 width:150px;
 height:220px;
 float:left;
 background-size:contain;
 overflow:hidden;
 box-sizing:border-box;
 margin:10px 18px 10px 18px;
 box-shadow:1px 1px 5px #111;}
/*end Outer*/
#topbar .Mys2010 {  
  code-modification: Mys #2010;
}

Terapkan di atas kode </style> kemudian tambahkan kode teks 3D

h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}

.otto {
  background: #fff;
  color: #F0FFF0;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}

Terapkan di bawah Kode

#topbar .Mys2010 {  
  code-modification: Mys #2010;
}

Selanjutnya hapus semua Kode yang berwarna putih
ganti dengan kode di bawah ini, terapkan di bawah kode </style>

<h1 class="otto">
BOOK COVERS
</h1>
<center>
<div id="topbar">
<table  border"2px solid">
<tr><td>
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</td><td> 
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</table>
<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>

Untuk melihat hasil klik pratinjau dan untuk penyimpanan klik perbarui selesai

Source Code by. Jens Grochtdreis 
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Animated Book Covers

Category: Animated Book Covers

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

POPULAR

Frame Everyday Illusion

Exiting Hyperspace Starwars Pure CSS

keyframes Animations

Audio Player Mp3 Modification

Scroll Back to top

Audio Player Mp3

Contact Us

HTML5 Audio Player

Dark Forest with audio

Blog Archive

▼ 2017 (58)

▼ December (1)

▼ Dec 25 (1)

CSS3 Slideshow Full Screen

► November (2)

► Nov 19 (1)

► Nov 09 (1)

► October (1)

► Oct 27 (1)

► September (4)

► Sep 23 (4)

► August (2)

► Aug 30 (1)

► Aug 11 (1)

► July (3)

► Jul 30 (1)

► Jul 29 (1)

► Jul 19 (1)

► June (5)

► Jun 27 (1)

► Jun 24 (1)

► Jun 22 (1)

► Jun 11 (1)

► Jun 10 (1)

► May (8)

► May 27 (1)

► May 23 (2)

► May 19 (1)

► May 15 (1)

► May 14 (1)

► May 11 (1)

► May 08 (1)

► April (17)

► Apr 22 (1)

► Apr 21 (1)

► Apr 16 (1)

► Apr 14 (1)

► Apr 13 (1)

► Apr 12 (1)

► Apr 09 (3)

► Apr 07 (2)

► Apr 05 (5)

► Apr 02 (1)

► March (1)

► Mar 19 (1)

► February (4)

► Feb 26 (1)

► Feb 18 (1)

► Feb 10 (1)

► Feb 05 (1)

► January (10)

► Jan 28 (1)

► Jan 20 (2)

► Jan 07 (3)

► Jan 06 (2)

► Jan 05 (1)

► Jan 04 (1)

► 2016 (193)

► December (22)

► Dec 31 (3)

► Dec 29 (1)

► Dec 28 (2)

► Dec 25 (1)

► Dec 22 (1)

► Dec 19 (1)

► Dec 16 (2)

► Dec 11 (1)

► Dec 10 (3)

► Dec 07 (1)

► Dec 05 (1)

► Dec 04 (1)

► Dec 03 (3)

► Dec 02 (1)

► November (2)

► Nov 28 (1)

► Nov 26 (1)

► September (15)

► Sep 24 (1)

► Sep 17 (1)

► Sep 11 (5)

► Sep 10 (1)

► Sep 06 (2)

► Sep 05 (2)

► Sep 03 (1)

► Sep 02 (1)

► Sep 01 (1)

► August (20)

► Aug 27 (3)

► Aug 26 (1)

► Aug 25 (1)

► Aug 23 (1)

► Aug 22 (2)

► Aug 15 (1)

► Aug 14 (2)

► Aug 13 (1)

► Aug 07 (1)

► Aug 06 (3)

► Aug 05 (1)

► Aug 03 (2)

► Aug 02 (1)

► July (24)

► Jul 29 (1)

► Jul 28 (2)

► Jul 26 (1)

► Jul 25 (2)

► Jul 22 (3)

► Jul 20 (1)

► Jul 19 (1)

► Jul 18 (1)

► Jul 17 (3)

► Jul 16 (1)

► Jul 12 (1)

► Jul 09 (1)

► Jul 07 (1)

► Jul 06 (2)

► Jul 04 (2)

► Jul 01 (1)

► June (8)

► Jun 29 (1)

► Jun 19 (1)

► Jun 18 (2)

► Jun 07 (1)

► Jun 06 (1)

► Jun 05 (1)

► Jun 04 (1)

► May (19)

► May 31 (2)

► May 30 (1)

► May 28 (1)

► May 24 (5)

► May 19 (1)

► May 16 (1)

► May 14 (2)

► May 11 (1)

► May 07 (1)

► May 06 (2)

► May 04 (1)

► May 01 (1)

► April (27)

► Apr 25 (1)

► Apr 24 (1)

► Apr 23 (3)

► Apr 22 (1)

► Apr 20 (1)

► Apr 19 (1)

► Apr 17 (1)

► Apr 16 (2)

► Apr 15 (3)

► Apr 14 (1)

► Apr 09 (2)

► Apr 07 (2)

► Apr 06 (3)

► Apr 04 (1)

► Apr 02 (1)

► Apr 01 (3)

► March (15)

► Mar 31 (1)

► Mar 30 (1)

► Mar 24 (1)

► Mar 22 (4)

► Mar 10 (1)

► Mar 08 (1)

► Mar 06 (1)

► Mar 05 (1)

► Mar 03 (3)

► Mar 02 (1)

► February (22)

► Feb 28 (1)

► Feb 26 (1)

► Feb 23 (2)

► Feb 19 (1)

► Feb 18 (1)

► Feb 16 (2)

► Feb 15 (2)

► Feb 14 (3)

► Feb 13 (2)

► Feb 11 (1)

► Feb 07 (3)

► Feb 06 (1)

► Feb 04 (1)

► Feb 03 (1)

► January (19)

► Jan 30 (1)

► Jan 29 (2)

► Jan 28 (2)

► Jan 27 (1)

► Jan 25 (1)

► Jan 24 (4)

► Jan 17 (1)

► Jan 16 (3)

► Jan 15 (4)