Bag of Crisps

Memasang kode Bag of Crisps
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="Crisps-styles">
html, body {
    font-size: 18px;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    background: #e7e7e7;
    color: #444;
    overflow: hidden;
}

/*General*/
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}

a {
    color: white;
    text-decoration: none;
    transition: color 300ms linear;
    -webkit-transition: color 300ms linear;
    -moz-transition: color 300ms linear;
}

a:hover {
    color: #CF8A05;
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: #CF8A05;
    color: #E7E7E7;
}
::-moz-selection {
    background: #CF8A05;
    color: #E7E7E7;
}

.cc {text-align:center;}

.email {font-family: 'Josefin Slab', serif; text-align:center;}
.nice {font-family: 'Quicksand', sans-serif; text-align:center;}

.reflect {
-webkit-box-reflect: below -35px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
}

.space1 {
   margin:10% 0 0 0;

}

.bulb {
   transition: all 0.2s ease-in;
   text-decoration:none;
}

.bulb:hover {
  color:yellow;
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #f7ff76;
}

.gear {
   transition: all 0.2s ease-in;
   text-decoration:none;
}

.gear:hover {
  color:#2ecc71;
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #8e44ad;
}

.about {
   transition: all 0.2s ease-in;
   text-decoration:none;
}

.about:hover {
  color:#3498db;
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #8e44ad;
}

.mail {
   transition: all 0.2s ease-in;
   text-decoration:none;
}

.mail:hover {
   color:#1abc9c;
   text-shadow: 1px 0px 17px #8e44ad;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
}

.modallink {
   position:relative;
   bottom:0;
   right:0;
   height:50px;
   width:100%;
   color:#000;
   text-align:right;
}

.mailicons {
  margin:8px 10px 0 0;
  color:rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease-in;
  text-decoration:none;
}

.mailicons:hover {
  color:rgba(0, 0, 0, 1);
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #8e44ad;
}
/*body**************************************************/
.center {
   color:black;
   width: 320px;
   height: 200px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -160px;
   margin-top: -100px;
   text-align:center;
}

.centered {
   color:black;
   width: 340px;
   height: 200px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -170px;
   margin-top: -100px;
   text-align:center;
}

.choose {
   width: 48px;
   height: 48px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -24px;
   margin-top: -24px;
   text-align:center;
}

.title {
   font-family: 'Oswald', sans-serif;
   font-size:65px;
}

/*back**************************************************/
.back {
   position:absolute;
   background:#16a085;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}

.back1 {
   position:absolute;
   background:green;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}


.back2 {
   position:absolute;
   background:#d35400;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}

/*******************MAIN WINDOW****/
.back3 {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
   text-align:center;
   position:absolute;
   background-color: black;
   color: #efefef;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}


.bartop {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:30px;
   background-color:transparent;
   text-align:center;
}

.barbottom {
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:30px;
   background-color:transparent;
   text-align:center;
}

.barleft {
   position:absolute;
   bottom:0;
   left:0;
   width:30px;
   height:100%;
   background-color:transparent;
   text-align:center;
}

.barright {
   bottom:0;
   right:0;
   position:absolute;
   width:30px;
   height:100%;
   background-color:transparent;
   text-align:center;
}

.nav1 {
   top:0;
   left:0;
   position:absolute;
   width:100%;
   height:30%;
   background-color:rgba(42, 22, 20, 0.9);
   text-align:center;
   border-right:thick double #ff0000;
   border-bottom:thick double #ff0000;
}

.nav2 {
   bottom:0;
   right:0;
   position:absolute;
   width:100%;
   height:30%;
   background-color:rgba(42, 22, 20, 0.9);
   text-align:center;
   border-left:thick double #ff0000;
   border-top:thick double #ff0000;
}

.menu1 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   top:25%;
   left:0;
   border:double 5px #ff0000;

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

.menu2 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   bottom:25%;
   right:0;
border:double 5px #ff0000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

.menu3 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   bottom:25%;
   left:0;
border:double 5px #ff0000;

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

.menu4 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   top:25%;
   right:0;
border:double 5px #ff0000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}


/*******************MAIN WINDOW****/

.backbox {
   position:absolute;
   background:#16a085;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}


/*   back     */

/*   crunch     */
.slam1 {
   position:absolute;
   background:transparent;
   color:white;
   width:106%;
   margin:0px;
   height:60%;
   top:-10%;
   left:-3%;

}

.slam2 {
   position:absolute;
   background:transparent;
   width:106%;
   margin:0px;
   height:60%;
   bottom:-10%;
   left:-3%;

}
/*   teeth     */

.tooth {
   position:relative;
   float:left;
   width:25%;
   height:100%;
   background:white;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:inset 0px -3px 48px #000000;
-webkit-box-shadow:inset 0px -3px 48px #000000;
box-shadow:inset 0px -3px 48px #000000;

}

/*   /teeth     */

/*   /bam     */

.bam {
   text-align:center;
   position:absolute;
   background:#16a085;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}

/*   /bam     */



.ani {
 -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
      -o-animation-duration: 1s;
         animation-duration: 1s;
 -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
      -o-animation-fill-mode: both;
         animation-fill-mode: both;
}

.ani2 {
 -webkit-animation-duration: 3.3s;
    -moz-animation-duration: 3.3s;
      -o-animation-duration: 3.3s;
         animation-duration: 3.3s;
 -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
      -o-animation-fill-mode: both;
         animation-fill-mode: both;
}

@-webkit-keyframes crunchup {
 0% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  -webkit-transform: translateY(2000px);
 }

 70% {
  -webkit-transform: translateY(0);
 }

 100% {
  -webkit-transform: translateY(0);
 }
}
@-moz-keyframes crunchup {
 0% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  -moz-transform: translateY(2000px);
 }

 70% {
  -moz-transform: translateY(0);
 }

 100% {
  -moz-transform: translateY(0);
 }
}

@-o-keyframes crunchup {
 0% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  -o-transform: translateY(2000px);
 }

 70% {
  -o-transform: translateY(0);
 }

 100% {
  -o-transform: translateY(0);
 }
}

@keyframes crunchup {
 0% {
  opacity: 0;
  transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  transform: translateY(2000px);
 }

 70% {
  transform: translateY(0);
 }

 100% {
  transform: translateY(0);
 }
}

.ani.crunchup {
 -webkit-animation-name: crunchup;
 -moz-animation-name: crunchup;
 -o-animation-name: crunchup;
 animation-name: crunchup;
        -moz-animation-delay: 2.4s;
        -webkit-animation-delay: 2.4s;
        -o-animation-delay: 2.4s;
        animation-delay: 2.4s;
}

@-webkit-keyframes crunchdown {
 0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  -webkit-transform: translateY(-2000px);
 }

 70% {
  -webkit-transform: translateY(0);
 }

 100% {
  -webkit-transform: translateY(0);
 }
}

@-moz-keyframes crunchdown {
 0% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  -moz-transform: translateY(-2000px);
 }

 70% {
  -moz-transform: translateY(0);
 }

 100% {
  -moz-transform: translateY(0);
 }
}

@-o-keyframes crunchdown {
 0% {
  opacity: 0;
  -o-transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  -o-transform: translateY(-2000px);
 }

 70% {
  -o-transform: translateY(0);
 }

 100% {
  -o-transform: translateY(0);
 }
}

@keyframes crunchdown {
 0% {
  opacity: 0;
  transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  transform: translateY(-2000px);
 }

 70% {
  transform: translateY(0);
 }

 100% {
  transform: translateY(0);
 }
}

.ani.crunchdown {
 -webkit-animation-name: crunchdown;
 -moz-animation-name: crunchdown;
 -o-animation-name: crunchdown;
 animation-name: crunchdown;
        -moz-animation-delay: 2.4s;
        -webkit-animation-delay: 2.4s;
        -o-animation-delay: 2.4s;
        animation-delay: 2.4s;
}

/*   /crunch     */

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
 50% { -webkit-transform: scale(0.8); }
    100% { -webkit-transform: scale(1.3); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }
 50% { -moz-transform: scale(0.8); }
    100% { -moz-transform: scale(1.3); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }
 50% { -o-transform: scale(0.8); }
    100% { -o-transform: scale(1.3); }
}
@keyframes pulse {
    0% { transform: scale(1); }
 50% { transform: scale(0.8); }
    100% { transform: scale(1.3); }
}

.ani.pulse {
 -webkit-animation-name: pulse;
 -moz-animation-name: pulse;
 -o-animation-name: pulse;
 animation-name: pulse;
  -moz-animation-delay: 1.5s;
        -webkit-animation-delay: 1.5s;
        -o-animation-delay: 1.5s;
        animation-delay: 1.5s;
}

