Mys2010 on Codepen: quote share | SEO Friendly Responsive Blogger Myscript2010s

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

DEMOSHOW

If you want to directly copy and paste you canDownload  quote share about websites

Category: quote share

Mys2010 on Codepen

Quote share

POPULAR

Blog Archive