Photo in the Frame

Memasang kode Photo in the Frame
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style 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

DEMOSHOW

Category: Photo in the Frame