Memasang Kode Quote share
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 pratinjau  untuk melihat hasil  dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini,  pastekan kedalam  Entri halaman baru HTML  dan  klik simpan selesai
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;} 
body {
background:#000;} 
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
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;
font-size:  11px;
background:  RGBA(243, 241, 237, 1);
border-top: 2px solid #222;
z-index: 9999;
}    
#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:40px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;}
html,
body {
  width: 100%;
  height: 100%;
  text-rendering: optimizeLegibility; }
body {
  background-color: RGBA(243, 241, 237, 1);
  font-size: 62.5%;
  text-align: center;
  -webkit-font-smoothing: antialiased; }
header.title {
  display: block;
  margin: 3% auto;
  width: 90%;
  height: auto;   
  background-color: RGBA(201, 213, 219, 1);  
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  box-shadow: 1px 1px 0px RGBA(201, 213, 219, 1), 2px 2px 0px RGBA(201, 213, 219, 1), 3px 3px 0px RGBA(201, 213, 219, 1), 4px 4px 0px RGBA(201, 213, 219, 1), 1px -1px 0px RGBA(201, 213, 219, 1), 2px -2px 0px RGBA(201, 213, 219, 1), 3px -3px 0px RGBA(201, 213, 219, 1), 4px -4px 0px RGBA(201, 213, 219, 1), -1px -1px 0px RGBA(201, 213, 219, 1), -2px -2px 0px RGBA(201, 213, 219, 1), -3px -3px 0px RGBA(201, 213, 219, 1), -4px -4px 0px RGBA(201, 213, 219, 1), -1px 1px 0px RGBA(201, 213, 219, 1), -2px 2px 0px RGBA(201, 213, 219, 1), -3px 3px 0px RGBA(201, 213, 219, 1), -4px 4px 0px RGBA(201, 213, 219, 1);
  border: dashed RGBA(233, 238, 242, 1) 2px;
  border-radius: 8px; }
  @media all and (min-width: 50em) {
    header.title {
      margin-top:-1px;
      width: 80%; } }
.lines-text-after-before, h2 {
  display: table;
  white-space: nowrap; }
  .lines-text-after-before:after, h2:after, .lines-text-after-before:before, h2:before {
    content: '';
    display: table-cell;
    width: 50%;
    background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 2px));
    background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 2px));
    background-clip: padding; }
  .lines-text-after-before:after, h2:after {
    border-left: 1em solid transparent; }
  .lines-text-after-before:before, h2:before {
    border-right: 1em solid transparent; }
section {
  display: block;
  margin: 3% auto; }
h1, h2, h3 {
  font-family: 'Rye', cursive;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 1px 1px 0px white;
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }
h1 {
  padding: 10px;
  font-size: 2.5em;
  color: RGBA(51, 61, 61, 1); }
  @media all and (min-width: 50em) {
    h1 {
      padding: 15px;
      font-size: 4.5em; } }
h2 {
  padding: 0 15%;
  font-size: 2.5em;
  color: RGBA(51, 61, 61, 1); }
  @media all and (min-width: 50em) {
    h2 {
      padding: 0 30%;
      font-size: 3.5em; } }
h3 {
  padding: 15px 0;
  font-size: 1.3em;
  color: RGBA(194, 215, 232, 1); }
  @media all and (min-width: 50em) {
    h3 {
      padding: 0 35%;
      font-size: 1.5em; } }
p {
  padding: 3% 25%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.5em;
  font-weight: 100;
  line-height: 1.2;
  text-shadow: 1px 1px 0px white;
  color: RGBA(51, 61, 61, 1);
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }
  @media all and (min-width: 50em) {
    p {
      padding: 3% 30%;
      font-size: 2em; } }
footer {
  margine: 0;
  padding: 0;
  display: block; }
footer p {
  padding: 3%;
  display: inline; }
footer p a {
  text-decoration: none;
  color: RGBA(80, 166, 233, 1);
  box-shadow: 0 2px 0px RGBA(80, 166, 233, 1);
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }
footer p a:hover {
  color: RGBA(194, 215, 232, 1);
  box-shadow: 0 2px 0px RGBA(194, 215, 232, 1); }
