Mys2010 on Codepen: Text Marquee Mari Belajar | SEO Friendly Responsive Blogger Myscript2010s

Memasang Kode Text Marquee 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 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,  #fff 2%, #111  70%);
  border-bottom: 3px solid #333;  
}
.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%); 
}
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}

.mys2010 {
  width: 850px;
  margin:180px 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:20px;
  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;
} </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">
<br>
<br>
<br>
<p align="right">
Mari Belajar<br> 
Belajar : Menurut Para Ahli </font>
<br><br>
<font size="4" color="aqua"face="agency fb">
<p align="right">
Howard L. Kingsley dalam Dantes (1997)<br>
Belajar adalah suatu proses bukan produk. <br>
Proses dimana sifat dan tingkah laku <br> 
ditimbulkan dan diubah melalui praktek dan latihan.<br>
<br><br>
<p align="right">
Hilgard dalam Nasution (1997:35)<br>
Belajar adalah proses melahirkan atau mengubah <br>
suatu kegiatan melalui jalan latihan yang dibedakan <br>
dari perubahan-perubahan oleh faktor-faktor yang tidak termasuk latihan.<br>
<br><br>
<p align="right">
Robert M. Gagne (Syaiful Sagala, 2010:17)<br>
Belajar merupakan kegiatan yang kompleks,<br> 
dan hasil belajar berupa kapabilitas,<br> 
timbulnya kapabilitas disebabkan: <br>
(1) - stimulasi yang berasal dari lingkungan; <br>
(2) - proses kognitif yang dilakukan oleh pelajar. <br>
<br><br>
<p align="right">
Menurut Winkel<br>
Belajar adalah 
semua aktivitas mental <br>
atau  psikis yang berlangsung <br>
dalam interaksi aktif dalam lingkungan, <br>
yang menghasilkan perubahan-perubahan <br>
dalam pengelolaan pemahaman.<br>
<br><br>
<p align="right">
Menurut Morgan, dkk ( 1984 )<br>
Memberikan definisi mengenai belajar <br>
“Learning can be defined as any relatively <br>
permanent change in behavior which accurs as <br>
a result of practice or experience”, <br>
Yaitu bahwa perubahan perilaku itu sebagai <br>
akibat belajar karena latihan  (practice) <br>
atau karena pengalaman ( experience ).<br>
<br><br>
<p align="right">
Menurut James O. Whittaker.<br>
Belajar adalah proses <br>
dimana tingkah laku ditimbulkan<br>
Belajar pada hakekatnya adalah proses interaksi <br>
terhadap semua situasi yang ada di sekitar individu.<br>
Pembelajaran adalah seperangkat tindakan <br>
yang dirancang untuk mendukung proses belajar siswa <br>
dan istilah pembelajaran <br>
berhubungan erat dengan pengertian belajar dan mengajar.<br>
<br><br>
<p align="right">
Menurut Skinner ( 1985 )<br>
Memberikan definisi belajar adalah“<br>
Learning is a process of progressive behavior adaption”, <br>
Yaitu bahwa belajar itu merupakan suatu proses <br>
adaptasi perilaku yang bersifat progresif <br>
atau Belajar merupakan hubungan antara stimulus <br>
dan respons yang tercipta melalui proses <br>
tingkah laku yang bersifat progresif.<br>
<br><br>
<p align="right">
Menurut Mc. Beach ( Lih Bugelski 1956 )<br>
Memberikan definisi mengenai belajar. <br>
“Learning is a change performance as a result of practice”,<br> 
Ini berarti bahwa belajar membawa perubahan dalam performance, <br>
dan perubahan itu sebagai akibat dari latihan ( practice ). <br>
<br><br>
<p align="right">
Menurut Thursan Hakim, <br>
Belajar Secara Efektif ( 2005 )<br>
Belajar adalah suatu proses perubahan <br>
di dalam kepribadian manusia, <br>
dan perubahan tersebut ditampakkan dalam <br>
bentuk peningkatan kualitas dan kuantitas <br>
tingkah laku seperti peningkatan kecakapan, <br>
pengetahuan, sikap, kebiasaan, pemahaman, <br>
keterampilan, daya pikir, dan lain-lain kemampuan.<br>
<br><br>
<p align="right">
Beli Masa Depan Anda Dengan Ilmu<br>
Bukan hanya kehidupan anda yang dimudahkan<br>
saat anda rajin belajar<br>
tapi juga kehidupan orang lain<br>
belajar akan memberikan anda pemahaman baru<br>
sehingga anda bisa menghadapi tantangan baru<br>
<br><br>
All Sources <br>
edited by. Myscript2010 <br>
Cibeber Cimahi<br>
</font></a>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<h2>
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#222;"> EDITED BY. <a href="Link Download"title="Download Full Code"><span style="color: #222; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#222;"> COPYRIGHT <a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Mari Belajar"><span style="color: #222; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; WEBSITE </a> 
</div></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://sample-mys2010.blogspot.co.id/2016/05/popup-mari-belajar.html" target="_blank" title="Mari Belajar"><b>LETS</b></a></span><span><a href="http://sule-m2010.blogspot.co.id/2016/07/popup-mari-belajar.html" title="Myscript2010"><b>HOME</b></a></span></h1>

<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 Animasi Code by. Michiel Bijl
Text Marquee Code by. Dynamicdrive

Audio Mp3 Code by. Cartoonist arif
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

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

Category: Text Marquee Mari Belajar

Mys2010 on Codepen

Text Marquee Mari Belajar

POPULAR

Blog Archive