Memasang kode Photo in the Frame
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style type="text/css">
body {background-image: url(http://#.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:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  border-bottom: 3px solid #dad;
} 
.explanation {
 text-align: center;
 color: #888;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.7);} 
body{
    color:#000;
    font:normal 14px Arial;
    padding: 0px;
    margin:0 auto;
    background:#ccc;   
}   
.stamp {
 width: 346px;
 height: 456px;
 display: inline-block;
 
 /*The stamp cutout will be created using crisp radial gradients*/
 background: radial-gradient(
  transparent 0px, 
  transparent 4px, 
  #A9A9A9 4px,
  #333
 );
 /*reducing the gradient size*/
 background-size: 40px 190px; 
 background-position: -210px - 1px;}
</style>
<header> 
<div class="Top Title Header">
<div align="center">
<font size="3" color="green"face="Agency FB"><b>PHOTO IN THE FRAME</b></a>
</div>
</header>
<h3 class="explanation">
ESQ Emotional Spiritual Intelligence</h3>
<h4 class="explanation">
<!-- Lets create a CSS3 stamp -->
<div class="stamp">
<img class="expando" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquCtLj1VvLCbfkICLXdHnm0l8nrA8ReN6CKOdfKpWiYMaynyvJe3OkXK7m9K2QgM64fsGu44D4tisyTqRwxC4giID2sZTHwvlQAhyRZi4pkX5X_RCLp2u3yGdkZsJkBsTTGW9Br4VRGU/s1600-r/Sharing-Mys2010.gif" width="340" height="420"title="Song Mp3 Instrumental"></div>
<!-- prefixfree to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"  
data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'ESQ Mys2010 Mys2010','url':'https://sites.google.com/site/laguhiburan/mp3/ESQ-Mys2010s.mp3'}]}" ></script> 
<!-- SCM Music Player script end -->
Penjelasan :
Ganti Link Gambar, Teks dan Link Title Sesuai Keinginan
Sources by. All Sources
Edited by. Mys2010 on Codepen