</style>
<script>
window.console = window.console || function(t) {};
</script>
 <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*"); }
</script>
</head>
<body translate="no" >
<hr/>
<p class="lines-text-after-before">Reduce testing the browser</p>
<header class="title">
  <h1>Myscript-2010 cibeber cimahi</h1>
</header><br/>
<section>
  <header>
    <h2>quote</h2>
    <p>Let's share together M-2010 <br> about around the website that we design</p>
    <a href="https://Link Judul"title="Mari Belajar">
<span style='font-size:12.0pt;font-family:agency fb;color:#000;font-weight:bold;'>COPYRIGHT 2010 @ 2017</h3>
  </header>
</section>
<hr/>
<section>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#000;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color:blue; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family:arial;font-size:12px;color:#000;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color:blue;font-size:14px;">&nbsp; &copy; - 2017 </a>&nbsp; CODEPEN </a> 
</div>
<div align="center" style="margin-top:16px">
<h4><audio id="mys2010" src="https://sites.google.com/site/man349719/song/Axel-Rudi-P-Crest4-glory-night-Instru-M2010s.mp3"controls="controls"></audio></h4>
</a></div>
</div>
<text>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<music>   
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<link Audio mp3>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script src="https://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js">
</script>
<script>$(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mejsPlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mejs-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mejs:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mejsPlayNext(currentPlayer) {
    if ($('.mejs-list li.current').length > 0) {
        var current_item = $('.mejs-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mejs-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
} 
</script>
Audio by. Jereme Causing
Source Code by. François Lesenne
Design code is edited by. M-2010 on Codepen
If you want to directly copy and paste you canDownload  quote share about websites 

Memasang kode Simple Parallax
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 templateyang tersedia pada sumber  berikut ini   :   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
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style class="M-2010-styles">
body {
  background: #222222;
}
 .btn {
      padding: 10px 20px;
      background-color: #333;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
  }
  .btn:hover, .btn:focus {
      border: 1px solid #333;
      background-color: #fff;
      color: #000;
  }
 .modal-header, h4, .close {
      background-color: #333;
      color: #fff !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-header, .modal-body {
      padding: 40px 50px;
  }
  .nav-tabs li a {
      color: #777;
  }
.navbar {
      margin-bottom: 0;
      background-color: #2d2d30;
      border: 0;
      font-size: 11px !important;
      letter-spacing: 4px;
      opacity: 0.9;
  }
  .navbar li a, .navbar .navbar-brand { 
      color: #d5d5d5 !important;
  }
  .navbar-nav li a:hover {
      color: #fff !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #29292c !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
      color: #fff;
      background-color: #555 !important;
  }
  .dropdown-menu li a {
      color: #000 !important;
  }
  .dropdown-menu li a:hover {
      background-color: red !important;
  }
/*simple-Parallax*/
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCk9eNTq81tIbiEMa7P4OXEKjCxNwscfcnWDjgF6Ug8Riqew5TpwFJRPbuJWn4MwwbEOefQgR0PDJ439_DauA6SACrIVCX0OzCfxpVhJBvGD7FeO2GI5bMbGZ7sinkAJDdtVDJ2oCB3Gc/s1600/Triplekred-M2010.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.simple {
  padding-top: 50px;
}
.texttop {
font-family: agency fb, sans-serif;
  font-size: 5em;
 text-shadow: 8px 8px 8px rgba(0,0,0, 20);
}
 .btn:hover {
 color: #fff;
  background-color: #1A4666;
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.pad-section {
  padding: 50px 0;
}
.pad-section img {
  width: 100%;
}
#simple {
}
#simple1 {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bJyPmPYjElRR4s8ar9zmKTPjV4JoadcCzStmXUcDdUkvpXQgyNO2q8TKnkJCPJhnXlrPb6Iw-u9SGjO83yNkbVC_oxlpkwQ6_EjVzlYoEZtlQzeQt_3EKFIVgnJqydA7ESPFd1GltmU/s1600/bedroom-M2010s.jpg") no-repeat center center fixed; 
  display: table;
  height: 400px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#simple2 {
}
#bg {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorcRYf731ayfz4mAAcAgwCrFqYzMdoPr1JvtWZpokYohn9y28qOmafVcUSY839hYN3wCtEU9HpaaQkXS93ZmgyPo7gxhH_P8Bj2Z7ryKBj9McFeXKZLetEQ4XDTZINK910lnm9T-Uras/s1600/bedrooms-M2010.jpg") no-repeat center center fixed; 
  display: table;
  height: 400px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
ul li.poto-circle {
  float: right;
}
#poto-circle{
  background-color: rgba(0, 0, 255, .15);
  width:250px;
  height:250px;
  border-width:6px; 
  border-style: inset;
  border-radius: 60%;
  border-color: #12127D #FFFF00;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li> 
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="simple" class="simple pad-section">
  <div class="text-center">
    <h1 class="text-primary texttop">SIMPLE PARALLAX</h1>
    <span style="color:#CC0099"><h3> Web designed by. M2010</h3>
    <!-- using FontAwesome for button icons -->
    <a rel="nofollow" rel="noreferrer"href="https://id.pinterest.com/myscript2010"style="text-decoration:none"target="_blank"title="Pinterest"class="btn btn-default btn-lg">
<span class="fa fa-pinterest"style="font-size:18px;color:#FFFF00">&nbsp;</span>Pinterest</a>
<a rel="nofollow" rel="noreferrer"href="https://plus.google.com/u/0/+suleman101254379497511200564"style="text-decoration:none"target="_blank"title="G-Plus"class="btn btn-default btn-lg">
<span class="fa fa-google-plus-official"style="font-size:18px;color:#FFFF00">&nbsp;</span>G-Plus</a>
        <a rel="nofollow" rel="noreferrer"href="https://www.facebook.com/learn.editing.myscript2010"style="text-decoration:none"target="_blank"title="Facebook"class="btn btn-default btn-lg">
<span class="fa fa-facebook-official"style="font-size:18px;color:#FFFF00">&nbsp;</span>Facebook</a>
  </div>
</div>
<div id="simple1" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">       
 <li class="poto-circle">
<img id="poto-circle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjziFL-5_VzMswEdQa4G8EqX2kRe7Sp1ljAleggyVYFrJ71k_X9tjJSFw8C9UITbXh6zWV-BrKlENybf2ONCzlBtfRExoEfsWDVkXeqq35gdfqxDgloUFIbYLJdif_PewHILcx8mp6BRD4/s1600/Ikan-M2010.jpg" name="e902" border="0" width=" 250" height="250" /></a></li>
    </ul>
      </div>
      <div class="col-sm-6 text-center bg-primary">
        <h2>SIMPLE PARALLAX</h2>
        <p class="lead">Simple Parallax - Simple Parallax - Simple Parallax <br>
Simple Parallax - Simple Parallax - Simple Parallax <br>
Simple Parallax - Simple Parallax - Simple Parallax <br>
Simple Parallax - Simple Parallax - Simple Parallax <br>
        </p>
      </div>
    </div>
  </div>
</div>
<!-- simple-2 Teks -->
<div id="simple2" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <span style="color:#8E006B"><h2>Let's share</h2>
        <span style="color:#FEBFEF"><p>Website design knowledge sharing for everyone</p>
      </div>
    </div>
<!-- simple-2 Menu items 1-->
    <div class="row">      
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
          <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>   
    </div>
<!-- simple-3 Menu items 2-->
    <div class="row">      
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
  </div>
<!-- simple-4 Menu items 3-->
    <div class="row">      
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFcNj5_qzoWJRFO9cHRtFoaAR6rFtMGSXH11j8gvbz1KncLX26l1vAgjc3PEH1YwLtAVl5eN5k0Pb6WQZe1ZOiUPpYkslGa11j1xBDp_kbw1ZYg-522vrzW51STK5jSxrzQRi-XIQ8YQ/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
  </div>
</div>
<!--Off The End -->
<!-- bg -->
<div id="bg" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center bg-primary pad-section">        
        <!-- using FontAwesome for button icons -->
        <a rel="nofollow" rel="noreferrer"href="https://trello.com/m2010"style="text-decoration:none"target="_blank"title="Trello"class="btn btn-default btn-lg">
<span class="fa fa-trello"style="font-size:18px;color:#FFFF00">&nbsp;</span>Trello</a>
        <a rel="nofollow" rel="noreferrer"href="https://myscript2010s.tumblr.com"style="text-decoration:none"target="_blank"title="Tumblr"class="btn btn-default btn-lg">
<span class="fa fa-tumblr-square"style="font-size:18px;color:#FFFF00">&nbsp;</span>Tumblr</a>
        <a rel="nofollow" rel="noreferrer"href="https://dribbble.com/Myscript2010s"style="text-decoration:none"target="_blank"title="Dribbble"class="btn btn-default btn-lg">
<span class="fa fa-dribbble"style="font-size:18px;color:#FFFF00">&nbsp;</span>Dribbble</a>
 <h2>Let's share together M-2010</h2>
<h5>Mari berbagi bersama Myscript2010 tentang seputar webblog</h5>
      </div>
    </div>
  </div>
<footer>
   <hr />
   <div class="container">
     <p class="text-right">
 <span style="color:#CC0099">2010 @ 2017</p>
  </div>
 </footer>
<footer 2>
</div>
 <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 140%"> </a>
             </div>
          </div>            
        </div>
       </div>
    </div>
  </div>
<div align="center">
<font color='#333'>  
<h1>Footer Navigation with Simple Parallax</h1><br>     
       <p><font color='#666'>Copyright @ 2017 Cibeber Cimahi</p><br>     
   <i class="fa fa-handshake-o"style="font-size:30px;color:red"></i> 
  </center>
</div>
<div class="container">
<p class="pull-right">
<a href="https://codepen.io/Myscript2010/"style="text-decoration:none"target="_blank"title="Codepen"> CODEPEN &emsp;
    <i class="fa fa-codepen" style="font-size:30px;color:#dad"></i> &emsp;&emsp;&emsp;&emsp;</a></font></p>
    <p><a href="https://gist.github.com/Myscript2010"style="text-decoration:none"target="_blank"title="Github">
&emsp;&emsp;&emsp;&emsp; <i class="fa fa-github" style="font-size:30px;color:#dad"></i>&emsp; GITHUB </a></font></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
Code by. All Source
Design Code is Edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload  Code Simple Parallax Scrl

Memasang kode Pemutar Musik Mp3 Playlist 
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 templateyang tersedia pada sumber  berikut ini   :   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 class="Mys2010-styles">
body {
  background: #555;
}
body{
  font-family:verdana, arial;
}    
.mejs-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mejs-list li.current {
        background: #cddfff;
    }
.mejs-container{
  margin-left:auto;
  margin-right:auto;
}
#wrapper{
  width:490px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  padding:15px;
  -webkit-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75);} 
