HomeArchives for 05/06/16

Kode Teks Marquee dan Teks Animasi

Memasang Kode Teks Marquee dan Teks Animasi
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 type="text/css">  
body {);color:aqua;height:100%;overflow:hidden;}
body {
  background: rgba(1, 2, 2, 2.5);
}
body {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXPr0JTi7UjtONEmMZRdhMA-_l4HHdkOVUP4dNj-5TBuSYpEoCK93kpFc4vKBw99m0tLuduNOkRfwRfYxDGKMyqx9HL9XUfH5MHSKNunfx6Zxk3hLZG3bWSe_pqo_4Dm51dqcdT0PI8U/s1600/belajar-menurut-mys2010.gif");
    background-repeat: no-repeat;
background-size: 300px 260px;
background-attachment: fixed;
    background-position: center; 
}
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: -moz-linear-gradient(top,  #444 2%, #111  70%);
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 67px;
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:  #fff;
border-top: 2px solid #FF0000;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 10%, transparent 60%); 
background: linear-gradient(transparent 10%, #333 10%, transparent 60%); 
}

.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);
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   #FF69B4 ;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 50px;
  height: 1.4em;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  color: rgba(255, 255, 255, 0.55);
  font-family: agency fb, helvetica neue, sans serif;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: .35em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -webkit-animation: opacity infinite 12s;
          animation: opacity infinite 12s;
}
h1 span {
  display: block;
  position: absolute;
  top: 0;
}
h1 span:nth-child(1) {
  right: 100%;
  margin-right: -.4em;
}
h1 span:nth-child(2) {
  left: 100%;
}
h1::before, h1::after {
  display: block;
  position: absolute;
  top: 50%;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #FFD700;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background:  #00008B;
  content: '';
}
h1::before {
  left: 18px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}
h1::after {
  right: 18px;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

.animation-mys2010 {position:absolute;bottom:0;width:100   ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:150px;top:210px;
  animation-name: float;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
  .backwall {position:absolute;width:6%;height:60%;}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}

.player {    
    width: 210px;
    height: 5px; 
    border-radius: 10px;
    padding: 0px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    float: left;
    position: relative;
    cursor: pointer;
    color: #dad;}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 0px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 7px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 7px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ff0;
}
.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;
}

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 300px; /*marquee height */
overflow: hidden;
padding: 2px;
padding-right: 1114px;
}

#original-link, #load-song, #credits, #tested {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#original-link, #load-song div {
    text-decoration: underline;
    cursor: pointer
}
#load-song, #credits {
    text-align: right;
    right: 0
}
 #tested, #credits {
    bottom: 0
}</style>

<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZb1jZBgnGnZ9e-CYzEJl90VyvzGCQBr2sDEfwRnb7CZ8Vt0GUgNyRp_kjPyrue8oxnNO0Yx3gfb068TM2OeuU1djzdDjS0R8HZD4d4eA8vQSVIpZ593L9kPVuh0Uj8IZjJEpwSRFExnc/s1600/lampu-mys2010.gif" height="49" name="e902" width="38" /> 

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<font size="4" color="aqua"face="script mt bold">
<p align="right">
Mari Belajar 
Belajar : Menurut Para Ahli </font>
<font size="4" color="aqua"face="agency fb">
<p align="right">
Howard L. Kingsley dalam Dantes (1997)
Belajar adalah suatu proses bukan produk. 
Proses dimana sifat dan tingkah laku 
ditimbulkan dan diubah melalui praktek dan latihan.<p align="right">All Sources 
edited by. Myscript2010 
Cibeber Cimahi
</font></a>

<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Mari-Belajar-Mys2010.css"title="Myscript2010s"> 
<h2>
<font size="1" color="GREEN"face="arial"> DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/code6916/lagu/Guru-tersayang-mys2010.mp3" type="audio/mpeg">
</audio>
</div>
</header>
<h1>
<span><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"><b>Mys2010</b></a></span><span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Css Effects"><b>Effects</b></a></span></h1> 

<div id="tested">
<font size="3" color="#FF69B4"face="vivaldi"> &nbsp; &nbsp; &nbsp; &nbsp; Edited by . <a href="http://demoshow-mys2010.blogspot.co.id/2016/05/popup-mari-belajar.html" title="Home Page"> Myscript2010 &nbsp; </a> Home Page </a> 

<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>
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>
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",50)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>
Text Animated by. Michiel Bijl
Text Marquee code by. Dynamicdrive
Audio Mp3 Code by. Cartoonist arif
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy & paste you canDownload Here Teks Marquee Full Code
See also code popup and little new UI with effect hoverClick Here To see the code

Category:

Popup Mari Belajar

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

Category:
Subscribe to: Posts (Atom)