Memasang kode Text Shadow dan Tooltip
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
body {background-image: url(http://orig05.deviantart.net/e28f/f/2012/057/7/b/dark_wood_texture_by_drsela-d4r0ger.jpg);color:red;height:100%;overflow:hidden;}
#tooltip-image {width:410px;float:left;border-radius:50%}
.container {
  width:110px;height:110px;margin:0 0 30px 10px;
  position:relative;border-radius:60px; 
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2); 
  transition:all .5s; overflow:hidden}

.photo {
  width:90px;height:90px;margin:8px;
  border-radius:50%;position:absolute;left:0px;
  overflow:hidden;top:0;border:2px solid white}

.pic{max-width:100%}
.buttonLogo:hover {border:3px solid #5ca321}}
.buttonLogo { 
  width:60px;height:60px;position:absolute;
  right:20px;top:25px;border-radius:50%;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWFzFsPjPC4nesKOSPCUWZJPVVr1NJqzf-rHuH6Ev13x0LQXDoALj_nQbAzR9BBNaeJ4YVpei8Xb99wPFvU50FGaliJOmCgn0N8jun3vwqxRXc3IO1YK-M4UnBZu5CK_rsJB_eiAKD1k/s1600-r/Mari-belajar-mys2010.png) no-repeat center center;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 0 5px rgba(255,255,255,.3),0 0 0 6px rgba(0,0,0,.3);
  transition:all .5s;cursor:pointer}

.name{
  height:60%;width:180px;position:absolute;
  right:80px;padding:20px;font:25px arial;
  color:white;  opacity:0;
  transition:all .5s .5s;top:0;
  text-shadow:1px 2px 3px #111}

.small {font-size:14px; display:block; margin-top:10px; }
.comment {
  width:370px;position:relative;padding:15px;
  font-size:16px;color:rgba(0,0,0,.7);
  border-radius:10px;background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;transition:all 1s;border-bottom:2px solid #080}

.container:hover{width:400px}
.container:hover .name,.container:hover + .comment{opacity:1}
.comment:before {
  content:'';width:0;height:0;position:absolute;
  bottom:100%;left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent}
/*shadow*/
p {
  margin: 55px auto 0 auto;
  font-size:150px;
  font-weight:bold;
  font-family: Serif;
  text-align:center;
  color:rgba(0,0,255,0.1);
  text-shadow: 0 1px 0 #000,
               0 2px 0 #111,
               0 3px 0 #222,
               0 4px 0 #333,
               0 5px 0 #444,
               0 6px 1px rgba(0,0,0,1),
               0 12px 2px 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),
               0 3px 8px rgba(255,255,255,.2);

}

.illuminated
{
    color: rgba(100,100,255,0.3);
    text-shadow: 0 1px 0 #000,
               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),
               0 0px 6px rgba(255,255,255,.3),
               0 8px 8px rgba(255,255,255,.6),
               0 16px 16px rgba(255,255,255,.3),
               0 0 150px rgba(255,255,255,.4),
               0 0 500px rgba(255,255,255,.2);
}
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: #444;
  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: Aqua;
background: #222;
border-top: 2px solid #f0f;
z-index: 9999;
} /* GRADIEND end */
<p class="illuminated" id="lbl">
Myscript2010</p>
<div id="tooltip-image">
<div id="tooltip-image">
<div class="container">
<a class="buttonLogo" 
expr:href="data:blog.homepageUrl"></a>
<div class="name">
Myscript2010
<span class="small">Cibeber Cimahi</span> 
</div>
<div class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHLd904FR7TGg2PjSfTLxV-lG75Ijksy73gOgv4AZQiewbIua8_HEjr_ru1VmALqyqHZqgCvY9i7sp8kCkidIGQQXApUJDWN5bx7hGaXT__iV3if5riTOdo2bm6HHeRQ2eS3A6TKaRSm4/s1600-r/Mys2010.jpg" alt="Sule" class="pic">
</div>
<div class="photo">
<img src="https://sites.google.com/site/zudantaufiq/logo-bng-glass.png" alt="Mys2010" class="pic">
</div>
</div>
<p class="comment">
<font size="3" color="green"face="vivaldi"> 
Mari Belajar</font>
</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="https://sites.google.com/site/fileblogfor/code/Logo-Hover-Mys2010.css"title="Myscript2010s"><b><font size="2" color="aqua"face="arial">GET IN THE CODE</a></b>
</div>
</header>
<!-- 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>
<script>
function flicker()
{
  $("#lbl").removeClass("illuminated");
  setTimeout(function()
  {
    $("#lbl").addClass("illuminated");
  },50);
}

