HomeAll Tutorials

Button Share CSS3

Memasang kode Button Share CSS3
Kode ini menampilkan Tombol Link Hover. Untuk menerapkan kode tersebut
Langkah awal 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 ini Get 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>
* {
  font-smoothing: antialiased;
}
body {
  background: #faa;
}
.wrapper {
  max-width: 960px;
  margin: 65px auto 0;
  background-color: #000;
}
.listc {
  position: relative;
  width: 570px;
  margin: auto;
}
ul {
  list-style: none;
  float: left;
}
ul li {
  position: relative;
  width: 100px; height: 100px;
  float: left;
  background: #474644;
  border-radius: 15px;
  border-bottom: 5px solid #33322f;
  border-left: 3px solid #000000;
  box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
  -webkit-transition: -webkit-box-shadow .15s ease-in-out;  
}
ul li a {
  position: absolute;
  width: 50px; height: 50px;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  top: 31%;
  left: 25%;
}
ul li i{
  text-shadow:
    0px 0px #504F4E,
    0px 1px #424241,
    -1px 2px #353534,
    -2px 3px #282827,
    0px 6px 5px rgba(51, 50, 47, 0.8);
  color: #858482;
}


/* Colors */
.facebook:hover i{
  text-shadow:
    0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3f5598;
  color: #3f5598;
}
.twitter:hover i{
  text-shadow:
    0px 0px #34AEDF, 0px 1px #2E9AC6, -1px 2px #2987AE, -2px 3px #237495, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3ac1f8;
  color: #3ac1f8;
}
.youtube:hover i{
  text-shadow:
    0px 0px #C42829, 0px 1px #AE2425, -1px 2px #991F20, -2px 3px #831B1C, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #da2d2e;
  color: #da2d2e;
}
.instagram:hover i{
  text-shadow:
    0px 0px #5C228E, 0px 1px #521E7E, -1px 2px #471B6F, -2px 3px #3D175F, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #66269e;
  color: #66269e;
}
.linkedin:hover i{
  text-shadow:
    0px 0px #195CAF, 0px 1px #16529B, -1px 2px #144788, -2px 3px #113D74, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #1c66c2;
  color: #1c66c2;
}
ul li:hover i{
  -webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
  border-bottom: 1px solid #33322f;
  top: 5px;
  border-left: 1px solid #000000;
  margin-right: 2px;
  box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
  z-index: -1; }
</style>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="wrapper">
  <div class="listc">
    <ul>
      <li class="facebook"><a href="http://#"><i class="fa fa-facebook fa-2x"></i></a></li>
      <li class="twitter"><a href="http://#"><i class="fa fa-twitter fa-2x"></i></a></li>
      <li class="youtube"><a href="http://#"><i class="fa fa-youtube fa-2x"></i></a></li>
      <li class="pinterest">  <a href="http://#"><i class="fa fa-pinterest fa-2x"></i></a></li>
      <li class="google-plus"><a href="http://#"><i class="fa fa-google-plus fa-2x"></i></a></i>
    </ul>
  </div>