@-webkit-keyframes shake {
 0%, 100% {-webkit-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
 0%, 100% {-moz-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-o-keyframes shake {
 0%, 100% {-o-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
 0%, 100% {transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
 20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.ani.shake {
 -webkit-animation-name: shake;
 -moz-animation-name: shake;
 -o-animation-name: shake;
 animation-name: shake;
  -moz-animation-delay: 3.4s;
        -webkit-animation-delay: 3.4s;
        -o-animation-delay: 3.4s;
        animation-delay: 3.4s;
}

@-webkit-keyframes shaker {
 0%, 100% {-webkit-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(10px);}
 20%, 40%, 60%, 80% {-webkit-transform: translateX(-10px);}
}

@-moz-keyframes shaker {
 0%, 100% {-moz-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(10px);}
 20%, 40%, 60%, 80% {-moz-transform: translateX(-10px);}
}

@-o-keyframes shaker {
 0%, 100% {-o-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(10px);}
 20%, 40%, 60%, 80% {-o-transform: translateX(-10px);}
}

@keyframes shaker {
 0%, 100% {transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {transform: translateX(10px);}
 20%, 40%, 60%, 80% {transform: translateX(-10px);}
}

.ani.shaker {
 -webkit-animation-name: shaker;
 -moz-animation-name: shaker;
 -o-animation-name: shaker;
 animation-name: shaker;
  -moz-animation-delay: 3.4s;
        -webkit-animation-delay: 3.4s;
        -o-animation-delay: 3.4s;
        animation-delay: 3.4s;
}

@-webkit-keyframes backout {
 0% {
  opacity: 1;
  -webkit-transform: translateY(0);
 }

 100% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }
}

@-moz-keyframes backout {
 0% {
  opacity: 1;
  -moz-transform: translateY(0);
 }

 100% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }
}

@-o-keyframes backout {
 0% {
  opacity: 1;
  -o-transform: translateY(0);
 }

 100% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }
}

@keyframes backout {
 0% {
  opacity: 1;
  transform: translateY(0);
 }

 100% {
  opacity: 0;
  transform: translateY(2000px);
 }
}

.ani.backout {
 -webkit-animation-name: backout;
 -moz-animation-name: backout;
 -o-animation-name: backout;
 animation-name: backout;
        -moz-animation-delay: 2.3s;
        -webkit-animation-delay: 2.3s;
        -o-animation-delay: 2.3s;
        animation-delay: 2.3s;
}

@-webkit-keyframes fadeIn0 {
 0% {opacity: 1;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-moz-keyframes fadeIn0 {
 0% {opacity: 1;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-o-keyframes fadeIn0 {
 0% {opacity: 1;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@keyframes fadeIn0 {
 0% {opacity: 1;}
 20% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

.ani.fadeIn0 {
 -webkit-animation-name: fadeIn0;
 -moz-animation-name: fadeIn0;
 -o-animation-name: fadeIn0;
 animation-name: fadeIn0;
       -moz-animation-delay: 2.4s;
        -webkit-animation-delay: 2.4s;
        -o-animation-delay: 2.4s;
        animation-delay: 2.4s;
}

@-webkit-keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn {
 -webkit-animation-name: fadeIn;
 -moz-animation-name: fadeIn;
 -o-animation-name: fadeIn;
 animation-name: fadeIn;

}

@-webkit-keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn1 {
 -webkit-animation-name: fadeIn1;
 -moz-animation-name: fadeIn1;
 -o-animation-name: fadeIn1;
 animation-name: fadeIn1;
       -moz-animation-delay: 4.2s;
        -webkit-animation-delay: 4.2s;
        -o-animation-delay: 4.2s;
        animation-delay: 4.2s;
}


@-webkit-keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn2 {
 -webkit-animation-name: fadeIn2;
 -moz-animation-name: fadeIn2;
 -o-animation-name: fadeIn2;
 animation-name: fadeIn2;
       -moz-animation-delay: 5s;
        -webkit-animation-delay: 5s;
        -o-animation-delay: 5s;
        animation-delay: 5s;
}

@-webkit-keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn3 {
 -webkit-animation-name: fadeIn3;
 -moz-animation-name: fadeIn3;
 -o-animation-name: fadeIn3;
 animation-name: fadeIn3;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}


@-webkit-keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-moz-keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-o-keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

.ani2.fadeIn4 {
 -webkit-animation-name: fadeIn4;
 -moz-animation-name: fadeIn4;
 -o-animation-name: fadeIn4;
 animation-name: fadeIn4;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}

@-webkit-keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn5 {
 -webkit-animation-name: fadeIn5;
 -moz-animation-name: fadeIn5;
 -o-animation-name: fadeIn5;
 animation-name: fadeIn5;
       -moz-animation-delay: 9.7s;
        -webkit-animation-delay: 9.7s;
        -o-animation-delay: 9.7s;
        animation-delay: 9.7s;
}

@-webkit-keyframes rotateInUpLeft {
 0% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }
}

@-moz-keyframes rotateInUpLeft {
 0% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }
}

@-o-keyframes rotateInUpLeft {
 0% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }
}

@keyframes rotateInUpLeft {
 0% {
  transform-origin: left bottom;
  transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  transform-origin: left bottom;
  transform: rotate(0);
  opacity: 1;
 }
}

.ani.rotateInUpLeft {
 -webkit-animation-name: rotateInUpLeft;
 -moz-animation-name: rotateInUpLeft;
 -o-animation-name: rotateInUpLeft;
 animation-name: rotateInUpLeft;
       -moz-animation-delay: 5.3s;
        -webkit-animation-delay: 5.3s;
        -o-animation-delay: 5.3s;
        animation-delay: 5.3s;
}

@-webkit-keyframes rotateOut {
 0% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(200deg);
  opacity: 0;
 }
}

@-moz-keyframes rotateOut {
 0% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(200deg);
  opacity: 0;
 }
}

@-o-keyframes rotateOut {
 0% {
  -o-transform-origin: center center;
  -o-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -o-transform-origin: center center;
  -o-transform: rotate(200deg);
  opacity: 0;
 }
}

@keyframes rotateOut {
 0% {
  transform-origin: center center;
  transform: rotate(0);
  opacity: 1;
 }

 100% {
  transform-origin: center center;
  transform: rotate(180deg);
  opacity: 0;
 }
}

.ani.rotateOut {
 -webkit-animation-name: rotateOut;
 -moz-animation-name: rotateOut;
 -o-animation-name: rotateOut;
 animation-name: rotateOut;
       -moz-animation-delay: 5.2s;
        -webkit-animation-delay: 5.2s;
        -o-animation-delay: 5.2s;
        animation-delay: 5.2s;
}

@-webkit-keyframes bounceInUp {
 0% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateY(-30px);
 }

 80% {
  -webkit-transform: translateY(10px);
 }

 100% {
  -webkit-transform: translateY(-200px);
 }
}
@-moz-keyframes bounceInUp {
 0% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateY(-30px);
 }

 80% {
  -moz-transform: translateY(10px);
 }

 100% {
  -moz-transform: translateY(-200px);
 }
}

@-o-keyframes bounceInUp {
 0% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateY(-30px);
 }

 80% {
  -o-transform: translateY(10px);
 }

 100% {
  -o-transform: translateY(-200px);
 }
}

@keyframes bounceInUp {
 0% {
  opacity: 0;
  transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  transform: translateY(-30px);
 }

 80% {
  transform: translateY(10px);
 }

 100% {
  transform: translateY(-200px);
 }
}

.ani.bounceInUp {
 -webkit-animation-name: bounceInUp;
 -moz-animation-name: bounceInUp;
 -o-animation-name: bounceInUp;
 animation-name: bounceInUp;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}
@-webkit-keyframes bounceInDown {
 0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateY(30px);
 }

 80% {
  -webkit-transform: translateY(-10px);
 }

 100% {
  -webkit-transform: translateY(200px);
 }
}

@-moz-keyframes bounceInDown {
 0% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateY(30px);
 }

 80% {
  -moz-transform: translateY(-10px);
 }

 100% {
  -moz-transform: translateY(200px);
 }
}

@-o-keyframes bounceInDown {
 0% {
  opacity: 0;
  -o-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateY(30px);
 }

 80% {
  -o-transform: translateY(-10px);
 }

 100% {
  -o-transform: translateY(200px);
 }
}

@keyframes bounceInDown {
 0% {
  opacity: 0;
  transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateY(30px);
 }

 80% {
  transform: translateY(-10px);
 }

 100% {
  transform: translateY(200px);
 }
}

.ani.bounceInDown {
 -webkit-animation-name: bounceInDown;
 -moz-animation-name: bounceInDown;
 -o-animation-name: bounceInDown;
 animation-name: bounceInDown;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}
@-webkit-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(30px);
 }

 80% {
  -webkit-transform: translateX(-10px);
 }

 100% {
  -webkit-transform: translateX(200px);
 }
}

@-moz-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(30px);
 }

 80% {
  -moz-transform: translateX(-10px);
 }

 100% {
  -moz-transform: translateX(200px);
 }
}

@-o-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(30px);
 }

 80% {
  -o-transform: translateX(-10px);
 }

 100% {
  -o-transform: translateX(200px);
 }
}

@keyframes bounceInLeft {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(30px);
 }

 80% {
  transform: translateX(-10px);
 }

 100% {
  transform: translateX(200px);
 }
}

.ani.bounceInLeft {
 -webkit-animation-name: bounceInLeft;
 -moz-animation-name: bounceInLeft;
 -o-animation-name: bounceInLeft;
 animation-name: bounceInLeft;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;

}
@-webkit-keyframes bounceInRight {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(-30px);
 }

 80% {
  -webkit-transform: translateX(10px);
 }

 100% {
  -webkit-transform: translateX(-200px);
 }
}

@-moz-keyframes bounceInRight {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(10px);
 }

 100% {
  -moz-transform: translateX(-200px);
 }
}

@-o-keyframes bounceInRight {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(-30px);
 }

 80% {
  -o-transform: translateX(10px);
 }

 100% {
  -o-transform: translateX(-200px);
 }
}

@keyframes bounceInRight {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(-30px);
 }

 80% {
  transform: translateX(10px);
 }

 100% {
  transform: translateX(-200px);
 }
}

.ani.bounceInRight {
 -webkit-animation-name: bounceInRight;
 -moz-animation-name: bounceInRight;
 -o-animation-name: bounceInRight;
 animation-name: bounceInRight;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;

}

@-webkit-keyframes tada {
 0% {-webkit-transform: scale(1); }
 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
 100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
 0% {-moz-transform: scale(1);}
 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
 100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
 0% {-o-transform: scale(1);}
 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
 100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
 0% {transform: scale(1);}
 10%, 20% {transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
 100% {transform: scale(1) rotate(0);}
}

.ani.tada {
 -webkit-animation-name: tada;
 -moz-animation-name: tada;
 -o-animation-name: tada;
 animation-name: tada;
       -moz-animation-delay: 5s;
        -webkit-animation-delay: 5s;
        -o-animation-delay: 5s;
        animation-delay: 5s;
}

@-webkit-keyframes slideinleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px, -30px);
  -webkit-transform: translateY(-70px);
 }
}