</style> 
<font size="3" color="#5F9EAD"face="arial"> 
<div id="wrapper">
<audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
<ul class="mejs-list">
<li  class="current"data-url="https://sites.google.com/site/studiedingsongmp3/laguku/Night-of-the-wolf-black-coach-ave-Sinitra-mys2010.mp3">01 - Music by - Night of the wolf</li>
<li data-url="https://sites.google.com/site/studiedingsongmp3/laguku/2-Pendulum-Resurrected-mys2010.mp3">02 - Music by - Pendulum - Resurrected</li>
<li data-url="https://sites.google.com/site/laguhiburan/mp3-1/ebonshire-mys2010.mp3">03 - Music by - Ebonshire Instrumental</li>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</script> 
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script>$(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mejsPlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mejs-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mejs:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mejsPlayNext(currentPlayer) {
    if ($('.mejs-list li.current').length > 0) {
        var current_item = $('.mejs-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mejs-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
} 
</script>
Code by. All Source
Design Code is Edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload  Pemutar Musik Mp3 Playlist

Memasang kode Pemutar Music Mp3 
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 templateyang tersedia pada sumber  berikut ini   :   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
<div align="center" style="margin-top: 150px">
<audio id="mys2010" src="https://sites.google.com/site/studiedingsongmp3/laguku/2-Pendulum-Resurrected-mys2010.mp3" controls="controls"></audio></div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>     
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> 
<script src='https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.js'>
</script>
<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}</script>                  
Code by. All Source
Design Code is Edited by. Mys2010 on Codepen
* If you want to directly copy and paste you canDownload  Kode Pemutar Music Mp3 

Memasang kode Pemutar Video Embed Youtube 
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 templateyang tersedia pada sumber  berikut ini   :   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
<!-- code -->
<div id="bgbawah" class="desain1">
<div class="container">
<div class="row">
<h2 align="center">
<font color='#191970'> METALLICA<br>
<font size="2" color="#0033CC"face="arial">Metallica Full Concert HD Quebec Magnetic Edited by. M2010 @ 2017</font>
 <script type="text/javascript">
//<![CDATA[
function embed(video) {
   document.write('<div style="text-align:center;background:linear-gradient(to bottom,#8E006B 0,#24006B 100%);border: 1px solid #444; border-radius:5px;margin:20px auto;width:80%;box-shadow:1px 30px 30px -26px #818181;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;"src="https://www.youtube.com/embed/wUPOWMx5Ac8/');
   document.write(video);
   document.write('" frameborder="0" allowfullscreen="1"></iframe></div></div>');
}//]]>
</script>
<script type="text/javascript">embed("Sule-M2010");</script>
Video by. All Source
Design Code is Edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload  Video Youtube with Border 

Memasang kode Pemutar Video Embed Youtube 
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 templateyang tersedia pada sumber  berikut ini   :   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 class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
 position: center;
  top:-46px;
 left: -4px;
  right: 50px;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
.text-bawah {
  position: absolute;
  right: 410px;
  bottom: 310px;  
font-size: 50px;
font-family: agency fb, sans-serif;
  text-transform: uppercase;
}
.text-bawah1 {
  position: absolute;
  left: 90px;
  bottom: 40px;
  text-align: left;
  text-transform: uppercase;}
.text-bawah2 {
  position: absolute;
  right: 90px;
  bottom: 40px;
  text-align: right;
  text-transform: uppercase;
} 
</style> 
<!DOCTYPE html>
<!--[if IE8]><html id="ie8"><![endif]-->
<!--[if IE 9]><html id="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
<div class="wrapper">
<article class="content">
<div class='video'>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
 <script>
    (function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="560" height="315"src="https://www.youtube.com/embed/0PB6kzbS4zs" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });}};
}.call(this));  
  </script>
