Afif Shame

1. Buka Blogger
2. Template --> Edit HTML
3. Setelah itu cari Fontnya di sini
4. Setelah ketemu cari kode <head> atau ]]><b:skin>

Contoh :

 <link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>

Lalu Copy juga CSSnya seperti dibawah ini

font-family: 'Iceland', cursive;

di Sidebar

#sidebar h2 {
font-family: 'Iceland', cursive;
}

Untuk Mengganti Di Semua Tulisan

body {
font-family: 'Iceland', cursive;

}

 Mengganti Tulisan Link

a {font-family: 'Iceland', cursive; }

 Untuk Memilih Tulisan yang diinginkan

<div style="font-family: 'Iceland', cursive;">Text kamu</div>

Note : Taruh di CSS yangg Menggunakan h2,h3,h4,ul,li,a,body

Simpan deh

Eh ada masalah

Awal

<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>

Setelah

<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'/> 

 Simpan Deh
Mission Complete

1. Buka Blogger
2. Template --> Edit HTML terus taruh kode berikut di atas ]]><b:skin

.menu-container {
  display: block;
  position: relative;
  width: 300px;
  background-color: #f3f0ef;
  margin: 5% auto 0;
  padding: 0;
  border-radius:5px;
  box-shadow:  inset 0 0 1px rgba(255,255,255,1);
  box-shadow:  5px 5px 15px 1px rgba(0,0,0,0.1);
}

.nav{
  background-color: #ed6b3a;
  height:40px;
  border-radius:5px 5px 0 0;
}

.settings {
  height:20px;
  float:right;
  background-image:url(http://i.imgur.com/CLs7u.png);
  width:20px;
  margin:10px;
}

.menu ul {
  list-style:none;
}

.menu ul li {
  border-top:1px solid rgba(0,0,0,0.1);
  padding:11px 10px;
  box-shadow:inset 0 1px 1px #fff;
  text-indent:10px;
  }

.menu ul li a {
  font-size:14px;
  color:#a4a3a3;
  font-family: 'Strait', sans-serif;
  font-size:14px;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff;
}

.menu ul li img {
  float:left;
  margin:-2px 0 0 0;
}

.menu ul li:hover {
  border-left:3px solid #ed6b3a;
  background-color:rgba(0,0,0,0.02);
}

Setelah itu Taruh Kode HTML dimana aja

<div class="menu-container">
     
  <div class="nav">
      <div class="settings"></div>
  </div>
 
  <div class="menu">
      <ul>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/4JPrK.png"><p>Search</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/jHwHy.png"><p>Upload</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/Gyusy.png"><p>Location</p></a></li>
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/mbWpc.png"><p>Contacts</p></a></li>
      </ul>
  </div>
 
</div>

Taruh nih kode <link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'> gak tau naruhnya dimana nih

Complete tetap kunjungi www.afifshame.blogspot.com

Do not Bacot.

1. Seperti bisa Login Blogger
2. Pilih Template --> Edit Html
3. cari kode ]]><b:skin
4. copy kan kode ke dibawah ini diatas kode ]]><b:skin