@-moz-keyframes slideinleft {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(-70px);
 }
}

@-o-keyframes slideinleft {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(-70px);
 }
}

@keyframes slideinleft {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(-70px);
 }
}

.ani.slideinleft {
 -webkit-animation-name: slideinleft;
 -moz-animation-name: slideinleft;
 -o-animation-name: slideinleft;
 animation-name: slideinleft;
       -moz-animation-delay: 7.5s;
        -webkit-animation-delay: 7.5s;
        -o-animation-delay: 7.5s;
        animation-delay: 7.5s;

}

@-webkit-keyframes slideinright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px);
  -webkit-transform: translateY(70px);
 }
}

@-moz-keyframes slideinright {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(0px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(70px);
 }
}

@-o-keyframes slideinright {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(70px);
 }
}

@keyframes slideinright {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(70px);
 }
}

.ani.slideinright {
 -webkit-animation-name: slideinright;
 -moz-animation-name: slideinright;
 -o-animation-name: slideinright;
 animation-name: slideinright;
       -moz-animation-delay: 7.8s;
        -webkit-animation-delay: 7.8s;
        -o-animation-delay: 7.8s;
        animation-delay: 7.8s;

}

@-webkit-keyframes slideinleft0 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px, -30px);
  -webkit-transform: translateY(-100px);
 }
}

@-moz-keyframes slideinleft0 {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(-100px);
 }
}

@-o-keyframes slideinleft0 {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(-100px);
 }
}

@keyframes slideinleft0 {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(-100px);
 }
}

.ani.slideinleft0 {
 -webkit-animation-name: slideinleft0;
 -moz-animation-name: slideinleft0;
 -o-animation-name: slideinleft0;
 animation-name: slideinleft0;
       -moz-animation-delay: 8.5s;
        -webkit-animation-delay: 8.5s;
        -o-animation-delay: 8.5s;
        animation-delay: 8.5s;

}

@-webkit-keyframes slideinright0 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px);
  -webkit-transform: translateY(100px);
 }
}

@-moz-keyframes slideinright0 {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(0px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(100px);
 }
}

@-o-keyframes slideinright0 {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(100px);
 }
}

@keyframes slideinright0 {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(100px);
 }
}

.ani.slideinright0 {
 -webkit-animation-name: slideinright0;
 -moz-animation-name: slideinright0;
 -o-animation-name: slideinright0;
 animation-name: slideinright0;
       -moz-animation-delay: 8.5s;
        -webkit-animation-delay: 8.5s;
        -o-animation-delay: 8.5s;
        animation-delay: 8.5s;

}

@-webkit-keyframes slideinleft1 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px, -30px);
  -webkit-transform: translateY(100px);
 }
}

@-moz-keyframes slideinleft1 {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(100px);
 }
}

@-o-keyframes slideinleft1 {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(100px);
 }
}

@keyframes slideinleft1 {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(100px);
 }
}

.ani.slideinleft1 {
 -webkit-animation-name: slideinleft1;
 -moz-animation-name: slideinleft1;
 -o-animation-name: slideinleft1;
 animation-name: slideinleft1;
       -moz-animation-delay: 9.5s;
        -webkit-animation-delay: 9.5s;
        -o-animation-delay: 9.5s;
        animation-delay: 9.5s;

}

@-webkit-keyframes slideinright1 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px);
  -webkit-transform: translateY(-100px);
 }
}

@-moz-keyframes slideinright1 {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(0px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(-100px);
 }
}

@-o-keyframes slideinright1 {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(-100px);
 }
}

@keyframes slideinright1 {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(-100px);
 }
}