function triggerFlicker()
{
  //var times = Math.floor(Math.random()*4);
  //for(var i=0; i<times; i++)
  //{
    setTimeout(flicker,/*i**/100);
  //}
  setTimeout(triggerFlicker,Math.floor(Math.random()*2000)/*+(times*100)+(250)*/);
</script>
Penjelasan :
Ganti Link Gambar, Teks dan Link Title Sesuai Keinginan
Sources by. All Sources
Edited by. Mys2010 on Codepen

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

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

Memasang Slide Show auto CSS 3 A 1 menggunakan kode CSS dan HTML yang menampilkan gambar di webblog secara otomatis tampil bergantian. Berikut cara penerapannya : . Login ke akun blog klik edit HTML  temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin>   dan klik simpan selesai
.my-slideshow, .my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuo0b_MA0K37HZUHNhH4OA8g9bpzzxJeiEFcptmlFSWbQpB00f7nVE53fFJnIkDUSHzMU4rjZrIQooVNftqkw2hPS-4kkyp2pPuMzrYwYdvnyejT-9NrmXm0KwJ8gjvGTGnBEVP5h2lIcX/s1600-r/spMys2010a1.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKVncapa1cTzVzVP4KeqV2tf_8nW2EYSrA8rJxaEImhNhJHWEK9MzoNIDMlzzXzRJbk0TDfclaI1I3M57NALGF_zVvG-cc7ab1DhJQwUWQwNoFP1fqO1mrZSP1XICcPyBsNmcOxwuJZ3I/s1600-r/spMys2010s3.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KTHiFAozIQehEIEY0UFC-EJ1ik_i2IsIqDPcxYHhf_ZFqpLqBCN2Y4wkPR6ir-WYlHfjZKs3DDpy9KcpCaX0fXGSPaOMI04MpZOcTXv1HWfLl7oxR7G5n1vd9xoDtAWzozWplpMd2ej0/s1600-r/spMys2010s2.jpg ); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQ6RFG8jWGzAwk8TL3I3NFPozwl3mNow_NtBeGZkYyL2akTx0aNoqmOChUifWs2F8yxrSkq-ib9FMd5y5wUa62yp9ZAeiIYRys6tDhyIJ5hyRzyvtyC2B-6IWzDiCPcXCoxvH6g3qS9uM/s1600-r/01mys2010.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhBZzIHczVoeiCqeIUuGsk08EWUU8UHAmlA5wqEkkwtCCp_Ly_KFo8JlCL_p9WYRncfsFS5OwoVbHU9Q-2xRQRB9i0Y0qCgPs9lHV7bxQ0o3aLGeNQP2o3YUYVDoRJVnjcPj7lXyU38fG/s1600-r/03mys2010.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPuJ8q7CnqVUULvruU1k-ty6ncCLUKTR0lB5Yx5nj4oIbinmOoiu7SYLTX2hm8lie19Ma8dO2g9b2Q1Q6WzLZLU9isB-qFVX_nPqR4XRV_4ficCnNMxg7gN1sLPh3xJ72egoOpoafTr0U/s1600-r/sp.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .my-slideshow li div h3 { font-size: 140px } } @media screen and (max-width: 600px) { .my-slideshow li div h3 { font-size: 80px } }
Kemudian klik entri halaman baru HTML copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 02</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 03</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 04</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 05</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 06</span><div> <h4>  </h4> </div> </li> </ul>
Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010

Memasang kode Audio Player With Playlist
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<link rel='stylesheet prefetch' href='http://www.mp3mixtape.us/iframes/css/mediaelementplayer.min.css'>
<style type="text/css">
/* Backgroud*/
body {
  
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDPyCFpHp6JXaDxqWb-kUz48bkbwNDR10Qea-93QCQbhf2Tj63CWLA46UVNupp0sfNqqVD4l_ae9R7zi8z0fTLffISK1ZYuKJOqEpfLpt20TCXU_uNoKqT0lKhrz0Td7PxInteVMQ-M8G/s1600-r/Home-Theater-speaker-guide-mys2010.jpg);background-size:cover;background-repeat:no-repeat;margin:auto;}

      /* Start: Show/Hide Playlist*/
.mejs-controls .mejs-show-playlist button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -16px -16px;
}
.mejs-controls .mejs-hide-playlist button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -16px 0;
}
/* End: Show/Hide Playlist */

/* Start: Previous */
.mejs-controls .mejs-prevtrack button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: 0 -16px;
}
/* End: Previous */

/* Start: Next */
.mejs-controls .mejs-nexttrack button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
}
/* End: Next */