</div>
Penjelasan :
Jika ingin menambahkan code teks animasi, copy code berikut :
<style class="cp-pen-styles">html {
 width:100%;
 height:100%;
 min-width:440px;
}
body {
 margin:0;
 opacity:0;
 color:#3584B2;
 text-align:center;
 text-shadow:0 1px 1px #FFF;
 font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
 background-image:-webkit-radial-gradient(50% 10%, cover, #dad, #eee);
 background-image:-moz-radial-gradient(50% 10%, cover, #eee, #dad);
 background-image:-ms-radial-gradient(50% 10%, cover, #dad, #eee);
 background-image:-o-radial-gradient(50% 10%, cover, #eee, #dad);
 background-image:radial-gradient(50% 10%, cover, #eee, #dad);
 -webkit-transition:opacity 0.3s ease;
    -moz-transition:opacity 0.3s ease;
     -ms-transition:opacity 0.3s ease;
      -o-transition:opacity 0.3s ease;
         transition:opacity 0.3s ease;
}
header {
 height:80px;
}
h1 {
 font-size:46px;
 margin:10px 0 0 0;
 font-weight:normal;
}
h2 {
 font-size:24px;
 margin:28px 0 0 0;
 font-weight:normal;
}
p {
 width:320px;
 margin:0 auto;
 font-size:13px;
}
i {
 display:block;
 margin:0 0 20px 0;
}
nav a {
 color:#FFF;
 width:120px;
 font-size:14px;
 cursor:pointer;
 overflow:hidden;
 border-radius:3px;
 position:relative;
 background:#40A1DD;
 display:inline-block;
 padding:10px 0 10px 0;
 margin:10px 10px 30px 10px;
 border:1px solid rgba(255,255,255,.30);
 text-shadow:1px 1px 2px rgba(0,0,0,.50);
 font-family:Verdana, Geneva, sans-serif;
 box-shadow:0 0 0 1px #008ADB, 0 2px 0 1px #008ADB, 0 3px 6px #000;
}
nav a:active {
 top:3px;
 box-shadow:0 0 0 1px #008ADB, 0 0 0 1px #008ADB, 0 0 4px #000;
}
nav a span {
 display:block;
}</style></head><body>
<header>
<h1>
Let's Share</h1>
<h2>
Through</h2>
<h2>
Social Networking</h2>
</header>
Pastekan dibawah code : z-index: -1; }  Lalu copy code berikut :
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script> <script>
var init = function () {
    $('body').css('opacity', 1);
    $('header').textition({
        map: {
            x: 50,
            y: 20,
            z: 500
        },
        speed: 0.8,
        handler: false,
        autoplay: true,
        interval: 3
    });
    $('nav a:eq(0)').textition({
        map: {
            x: 100,
            y: 0,
            z: 0
        },
        speed: 0.5,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(1)').textition({
        map: {
            x: 0,
            y: 0,
            z: 100
        },
        speed: 0.5,
        perspective: 50,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(2)').textition({
        map: {
            x: 0,
            y: 40,
            z: 0
        },
        speed: 0.5,
        animation: 'ease-out',
        handler: 'mouseenter mouseleave'
    });
};
$(document).ready(init);
//# sourceURL=pen.js
</script>
Pastekan dibawah code  :  <i class="fa fa-google-plus fa-2x"></i></a></i>
    </ul>
  </div>
</div>
Kemudian klik pratinjau untuk melihat hasil dan klik publish selesai
Edited by. Myscript2010
Sources by. Michelle Ortner on Codepen
DEMOSHOW

Category:

Pure CSS Dancing Tree

Memasang kode Pure CSS Dancing Tree
Kode ini menampilkan Gambar animasi Pohon. Untuk menerapkan kode tersebut
Langkah awal 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 ini Get 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>
body, html {
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #000;
}
body {
  -webkit-perspective: 100px;
          perspective: 100px;
}
.info {
  margin: 20px;
  padding: 0px 20px;
  background-color: #ccc;
  display: inline-block;
}
.trunk, .trunk div {
  background: #136086;
  /*border-radius:$w;*/
  width: 100px;
  height: 10px;
  position: absolute;
  margin-left: -10px;
  -webkit-animation-name: rot;
          animation-name: rot;
  -webkit-animation-duration: 2.02s;
          animation-duration: 2.02s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: 5px 5px;
          transform-origin: 5px 5px;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  /* &:before{
     content:'';
       display:block;
       width :$w/2;
       height:$w/2;
       background:black;
       overflow:hidden;
       position:absolute;
       top:$w/4;
       border-radius:$w;
       left:$w/4;
     }*/
}
.trunk.trunk, .trunk div.trunk {
  bottom: 0;
  left: 50%;
  -webkit-animation-name: rot-root;
          animation-name: rot-root;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}
.trunk > div, .trunk div > div {
  /*opacity:0.9;*/
  top: 0;
  left: 100px;
  -webkit-animation-duration: calc(inherit / 2);
          animation-duration: calc(inherit / 2);
  /* don't works :( */
}
.trunk > div:nth-child(2), .trunk div > div:nth-child(2) {
  /*animation-duration:15s;*/
  -webkit-animation-name: rot-inv;
          animation-name: rot-inv;
  -webkit-animation-duration: 1.7s;
          animation-duration: 1.7s;
}
@-webkit-keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}

@keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}
@-webkit-keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@-webkit-keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}
@keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}
 </style>
<div class="trunk">
<div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div><div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div>/div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div>div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div></div>
Sources by. Codepen
Edited by. Myscript2010
DEMOSHOW

Category:

Fish flocking simulation