.ani.slideinright1 {
 -webkit-animation-name: slideinright1;
 -moz-animation-name: slideinright1;
 -o-animation-name: slideinright1;
 animation-name: slideinright1;
       -moz-animation-delay: 9.5s;
        -webkit-animation-delay: 9.5s;
        -o-animation-delay: 9.5s;
        animation-delay: 9.5s;

}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #cccccc; }
    .mfp-preloader a:hover {
      color: white; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: white;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: white;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #cccccc;
  font-size: 12px;
  line-height: 18px; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: black; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444444; }
  .mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure {
    /* The shadow behind the image */ }
    .mfp-img-mobile .mfp-figure:after {
      top: 0;
      bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
      display: inline;
      margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #cccccc; }
    .mfp-preloader a:hover {
      color: white; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: white;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: white;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #cccccc;
  font-size: 12px;
  line-height: 18px; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: black; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444444; }
  .mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure {
    /* The shadow behind the image */ }
    .mfp-img-mobile .mfp-figure:after {
      top: 0;
      bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
      display: inline;
      margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }</style>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Quicksand|Josefin+Slab|Oswald:700' rel='stylesheet' type='text/css'>
    <link href='http://daneden.github.io/animate.css/animate.min.css' rel='stylesheet' type='text/css'>
<div class="ani fadeIn">
       <div class="ani fadeIn0 center">
 <h1 class="title">WE PUT THE</h1>
 </div>
 <div class="ani backout back">
  <div class="ani pulse center">
   <img src="http://recycledrobot.co.uk/codepen/img/title2.png">
  </div>
 </div>
  <div class="slam1 ani crunchdown">
<div class="tooth ani shake"></div><div class="tooth ani shake"></div><div class="tooth ani shake"></div><div class="tooth ani shake"></div>
 </div>
 <div class="slam2 ani crunchup">
<div class="tooth ani shaker"></div><div class="tooth ani shaker"></div><div class="tooth ani shaker"></div><div class="tooth ani shaker"></div>
 </div>
 <div class="ani fadeIn1 back1">
  <div class="center"> 
   <h1 class="ani rotateOut title">IN YOUR</h1>
  </div>
 </div>
 <div class="ani fadeIn2 back2">
  <div class="centered"> 
   <h1 class="ani tada title"></h1>
  </div>
 </div>

<div class="ani fadeIn3 back3">
 <div class="ani bounceInUp bartop"></div>
 <div class="ani bounceInDown barbottom"></div>
 <div class="ani bounceInLeft barright"></div>
 <div class="ani bounceInRight barleft"></div>
 <div class="ani slideinleft nav1">
 </div>
 <div class="ani slideinright nav2">
 </div>
 <div class="ani2 fadeIn4 center">
  <img src="http://recycledrobot.co.uk/codepen/img/title2.png">
 </div>
 <div class="ani slideinleft0 menu1">
  <div class="choose">
  <a href="#pop1" class="open-popup-link"><i class="bulb fa fa-lightbulb-o fa-3x"></i></a>
  </div>
 </div>
 <div class="ani slideinright0 menu2">
  <div class="choose">
  <a href="#pop2" class="open-popup-link"><i class="mail fa fa-envelope fa-3x"></i></a>
  </div>
 </div>
 <div class="ani slideinleft1 menu3">
  <div class="choose">
  <a href="#pop3" class="open-popup-link"><i class="about fa fa-users fa-3x"></i></a>
  </div>
 </div>
 <div class="ani slideinright1 menu4">
  <div class="choose">
  <a href="#pop4" class="open-popup-link"><i class="gear fa fa-cog fa-3x"></i></a>
  </div>
 </div>
 <div class="ani fadeIn5 center">
    <img src="http://recycledrobot.co.uk/codepen/img/title3.png">
 </div>
</div>

<div id="pop1" class="white-popup mfp-hide">
 <h1 class="title reflect cc">CONCEPT</h1>
<p class="nice">
Your face is green!
</p>
</div>
<div id="pop2" class="white-popup mfp-hide">
 <h1 class="title reflect cc">SHOUTBOX</h1>
<p class="email">
impshum@recycledrobot.co.uk
</p>
</div>
<div id="pop3" class="white-popup mfp-hide">
 <h1 class="title reflect cc">WHO WE ARE</h1>
<p class="nice">
Developers, designers, musicians & all the production
</p>
</div>
<div id="pop4" class="white-popup mfp-hide">
 <h1 class="title reflect cc">WORKS</h1>
<p class="nice">
That's your choice
</p>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
;
(function ($) {
    var CLOSE_EVENT = 'Close', BEFORE_CLOSE_EVENT = 'BeforeClose', AFTER_CLOSE_EVENT = 'AfterClose', BEFORE_APPEND_EVENT = 'BeforeAppend', MARKUP_PARSE_EVENT = 'MarkupParse', OPEN_EVENT = 'Open', CHANGE_EVENT = 'Change', NS = 'mfp', EVENT_NS = '.' + NS, READY_CLASS = 'mfp-ready', REMOVING_CLASS = 'mfp-removing', PREVENT_CLOSE_CLASS = 'mfp-prevent-close';
    var mfp, MagnificPopup = function () {
        }, _isJQ = !!window.jQuery, _prevStatus, _window = $(window), _body, _document, _prevContentType, _wrapClasses, _currPopupType;
    var _mfpOn = function (name, f) {
            mfp.ev.on(NS + name + EVENT_NS, f);
        }, _getEl = function (className, appendTo, html, raw) {
            var el = document.createElement('div');
            el.className = 'mfp-' + className;
            if (html) {
                el.innerHTML = html;
            }
            if (!raw) {
                el = $(el);
                if (appendTo) {
                    el.appendTo(appendTo);
                }
            } else if (appendTo) {
                appendTo.appendChild(el);
            }
            return el;
        }, _mfpTrigger = function (e, data) {
            mfp.ev.triggerHandler(NS + e, data);
            if (mfp.st.callbacks) {
                e = e.charAt(0).toLowerCase() + e.slice(1);
                if (mfp.st.callbacks[e]) {
                    mfp.st.callbacks[e].apply(mfp, $.isArray(data) ? data : [data]);
                }
            }
        }, _setFocus = function () {
            (mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus();
        }, _getCloseBtn = function (type) {
            if (type !== _currPopupType || !mfp.currTemplate.closeBtn) {
                mfp.currTemplate.closeBtn = $(mfp.st.closeMarkup.replace('%title%', mfp.st.tClose));
                _currPopupType = type;
            }
            return mfp.currTemplate.closeBtn;
        }, _checkInstance = function () {
            if (!$.magnificPopup.instance) {
                mfp = new MagnificPopup();
                mfp.init();
                $.magnificPopup.instance = mfp;
            }
        }, supportsTransitions = function () {
            var s = document.createElement('p').style, v = [
                    'ms',
                    'O',
                    'Moz',
                    'Webkit'
                ];
            if (s['transition'] !== undefined) {
                return true;
            }
            while (v.length) {
                if (window.CP.shouldStopExecution(1)) {
                    break;
                }
                if (v.pop() + 'Transition' in s) {
                    return true;
                }
            }
            window.CP.exitedLoop(1);
            return false;
        };
    MagnificPopup.prototype = {
        constructor: MagnificPopup,
        init: function () {
            var appVersion = navigator.appVersion;
            mfp.isIE7 = appVersion.indexOf('MSIE 7.') !== -1;
            mfp.isIE8 = appVersion.indexOf('MSIE 8.') !== -1;
            mfp.isLowIE = mfp.isIE7 || mfp.isIE8;
            mfp.isAndroid = /android/gi.test(appVersion);
            mfp.isIOS = /iphone|ipad|ipod/gi.test(appVersion);
            mfp.supportsTransition = supportsTransitions();
            mfp.probablyMobile = mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent);
            _body = $(document.body);
            _document = $(document);
            mfp.popupsCache = {};
        },
        open: function (data) {
            var i;
            if (data.isObj === false) {
                mfp.items = data.items.toArray();
                mfp.index = 0;
                var items = data.items, item;
                for (i = 0; i < items.length; i++) {
                    if (window.CP.shouldStopExecution(2)) {
                        break;
                    }
                    item = items[i];
                    if (item.parsed) {
                        item = item.el[0];
                    }
                    if (item === data.el[0]) {
                        mfp.index = i;
                        break;
                    }
                }
                window.CP.exitedLoop(2);
            } else {
                mfp.items = $.isArray(data.items) ? data.items : [data.items];
                mfp.index = data.index || 0;
            }
            if (mfp.isOpen) {
                mfp.updateItemHTML();
                return;
            }
            mfp.types = [];
            _wrapClasses = '';
            if (data.mainEl && data.mainEl.length) {
                mfp.ev = data.mainEl.eq(0);
            } else {
                mfp.ev = _document;
            }
            if (data.key) {
                if (!mfp.popupsCache[data.key]) {
                    mfp.popupsCache[data.key] = {};
                }
                mfp.currTemplate = mfp.popupsCache[data.key];
            } else {
                mfp.currTemplate = {};
            }
            mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data);
            mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos;
            if (mfp.st.modal) {
                mfp.st.closeOnContentClick = false;
                mfp.st.closeOnBgClick = false;
                mfp.st.showCloseBtn = false;
                mfp.st.enableEscapeKey = false;
            }
            if (!mfp.bgOverlay) {
                mfp.bgOverlay = _getEl('bg').on('click' + EVENT_NS, function () {
                    mfp.close();
                });
                mfp.wrap = _getEl('wrap').attr('tabindex', -1).on('click' + EVENT_NS, function (e) {
                    if (mfp._checkIfClose(e.target)) {
                        mfp.close();
                    }
                });
                mfp.container = _getEl('container', mfp.wrap);
            }
            mfp.contentContainer = _getEl('content');
            if (mfp.st.preloader) {
                mfp.preloader = _getEl('preloader', mfp.container, mfp.st.tLoading);
            }
            var modules = $.magnificPopup.modules;
            for (i = 0; i < modules.length; i++) {
                if (window.CP.shouldStopExecution(3)) {
                    break;
                }
                var n = modules[i];
                n = n.charAt(0).toUpperCase() + n.slice(1);
                mfp['init' + n].call(mfp);
            }
            window.CP.exitedLoop(3);
            _mfpTrigger('BeforeOpen');
            if (mfp.st.showCloseBtn) {
                if (!mfp.st.closeBtnInside) {
                    mfp.wrap.append(_getCloseBtn());
                } else {
                    _mfpOn(MARKUP_PARSE_EVENT, function (e, template, values, item) {
                        values.close_replaceWith = _getCloseBtn(item.type);
                    });
                    _wrapClasses += ' mfp-close-btn-in';
                }
            }
            if (mfp.st.alignTop) {
                _wrapClasses += ' mfp-align-top';
            }
            if (mfp.fixedContentPos) {
                mfp.wrap.css({
                    overflow: mfp.st.overflowY,
                    overflowX: 'hidden',
                    overflowY: mfp.st.overflowY
                });
            } else {
                mfp.wrap.css({
                    top: _window.scrollTop(),
                    position: 'absolute'
                });
            }
            if (mfp.st.fixedBgPos === false || mfp.st.fixedBgPos === 'auto' && !mfp.fixedContentPos) {
                mfp.bgOverlay.css({
                    height: _document.height(),
                    position: 'absolute'
                });
            }
            if (mfp.st.enableEscapeKey) {
                _document.on('keyup' + EVENT_NS, function (e) {
                    if (e.keyCode === 27) {
                        mfp.close();
                    }
                });
            }
            _window.on('resize' + EVENT_NS, function () {
                mfp.updateSize();
            });
            if (!mfp.st.closeOnContentClick) {
                _wrapClasses += ' mfp-auto-cursor';
            }
            if (_wrapClasses)
                mfp.wrap.addClass(_wrapClasses);
            var windowHeight = mfp.wH = _window.height();
            var windowStyles = {};
            if (mfp.fixedContentPos) {
                if (mfp._hasScrollBar(windowHeight)) {
                    var s = mfp._getScrollbarSize();
                    if (s) {
                        windowStyles.marginRight = s;
                    }
                }
            }
            if (mfp.fixedContentPos) {
                if (!mfp.isIE7) {
                    windowStyles.overflow = 'hidden';
                } else {
                    $('body, html').css('overflow', 'hidden');
                }
            }
            var classesToadd = mfp.st.mainClass;
            if (mfp.isIE7) {
                classesToadd += ' mfp-ie7';
            }
            if (classesToadd) {
                mfp._addClassToMFP(classesToadd);
            }
            mfp.updateItemHTML();
            _mfpTrigger('BuildControls');
            $('html').css(windowStyles);
            mfp.bgOverlay.add(mfp.wrap).prependTo(document.body);
            mfp._lastFocusedEl = document.activeElement;
            setTimeout(function () {
                if (mfp.content) {
                    mfp._addClassToMFP(READY_CLASS);
                    _setFocus();
                } else {
                    mfp.bgOverlay.addClass(READY_CLASS);
                }
                _document.on('focusin' + EVENT_NS, function (e) {
                    if (e.target !== mfp.wrap[0] && !$.contains(mfp.wrap[0], e.target)) {
                        _setFocus();
                        return false;
                    }
                });
            }, 16);
            mfp.isOpen = true;
            mfp.updateSize(windowHeight);
            _mfpTrigger(OPEN_EVENT);
            return data;
        },
        close: function () {
            if (!mfp.isOpen)
                return;
            _mfpTrigger(BEFORE_CLOSE_EVENT);
            mfp.isOpen = false;
            if (mfp.st.removalDelay && !mfp.isLowIE && mfp.supportsTransition) {
                mfp._addClassToMFP(REMOVING_CLASS);
                setTimeout(function () {
                    mfp._close();
                }, mfp.st.removalDelay);
            } else {
                mfp._close();
            }
        },
        _close: function () {
            _mfpTrigger(CLOSE_EVENT);
            var classesToRemove = REMOVING_CLASS + ' ' + READY_CLASS + ' ';
            mfp.bgOverlay.detach();
            mfp.wrap.detach();
            mfp.container.empty();
            if (mfp.st.mainClass) {
                classesToRemove += mfp.st.mainClass + ' ';
            }
            mfp._removeClassFromMFP(classesToRemove);
            if (mfp.fixedContentPos) {
                var windowStyles = { marginRight: '' };
                if (mfp.isIE7) {
                    $('body, html').css('overflow', '');
                } else {
                    windowStyles.overflow = '';
                }
                $('html').css(windowStyles);
            }
            _document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS);
            mfp.ev.off(EVENT_NS);
            mfp.wrap.attr('class', 'mfp-wrap').removeAttr('style');
            mfp.bgOverlay.attr('class', 'mfp-bg');
            mfp.container.attr('class', 'mfp-container');
            if (mfp.st.showCloseBtn && (!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
                if (mfp.currTemplate.closeBtn)
                    mfp.currTemplate.closeBtn.detach();
            }
            if (mfp._lastFocusedEl) {
                $(mfp._lastFocusedEl).focus();
            }
            mfp.currItem = null;
            mfp.content = null;
            mfp.currTemplate = null;
            mfp.prevHeight = 0;
            _mfpTrigger(AFTER_CLOSE_EVENT);
        },
        updateSize: function (winHeight) {
            if (mfp.isIOS) {
                var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
                var height = window.innerHeight * zoomLevel;
                mfp.wrap.css('height', height);
                mfp.wH = height;
            } else {
                mfp.wH = winHeight || _window.height();
            }
            if (!mfp.fixedContentPos) {
                mfp.wrap.css('height', mfp.wH);
            }
            _mfpTrigger('Resize');
        },
        updateItemHTML: function () {
            var item = mfp.items[mfp.index];
            mfp.contentContainer.detach();
            if (mfp.content)
                mfp.content.detach();
            if (!item.parsed) {
                item = mfp.parseEl(mfp.index);
            }
            var type = item.type;
            _mfpTrigger('BeforeChange', [
                mfp.currItem ? mfp.currItem.type : '',
                type
            ]);
            mfp.currItem = item;
            if (!mfp.currTemplate[type]) {
                var markup = mfp.st[type] ? mfp.st[type].markup : false;
                _mfpTrigger('FirstMarkupParse', markup);
                if (markup) {
                    mfp.currTemplate[type] = $(markup);
                } else {
                    mfp.currTemplate[type] = true;
                }
            }
            if (_prevContentType && _prevContentType !== item.type) {
                mfp.container.removeClass('mfp-' + _prevContentType + '-holder');
            }
            var newContent = mfp['get' + type.charAt(0).toUpperCase() + type.slice(1)](item, mfp.currTemplate[type]);
            mfp.appendContent(newContent, type);
            item.preloaded = true;
            _mfpTrigger(CHANGE_EVENT, item);
            _prevContentType = item.type;
            mfp.container.prepend(mfp.contentContainer);
            _mfpTrigger('AfterChange');
        },
        appendContent: function (newContent, type) {
            mfp.content = newContent;
            if (newContent) {
                if (mfp.st.showCloseBtn && mfp.st.closeBtnInside && mfp.currTemplate[type] === true) {
                    if (!mfp.content.find('.mfp-close').length) {
                        mfp.content.append(_getCloseBtn());
                    }
                } else {
                    mfp.content = newContent;
                }
            } else {
                mfp.content = '';
            }
            _mfpTrigger(BEFORE_APPEND_EVENT);
            mfp.container.addClass('mfp-' + type + '-holder');
            mfp.contentContainer.append(mfp.content);
        },
        parseEl: function (index) {
            var item = mfp.items[index], type = item.type;
            if (item.tagName) {
                item = { el: $(item) };
            } else {
                item = {
                    data: item,
                    src: item.src
                };
            }
            if (item.el) {
                var types = mfp.types;
                for (var i = 0; i < types.length; i++) {
                    if (window.CP.shouldStopExecution(4)) {
                        break;
                    }
                    if (item.el.hasClass('mfp-' + types[i])) {
                        type = types[i];
                        break;
                    }
                }
                window.CP.exitedLoop(4);
                item.src = item.el.attr('data-mfp-src');
                if (!item.src) {
                    item.src = item.el.attr('href');
                }
            }
            item.type = type || mfp.st.type || 'inline';
            item.index = index;
            item.parsed = true;
            mfp.items[index] = item;
            _mfpTrigger('ElementParse', item);
            return mfp.items[index];
        },
        addGroup: function (el, options) {
            var eHandler = function (e) {
                e.mfpEl = this;
                mfp._openClick(e, el, options);
            };
            if (!options) {
                options = {};
            }
            var eName = 'click.magnificPopup';
            options.mainEl = el;
            if (options.items) {
                options.isObj = true;
                el.off(eName).on(eName, eHandler);
            } else {
                options.isObj = false;
                if (options.delegate) {
                    el.off(eName).on(eName, options.delegate, eHandler);
                } else {
                    options.items = el;
                    el.off(eName).on(eName, eHandler);
                }
            }
        },
        _openClick: function (e, el, options) {
            var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick;
            if (!midClick && (e.which === 2 || e.ctrlKey || e.metaKey)) {
                return;
            }
            var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
            if (disableOn) {
                if ($.isFunction(disableOn)) {
                    if (!disableOn.call(mfp)) {
                        return true;
                    }
                } else {
                    if (_window.width() < disableOn) {
                        return true;
                    }
                }
            }
            if (e.type) {
                e.preventDefault();
                if (mfp.isOpen) {
                    e.stopPropagation();
                }
            }
            options.el = $(e.mfpEl);
            if (options.delegate) {
                options.items = el.find(options.delegate);
            }
            mfp.open(options);
        },
        updateStatus: function (status, text) {
            if (mfp.preloader) {
                if (_prevStatus !== status) {
                    mfp.container.removeClass('mfp-s-' + _prevStatus);
                }
                if (!text && status === 'loading') {
                    text = mfp.st.tLoading;
                }
                var data = {
                    status: status,
                    text: text
                };
                _mfpTrigger('UpdateStatus', data);
                status = data.status;
                text = data.text;
                mfp.preloader.html(text);
                mfp.preloader.find('a').on('click', function (e) {
                    e.stopImmediatePropagation();
                });
                mfp.container.addClass('mfp-s-' + status);
                _prevStatus = status;
            }
        },
        _checkIfClose: function (target) {
            if ($(target).hasClass(PREVENT_CLOSE_CLASS)) {
                return;
            }
            var closeOnContent = mfp.st.closeOnContentClick;
            var closeOnBg = mfp.st.closeOnBgClick;
            if (closeOnContent && closeOnBg) {
                return true;
            } else {
                if (!mfp.content || $(target).hasClass('mfp-close') || mfp.preloader && target === mfp.preloader[0]) {
                    return true;
                }
                if (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) {
                    if (closeOnBg) {
                        if ($.contains(document, target)) {
                            return true;
                        }
                    }
                } else if (closeOnContent) {
                    return true;
                }
            }
            return false;
        },
        _addClassToMFP: function (cName) {
            mfp.bgOverlay.addClass(cName);
            mfp.wrap.addClass(cName);
        },
        _removeClassFromMFP: function (cName) {
            this.bgOverlay.removeClass(cName);
            mfp.wrap.removeClass(cName);
        },
        _hasScrollBar: function (winHeight) {
            return (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height());
        },
        _parseMarkup: function (template, values, item) {
            var arr;
            if (item.data) {
                values = $.extend(item.data, values);
            }
            _mfpTrigger(MARKUP_PARSE_EVENT, [
                template,
                values,
                item
            ]);
            $.each(values, function (key, value) {
                if (value === undefined || value === false) {
                    return true;
                }
                arr = key.split('_');
                if (arr.length > 1) {
                    var el = template.find(EVENT_NS + '-' + arr[0]);
                    if (el.length > 0) {
                        var attr = arr[1];
                        if (attr === 'replaceWith') {
                            if (el[0] !== value[0]) {
                                el.replaceWith(value);
                            }
                        } else if (attr === 'img') {
                            if (el.is('img')) {
                                el.attr('src', value);
                            } else {
                                el.replaceWith('<img src="' + value + '" class="' + el.attr('class') + '" />');
                            }
                        } else {
                            el.attr(arr[1], value);
                        }
                    }
                } else {
                    template.find(EVENT_NS + '-' + key).html(value);
                }
            });
        },
        _getScrollbarSize: function () {
            if (mfp.scrollbarSize === undefined) {
                var scrollDiv = document.createElement('div');
                scrollDiv.id = 'mfp-sbm';
                scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
                document.body.appendChild(scrollDiv);
                mfp.scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
                document.body.removeChild(scrollDiv);
            }
            return mfp.scrollbarSize;
        }
    };
    $.magnificPopup = {
        instance: null,
        proto: MagnificPopup.prototype,
        modules: [],
        open: function (options, index) {
            _checkInstance();
            if (!options) {
                options = {};
            } else {
                options = $.extend(true, {}, options);
            }
            options.isObj = true;
            options.index = index || 0;
            return this.instance.open(options);
        },
        close: function () {
            return $.magnificPopup.instance && $.magnificPopup.instance.close();
        },
        registerModule: function (name, module) {
            if (module.options) {
                $.magnificPopup.defaults[name] = module.options;
            }
            $.extend(this.proto, module.proto);
            this.modules.push(name);
        },
        defaults: {
            disableOn: 0,
            key: null,
            midClick: false,
            mainClass: '',
            preloader: true,
            focus: '',
            closeOnContentClick: false,
            closeOnBgClick: true,
            closeBtnInside: true,
            showCloseBtn: true,
            enableEscapeKey: true,
            modal: false,
            alignTop: false,
            removalDelay: 0,
            fixedContentPos: 'auto',
            fixedBgPos: 'auto',
            overflowY: 'auto',
            closeMarkup: '<button title="%title%" type="button" class="mfp-close">&times;</button>',
            tClose: 'Close (Esc)',
            tLoading: 'Loading...'
        }
    };
    $.fn.magnificPopup = function (options) {
        _checkInstance();
        var jqEl = $(this);
        if (typeof options === 'string') {
            if (options === 'open') {
                var items, itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup, index = parseInt(arguments[1], 10) || 0;
                if (itemOpts.items) {
                    items = itemOpts.items[index];
                } else {
                    items = jqEl;
                    if (itemOpts.delegate) {
                        items = items.find(itemOpts.delegate);
                    }
                    items = items.eq(index);
                }
                mfp._openClick({ mfpEl: items }, jqEl, itemOpts);
            } else {
                if (mfp.isOpen)
                    mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
            }
        } else {
            options = $.extend(true, {}, options);
            if (_isJQ) {
                jqEl.data('magnificPopup', options);
            } else {
                jqEl[0].magnificPopup = options;
            }
            mfp.addGroup(jqEl, options);
        }
        return jqEl;
    };
    var INLINE_NS = 'inline', _hiddenClass, _inlinePlaceholder, _lastInlineElement, _putInlineElementsBack = function () {
            if (_lastInlineElement) {
                _inlinePlaceholder.after(_lastInlineElement.addClass(_hiddenClass)).detach();
                _lastInlineElement = null;
            }
        };
    $.magnificPopup.registerModule(INLINE_NS, {
        options: {
            hiddenClass: 'hide',
            markup: '',
            tNotFound: 'Content not found'
        },
        proto: {
            initInline: function () {
                mfp.types.push(INLINE_NS);
                _mfpOn(CLOSE_EVENT + '.' + INLINE_NS, function () {
                    _putInlineElementsBack();
                });
            },
            getInline: function (item, template) {
                _putInlineElementsBack();
                if (item.src) {
                    var inlineSt = mfp.st.inline, el = $(item.src);
                    if (el.length) {
                        var parent = el[0].parentNode;
                        if (parent && parent.tagName) {
                            if (!_inlinePlaceholder) {
                                _hiddenClass = inlineSt.hiddenClass;
                                _inlinePlaceholder = _getEl(_hiddenClass);
                                _hiddenClass = 'mfp-' + _hiddenClass;
                            }
                            _lastInlineElement = el.after(_inlinePlaceholder).detach().removeClass(_hiddenClass);
                        }
                        mfp.updateStatus('ready');
                    } else {
                        mfp.updateStatus('error', inlineSt.tNotFound);
                        el = $('<div>');
                    }
                    item.inlineElement = el;
                    return el;
                }
                mfp.updateStatus('ready');
                mfp._parseMarkup(template, {}, item);
                return template;
            }
        }
    });
    var hasMozTransform, getHasMozTransform = function () {
            if (hasMozTransform === undefined) {
                hasMozTransform = document.createElement('p').style.MozTransform !== undefined;
            }
            return hasMozTransform;
        };
    $.magnificPopup.registerModule('zoom', {
        options: {
            enabled: false,
            easing: 'ease-in-out',
            duration: 300,
            opener: function (element) {
                return element.is('img') ? element : element.find('img');
            }
        },
        proto: {
            initZoom: function () {
                var zoomSt = mfp.st.zoom, ns = '.zoom', image;
                if (!zoomSt.enabled || !mfp.supportsTransition) {
                    return;
                }
                var duration = zoomSt.duration, getElToAnimate = function (image) {
                        var newImg = image.clone().removeAttr('style').removeAttr('class').addClass('mfp-animated-image'), transition = 'all ' + zoomSt.duration / 1000 + 's ' + zoomSt.easing, cssObj = {
                                position: 'fixed',
                                zIndex: 9999,
                                left: 0,
                                top: 0,
                                '-webkit-backface-visibility': 'hidden'
                            }, t = 'transition';
                        cssObj['-webkit-' + t] = cssObj['-moz-' + t] = cssObj['-o-' + t] = cssObj[t] = transition;
                        newImg.css(cssObj);
                        return newImg;
                    }, showMainContent = function () {
                        mfp.content.css('visibility', 'visible');
                    }, openTimeout, animatedImg;
                _mfpOn('BuildControls' + ns, function () {
                    if (mfp._allowZoom()) {
                        clearTimeout(openTimeout);
                        mfp.content.css('visibility', 'hidden');
                        image = mfp._getItemToZoom();
                        if (!image) {
                            showMainContent();
                            return;
                        }
                        animatedImg = getElToAnimate(image);
                        animatedImg.css(mfp._getOffset());
                        mfp.wrap.append(animatedImg);
                        openTimeout = setTimeout(function () {
                            animatedImg.css(mfp._getOffset(true));
                            openTimeout = setTimeout(function () {
                                showMainContent();
                                setTimeout(function () {
                                    animatedImg.remove();
                                    image = animatedImg = null;
                                    _mfpTrigger('ZoomAnimationEnded');
                                }, 16);
                            }, duration);
                        }, 16);
                    }
                });
                _mfpOn(BEFORE_CLOSE_EVENT + ns, function () {
                    if (mfp._allowZoom()) {
                        clearTimeout(openTimeout);
                        mfp.st.removalDelay = duration;
                        if (!image) {
                            image = mfp._getItemToZoom();
                            if (!image) {
                                return;
                            }
                            animatedImg = getElToAnimate(image);
                        }
                        animatedImg.css(mfp._getOffset(true));
                        mfp.wrap.append(animatedImg);
                        mfp.content.css('visibility', 'hidden');
                        setTimeout(function () {
                            animatedImg.css(mfp._getOffset());
                        }, 16);
                    }
                });
                _mfpOn(CLOSE_EVENT + ns, function () {
                    if (mfp._allowZoom()) {
                        showMainContent();
                        if (animatedImg) {
                            animatedImg.remove();
                        }
                        image = null;
                    }
                });
            },
            _allowZoom: function () {
                return mfp.currItem.type === 'image';
            },
            _getItemToZoom: function () {
                if (mfp.currItem.hasSize) {
                    return mfp.currItem.img;
                } else {
                    return false;
                }
            },
            _getOffset: function (isLarge) {
                var el;
                if (isLarge) {
                    el = mfp.currItem.img;
                } else {
                    el = mfp.st.zoom.opener(mfp.currItem.el || mfp.currItem);
                }
                var offset = el.offset();
                var paddingTop = parseInt(el.css('padding-top'), 10);
                var paddingBottom = parseInt(el.css('padding-bottom'), 10);
                offset.top -= $(window).scrollTop() - paddingTop;
                var obj = {
                    width: el.width(),
                    height: (_isJQ ? el.innerHeight() : el[0].offsetHeight) - paddingBottom - paddingTop
                };
                if (getHasMozTransform()) {
                    obj['-moz-transform'] = obj['transform'] = 'translate(' + offset.left + 'px,' + offset.top + 'px)';
                } else {
                    obj.left = offset.left;
                    obj.top = offset.top;
                }
                return obj;
            }
        }
    });
}(window.jQuery || window.Zepto));
$('.open-popup-link').magnificPopup({
    type: 'inline',
    midClick: true,
    removalDelay: 300,
    mainClass: 'mfp-fade'
});
//# sourceURL=pen.js
</script>
<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>