/* Start: Shuffle */
.mejs-controls .mejs-shuffle-on button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -32px 0;
}
.mejs-controls .mejs-shuffle-off button {
  background: transparent url(http://www.mp3mixtape.us/iframes/image/mep/controls-playlist.png) no-repeat;
  background-position: -32px -16px;
}
/* End: Shuffle */

/*Start: Playlist*/
.mejs-playlist {
  position: absolute;
  height: auto !important;
  overflow-y: auto;
  
  }
.mejs-playlist ul {
  padding-left: 15px;
    
}
.mejs-playlist li {
 float: left;
 color: #fcce0a;
 font-weight: bold;
   font-size: 14px;
   height: 15px;
   overflow: hidden;
   
 cursor: pointer;
 
 display: block;
 padding: 2px 2px 2px 2px;
  
}
.mejs-playlist li:hover {
  color: #b70000;
  font-weight: bold;
}
.mejs-playlist li.current {
  color: #0afc55;
  font-weight: bold;
}
 </style>
<p align="center">
<audio id="mejs" type="audio/mp3" controls>
<source src="https://sites.google.com/site/fileblogfor/code/Exel-glory-night-mys2010s.mp3" title="01 - Exel - Glory Night - Temple of the King "></Source>
<source src="https://sites.google.com/site/fileblogfor/code/Metallica-Fuel-Memory-Nothing-mys2010s.mp3" title="02 - Metallica-Fuel-Memory-Nothing"></Source>
<source src="https://sites.google.com/site/fileblogfor/code/Scorpion-When-the-smoke-always-stiil-love-mys2010s.mp3" title="03 - Scorpion-When-the-smoke-always-stiil-love">
</Source>
</audio>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>


<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script src='http://www.mp3mixtape.us/iframes/js/jquery.reverseorder.js'>
</script>

<script src='http://www.mp3mixtape.us/iframes/js/mediaelement-and-player-fs.js'>
</script>

<script src='http://www.mp3mixtape.us/iframes/js/mep-feature-playlist.js'>
</script>
<script>
 $(function(){
        $('video,audio').mediaelementplayer({
                loop: true,
          shuffle: true,
          playlist: true,
   playlistposition: 'bottom',
   audioHeight: 30,
          features: ['playlistfeature', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'playlist', 'current', 'progress', 'duration', 'volume'],
            keyActions: []
        });
    });
</script>
Penjelasan :
Tambahkan code Top Title Header jika diperlukan, copy code berikut :
/*Top Title Header*/
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: #000;
  border-bottom: 3px solid #dad;
}
Pastekan dibawah code :
<style type="text/css">
Kemudian copy code berikut :
<header>
<a href="https://sites.google.com/site/fileblogfor/code/Audio-Player-Mp3-with-Playlist-mys2010s.css" title="Myscript2010"><font size="2" color="aqua"face="arial"> GET IN THE CODE AUDIO PLAYER</a>
</header>
Pastekan dibawah code :
</audio>
Selanjutnya
ganti link gambar seta link mp3 sesuai keinginan,
klik pratinjau untuk melihat hasil dan klik perbarui selesai

Memasang kode Wallpaper Light Gallery
Code ini menampilkan gambar Slide yang dapat di Zoom. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {
  background-color: #152836;
  color: #eee;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.small {
  font-size: 11px;
  color: #999;
  display: block;
  margin-top: -10px
}
.cont {
  text-align: center;
}
.page-head {
  padding: 0px 0;
  text-align: center;
}
.page-head .lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 50px;
  margin-top: 0;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 0px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.btn-lg {
  border-radius: 2px;
  font-size: 18px;
  line-height: 1.33333;
  padding: 0px 0px;
}
.btn-primary:hover {
  background-color: #fff;
  color: #152836;
}
.btn-primary {
  background-color: #152836;
  border-color: #0e1a24;
  color: #ffffff;
}
.btn-primary {
  border-color: #eeeeee;
  color: #eeeeee;
  transition: color 0.1s ease 0s, background-color 0.15s ease 0s;
}
.page-head h1 {
  font-size: 42px;
  margin: 0 0 20px;
  color: #FFF;
  position: relative;
  display: inline-block;
}
.page-head h1 .version {
  bottom: 0;
  color: #ddd;
  font-size: 11px;
  font-style: italic;
  position: absolute;
  width: 58px;
  right: -58px;
}
.mys2010-gallery > ul {
  margin-bottom: 0;
  padding-left: 15px;
}
.mys2010-gallery > ul > li {
  margin-bottom: 15px;
  width: 180px;
  display: inline-block;
  margin-right: 15px;
  list-style: outside none none;
}
.mys2010-gallery > ul > li a {
  border: 3px solid #FFF;
  border-radius: 3px;
  display: block;
  overflow: hidden;
  position: relative;
  float: left;
}
.mys2010-gallery > ul > li a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.mys2010-gallery > ul > li a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.mys2010-gallery > ul > li a:hover .mys2010-gallery-poster > img {
  opacity: 1;
}
.mys2010-gallery > ul > li a .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.mys2010-gallery > ul > li a .mys2010-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.mys2010-gallery > ul > li a:hover .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.mys2010-gallery .justified-gallery > a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.mys2010-gallery .justified-gallery > a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.mys2010-gallery .justified-gallery > a:hover .mys2010-gallery-poster > img {
  opacity: 1;
}
.mys2010-gallery .justified-gallery > a .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.mys2010-gallery .justified-gallery > a .mys2010-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.mys2010-gallery .justified-gallery > a:hover .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.mys2010-gallery .video .mys2010-gallery-poster img {
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  opacity: 0.8;
  width: 48px;
}
.mys2010-gallery.dark > ul > li a {
  border: 3px solid #04070a;
}
</style>
<div class="cont">
<div class="page-head">
<h1>
<font =" color="blue"face="arial"> 
JQUERY LIGHT GALLERY
<span class="version">V1.2.0</span></h1>
<p class="lead">
A lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery.</p>
<a href="http://codepen.io/Myscript2010/" target="_blank" title="VIEW">CODEPEN</a></div>