Memasang kode Fish flocking simulation
Kode ini menampilkan animasi ikan berkelompok. Untuk menerapkan kode tersebut
Langkah awal 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 ini Get 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>
      body {
 background: #000;
 overflow:hidden;
   background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbSjPVBOO_9BlIsG_0w85t1d6P1fLns3oHzfslmk7L0owcf9rTU92fGnkKu_nHNITbwBxIp-y7wVnos0WEvHwNBZCVbxisSRW00vE-eEP6xQGgywEnphopzRse53LIoFz2JYXRabwZqo/s1600-r/bg-mys2010.jpg') no-repeat center center fixed;
 background-size:cover;
}
.container {
  position:absolute;
 left: 50%;
 margin-left: -700px;
  top: 50%;
  margin-top: -300px;
  height: 600px;
 width: 1400px;
}
* {
 margin: 0;
 padding: 0;
}
#fishbitmap {
 display: none;
}
    </style>

<script>
  window.console = window.console || function(t) {};
</script>

<div class="container">
<canvas width="1400" height="600" id="fishtank">
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>


<script>
      /* ---------------- FISH "CLASS" START -------------- */
var FOLLOW_DISTANCE = 100;
var Fish = function(id) {
 this.id = id;
 this.entourage = [];
 // dx/yx is current speed, ox/oy is the previous one
 this.ox = this.dx = Math.random() - 0.5;
 this.oy = this.dy = Math.random() - 0.5;
 this.x = canvas.width * Math.random();
 this.y = canvas.height * Math.random();
 // A couple of helper functions, the names should describe their purpose
 Fish.prototype.angleToClosestFish = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   return Math.atan2(otherFish.y - this.y, otherFish.x - this.x);
  } else {
   return Number.MAX_VALUE;
  }
 }
 Fish.prototype.angleFromFishDirectionToClosestFish = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   return Math.abs(deltaAngle(this.angle, this.angleToClosestFish(otherFish)));
  } else {
   return Number.MAX_VALUE;
  }
 }
 Fish.prototype.angleDirectionDifference = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   Math.abs(deltaAngle(this.angle, otherFish.angle));
  } else {
   return Number.MAX_VALUE;
  }
 }
 // Update the fish "physics"
 Fish.prototype.calc = function() {
  this.ox = this.dx;
  this.oy = this.dy;
  var MAX_SPEED = 1.1;
  var maxSpeed = MAX_SPEED;
  //Do I need to find another fish buddy?
  if (this.following == null || py(this.x - this.following.x, this.y - this.following.y) > FOLLOW_DISTANCE) {
   if (this.following != null) {
    if (keyDown) affinityLine(this.following, this, "white");    this.following.entourage.splice(this.following.entourage.indexOf(this));
   }
   this.following = null;
   //attract closer to other fish - find closest
   var closestDistance = Number.MAX_VALUE;
   var closestFish = null;
   for (var i = 0; i < fishes.length; i++) {
    var fish = fishes[i];
    if (fish != this) {
     var distance = py(this.x - fish.x, this.y - fish.y);
     // Is it closer, within the max distance and within the sector that the fish can see?
     if (distance < closestDistance && fish.following != this && distance < FOLLOW_DISTANCE && this.angleFromFishDirectionToClosestFish(fish) < Math.PI * 0.25) {
      closestDistance = distance;
      closestFish = fish;
     }
    }
   }
   if (closestFish != null) {
    this.following = closestFish;
    closestFish.entourage.push(this);
   }
  }
  // Fish is following another
  if (this.following != null) {
   // Go closer to other fish
   this.followingDistance = py(this.x - this.following.x, this.y - this.following.y);
   this.distanceFactor = 1 - this.followingDistance / FOLLOW_DISTANCE;
   // If going head on, just break a little before following
   if (this.angleDirectionDifference() > (Math.PI * 0.9) && // On colliding angle?
    this.angleFromFishDirectionToClosestFish() < (Math.PI * 0.2)) { // In colliding sector?
    this.dx += this.following.x * 0.1;
    this.dy += this.following.y * 0.1;
    if (keyDown) affinityLine(this.following, this, "yellow");
   } else if (this.followingDistance > FOLLOW_DISTANCE * 0.3) { // Dont go closer if close
    this.dx += Math.cos(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
    this.dy += Math.sin(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
   }
   if (keyDown) affinityLine(this.following, this, "red");
  }
  // Go closer to center, crashing into the canvas walls is just silly!
  if (this.x < canvas.width * .1 || this.x > canvas.width * .9 || this.y < canvas.height * .2 || this.y > canvas.height * .8) {
   this.dx += (canvas.width / 2 - this.x) / 5000;
   this.dy += (canvas.height / 2 - this.y) / 5000;
  }
  // Poor little fishies are scared of your cursor
  if (py(this.x - cursor.x, this.y - cursor.y) < FOLLOW_DISTANCE * 0.75) {
   this.dx -= (cursor.x - this.x) / 500;
   this.dy -= (cursor.y - this.y) / 500;
   maxSpeed = 4;
   if (keyDown) affinityLine(cursor, this, "green");
  }
  // If following fish, try avoid going close to your siblings
  if (this.following != null) {
   for (var i = 0; i < this.following.entourage.length; i++) {
    var siblingFish = this.following.entourage[i];
    if (siblingFish !== this) {
     if (py(this.x - siblingFish.x, this.y - siblingFish.y) < FOLLOW_DISTANCE * 0.2) {
      if (keyDown) affinityLine(siblingFish, this, "yellow");
      this.dx -= (siblingFish.x - this.x) / 1000;
      this.dy -= (siblingFish.y - this.y) / 1000;
     }
    }
   }
  }
  // Calculate heading from new speed
  this.angle = Math.atan2(this.dy, this.dx);

  // Grab the speed from the vectors, and normalize it
  var speed = Math.max(0.1, Math.min(maxSpeed, py(this.dx, this.dy)));
  // Recreate speed vector from recombining angle of direction with normalized speed
  this.dx = Math.cos(this.angle) * (speed + speedBoost);
  this.dy = Math.sin(this.angle) * (speed + speedBoost);
  // Fish like to move it, move it!
  this.x += this.dx;
  this.y += this.dy;
 }
}
/* ---------------------- FISH "CLASS" END -------------- */

/* ---------------------- MAIN START -------------------- */
var canvas = document.getElementById('fishtank');
var context = canvas.getContext('2d');
var fishes = [];
var speedBoostCountdown = 200,
 speedBoost = 0,
 SPEED_BOOST = 2;
var fishBitmap = new Image()
fishBitmap.onload = function() {
 update();
};
fishBitmap.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGz5auUkk_i4xq4_n8QqYIdYM7NTpZZCSSfwl3noWcTyhxjX_0ymQxNqQfdqFjawRIt7DuQvuxTNE3RrLOtQLv2nAcIfMIQ-G1ufZAIpUXeLrPTKpobMHbB1jBzFi6HlCGkP_GCW5UDkA/s1600-r/fish-mys2010.png";
//Draw Circle
function draw(f) {
 var r = f.angle + Math.PI;
 context.translate(f.x, f.y);
 context.rotate(r);
 var w = 20;
 var acc = py(f.dx - f.ox, f.dy - f.oy) / 0.05;
 // If a fish does a "flip", make it less wide
 if (acc > 1) {
  w = 10 + 10 / acc;
 }
 context.drawImage(fishBitmap, 0, 0, w, 6);
 context.rotate(-r);
 context.translate(-f.x, -f.y);
}
// Pythagoras shortcut
function py(a, b) {
 return Math.sqrt(a * a + b * b);
}
//------------ USER INPUT START -------------
var cursor = {
 x: 0,
 y: 0
};
var cursorDown = false,
 keyDown = false;
document.onmousemove = function(e) {
 cursor.x = e.pageX - (window.innerWidth / 2 - canvas.width / 2);
 cursor.y = e.pageY - (window.innerHeight / 2 - canvas.height / 2);
}
document.onmouseout = function(e) { //Out of screen is not a valid pos
 cursor.y = cursor.x = Number.MAX_VALUE;
}
document.onmousedown = function() {
 activateSpeedBoost();
 cursorDown = true;
}
document.onmouseup = function() {
 cursorDown = false;
}
document.onkeydown = function() {
 keyDown = true;
}
document.onkeyup = function() {
  keyDown = false;
 }

 //------------ USER INPUT STOP -------------
function deltaAngle(f, o) { //Find the shortest angle between two
 var r = f - o;
 return Math.atan2(Math.sin(r), Math.cos(r));
}
function affinityLine(f, o, c) { //Draw a line with pretty gradient
 var grad = context.createLinearGradient(f.x, f.y, o.x, o.y);
 grad.addColorStop(0, c);
 grad.addColorStop(1, "black");
 context.strokeStyle = grad;
 context.beginPath();
 context.moveTo(f.x, f.y);
 context.lineTo(o.x, o.y);
 context.stroke();
}
function activateSpeedBoost() {
 speedBoostCountdown = 400 + Math.round(400 * Math.random());
 speedBoost = SPEED_BOOST;
}
//Update and draw all of them
function update() {
  if (fishes.length < 500) {
   fishes.push(new Fish(fishes.length));
  }
  if (!cursorDown) {
   //clear the canvas
   canvas.width = canvas.width; //Try commenting this line :-)
   //Update and draw fish
   for (var i = 0; i < fishes.length; i++) {
    var fish = fishes[i];
    fish.calc();
    draw(fish);
   }
  }
  speedBoostCountdown--;
  if (speedBoostCountdown < 0) {
   activateSpeedBoost();
  }
  if (speedBoost > 0) {
   speedBoost -= SPEED_BOOST / 80; //Reduce speed bost fast!
  } else {
   speedBoost = 0;
  }
  requestAnimationFrame(update);
 }

 /* ---------------------- MAIN END ----------------------- */
      //@ sourceURL=pen.js
    </script>

<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
Edited by. Myscript2010
Sources by. P.S Amundsen
DEMOSHOW

Category:

Animated Cube Slider

Memasang kode Animated Cube Slider
Kode ini menampilkan gambar auto slide. Untuk menerapkan kode tersebut
Langkah awal 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 ini Get 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="cp-pen-styles">
html, body {
    width: 100%;
    height: 100%;
    background: #FF0074;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    }
.title {
  text-align: center;
  margin: 40px;
}
    .title h1, .title p {
      margin: 0;
    }
.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 200px;
    height: 200px;
     margin: auto;
    -webkit-perspective: 600px;
            perspective: 600px;
}
    .slider * {
        -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
                transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
    }
    .container {
        width: inherit;
        height: inherit;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        -webkit-transform: rotateY(0deg) rotateX(0deg);
                transform: rotateY(0deg) rotateX(0deg);
    }
        .slide, .slide:after, .slide:before {
            display: block;
            width: inherit;
            height: inherit;
            background: url('http://Link Gambar.png');
            position: absolute;
            -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
            background-size: cover;
            background-position: center;
        }
        .slide.x {
          -webkit-transform: rotateY(90deg);
                  transform: rotateY(90deg);
        }

            .slide.x:after {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(100px) rotateZ(-90deg);
                        transform: translateZ(100px) rotateZ(-90deg);
        }

            .slide.x:before {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(-100px) rotateZ(-90deg);
                        transform: translateZ(-100px) rotateZ(-90deg);
            }

        .slide.y {
          -webkit-transform: rotateX(90deg);
                  transform: rotateX(90deg);
        }

            .slide.y:after {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(100px) scale(-1);
                        transform: translateZ(100px) scale(-1);
            }
            .slide.y:before {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(-100px);
                        transform: translateZ(-100px);
            }

        .slide.z {
          -webkit-transform: rotateX(0);
                  transform: rotateX(0);
        }

            .slide.z:after {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(100px);
                        transform: translateZ(100px);
            }
            .slide.z:before {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(-100px);
                        transform: translateZ(-100px);
            }
        .container {
            -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
            animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
        }
        @-webkit-keyframes rotate {
            0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
            15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
            25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
            40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
            55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
            70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
            90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
        }
        @keyframes rotate {
            0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
            15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
            25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
            40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
            55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
            70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
            90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
        }
.shadow {
    display: block;
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.75);
    position: absolute;
    top: 60%;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
    z-index: -1;
    -webkit-filter: blur(20px);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><fegaussianblur stdDeviation="20" /></filter></svg>#filter');
    -webkit-filter: blur(20px);
            filter: blur(20px);
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
    animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}