Penjelasan :
Ganti Link Gambar sesuai kinginan ganti link title sesuai fungsi

Edited by. Myscript2010
Sources by. Impshum on Codepen

DEMOSHOW

Teks Shadow 3D

Memasang kode Teks Shadow 3D
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 type="text/css">
@import "compass/css3";
body {
    background: #333;
    padding-left:0px;}

h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}

.otto {
  background: #dad ;
  color: #888;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
</style>

<h1 class="otto">
DEMO SHOW
</h1>

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW

Effek Nomor Komentar

Memasang kode Efek Nomor Komentar
kode ini dapat menampilkan nomor secara berurutan, untuk penerapnnya, login ke akun blog klik edit HTML temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian Copy kode berikut ini Pastekan diatas kode  ]]></b:skin> dan klik simpan selesai

/*!
 * Efek nomor pada komentar
 * Myscript2010
 */
.comments {counter-reset:number}
.comments .comment {
  position:relative;
  counter-increment:number;
}
.comments .comment-content {margin-right:50px !important}
.comments .comment:after {
  content:counter(number);
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  font:italic normal 20px/40px "Times New Roman",Times,Serif;
  color:#ccc;
  position:absolute;
  top:10px;
  right:10px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:4px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
.comments .comment .comment-thread.inline-thread {counter-reset:number}
.comments .comment .comment-thread.inline-thread .comment:after {
  font-size:18px;
  line-height:30px;
  width:30px;
  height:30px;
}
.comments .comment:hover:after {
  background-color:#600;
  border-color:#900;
  color:white;
}

Penjelasan:
Klik pada teks Show Comments dibawah ini, untuk melihat Effek nomor komentar

Sumber by. SB77
Edited by. Myscript2010

Hidden Komentar

Memasang Kode Hide Komentar
Kode ini dapat menyembunyikan kotak komentar,
Untuk penerapannya. Login ke akun blog klik edit HTML temukan kode :  ]]></b:skin>
gunakan CTRL F untuk pencarian,
copy kode berikut ini pastekan diatas kode ]]></b:skin>

