Transparent Background

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

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

body {);color:red;height:100%;overflow:hidden;}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:20px 0;
  position: fixed;
  top: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #CC0099 0%, #FE80DF 100%);
  border-bottom: 3px solid #CC0099; 
}
.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;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #FE80DF;
border-top: 2px solid #CC0099;
z-index: 9999;
} 
h2 {
padding: 25px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #CC0099 50%, transparent 90%); 
}
 /* text below */
body, html {
  height: 100%;
  font-family: 'agency fb', sans-serif;
}
.credits a  { color: #FF6347; }
.credits {
  position: absolute;
  bottom: 94px;
  left: 110px;
  color: #dad;
  font-weight: 400;
  font-size: 22px;
  z-index: 1;
 -webkit-animation: shadow 9s ease-in-out infinite;
          animation: shadow 9s ease-in-out infinite;
}
@keyframes shadow { 
  50% {
      text-shadow: 0 12px 7px #CCFF00,  
 0 -10px 24px #0033CC;
  }
}

body
{
  width: 95%; 
  height:100%;
  margin:0em 5%;
  background-color:#dad;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoUvtBXOvM7dOeMbdHks7XNMWbs7G7HnEkOcWIo8YUj4XXXcxVIQDqKB0wpcj9gKRSLW1MI80DujzgQAxHPTYkaqZl4hPdRzPYFMJP1uDREZlWAaYmyVExk2hk_ytPyVlcM4yx9YjPYxv/s1600/Grey-White-M2010.png");
  background-position: center bottom;
  animation: animatedBackground 30s linear infinite;
  /* Safari and Chrome: */   
-webkit-animation: animatedBackground 30s linear infinite;
}
@keyframes animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
@-webkit-keyframes  animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
#content
{
  position:fixed;
  top:5em;
  height:1em;
  width:19em;
  background-color:rgba(1,1,1,0.5);
  color:white;
  padding:2em;
  border-bottom-right-radius: 5em;
  -webkit-border-bottom-right-radius: 5em;
   border-top-left-radius: 5em;
  -webkit-border-top-left-radius: 5em;
}
/*end*/
 /* BLUR-M2010: */
.blurred-bg.tinted {
  background: rgba(4,000,000, .4);
}
.box {
  width: 500px;
  height: 300px;
left:380px;
  left: -webkit-calc( 50% - 250px );
  top: 20%;
  position: absolute;
  border-radius: 5px;
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  transition: box-shadow .3s ease;
}
.box:active {
  cursor: move;
  -moz-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}
.box .content {
  margin: auto;
}
h1, h3, a, p {
  color: white;
  font-weight: 100;
}
.tinted h1, .tinted h3, .tinted a, .tinted p {
  color: #8E006B;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}
h3 {
  font-size: 24px;
}
p {
  margin: 20px;
}
p.related {
  text-transform: uppercase;
  font-weight: 700;
  color: #6B006B;
}
p.related a {
  font-weight: 700;
  text-decoration: none;
}
p.related a:hover {
  text-decoration: underline;
}

<div id="box1" class="box blurred-bg tinted">
<div class="content">
<h1>
Transparent Background</h1>
<h3>
<span style="color:#6B006B">Source Code By. <a href="http://codepen.io/vollnixx/pen/AJDwo"target="_blank" title="Sumber Codepen"
onclick="window.open('http://codepen.io/ariona/pen/geFIK')">Vollnixx - Rian Ariona</a></h3>
<p>
<span style="color:#111">DRAG THIS BOX TO MOVE AROUND</b></p>
<p class="related">
See also: <a href="http://codepen.io/Myscript2010/pen/zoLmNx"target="_blank"title="Mari Belajar">Code in the edit codepen</a></p>
</div>
</div>
</div>

<div class="credits">
<p>
CODEPEN  : <a href="http://codepen.io/hello"target="_blank"title="Login/Signup">&nbsp; IS a PLACE TO WRITE</a>  <p>
DOWNLOAD : <a href="http://Link Download"title="Mari Belajar">&nbsp; FULL CODE</a>&nbsp; EDITED BY. <a href="http://myscript2010s.blogspot.co.id"target="_blank"title="Visit Myscript2010">&nbsp;M-2010</a>&nbsp; COPYRIGHT 2016 <a href="http://Link Download"title="Download Full Code">&nbsp;CIBEBER CIMAHI</a></p>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="http://Link Download" target="_blank"title="Myscript2010s"><h2>
Myscript2010s</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;">
<a href="http://sample-mys2010.blogspot.co.id/2016/12/transparent-background.html" target="_blank"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script> 

<script>$(function () {
    $('.box').draggable();
}); 
</script>

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

DEMOSHOW

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

Category: Transparent Background

Kode Iklan Melayang

Kode Iklan Melayang
Penerapannya Sebagai Berikut :
Login ke akun blog klik tataletak dan klik tambah gadged,
copy code dibawah ini pastekan kedalam gadged tersebut.
Klik Pratinjau untuk melihat hasil kemudian klik perbarui selesai

* Kode Iklan Melayang 1

<style class="M-2010">
#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:brown;
 margin:0;
 padding:4px;
 width: 250px;
 border: 1px solid #444;
}
</style>

<div id="topbar">
<div class="tombol">
<a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=8776766672634547419" onclick="closebar(); return false" style="text-decoration: none;">
<button>CLOSE</button></a>
</div>

<div class="isi_iklan">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ovzgJRfjSFjCJ2h7RO0PpB-dsMdP4WB_7Vo7Cd0a-K6x87XWdKJY-LDrRXiCDvlcrlmdiI5IidPgt-0jpdnDX7rDKFCJZ7UfK4jDAlc8ZM47i3JyIUOebLkLvkNyBBqQvmq_YVbUtW0/s1600-r/Mari_belajar_mys2010s.gif" height="100" name="e902" width="250" /></a>

<div align="center">
<a href="https://Link Download"target="_blank" title="Mari Belajar"><font size="3" color="#111"face="arial"> Download Kode Iklan</a>
</span></div>
</div>
</div>

<script src="https://sites.google.com/site/code6916/file/Kode-Iklan-Melayang-Mys2010.js" type="text/javascript">
</script>

</script>
<script>var persistclose = 1;
var startX = 20;
var startY = 20;
var verticalpos = 'fromtop'; 
</script>

* Kode Iklan Melayang 2

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>

<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:160px;z-index:999;-webkit-transform:translateZ(0);'>
<div>
<a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'>
<img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DqZSiWPIA4Q-mRdBYHdgSUkLJIIqMgLgnBKu-nsbdQ3lm3NHSh4eeepcB1_MrWjlBTv4k4UkC5Gmt_Bhes6n_lwMJXElgVjFoE8CdXF83yGWl5WmUDRPotlRdQIbVVkX-o_SUGjO7OJY/s1600/Close-M2010.gif' title='close button' style='vertical-align:middle;' /></a></div>

<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='https://aboutme.google.com' target="_blank" title="Mari Belajar"><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner M-2010' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRso2NBP1eUy_PvsDjuZN3wi9SbksmJu8o7IRwWOejhL2T-6kIzW4XwhAHPtO-xveWBAvsNClfknPsE82E_Z_a8iuDJfaJgIvYgeRLV77I9HSkEh4VoauR7FEPB9VDFkT7SuAigicP9I/s1600/Darkwood-mys2010s.jpg'/></a>
</div>
</div>

Penjelasan :
Edit kode tersebut sesuai keinginan
Design Code is Edited by. M-2010 on Codepen

BACKHOME

* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 1

* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 2

Myscript2010

Category: Kode Iklan Melayang Demoshow

Kode Iklan Melayang

Kode Iklan Melayang
Penerapannya Sebagai Berikut :
Login ke akun blog klik tataletak dan klik tambah gadged,
copy code dibawah ini pastekan kedalam gadged tersebut.
Klik Pratinjau untuk melihat hasil kemudian klik perbarui selesai

* Kode Iklan Melayang 1

<style class="M-2010">
#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:brown;
 margin:0;
 padding:4px;
 width: 250px;
 border: 1px solid #444;
}
</style>

<div id="topbar">
<div class="tombol">
<a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=8776766672634547419" onclick="closebar(); return false" style="text-decoration: none;">
<button>CLOSE</button></a>
</div>

<div class="isi_iklan">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ovzgJRfjSFjCJ2h7RO0PpB-dsMdP4WB_7Vo7Cd0a-K6x87XWdKJY-LDrRXiCDvlcrlmdiI5IidPgt-0jpdnDX7rDKFCJZ7UfK4jDAlc8ZM47i3JyIUOebLkLvkNyBBqQvmq_YVbUtW0/s1600-r/Mari_belajar_mys2010s.gif" height="100" name="e902" width="250" /></a>

<div align="center">
<a href="https://Link Download"target="_blank" title="Mari Belajar"><font size="3" color="#111"face="arial"> Download Kode Iklan</a>
</span></div>
</div>
</div>

<script src="https://sites.google.com/site/code6916/file/Kode-Iklan-Melayang-Mys2010.js" type="text/javascript">
</script>

</script>
<script>var persistclose = 1;
var startX = 20;
var startY = 20;
var verticalpos = 'fromtop'; 
</script>

* Kode Iklan Melayang 2

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>

<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:160px;z-index:999;-webkit-transform:translateZ(0);'>
<div>
<a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'>
<img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DqZSiWPIA4Q-mRdBYHdgSUkLJIIqMgLgnBKu-nsbdQ3lm3NHSh4eeepcB1_MrWjlBTv4k4UkC5Gmt_Bhes6n_lwMJXElgVjFoE8CdXF83yGWl5WmUDRPotlRdQIbVVkX-o_SUGjO7OJY/s1600/Close-M2010.gif' title='close button' style='vertical-align:middle;' /></a></div>

<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='https://aboutme.google.com' target="_blank" title="Mari Belajar"><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner M-2010' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRso2NBP1eUy_PvsDjuZN3wi9SbksmJu8o7IRwWOejhL2T-6kIzW4XwhAHPtO-xveWBAvsNClfknPsE82E_Z_a8iuDJfaJgIvYgeRLV77I9HSkEh4VoauR7FEPB9VDFkT7SuAigicP9I/s1600/Darkwood-mys2010s.jpg'/></a>
</div>
</div>

Penjelasan :
Edit kode tersebut sesuai keinginan
Design Code is Edited by. M-2010 on Codepen

DEMOSHOW

* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 1

* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 2

Category: Kode Iklan Melayang