@-webkit-keyframes rotateShadow {
        0%, 10% {-webkit-transform: rotateY(0deg) rotateX(90deg);}  
        15%, 20% {-webkit-transform: rotateY(180deg) rotateX(90deg);;}
        20.1%, 20.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(5px);}
        25%, 35% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
        35.1%, 35.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(-5px);}
        40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
        55%, 65% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
        70%, 80% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
        90%, 99% {-webkit-transform: rotateY(90deg) rotateX(90deg);}
        99.1%, 99.9% {-webkit-transform: rotateY(90deg) rotateX(90deg) translatez(-5px);}
    }

    /*@keyframes rotateShadow {
        0%, 10% {transform: rotateY(0deg) rotateX(90deg);}  
        15%, 20% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
        20.1%, 20.9% {transform: rotateY(180deg) rotateX(90deg) translatez(10px); opacity: 0.95; filter: alpha(opacity=95);}
        25%, 35% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
        35.1%, 35.9% {transform: rotateY(180deg) rotateX(90deg) translatez(-10px); opacity: 0.95; filter: alpha(opacity=95);}
        40%, 50% {transform: rotateY(180deg) rotateX(90deg);}
        55%, 65% {transform: rotateY(0deg) rotateX(90deg);}
        70%, 80% {transform: rotateY(180deg) rotateX(90deg);}
        90%, 99% {transform: rotateY(0deg) rotateX(90deg);}
        99.1%, 99.9% {transform: rotateY(180deg) rotateX(90deg) translatez(5px); opacity: 0.95; filter: alpha(opacity=95);}
    }*/