body {
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:60%;
    color:#FFF;
    background: -webkit-radial-gradient(#FFF, #0081b5);
    background: radial-gradient(#FFF, #0081b5);
  overflow:hidden;
}
div {
    position:absolute;
}
p {
    margin:0;
}
h1 {
    position:relative;
    margin:15px 0 5px 0;
    padding-left:10px;
    width:100px;
    font-size:170%;
    font-weight:normal;
    z-index:1;
    color:#666;
    border-bottom:1px solid #666;
}
#choose {
    left:0;
    height:100%;
    width:120px;
    background:rgba(0,0,0,.70);
    z-index:-1;
    box-shadow:0 0 5px #000;
}
#page {
    padding-left:10px;
    height:466px;
    width:466px;
    margin-left:-233px;
    margin-top:-233px;
    top:50%; left:50%;
    outline:1px solid #000;
    overflow:hidden;       
}
#man {
    bottom:20px; right:140px;
    height:180px;
    width:100px;
    -webkit-transform-origin:50% 100%;
    -webkit-animation:man 4s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    transform-origin:50% 100%;
    animation:man 4s ease-in-out infinite;
    animation-play-state:paused;
}
@-webkit-keyframes man {
    from {-webkit-transform:rotateZ(0deg);}
    25%  {-webkit-transform:rotateZ(10deg);}
    50%  {-webkit-transform:rotateZ(-10deg);}
    75%  {-webkit-transform:rotateZ(10deg);}
    to   {-webkit-transform:rotateZ(0deg);}               
}
@keyframes man {
    from {transform:rotateZ(0deg);}
    25%  {transform:rotateZ(10deg);}
    50%  {transform:rotateZ(-10deg);}
    75%  {transform:rotateZ(10deg);}
    to   {transform:rotateZ(0deg);}               
}
#man div {   
    border-radius:50%;
}
#body {
    box-shadow:0 0 3px #000;
    top:40px;
    left:48px;
    height:70px;
    width:10px;
    background:rgba(0,0,0,.80);
    -webkit-animation:body 7s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    animation:body 7s ease-in-out infinite;
    animation-play-state:paused;
}
@-webkit-keyframes body {
    from {left:48px;}
    25%  {left:-42px;}
    75%  {left:138px;}
    to   {left:48px;}
}
@keyframes body {
    from {left:48px;}
    25%  {left:-42px;}
    75%  {left:138px;}
    to   {left:48px;}
}
#head {
    box-shadow:0 0 3px #000;
    height:40px;
    width:40px;
    top:-39px;
    left:-15px;
    overflow:hidden;
    background:rgba(0,0,0,.80);
    -webkit-animation:head 4s ease-in-out infinite;
    -webkit-transform-origin:50% 100%;
    -webkit-animation-play-state:paused;
    animation:head 4s ease-in-out infinite;
    transform-origin:50% 100%;
    animation-play-state:paused;
}
@-webkit-keyframes head {
    from {-webkit-transform:rotateZ(0deg);}
    25%  {-webkit-transform:rotateZ(20deg);}   
    75%  {-webkit-transform:rotateZ(-20deg);}   
    to   {-webkit-transform:rotateZ(0deg);}               
}
@keyframes head {
    from {transform:rotateZ(0deg);}
    25%  {transform:rotateZ(20deg);}   
    75%  {transform:rotateZ(-20deg);}   
    to   {transform:rotateZ(0deg);}               
}
#head #face {
    overflow:hidden;
    border-radius:50%;
    height:100%;
    width:100%;
    -webkit-animation:face 3s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    animation:face 3s ease-in-out infinite;
    animation-play-state:paused;
}
@-webkit-keyframes face {
    from {-webkit-transform:rotateZ(0deg);}
    25%  {-webkit-transform:rotateZ(20deg);}
    50%  {-webkit-transform:rotateZ(0deg);}
    75%  {-webkit-transform:rotateZ(-20deg);}
    to   {-webkit-transform:rotateZ(0deg);}   
}
@keyframes face {
    from {transform:rotateZ(0deg);}
    25%  {transform:rotateZ(20deg);}
    50%  {transform:rotateZ(0deg);}
    75%  {transform:rotateZ(-20deg);}
    to   {transform:rotateZ(0deg);}   
}
#leg {
    box-shadow:0 0 3px #000;
    top:95%;
    height:40px;
    width:5px;
    background:rgba(0,0,0,.80);
}
.ll {
    left:3px;   
    -webkit-transform-origin:50% 0;
    -webkit-animation:ll 4s -0.5s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    transform-origin:50% 0;
    animation:ll 4s -0.5s ease-in-out infinite;
    animation-play-state:paused;
}
@-webkit-keyframes ll {
    from {-webkit-transform:rotateZ(30deg);}
    25%  {-webkit-transform:rotateZ(50deg);}
    50%  {-webkit-transform:rotateZ(20deg);}
    75%  {-webkit-transform:rotateZ(40deg);}
    to   {-webkit-transform:rotateZ(30deg);}
}
@keyframes ll {
    from {transform:rotateZ(30deg);}
    25%  {transform:rotateZ(50deg);}
    50%  {transform:rotateZ(20deg);}
    75%  {transform:rotateZ(40deg);}
    to   {transform:rotateZ(30deg);}
}
.lr {
    right:3px;
    -webkit-transform:rotateZ(-30deg);
    -webkit-transform-origin:50% 0;
    -webkit-animation-play-state:paused;   
    -webkit-animation:lr 4s ease-in-out infinite;
    transform:rotateZ(-30deg);
    transform-origin:50% 0;
    animation-play-state:paused;   
    animation:lr 4s ease-in-out infinite;
}
@-webkit-keyframes lr {
    from {-webkit-transform:rotateZ(-30deg);}
    25%  {-webkit-transform:rotateZ(-50deg);}
    50%  {-webkit-transform:rotateZ(-20deg);}
    75%  {-webkit-transform:rotateZ(-40deg);}
    to   {-webkit-transform:rotateZ(-30deg);}
}
@keyframes lr {
    from {transform:rotateZ(-30deg);}
    25%  {transform:rotateZ(-50deg);}
    50%  {transform:rotateZ(-20deg);}
    75%  {transform:rotateZ(-40deg);}
    to   {transform:rotateZ(-30deg);}
}
#leg div {
    box-shadow:0 0 3px #000;
    top:100%;
    height:100%;
    width:100%;
    -webkit-transform-origin:50% 0;
    transform-origin:50% 0;
    background:rgba(0,0,0,.80);
}
.ll div {
    -webkit-transform:rotateZ(-30deg);
    -webkit-animation:lld 4s -1.5 ease-in-out infinite;
    -webkit-animation-play-state:paused;
    transform:rotateZ(-30deg);
    animation:lld 4s -1.5 ease-in-out infinite;
    animation-play-state:paused;   
}
@-webkit-keyframes lld {
    from {-webkit-transform:rotateZ(-30deg);}
    25%  {-webkit-transform:rotateZ(-80deg);}
    50%  {-webkit-transform:rotateZ(-30deg);}
    75%  {-webkit-transform:rotateZ(-5deg);}
    to   {-webkit-transform:rotateZ(-30deg);}
}
@keyframes lld {
    from {transform:rotateZ(-30deg);}
    25%  {transform:rotateZ(-80deg);}
    50%  {transform:rotateZ(-30deg);}
    75%  {transform:rotateZ(-5deg);}
    to   {transform:rotateZ(-30deg);}
}
.lr div {
    -webkit-transform:rotateZ(30deg);
    -webkit-animation:lrd 4s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    transform:rotateZ(30deg);
    animation:lrd 4s ease-in-out infinite;
    animation-play-state:paused;
}
@-webkit-keyframes lrd {
    from {-webkit-transform:rotateZ(30deg);}
    25%  {-webkit-transform:rotateZ(80deg);}
    50%  {-webkit-transform:rotateZ(30deg);}
    75%  {-webkit-transform:rotateZ(5deg);}
    to   {-webkit-transform:rotateZ(30deg);}
}
@keyframes lrd {
    from {transform:rotateZ(30deg);}
    25%  {transform:rotateZ(80deg);}
    50%  {transform:rotateZ(30deg);}
    75%  {transform:rotateZ(5deg);}
    to   {transform:rotateZ(30deg);}
}
#arm {
    box-shadow:0 0 3px #000;
    top:5px;
    width:35px;
    height:4px;
    background:rgba(0,0,0,.80);
}
.al {
    -webkit-transform-origin:100% 50%;
    -webkit-animation:al 5s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    transform-origin:100% 50%;
    animation:al 5s ease-in-out infinite;
    animation-play-state:paused;
    left:-33px;
}
@-webkit-keyframes al {
    from {-webkit-transform:rotateZ(-60deg);}
    25%  {-webkit-transform:rotateZ(10deg);}
    50%  {-webkit-transform:rotateZ(-40deg);}
    75%  {-webkit-transform:rotateZ(30deg);}
    to   {-webkit-transform:rotateZ(-60deg);}                   
}
@keyframes al {
    from {transform:rotateZ(-60deg);}
    25%  {transform:rotateZ(10deg);}
    50%  {transform:rotateZ(-40deg);}
    75%  {transform:rotateZ(30deg);}
    to   {transform:rotateZ(-60deg);}                   
}
.ar {
    -webkit-transform-origin:0 50%;
    -webkit-animation:ar 5s -1s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    transform-origin:0 50%;
    animation:ar 5s -1s ease-in-out infinite;
    animation-play-state:paused;
    right:-33px;
}
@-webkit-keyframes ar {
    from {-webkit-transform:rotateZ(60deg);}
    25%  {-webkit-transform:rotateZ(-10deg);}
    50%  {-webkit-transform:rotateZ(40deg);}
    75%  {-webkit-transform:rotateZ(-30deg);}
    to   {-webkit-transform:rotateZ(60deg);}                   
}
@keyframes ar {
    from {transform:rotateZ(60deg);}
    25%  {transform:rotateZ(-10deg);}
    50%  {transform:rotateZ(40deg);}
    75%  {transform:rotateZ(-30deg);}
    to   {transform:rotateZ(60deg);}                   
}
#arm div {
    box-shadow:0 0 3px #000;
    height:100%;
    width:100%;   
    background:rgba(0,0,0,.80);       
}
.al div {
    right:100%;
    -webkit-transform-origin:100% 50%;
    -webkit-animation-play-state:paused;
    -webkit-animation:ald 5s -0.5s ease-in-out infinite;
    transform-origin:100% 50%;
    animation-play-state:paused;
    animation:ald 5s -0.5s ease-in-out infinite;
}
@-webkit-keyframes ald {
    from {-webkit-transform:rotateZ(-50deg);}
    25%  {-webkit-transform:rotateZ(10deg);}
    50%  {-webkit-transform:rotateZ(-40deg);}
    75%  {-webkit-transform:rotateZ(60deg);}
    to   {-webkit-transform:rotateZ(-50deg);}   
}
@keyframes ald {
    from {transform:rotateZ(-50deg);}
    25%  {transform:rotateZ(10deg);}
    50%  {transform:rotateZ(-40deg);}
    75%  {transform:rotateZ(60deg);}
    to   {transform:rotateZ(-50deg);}   
}
.ar div {
    left:100%;
    -webkit-transform-origin:0 50%;
    -webkit-animation-play-state:paused;
    -webkit-animation:ard 5s ease-in-out infinite;
    transform-origin:0 50%;
    animation-play-state:paused;
    animation:ard 5s ease-in-out infinite;
}
@-webkit-keyframes ard {
    from {-webkit-transform:rotateZ(50deg);}
    25%  {-webkit-transform:rotateZ(-10deg);}
    50%  {-webkit-transform:rotateZ(40deg);}
    75%  {-webkit-transform:rotateZ(-60deg);}
    to   {-webkit-transform:rotateZ(50deg);}   
}
@keyframes ard {
    from {transform:rotateZ(50deg);}
    25%  {transform:rotateZ(-10deg);}
    50%  {transform:rotateZ(40deg);}
    75%  {transform:rotateZ(-60deg);}
    to   {transform:rotateZ(50deg);}   
}
#eye {   
    height:15px;
    width:15px;
    border-radius:50%;
}
#eye span {
    display:block;
    position:absolute;
    height:100%;
    width:100%;
    background:#FFF;
    box-shadow:0 0 3px #FFF;
    border-radius:50%;   
}
.el span {
    -webkit-animation:eyespan 1.5s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    animation:eyespan 1.5s ease-in-out infinite;
    animation-play-state:paused;
}
.er span {
    -webkit-animation:eyespan 1.5s 0.1s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    animation:eyespan 1.5s 0.1s ease-in-out infinite;
    animation-play-state:paused;   
}
@-webkit-keyframes eyespan {
    from {height:100%; top:0;}
    10%  {height:0; top:50%;}
    20%  {height:100%; top:0;}
    to   {height:100%; top:0;}
}
@keyframes eyespan {
    from {height:100%; top:0;}
    10%  {height:0; top:50%;}
    20%  {height:100%; top:0;}
    to   {height:100%; top:0;}
}
.el {
    left:3px; top:10px;
    -webkit-animation:el 6s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    animation:el 6s ease-in-out infinite;
    animation-play-state:paused;
}
@-webkit-keyframes el {
    from {left:3px; top:10px;}
    30%  {left:25px; top:10px;}
    50%  {left:3px; top:20px;}
    60%  {left:3px; top:10px;}
    80%  {left:-22px; top:10px;}
    to   {left:3px; top:10px;}
}
@keyframes el {
    from {left:3px; top:10px;}
    30%  {left:25px; top:10px;}
    50%  {left:3px; top:20px;}
    60%  {left:3px; top:10px;}
    80%  {left:-22px; top:10px;}
    to   {left:3px; top:10px;}
}
.er {
    right:3px; top:10px;
    -webkit-animation:er 6s ease-in-out infinite;
    -webkit-animation-play-state:paused;
    animation:er 6s ease-in-out infinite;
    animation-play-state:paused;
}
@-webkit-keyframes er {
    from {right:3px; top:10px;}
    30%  {right:-22px; top:10px;}
    50%  {right:3px; top:20px;}
    60%  {right:3px; top:10px;}
    80%  {right:25px; top:10px;}
    to   {right:3px; top:10px;}
}
@keyframes er {
    from {right:3px; top:10px;}
    30%  {right:-22px; top:10px;}
    50%  {right:3px; top:20px;}
    60%  {right:3px; top:10px;}
    80%  {right:25px; top:10px;}
    to   {right:3px; top:10px;}
}