/*Show Hide*/
a.openpanel {display:block;border:1px solid #2AAADC;text-align:center;font-weight:bold;line-height:30px;background:#161616;transition: all .15s ease-in-out;transform-origin: 50% 1px;position:relative;
}a.openpanel em {display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#161616;border:1px solid #2AAADC}a.openpanel.active em {top:6px}div.paneline {height:0px;transition: all .15s ease-in-out}div.kerenPanel {padding:10px 20px 20px;margin:0px 0px !important}

Setelah itu Cari kode </head>  gunakan CTRL F untuk pencarian,
Copy kode berikut ini : Pastekan diatas kode : </head> dan klik simpan selesai

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
jQuery(function() {
jQuery(panelSelector).hide()
.addClass('kerenPanel')
.before('<a class="openpanel" href="#" title="Comments">' + openPanelText + '<em></em></a>')
.after('<div class="paneline"></div>');
jQuery('a.openpanel').toggle(function() {
jQuery(this).addClass('active').html(closePanelText + '<em></em>');
jQuery('div.kerenPanel').slideDown(slideDownPanelSpeed);
return false;
}, function() {
jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
jQuery('div.kerenPanel').slideUp(slideUpPanelSpeed);
return false;});
});
//]]>
</script>

Penjelasan :
Lihat Contoh dibawah ini klik pada teks Show Hide Comments

Edited by. Myscript2010
Sumber by. Ficripebriyana

Threaded Komentar Hover

Memasang kode Threaded Comment Hover
Kode ini menampilkan post komentar dengan
efeect hover, berikut cara penerapannya :
Login ke akun blog klik edit HTML temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian,
copy kode berikut ini pastekan diatas kode ]]></b:skin>

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

Setelah itu copy kode berikut ini :
Pastekan dibawah kode  ]]></b:skin> dan klik simpan selesai

<style type='text/css'>

/*Start Modif kotak Komentar*/