Video by. All Source
Design Code is Edited by. Mys2010 on Codepen
* If you want to directly copy and paste you canDownload  Play Video Embed Youtube

Memasang kode Pemutar Video Ogg HTML5 
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 templateyang tersedia pada sumber  berikut ini   :   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 class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #000;
}
</style>
<section style="text-align:center">
       <button onclick="playPause()">Play / Pause</button>
       <button onclick="makeBig()">Besarkan Layar</button>
       <button onclick="makeNormal()">Normal</button>
       <button onclick="makeSmall()">Kecil</button>
        <br />
        <div align="center">
<video id="test">
<source src="https://sites.google.com/site/code6916/file/Cibeber-Cimahi-M2010s.mp4" type="video/mp4">
<source src="https://sites.google.com/site/usesitesto/file/Cibeber-Cimahi-ogg-M2010s.ogg" type="video/ogg">
</video>
</section>
<script type="text/javascript">
var myVideo=document.getElementById("test");
function playPause()
{
  if (myVideo.paused)
     myVideo.play();
 else
        myVideo.pause();
}
function makeBig()
{
    myVideo.width=840;
}
function makeNormal()
{
   myVideo.width=540;
}
function makeSmall()
{
    myVideo.width=340;
}
</script>
Video Ogg by. www.w3schools.com
Design Code is Edited by. Mys2010 on Codepen
DEMOSHOW  AFTER
DEMOSHOW  BEFORE
*  If you want to directly copy and paste you can Download  Play Video Ogg HTML5