/*
Credit */
.credit {
        position: fixed;
        bottom: 22px;
        left: 0;
        right: 0;
        margin: auto;
        width: 200px;
        text-align: center;
    }
.credit a {
        font-weight: 900;
        color: blue;
        text-decoration: none;
        -webkit-transition: all .15s linear;
                transition: all .15s linear;
        background: url(Link Gambar)no-repeat right;
        background-size: 12px;
        padding-right: 20px !important;
        -filter: invert(1);
        -webkit-filter: invert(1);
        -moz--filter: invert(1);
    -o--filter: invert(1);}
    .credit a:hover {
        color: tomato;}
</style>
<div class="title">
<h1>
Animated Cube Slider</h1>
<p>
CSS Only</p>
</div>
<div class="slider">
<div class="container">
<div class="slide x">
</div>
<div class="slide y">
</div>
<div class="slide z">
</div>
</div>
<div class="shadow">
</div>
</div>
<p class="credit">
by <span><a href="http://Your Link.com" target="_blank">Your Text</a></span></p>
Penjelasan : Edit kode yang diwarnai
Edited by. Myscript2010
Sources by. Alberto Hartzet on Codepen
DEMOSHOW

Category:

Deep Sea Creature

Memasang kode Deep Sea Creature CSS3
Kode ini menampilkan Gambar animasi. Untuk menerapkan kode tersebut
Langkah awal 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 ini Get 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="cp-pen-styles"> 
body {
        background: #000;
        overflow: hidden;
}
canvas {
        background: url(http://media.giphy.com/media/iEygmp20xiQE0/giphy.gif) 0 0 no-repeat;
        background-size: 100% 100%;
}
canvas,
img {
        display: block;
        border: 1px solid black;

}</style>



<center>
<canvas id='c'></canvas>
<img id="img">
Sources by. Codepen
Edited by. Myscript2010
DEMOSHOW
If you want to directly copy  and  paste you can Download  Deep Sea Creature Full

Category:

Lighting CSS Animated Preloader

Memasang kode Lighting CSS3
Kode ini menampilkan Text yang disinari cahaya. Untuk menerapkan kode tersebut
Langkah awal 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 ini Get 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>
body {
    margin: 0;
    padding: 0;
    background: rgb(0, 0, 0);
    font-family: "Times New Roman", Georgia, Serif;
}
.wrapper {
  position: relative;
  width: 540px;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0;
  font-family: ‘Arial Narrow’, sans-serif;
  font-size: 98px;
  letter-spacing: 1px;
}

.text {
    position: absolute;
    top: 40px;
    left: 100px;
    margin: 0;
    padding: 0;
    color: rgb(0, 0, 0);
    background: transparent;
    text-shadow: 0px 10px 10px rgb(0, 0, 0);
    z-index: 1;
    -webkit-animation: shadow 6.0s ease-in-out infinite;
    animation: shadow 6.0s ease-in-out infinite;
}

.light {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 140px;
    height: 140px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    border-radius: 100px;
    z-index: 0;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
     box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: light 6.0s ease-in-out infinite;
    animation: light 6.0s ease-in-out infinite;
}

.light.two {
    z-index: 2;
    opacity: 0.7;
}

@-webkit-keyframes light {
    0% {

        left: 45px;
    }

    50% {
        left: 335px;
    }

    100% {
        left: 45px;
    }
}

@keyframes light {
      0% {
        left: 45px;
    }
    50% {
        left: 335px;
    }
    100% {
        left: 45px;
    }
}

@-webkit-keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
@keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
</style>
<div class="wrapper">
  <div class="text">
    <p>Your Text</p>
    </div>
     <div class="light"></div>
    <div class="light two"></div></div>
Animated code by. Christofer Vilander
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here Animated Preloader

Category:

Templates Kosong

Memasang Kode Blank Templates
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 di bawah ini :  copy kode berikut, edit background warna sesuai keingian kemudian klik simpan selesai.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
   <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
   <meta content='noindex,nofollow' name='robots'/>
    </b:if>
<b:include data='blog' name='all-head-content'/>
<meta content='Call' name='Sule'/>
<meta content='Initials' name='M.2010'/>
<meta content='Webblog' name='Myscript2010'/>
<meta content='Work' name='Create Blog'/>
<meta content='Skill' name='Design'/>
<meta content='Design' name='Blogger'/>
<meta content='Blogger' name='Blogspot'/> 
<meta content='Residence' name='Cibeber Cimahi'/>
<meta content='City' name='Bandung'/>
<meta content='Province' name='West Java'/>
<meta content='Country' name='Indonesian'/>
<meta content='Language' name='Sundanese'/>
<meta expr:content='data:blog.pageName' property='og:title'/>    
<meta expr:content='data:blog.title' property='og:site_name'/>     
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>     
<b:if cond='data:blog.metaDescription'>     
<meta expr:content='data:blog.metaDescription' property='og:description'/>     
</b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta content='article' property='og:type'/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta content='id_id' property='og:locale'/>
 <meta expr:content='data:blog.pageName' property='og:title'/>
 <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 </b:if>
 <title><data:blog.pageName/> - <data:blog.title/></title>
 <meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<b:skin><![CDATA[
================================================
Blogger Template Style
Nama        : Blank Template
diedit oleh : Myscript2010
Tgl Edit    : 17/01/16
Sumber Kode : Blogger
================================================
/* terlihat */ 
#navbar-iframe { opacity:0.2; filter:alpha(Opacity=0); } 
#navbar-iframe:hover { opacity:0.5; filter:alpha(Opacity=100, FinishedOpacity=50); }

/* tidak terlihat */ 
#navbar-iframe { opacity:0.0;filter:alpha(Opacity=0); } 
#navbar-iframe:hover { opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100); }

/* tidak menggaris bawahi */
#navbar-iframe{height:0;visibility:hidden;display:none;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
a:link,a:visited{color:#fff;text-decoration:none;margin-left:0px;margin-right:0px;}
a img{border-width:0;}

/* http://myscript2010s.blogspot.co.id
   versi    : none | 17/01/16
   Lisensi  : none | publik domain */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;}
 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
} 
img{max-width:100%;vertical-align:middle;border:0;height:auto;}
.quickedit{display:none;}
.clear{clear:both;}
body{background:#dad;margin:0;padding:0;font-family: calibri;color:#fff;}
.quickedit{
display:none;
}
.feed-links{ display:none; }
.status-msg-body {display:none;
}
.status-msg-wrap {display:none;
}
#Attribution1 {
height:0px;
visibility:hidden;
display:none
]]></b:skin>
<style type='text/css'>
================================================
Profiles :
Name                 : Sule M2010
City of origin       : Jakarta
Place of Residence   : Cibeber Cimahi Bandung
Job                  : Editing Templates 
Template Type        : Blank Template
Template Name        : Style Template
Date Edit Template   : 17/01/16
Source Code Template : Blogger
================================================
</style>
</head>
<body>

<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>
    <b:widget-settings>
      <b:widget-setting name='showDateHeader'>false</b:widget-setting>
      <b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
      <b:widget-setting name='showShareButtons'>false</b:widget-setting>
      <b:widget-setting name='authorLabel'>Diposkan oleh</b:widget-setting>
      <b:widget-setting name='showCommentLink'>false</b:widget-setting>
      <b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
      <b:widget-setting name='showAuthor'>false</b:widget-setting>
      <b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
      <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
      <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
      <b:widget-setting name='style.layout'>1x1</b:widget-setting>
      <b:widget-setting name='showLabels'>false</b:widget-setting>
      <b:widget-setting name='showLocation'>false</b:widget-setting>
      <b:widget-setting name='showTimestamp'>false</b:widget-setting>
      <b:widget-setting name='postsPerAd'>1</b:widget-setting>
      <b:widget-setting name='showBacklinks'>false</b:widget-setting>
      <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='showInlineAds'>true</b:widget-setting>
      <b:widget-setting name='showReactions'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main' var='top'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>

        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>

    <!-- navigation -->
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>

  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:include cond='data:top.showPlusOne' name='googlePlusBootstrap'/>
</b:includable>
    <b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>
    <b:includable id='backlinks' var='post'>
  <a name='links'/><h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'>
            <span class='backlink-toggle-zippy'>&#160;</span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>
    <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>
    <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>
    <b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.url.canonical.http'>
    </span>
  <b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
    </a>
  </b:if>
</b:includable>
    <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:elseif cond='data:post.showThreadedComments'/>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:includable>
    <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:elseif cond='data:post.allowComments'/>
          <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
        </b:if>
      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
    </div>
    </div>
  </div>
</b:includable>
    <b:includable id='feedLinks'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
         
      </div>
    </b:if>

  <b:else/> <!--Post feed links -->
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
      </b:loop>
    </div>
  </b:if>
</b:includable>
    <b:includable id='feedLinksBody' var='links'>
  
</b:includable>
    <b:includable id='iframe_comments' var='post'>

  <b:if cond='data:post.allowIframeComments'>
    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>

    <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</b:includable>
    <b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>
    <b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
    </b:if>

    <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
        <h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>

        <div class='mobile-index-arrow'>&amp;rsaquo;</div>

        <div class='mobile-index-contents'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='mobile-index-thumbnail'>
              <div class='Image'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
            </div>
          </b:if>

          <div class='post-body'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
          </div>
        </div>

        <div style='clear: both;'/>
      </a>

      <div class='mobile-index-comment'>
        <b:include cond='data:blog.pageType != &quot;static_page&quot;                          and data:post.allowComments                          and data:post.numComments != 0' data='post' name='comment_count_picker'/>
      </div>
    </div>
  </div>
</b:includable>
    <b:includable id='mobile-main' var='top'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-index-post'/>
        </b:loop>
      <b:else/>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-post'/>
        </b:loop>
      </b:if>
    </div>

   <b:include name='mobile-nextprev'/>
</b:includable>
    <b:includable id='mobile-nextprev'>
  
<div class='blog-pager' id='blog-pager'>
  

  </div>
  <div class='clear'/>
</b:includable>
    <b:includable id='mobile-post' var='post'>
  <div class='date-outer'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <div class='date-posts'>
      <div class='post-outer'>

        <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
          <b:if cond='data:post.thumbnailUrl'>
            <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
          </b:if>
          <meta expr:content='data:blog.blogId' itemprop='blogId'/>
          <meta expr:content='data:post.id' itemprop='postId'/>

          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h3 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </h3>
          </b:if>

          <div class='post-header'>
            <div class='post-header-line-1'/>
          </div>

          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
            <data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>

          <div class='post-footer'>
            <div class='post-footer-line post-footer-line-1'>
              <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

              <span class='post-timestamp'>
                <b:if cond='data:top.showTimestamp'>
                  <data:top.timestampLabel/>
                  <b:if cond='data:post.url'>
                    <meta expr:content='data:post.url.canonical' itemprop='url'/>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>

              <span class='post-comment-link'>
                <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                                  and data:post.allowComments' data='post' name='comment_count_picker'/>
              </span>
            </div>

            <div class='post-footer-line post-footer-line-2'>
              <b:if cond='data:top.showMobileShare'>
                <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/></a>
                </div>
              </b:if>
              <b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>
            </div>

          </div>
        </div>

        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
      </div>
    </div>
  </div>
</b:includable>
    <b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    

  </div>
  <div class='clear'/>
</b:includable>
    <b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
      <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>

      <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
          <b:if cond='data:post.url'>
            <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
            <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
          </b:if>
        </b:if>
      </span>

      <span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span>

      <span class='post-comment-link'>
        <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                          and data:post.allowComments' data='post' name='comment_count_picker'/>
      </span>

       <!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                      and data:post.showBacklinks'>
           <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
         </b:if>
       </span>

      <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
            <img alt='' class='icon-action' height='13' src='//img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

      <!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>

      </div>

      <div class='post-footer-line post-footer-line-2'>
       
      </div>

      <div class='post-footer-line post-footer-line-3'>
      <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>
      <b:if cond='data:post.authorAboutMe'>
        <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <b:if cond='data:post.authorPhoto.url'>
            <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
          </b:if>
          <div>
            <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
              <span itemprop='name'><data:post.author/></span>
            </a>
          </div>
          <span itemprop='description'><data:post.authorAboutMe/></span>
        </div>
      </b:if>
    </div>
  </div>
</b:includable>
    <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>
    <b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>
    <b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>
    <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>
    <b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        var text = (entry &&
                    ((entry.content && entry.content.$t) ||
                     (entry.summary && entry.summary.$t))) ||
            '';
        if (entry && entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + text + '</span>';
            }
          }
        }
        return text;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          replybox.src = '';
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>
    <b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
      <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
    </div>
    </div>
  </div>
</b:includable>
  </b:widget>
</b:section>

</body>
</HTML>
Templates Code by. Blogger
Design Code is Edited by. M-2010
DEMOSHOW
* If you want to directly copy  & paste you canDownload Here Kode Templates Kosong

Category:
Subscribe to: Posts (Atom)