/*----------------ANIMATION----------------*/
#blink:checked ~ #man #body #head #face #eye span {
    -webkit-animation-play-state:running;
    animation-play-state:running;                                                                                                                                                                }
#lookaround:checked ~ #man #body #head #face div {
    -webkit-animation-play-state:running;
    animation-play-state:running;                                                                                                                                                                    }
#lifthead:checked ~ #man #body #head #face {
    -webkit-animation-play-state:running;
    animation-play-state:running;                                                                                                                                                            }
#shakehead:checked ~ #man #body #head {
    -webkit-animation-play-state:running;
    animation-play-state:running;                                                                                                                                                            }

#leftshoulder:checked ~ #man #body .al {
    -webkit-animation-play-state:running;
    animation-play-state:running;                                                                                                                                                            }
#leftarm:checked ~ #man #body .al div {
    -webkit-animation-play-state:running;
    animation-play-state:running;                                                                                                                                                        }
#rightshoulder:checked ~ #man #body .ar {
    -webkit-animation-play-state:running;
    animation-play-state:running;                                                                                                                                                        }
#rightarm:checked ~ #man #body .ar div {
    -webkit-animation-play-state:running;
    animation-play-state:running;
}

#leftthigh:checked ~ #man #body .ll {-webkit-animation-play-state:running;animation-play-state:running;}
#leftleg:checked ~ #man #body .ll div {-webkit-animation-play-state:running;animation-play-state:running;}
#rightthigh:checked ~ #man #body .lr {-webkit-animation-play-state:running;animation-play-state:running;}
#rightleg:checked ~ #man #body .lr div {-webkit-animation-play-state:running;animation-play-state:running;}