.comments .comments-content .icon.blog-author{

background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);

}

.comments .comments-content .datetime a{float:right;

}

.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;

}

.comment-actions a{

background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;

}

.comments .comment .comment-actions a:hover,.comments .continue a:hover{

text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;

}

.avatar-image-container{

-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;

}

.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;

}

.deleted-comment{color:gray;font-style:italic;

}

/*End Modif kotak Komentar*/

</style>

Penjelasan :
Edit background warna sesuai keinginan, klik Show Comments sebagai contoh dibawah ini

Edited by. Myscript2010
Sumber by. Tutorialbelajarblogger.

Threaded Komentar Box

Memasang kode Threaded Comment Box
Kode ini menampilkan post komentar dengan model kotak yang dapat menghiasi blog, berikut cara penerapannya :
Login ke akun blog klik edit HTML temukan kode berikut  :
 <b:include data='post' name='threaded_comments'/>
gunakan CTRL F untuk pencarian, kemudian ganti kode tersebut dengan kode  :
<b:include data='post' name='comments'/>
selanjutnya cari kode berikut :
<b:includable id='comments' var='post'>....</b:includable>
hapus semua kode tersebut, ganti dengan kode :

 <b:includable id='comments' var='post'>
<style type='text/css'>
  #origin_cform{font-family:&#39;Oswald&#39;,sans-serif;}
  #comments {line-height:1.4em;margin: 60px 0 15px 0;position:relative;background:#2a3542;border-radius:4px;padding:25px 20px 0 20px;font-family:&#39;Open Sans&#39;,sans-serif}
  #comments h3 {border-radius:4px 4px 0 0;font-size:14px;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase;font-weight:normal;left:0;top:-43px;background:#22afa4;color:#fff;width:85%;padding:14px 20px 14px 75px;position:absolute}
#comments h3:before {
 content: &quot;\f0e6&quot;;
 font-family:fontAwesome;
 font-size:22px;
 font-style: normal;
 background-color:#bbb;
 color:#fff;
 border-radius:5px 0 0 4px;
 top:2px;
 left:0;
margin-top:-1px;
 padding:13px 20px 12px 20px;
 position:absolute;
}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #808080;
background:#444;
padding:4px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1igcVMsF6660G3U_T4iCvAMX-gLXYzpzLU7FeC2zp4OvTqNWcvIX1KRCjleQZUEAqJI4G9-skzbXqMPbv368b76LE2xn7KA1Wb7y_BL3qsJ5b-OsMk9ysji-_Ko2b7B1uIEvbxLvho6-o/s1600/anon.jpg) no-repeat;
}
.comment_name a {
color:#21afa4;
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
text-decoration: none;
}
.comment_name a:hover {
color:#c94e5c;}
.comment_admin .comment_name  {
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
text-decoration: none;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
font-weight:normal;
position:relative;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #999;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a{
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a:hover{
color: #a9a9a9;
text-decoration:none;
}
.comment_body{
margin-top:-72px;
margin-left:65px;
background:#444;
border:1px solid #1d2630;
border-top:1px solid #171f28;
border-left:1px solid #171f28;
padding:15px;
}
div.comment_inner.comment_admin{
background:#888;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #999;
font-size: 13px;
word-wrap:break-word;
padding-bottom:10px;
}
.comment_inner {
padding: 15px;
margin: 5px 0 5px 0;
background-color:#35404d;
}
.comment_child .comment_wrap {padding-left: 5%;}
.comment_reply {
display: inline-block;
margin-top:8px;
margin-left:-5px;
padding: 1px 12px;
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #54687c;
font: 11px/18px sans-serif;
transition: background-color 1s ease-out 0s;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #627c96;
}
.unneeded-paging-control {display: none;}
#comment-editor {width:100% !important;background:#e1e3e6 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-a5uEOdTiq8Tc_Zkl3EZo-TEznITFGWU1erXjh3TbpzDw6C2qOvQWqll23_MrrXE-P9nu2bE1pZq0bhSf6Xk6vGpiaDgFu1zf7Kg5UcmZHxH6XrVotyHErzHEEi02CaTQxtWV5bOKQ0/s1600/kangis-loader.gif&#39;) no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative;}
.comment-form {max-width: 100% !important;}
.comment_form a {
    margin-bottom:8px;
text-decoration: none;
font-weight: normal;
font-family:&#39;Oswald&#39;,sans-serif;
font-size: 15px;
text-align:center;
    color:#54687c;
}
  .comment_form a:hover {text-decoration: none;color:#f2f2f2}

.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
img.comment_emo {margin:0;padding:0;vertical-align:middle}
.comment_emo_list{
display:none;
}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}

.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1igcVMsF6660G3U_T4iCvAMX-gLXYzpzLU7FeC2zp4OvTqNWcvIX1KRCjleQZUEAqJI4G9-skzbXqMPbv368b76LE2xn7KA1Wb7y_BL3qsJ5b-OsMk9ysji-_Ko2b7B1uIEvbxLvho6-o/s1600/anon.jpg) no-repeat}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
iframe{border:none;overflow:hidden}
.deleted-comment {
background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuY0chuRhsz3FxEEDVuCi5SmGzJqZL53rdndwUzewQP9Mxd8_PzyUAFx07PUqzbxwTP_RPP78QdC-zENS-Itz-EWBC-3oHlPuZxbjHLLdp5LWuDPgdiWPUa3mJWwGnJSThJ1NS2gXJWk/s1600/tempat-sampah.png) no-repeat 2% 50%;
color:#efd4d4;
line-height: 22px;
border: 1px solid #c44d4d;
padding:12px 15px 12px 45px;
margin:5px 0;
display: block;
}
.comment-form p {
background: #54687c;
padding: 15px 15px 14px 15px;
margin: 5px 0 5px 0;
color: #f4f4f4;
font-size: 13px;
line-height: 20px;
border-radius:4px;
position:relative;
}
div.comment_avatar img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3NiPnPF2wtn7mlxCv9Vff9_yMtY8GNLXbI9vRM7mgfIxutl026vHsqTfu3I3Ms-6AmvpgtM_vbN9hb_g01F2ocI43RYLGWpwIjxNOpYOH0z8qDtIqX5xIphT2RcVR-l1SsmD0fJ7f1pY/s45-c/gravatar.png);
}
  div:target .comment_inner{background:#346656;transition:all 15s ease-out;}
div:target .comment_child .comment_wrap .comment_inner{background:#404c5c;}

iframe{border:none;overflow:hidden}

.center {
 text-align:center
}

img.cm-prev {
  max-width:100%;
  margin:10px auto;
  page-break-after:always;
  display:block;
  text-align:center !important;
}
</style>

<div class='comments' id='comments'>
    <a name='comments'/>
 <b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>
              
  <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>
    &#160;
    <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>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                      
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                            
   <div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>                                                                                    
     <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if>
   
    <div class='comment_header'>
                               <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <data:comment.authorAvatarImage/>
                                 </div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a>
     </div>
                        
     <div class='clear'/>
    </div>
        
    <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>      
                  <span class='comment_service'>
                      <b:include data='comment' name='commentDeleteIcon'/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' title='Hapus komentar jelek ini'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4YSKmXPnUyKS9PS7NseMipoS0rN2cdZi7LglrMYj1xk8_MwdLxHwIcpXcpvaVI4TXqh3dwNAHnRi9XCGOLmQ61qIE3JRxp0FYqxIkkwI2rQCZw-2yIjLQBrDEkS_xxcE56f_kL5W9Ho/s1600/delete4.png' title='Hapus komentar jelek ini'/>
</a>
      <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'>                   <data:comment.timestamp/></abbr></span>
  </span></div>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
                        <div class='clear'/>
                     
     </b:if>
                                                     
    </div>                        
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
          
    <div class='comment_child'/>
    <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>             
    </div>
   </b:loop>             
   </div>   
    <div class='clear'/>
    <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>
       &#160;
       <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>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form'>        
        
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <div class='comment_emo_list'/>                                                                                             
       <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>

                  
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
    
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>
     
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = true;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = true;//Auto replace link image,  ketik "false" untuk mendisable.
                                Replace_Force_Tag = true;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
     
        //Pengaturan Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOwvR33GPpw0_kvITCIqhUiKNEl0f0DvbmK3xhTpm7AYmPgE6PV0SrBx386HAV7xoKmcxcmH1k0YeCDse-djkWD_HsVl79st1HsbudBOoJsTe8mU8HtnCPTFvCJZvB5DVTE4gPwHcP1zE/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYNI_GvN7HtcGXBoNIuk7s7mnn8ek-_8OHvD1bv19rXW0bX4rzG1bXJ9LF6kKPerRknIjEpFF9a0FurCpdVVUGX1Kc9vC-i5L2HUfoLZz1rllTAsybjqt6yf8WYTiz_VWjifNjMbRhnI/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinRMYWJTcvCn3ytQXb61f18mvbbbMzcU-DZ6e3_IV5N2PbgyD50aRAqNew2ulXp32TTr99DYact8d8fMK4lK2DoQI0ArCxrTur0DnAh2CgRG2yl_7y-rvfX88VsMa72bPYd5pQIl9hlIA/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh4u8ZhkeEwezYmkvfFPP50ZA3s-99OUlmQhH5yrTq1p7MXk-dyO48n0TGXTFdMhIjMvS1dAykHCMNeEU0O-JLQoqjgeGezLsNICLQW8XCSJAL8eatyLh71KN_TYd-cRQzZ9y9hFbKxx8/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjmRWIUcZyNN7Z42lScny09K2tSVZvdiuaVsXsRkTWbEf2c0zbwh9E6Qd0n-0OmpVUYpsIt0xZx9SMNLKF1zG3zIyqmEYDS5L2-UejtXEncGlCg4noof6eJ8p1iDJpLD4tZx9knk0DeYc/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqa6oDnRn7Tcftfmmg5X0cvfxWLpv6q_NQd-jyWHDWHmHeGptGvr4egvJLa1VFbA_XDwotjFS32F-BMilumy9p99NpiV7XcrMTc7XXUmPtvkejAZr8BEDwFpy_W0mXPKpFONusG6QCxoc/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZFFP99SdvORNs_22V_5QKkFLQ552i1Bh2jn730cq5njHOgfkXY3Uw_o6iU07OatI_9chyphenhyphenXs3CI2VmVqQQZrKbB47gQJ0KBZiK3Y6Wwmdmgwul1YpXiOPKBYSRcxDQWIjlQkABLhNKveE/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6arb7suj8EbGejmiXnyt1hcrlsLQGcLUN6SduPVWoQ0lMLTH5mH3XxBull_tv1g6qjAKUwoBa7Uu8Z_IvjB6YLM65k5NbscswXseRi083QUyXPR5U10VwKSFwDxdQZwmlOB64jyK2eXo/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZL-3niEsiKReGDi-JMLFab3X7gJMVdd8R4GGVzeCv72XlXN48dG5LRZXnHjKSytWhnq_7wNX_G2MOtqCW8h6bSNwjwhP0Bcrig5edXj0pog8Y_ZRcxyXWxJpGDfjLXJQgDzsxtLHpGvQ/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Ov6dvTt6xtFvs76nKFKgbV_vj5E-Wlz3y_32wrthIhDVOdcHe181FpUef2gqj7zFYdrrij2rRoySKMrvxZwnxIcskaZDbSTIYjzG6xFiaa4TQvpgGof4svpu7RfCaY20yRqxTL6XkDk/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMmvx7qB9FEWJEQ4eRevWaoVBLf1YBWo9OTwyGp0Owx7iloKM9UuBPz0GY1Pz16IjRSwgn2xqKQaQyQ1ic21_Pr3HKBUs0IQOl_V7U-x6AJuSa51efZrEzVDJTa88HQR38lBfB-W9Y-iQ/s1600/thumbsup.gif',
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaigdzg7IyucLa23kghyphenhyphenzC-cSNlkDeh7TNkNBS8NkQdk5BGbsWXH4-OZoKbjiznELY2C70YqTQOAqQFlA_7BrHT8NeIrZK_UXNV5u5yhtowSo1_B8Z0RLQZ-97yD_asur2HbIxtW8AQo/s1600/wee.gif',    
        ];
     
                            
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
   
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))     
             
       //]]>
         </script>