<div class="mys2010-gallery">
<ul id="lightgallery">
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  480"
      data-sub-html="<h4>MY LOGO</h4>
<p>
Myscript2010s Learn Editing Script Cibeber Cimahi.</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFktHIUfGt3iKiZAYP5FpeKuy0Oo-r2ZqN3JPJAUQV4I4fkOfiP6BahEZdFizemUeoos8IetcGjZLG98_iYZ5TlLPwlzRvUh9ocr8hTUUKbmG5omclrxoURh0qoWYj_80ZNHpVv37UV3Jb/s1600-r/sule1.png">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 375, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg"
      data-sub-html="<h4>BEAUTIFUL</h4>
<p>
A beautiful Girl could it be mine</p>
">
<a href=""> 
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixh-Qe4kk8kaDywwHKSBf7YR4pMSQEsEQiQPDewPq-Swcu3CVSzab3T9bHMpWe8ZmuFVPe3gjjk_Gm-gE3rz7N3cB1OLHRpUkIpeFabyA1BLNNKxh9suk5n0h5zs8IqKPYLa1AcUt1e4n/s1600-r/wanita1-mys2010s.jpg">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg"
      data-sub-html="<h4>MELLISA</h4>
<p>
This girl looks pretty but he is not mine.</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikPN1Jos-Mh6OphzsxD16NY6ikmOBfKjCro437H9L0GSedAMniv9CaIGK4WRJp1M3RNKVZvo4aeMiGk2LlBmil6_UeQK51w1WrQ-U5PKvRhxI_AhZxMyKy1bv7AaJodeDE1ljLadNd5ms/s1600-r/yayang1-mys2010.png">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg"
      data-sub-html="<h4>MARTA MISIAK</h4>
<p>
Pretty girl dreams</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4iZG0QlOQRhrT7SytQIRDU0p7mRJzc3YF7fMEvzGO6s-6X412xLgNMPSNoBqP6tSiPGW2Yl3Im3yJjovpFsl8BegfDOpqqsSXl6Eiw7eQlOsdNlXOjU6FlSnmldQM5YYIfUNstmmyHx0Q/s1600-r/marta-misiak-2560x1600-mys2010.jpg">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
</ul>
<span class="small">Click on any of the images to see lightGallery</span>
</div>
</div>
<link rel='stylesheet prefetch' href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css'>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script src='https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-fullscreen.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-autoplay.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-zoom.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-hash.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-pager.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/external/jquery.mousewheel.min.js'></script>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>
<script>
      $(document).ready(function () {
    $('#lightgallery').lightGallery({ pager: true });
});      
    </script>
Penjelasan :
Tambahkan code Top Title Header jika diperlukan. Copy code brikut :
/*Top Title Header*/
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
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: #f0f;
  border-bottom: 3px solid #dad;
} 
Pastekan dibawah code :
<style class="Mys2010-styles">
Kemudian copy code berikut :
<header> 
<div class="Top Title Header">
<p align="center">
<a href="http:// Link Title" title="Myscript2010"><font size="3" color="#dad"face="arial">MUSIC</a> 
</header>
Pastekan diatas Code :
<link rel='stylesheet prefetch' href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css'>
Selanjutnya Ganti Link gambar, link title
dan edit code warna sesuai keinginan, klik pratinjau untuk melihat hasil klik perbarui selesai