#move:checked ~ #man #body {-webkit-animation-play-state:running;animation-play-state:running;}
#rotate:checked ~ #man {-webkit-animation-play-state:running;animation-play-state:running;}                              

Setalah itu masukan HTML dimana aja nih kodenya

<div id="page">
    <div id="choose"></div>
    <h1>Head</h1>   
    <input type="checkbox" name="head" id="blink" checked="checked" />Blink<br />
    <input type="checkbox" name="head" id="lookaround" checked="checked" />Look around<br />
    <input type="checkbox" name="head" id="lifthead" checked="checked" />Lift head<br />
    <input type="checkbox" name="head" id="shakehead" checked="checked" />Shake head<br />
    <h1>Arms</h1>
    <input type="checkbox" id="leftshoulder" checked="checked" />Left shoulder<br />
    <input type="checkbox" id="leftarm" checked="checked" />Left arm<br />
    <input type="checkbox" id="rightshoulder" checked="checked" />Right shoulder<br />
    <input type="checkbox" id="rightarm" checked="checked" />Right arm<br />
    <h1>Legs</h1>
    <input type="checkbox" id="leftthigh" checked="checked" />Left thigh<br />
    <input type="checkbox" id="leftleg" checked="checked" />Left leg<br />
    <input type="checkbox" id="rightthigh" checked="checked" />Right thigh<br />
    <input type="checkbox" id="rightleg" checked="checked" />Right leg<br />
    <h1>Body</h1>
    <input type="checkbox" id="move" checked="checked" />Move<br />
    <input type="checkbox" id="rotate" checked="checked" />Rotate<br />
   
    <div id="man">
        <div id="body">
            <div id="head">
                <div id="face">
                    <div id="eye" class="el">   <span></span>   </div>
                    <div id="eye" class="er">   <span></span>   </div>
                </div>
            </div>
            <div id="arm" class="al">   <div></div>   </div>
            <div id="arm" class="ar">   <div></div>   </div>
            <div id="leg" class="ll">   <div></div>   </div>
            <div id="leg" class="lr">   <div></div>   </div>
        </div>
    </div>