</b:includable>

bilasudah sudah klik simpan selesai.
Penjelasan : back up semua kode sebelum penggatian untuk menghidari kesalahan

Sumber by. Fajriandaviar
Edited by. Myscript2010

DEMOSHOW

membuat halaman statis home page

Membuat Halaman Statis
Halaman statis adalah halaman yang posisinya tetap berada didepan yang biasa disebut Home Page. Halaman ini tidak tercampur oleh postingan yang lain, jika dalam pembuatan webblogg tidak ada halaman statis maka semua postingan akan tercampur jadi satu dihalaman depan, untuk mengatur semua postingan berada pada posisinya masing masing maka

diharuskan membuat halaman statis atau home page berikut cara pembuatannya.
Login ke akun blogg klik Laman dan klik halaman baru. ketik judul halaman pada kotak yang tersedia nama judul sesuai keinginan, contoh : statis home  atau home page
Lihat contoh gambar diatas, selanjutnya  isi halaman baru tersebut dengan sitemap,
untuk sitemap bisa dilihat Tutornya disini setelah itu klik publish selesai

Lihat Contoh pda gambar mengenai pengetikan judul atau nama halaman statis, serta kode sitemap
yang berada dibawah kotak Compose HTML
selanjutnya klik setelan dan
klik Preferensi penelusuran akan terlihat beberapa teks sebagai berikut :  Pesan Khusus
untuk Laman Tidak Ditemukan  [Ditetapkan] Edit,
Pengalihan Khusus ? Edit,
 
Klik Edit Pada teks Pengalihan khusus Lihat Contoh gambar dibawah ini :

isi kotak kosong dengan tanda /
dan isi kotak kosong yang ke dua
pada teks :
/p/statis-home.html
kemudian klik simpan perubahan
dengan demikian maka halaman statis home atau home page telah selesai dibuat
untuk menetapkan halaman statis klik tataletak dan klik tambah gadged maka akan muncul kotak 

dialog PopUp klik laman dan ceklis  pada kotak  home 
kemudian klik simpan selesai Lihat kotak dialog PopUp pada gambar klik disini untuk melihat

Sumber by. Bloggers
Edited by. Myscript2010

SEO Basics for Bloggers

Pengertian SEO. Apa itu SEO
Ini singkatan dari Search Engine Optimization dan Anda mungkin pernah mendengar istilah SEO. Mengapa penting?  
Saya akan memberitahu Anda
SEO adalah penting karena, 
dalam istilah sederhana, ini adalah bagaimana orang menemukan situs Anda di mesin pencari. lalu lintas mesin dapat berkontribusi untuk sejumlah besar pengunjung Anda, dan jika dilakukan dengan benar, dapat meningkatkan kehadiran online Anda. Tanpa terlalu teknis, berikut adalah beberapa tips untuk membuat website atau Webblogg mesin pencari  

1. Judul Tulisan  
Setiap kali Anda berpikir tentang apa yang Anda cari di Google jika Anda sedang mencari sebuah artikel tentang topik. Pikirkan tentang bagaimana orang lain mungkin frase istilah pencarian yang sama dan mencoba untuk membuat judul dari itu. Anda tidak perlu melakukan ini untuk setiap posting, hanya yang paling penting bahwa Anda benar-benar ingin orang-orang dapat menemukan melalui pencarian. anda harus dapat memberikan judul posting yang mudah diingat dan sesuai dengan isi postingan
Judul posting Anda memainkan peran yang sangat penting dalam SEO. Tidak hanya muncul di halaman posting yang sebenarnya, tetapi juga dalam judul bar browser. Untuk memaksimalkan dampak judul Anda, yang terbaik judul posting Anda menjadi elemen pertama dari judul yang muncul di address bar browser. Jika Anda perhatikan, Blogger melakukan hal ini sedikit mundur, menempatkan judul blog Anda sebelum judul posting Anda. Misalnya, "Nama blog Anda: Judul posting Anda". Untuk SEO lebih baik, itu harus diformat seperti ini sebagai gantinya: "Judul posting Anda: Nama blog Anda". Untuk mengubah ini di Blogger, Anda harus mengedit HTML. Membuka halaman HTML editor dan menemukan: 
<title> <data: blog.pageTitle /> </ title> 
 dapat anda ganti dengan :
<b: if 'Data: blog.pageType == & quot; item yang & quot;' = cond><title> <data: blog.pageName /> | <data: blog.pageTitle /> </ title><b: else /> <title> <data: blog.pageName /> <data: blog.pageTitle /> </ title></ b: if>
Sekarang judul posting Anda akan muncul sebelum judul blog, 

2. Konten Matters  
Artikel Anda yang sebenarnya Posting harus memiliki beberapa substansi.
Jika Anda dapat memasukkan istilah pencarian populer / frase dalam posting,

3. Berhenti Stuffing dalam KeywordsBanyak orang memiliki ide ini bahwa mesin pencari ketat membaca meta data dan bahwa Anda harus mengisi meta tag Anda dengan sekelompok kata kunci dan deskripsi untuk mendapatkan hasil terbaik.  
Hal ini tidak benar sama sekali. Bahkan, Google tidak menggunakan keyword meta tag lagi untuk menjelajah situs Anda. Isian situs penuh kata kunci acak benar-benar dapat memiliki efek negatif pada peringkat.  "label" atau "tag" yang Anda tempatkan pada posting Anda tidak ada untuk tujuan kata kunci SEO,
4. Gunakan Teks Daripada ImagesMenggunakan teks yang sebenarnya bukan gambar. Jelas Anda tidak dapat memiliki gambaran yang terbuat dari teks, Search engine tidak bisa membaca gambar untuk konten, yang dibutuhkan adalah konten teks Anda! Bahkan lebih baik Membungkus dalam tag heading <h1> Heading Anda </ h1>. Google mencari pos tag ketika merangkak ke situs Anda, sehingga membungkus pos Anda dalam sedikit kode HTML 

6. Gambar pencarian  Bertentangan dengan apa yang saya katakan di atas, Google dapat menemukan gambar Anda, tetapi dengan cara yang berbeda. dalam hasil teks, akan muncul dalam hasil pencarian gambar. Untuk membuat sebagian besar ini, judul gambar dengan benar. Upload foto sebagai IMG_920.jpg, gambar itu untuk mencocokkan topik posting Anda, misalnya, "seo-dasar-untuk-bloggers.jpg"

7. link Past PostsTrik lain adalah dengan link kembali ke beberapa posting masa lalu, dalam posting baru. Penggunaan peta gambar di website atau blog Anda. tidak pnting karena tidak bekerja dengan baik di beberapa browser, dan menghambat navigasi karena link yang sebenarnya tidak melekat pada satu gambar.Sebaliknya, Anda harus memeriksa tutorial di YouTube tentang cara membuat header dengan link gambar.

Edited by. Myscript2010
Sources by. Thewonderforest 

Teks Animasi

Memasang kode Teks animasi
Kode ini menampilkan Teks animasi yang dapat menghiasi blogg. 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

<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>

<header>
<h1> Let's Share </h1>
<h2> Through </h2>
<h2> Social Networking </h2>
</header>

Penjelasan :
Ganti teks yang berwarna orange, tambahkan kode warna teks diatas kode <header>
klik publish selesai <font size="3" color="blue"face="arial">

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW