Mys2010 on Codepen

Memasang Kode Popup Mari Belajar
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 :  Get Blank Template.   edit background warna sesuai keinginan 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:aqua;height:100%;overflow:hidden;}
body {
  background: rgba(1, 2, 2, 2.5);
} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:2px 0;
  position: fixed;
  top:1px;
  width: 100%; 
height:30px;
background: -moz-linear-gradient(top,  #999 2%, #222  70%);
}
.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;
text-align: center;
text-shadow: 0px 0px blue;  
font-size:  11px;
background:  #222;
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%, #555 50%, transparent 90%); 
}

body {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8ZahYyu3jieFte9RVGZBbNItWnZWaqsskV62uksh8syFTPpeZ564qNdZGTzZA8_x2W-Z7ToNaD6T_Li49g8hyf1bh9RztcycHZcB90TDGO-U15_hrqTETokWXQ8nPGvHf8TI7zucrjo/s1600/burung-mys2010.png");
    background-repeat: no-repeat;
background-size: 280px 260px;
background-attachment: fixed;
    background-position: center; 
}
/*Menu Transfarent*/
.user_box {
background: 
rgba(0, 0, 0, 0.16);
height:45px;
position: absolute;
width: 200px;
left: 10px;
top:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
}
.user_img {
height: 34px;
overflow: hidden;
position: absolute;
top: 5px;
width: 34px;
left: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
    z-index: 999;
} 
.user_img img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
} 
.notif {
position: absolute;
right: 17px;
top:5px;
height: 12px;
width: 9px;
background: 
rgba(255, 255, 255, 0.1);
padding: 9px 12px 9px 16px;
font-weight: 800;
color: 
white;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.2);
text-shadow: 1px 1px 1px 
rgba(0, 0, 0, 0.5);
}
.user_button {
position: absolute;
font-size: 10px;
color:#111;
background: rgb(0,115,0); 
text-decoration:none;
padding: 1px 15px 3px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 1px 1px 0 0 
rgba(255, 255, 255, 0.3), inset -1px -1px 0 0 
rgba(0, 0, 0, 0.3), 0 0 3px 0 
rgba(0, 0, 0, 0.5);
top: 23px;
left: 65px;
text-shadow: 1px 1px 0 
yellow;
}
.quicknavi {
position: absolute;
left: 220px;
top: 10px;
}
.quicknavi li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
float: left;
background: 
rgba(0, 0, 0, 0.16);
margin-right: 10px;
}
.quicknavi li a {
padding: 16px 15px 16px 14px;
display: inline-block;
color: 
green;
text-decoration: none;
font-size: 13px;
text-shadow: 1px 1px 0px 
rgba(0, 0, 0, 0.4);
}
.quicknavi select {
border: 1px solid 
#2E5F8F;
padding:6px;
margin-right: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
}

.mys2010 {
  width: 850px;
  margin: 80px auto;
}
.mys2010 ul li {
  float: left;
  list-style: none;
  width: 160px;
  transition: all 1s;
  position: relative;
  overflow: hidden;
  border-left: 1px solid #FFD700;
  border-left-width: 2px;
  box-shadow: 0px 0px 17px  #f0f;
}
.mys2010 ul li a {
  color: #FFD700;
  text-decoration: none;
}
.mys2010 ul:hover li {
  width: 32px;
  -webkit-filter: grayscale(0.8);
  filter: grayscale(0.8);
  transition: all 2s;
}
.mys2010 ul li:hover {
  width:640px;
  -webkit-filter: grayscale(0) hue-rotate(300deg);
  filter: grayscale(0) hue-rotate(300deg);
}

.mys2010-teks-img {
  box-sizing: border-box;
  background:rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-bottom: 2.5em;
  box-shadow: 0px 1px 10px #dad;
  border-bottom: 0.25em solid #f00;
  padding: 0 1em 1em;
}
.mys2010-teks-img h4 {
  margin: 0;
  padding: .5em  0 .25em 0;
  font-weight: 700;
  font-size: 1.75em;
  text-transform: uppercase;
  color: #FFF8DC;
}
.open {
  border: 1px solid #fff;
  padding: 1em 2em;
  background: transparent;
  color: rgba(255, 99, 71, 0.25)
  text-transform: uppercase;
  border-radius: .97em;
  text-align: center;
  display: block;
  width:170px;
  margin: auto auto;
  margin-top:50px;
  outline: none;
}

<button class="open">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5oTcY-Y5GUOwQEnhaGSR6WmbLosZTpjAFiFRHD5dO248iXTAwImPcc70pPx2fuAJb3q-ztGojuAUXs1WbWXQ0w8O2jUpkfPjhSc0sOl6cB7jdx5HhyLJZQc7G187msukXY0jTOAUCnw/s1600/Cina-mys2010.png" name="e902" border="0" width="30" height="30" />
</button> 

<body translate="no" >
<aside class="mys2010-teks-img">
<h4>
<br>
MARI BELAJAR</br></h4>
<aside class="mys2010-teks-img">
</br>Belajar adalah suatu proses usaha yang dilakukan individu untuk memperoleh suatu perubahan<p>
tingkah laku yang baru keseluruhan, sebagai hasil pengalaman individu itu sendiri dalam interaksinya dengan lingkungan. Menurut Moh. Surya (1981:32) </p>
</aside>
<aside class="mys2010-teks-img">
<center>
<a href="http://demoshow-mys2010.blogspot.co.id/2016/05/popup-mari-belajar.html">   
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9obH7fRL5Jd8tYexey26wTf0XI44Zr3wXzPvdiKNez3EwUb50xxKj0n23e2ZZBsI5JeGZYPt8h2rnOHwa0km-KED67IfiTtIaOGBYtdf_9W1ugrLwmnQwHS0c_K4r-BbEnUQTXx5zzY/s1600/M-2010.png" name="e902" border="0" width="100" height="109" /></a>    
<center>
<a href="https://www.google.com/maps/place/Jl.+Cibeber,+Cimahi+Sel.,+Kota+Cimahi,+Jawa+Barat+40531,+Indonesia/@-6.884849,107.5239751,17z/data=!3m1!4b1!4m2!3m1!1s0x2e68e4f89ade0ddf:0x402575b6fc6c1565" target="_blank" title="alamat">
<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0EWe5LMLUDEd3U1DnqR-iI6f8GeV1p6wiANLns4J4HBnfzbSWBTp1JZAa6TW870MGgilxyDzU1p1efAXrQJTnciBrN1LvSH6YQJTmgVmJRnsH127dWsWfkAPDynah53KzdiU64O1TIk/s1600-r/Globe_mys2010.gif" height="29" name="e902" width="28"></a>
<p align="center">
<font size="3" color="green"face="vivaldi">Edited by. Myscript2010</font> 
</center>
</button>
</div>
</form>
<div align="center">
<header> 
<a href="http://codepen.io/banunn/pen/zkpHD"target="_blank" title="Myscript2010s"><span style="color:#f0f"><b>SOURCE CODE</b></a>
<div class="top_head">
<code>
</header> 
</div>
<div class="mys2010">
<div class="ap" id="ap">
<div align="center">
<span style="color:aqua">
<h2>
<div class="user_box">
<div class="user_img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifkZd1FDvIRI_uEKLDjWtzlPRjSpTGGpZMSgHuU44H6v2X57XUaHKLDh9zcJCc2S8RlCDpBqqT-nGRN4FpcjvdQKXNFx2rehjDEub7XxzlKYN0x9FgjUBmaDCPXOa9TNc16UYzbBw0Cdc/s1600-r/1-Y.png" />
</div>
<h1>
Myscript2010</h1>
<a href="https://plus.google.com/u/0/101254379497511200564/posts"target="_blank" title="Myscript2010s" class="user_button">Gg Pluss</a>
<div class="notif">
<span class="">07. </span>
</div>
</div>
<!-- Quicknavi box -->
<div class="quicknavi">
<ul>
<li><a href="http://sample-mys2010.blogspot.co.id/2016/05/popup-mari-belajar.html"target="_blank" title="Myscript2010s">Website</a></li>
<li><a href="http://sule-m2010.blogspot.co.id/2016/07/popup-text-animated-mari-belajar.html">Mari Belajar</a></li>
<li><a href="https://Link Download" title="Download Full Code">Download</a></li>
</li>
</ul>
</2></a> 

<js Menu>
<link rel='stylesheet prefetch' href='//codepen.io/assets/reset/reset.css'><script src='//codepen.io/assets/libs/prefixfree.min.js'></script></JS Menu End>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
      $('.mys2010-teks-img').hide();
$('.open').click(function () {
    $('.mys2010-teks-img').slideToggle();
});     
    </script> 

Little UI by. Bartos La
Popup code by. Brock Nunn

Design code is edited by. Mys2010 On Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Popup Mari Belajar