</div>

Bershasil Yey

Keruskan Template bukan tanggung jawab saya Thank

 Gak banyak bacot langsung aja

1. Seperti Cara Membuat Widget Penerjemah Icon Flag Login ke Blogger
2. Lalu ke Template terus Edit HTML
3. Cari kode </head> (lebih mudah klik Ctrl+F)
4. Lalu Paste kode dibawah ini

<meta http-equiv="refresh"  content="0;URL=URL yang mau kamu Direct"/>

Ganti kode yang berwarna merah dan biru
Merah : Untuk Berapa lama menunggu kena Direct
Biru    : Alamat URL yang mau di Direct

1. Setelah itu cari kode ]]></b:skin>
2. Copy terus Paste kode dibawah ini diatas ]]></b:skin> 

#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
} 

cari kode <body> lalu Copy dan Pastekan kode dibawah ini di bwah <body>

<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>Blog ini akan ke Direct</p>
<p>Dalam 10</p>
<p>Thank</p>
</h2>
</span>
</div>

 Kalian Bisa ganti Text Notifikasinya yang berwarna biru.
Jika kalian ingin menambah Textnya copy kode ini di atas </h2>
<p>Text yang mau kamu tambah</p>

Notifikasi By Johanes Djogan
Redirect URL By Me

   Sekarang bagi-bagi Tutorial nih Good Job!! Langsung aja deh ke TKP!!

1. Login ke Blogger
2. Pilih Tata Letak
3. Tambahkan Gadget dan pilih HTML/Java Script
4. Lalu Paste Kode dibawah ini

<style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"> <a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIigGanejV_weeoQ473yxF9FcLXNKFM4ouT2Io-BtxsSVN_AoSMyHpDzP3w20D9MIQMGlqCKP37vY0QwptAF-EaPJ4_7pmnRsArrqEaPYpuPnqJDbp7zl2CwT_DpE9Ill9hdtyQfTq5t8q/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8p8ZfrOtKO8DWH9yCF8FX2Go1F7bS5R9wjizX58V8AmAqluDshVq-N3IEzcGPudLVTri3HVBD61qRA6PZWmOfSJPwYLs2UtyqnHR0u_EQ7uD2pUpzXsPHRd4aNzM06DFygW65l0ejijZ/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>