Sekilas Tentang CSS

Assalam'ualaikum, oke langsung aja


SEKILAS TENTANG CSS
CSS (Cascading Style Sheet) adalah suatu bahasa yang dikhususkan untuk mengatur gaya atau layout sebuah halaman web. CSS digunakan oleh pembuat halaman web dan juga pengakses halaman web, untuk mendefinisikan warna, huruf layout, dan aspek-aspek presentasi dokumen lainnya. CSS memang didesain untuk memisahkan antara isi dokumen (yang ditulis menggunakan HTML atau bahasa lain yang sejenis) dengan bentuk presentasi dokumen (ditulis dalam CSS). Pemisahan ini memberikan keuntungan akan adanya peningkatan dalam aksesibilitas isi, menyediakan fleksibilitas lebih, dan pengendalian terhadap spesifikasi karakteristik bentuk presentasi, serta mereduksi kompleksitas dan perulangan-perulangan pada struktur isi.

Selain HTML, suatu bentuk bahasa markup lainnya, yaitu XML, juga dapat memanfaat CSS ini untuk mngatur gaya tampilan yang diinginkan. Dalam implementasinya, CSS didefinisikan melalui kode-kode style sheet yang dapat disertai pada file HTML itu sendiri, atau terpisah dari file HTML. Jika terpisah maka  file style sheet tersebut harus diberi ekstensi .css untuk menandai bahwa file tersebut adalah file CSS.

Sorry Kalau Ada Kesalahan Ketik...
Jangan Dicopas, Capek Gw ngetik

Sekilas Tentang HTML

Assalam'ualaikum, oke kali ini Dark Kage akan memberikan penjelasan HTML oke langsung dibaca


SEKILAS TENTANG HTML
HTML adalah singkatan dari Hypertext Markup Language. Fungsi HTML di dalam sebuah dokumen web adalah untuk mengatur struktur tampilan dokumen tersebut dan juga untuk menampilkan link atau sambungan ke halaman web lain yang ada di Internet. Biasanya sebuah dokumen HTML disimpan dalam ekstensi .html. HTML disebut dengan Markup Language karena HTML berfungsi untuk memperindah file tulisan (text) biasa untuk dapat dilihat pada sebuah web browser.

Oke Semoga Bermanfaat, Jika Ada Kesalahan Ketik Mohon Maaf...
Jangan Dicopas Capek Gw ngetiknya :v

Cara Download Di Sharebeast

Assalam'ualaikum, Dark Kage akan memberikan Tutorial Mendownload Di Sharebeast...



1. Jangan Dicentang.....
2. Baru Klik Download..

Sudah Selesai :v

Semoga Bermanfaat......

Decrypt Online

Assalam'ualaikum, Decrypt gunanya untuk merubah kode encrypt menjadi html lagi.
langsung aja dicoba......

masukkan Kode encrypt HTML yang mau dibobol disini:



HTMLnya

Encrypt Online

Assalam'ualaikum, kali ini Dark Kage akan memposting "Encrypt Online" .
Encrypt ini berguna untuk menyembunyikan html dan mengganti dengan kode kode....
Oke Coba Aja Dibawah

Masukin HTML kamu dulu, trus Klik Encrypt!

Masukan HTML kamu disini:

Oke Semoga Bermanfaat

Cara Membuat Menu Versi Dark Kage V.2

Assalam'ualaikum, kali ini postingannya adalah "Cara Membuat Menu Versi Dark Kage V.2" .
Demo Lihat Dibawah



Tertarik?????
jika tertarik langsung dicoba....

1. Buka Dashboard, Klik Template, Lalu Klik Edit Html, Cari ]]><b:skin/>
2. Sudah Ketemu???? Jika Sudah Taruh Kode Dibawah ini, diatas ]]><b:skin/>

.scrollmenu {
margin-left: -185px;
opacity: 1;
z-index: 9999;
background: #ffffff;
color: #d7d7d7;
height: 40px;
line-height: 30px;
letter-spacing: 1px;
width: 100%;
position: fixed;
top: 0;
border-bottom: 5px solid #0048ff;
display: block;
box-shadow: 0px 1px 4px #141414;
}
#scrollmenu_box {
width: 1000px;
margin: 0px auto;
text-align: left;
padding-top: 2px;
}
a {
font-family: verdana;
font-size: 11pt;
text-decoration: none;
color: #EDEDED;
}img[Attributes Style] {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}a {
font-family: verdana;
font-size: 11pt;
text-decoration: none;
color: #EDEDED;
}.scrollmenu_entry {
float: left;
margin: 3px 20px 15px 15px;
font-family: verdana;
font-size: 16px;
color: #d7d7d7;

3. Cari Kode <div id='header-wrapper' > , jika tidak ada cari kode yg berhubungan dengan 'header-wrapper'
4. Taruh Kode Dibawah ini, diatas 'header-wrapper'

<div class='placer scrollmenu' style='display: block;'>
<div id='scrollmenu_box'>
      <div class='scrollmenu_entry'><a href='http://darkkage10.blogspot.com'>Menu 1</a></div>
<div class='scrollmenu_entry'><a href='http://darkkage10.blogspot.com'>Menu 2</a></div>
<div class='scrollmenu_entry'><a href='http://darkkage10.blogspot.com'>Menu 3</a></div>
<div class='scrollmenu_entry'><a href='http://darkkage10.blogspot.com'>Menu 4</a></div>
<div class='scrollmenu_entry'><a href='http://darkkage10.blogspot.com'>Menu 5</a></div>
<div class='scrollmenu_entry'><a href='http://darkkage10.blogspot.com'>Menu 6</a></div>
<div class='scrollmenu_entry'><a href='http://darkkage10.blogspot.com'>Menu 7</a></div>
</div>
</div>

Selesai....

Semoga Bermanfaat, Jika Ada Pertanyaan Tanyakan Dikomentar!!!

Tombol Download Simple

Assalam'ualaikum, kali ini Dark Kage akan memberikan "Tombol Download Simple".
Oke demonya lihat dibawah

Download

Oke kalau tertarik langsung aja....

1. Buka dasboard
2. Klik blog kamu
3. klik template, edit html
4. masukan css dibawah ini diatas ]]></b:skin>

.button {
   border: 2px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 13px 26px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 21px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 2px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 2px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }

Untuk mengaktivkannya buka postingan kamu, baru klik html, lalu pastekan HTML dibawah ini

<a class="button" href="#">Download</a><br />

Ganti Ini # Dengan Link Download Kamu....

Semoga Bermanfaat

Cara Membuat Box Dibawah Header V.2

Assalam'ualaikum, kali ini Dark Kage akan memberikan css dan html box diatas.
Fiturnya sudah di tandai jadi kalian bisa tahu fiturnya, kalau mau demonya klik disini ---> DEMO
Oke langsung saja.

1. Buka Dashborad, klik Template, lalu klik edit html.
2. Cari kode ]]><b:skin/>, untuk mempermudah tekan Ctrl + F.
3. kalau sudah ketemu masukan kode dibawah ini, diatas kode ]]><b:skin/>

/* Box V2 Dark Kage
----------------------------------------------- */
#Blog-Banner2 {
margin-top: 10px;
margin-left: -35px;
width: 1045px;
height: 32px;
margin-bottom: 10px;
text-align: center;
background: #000000;
border: 2px solid#000000;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 2px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 2px;
border-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
overflow: hidden;
-webkit-box-shadow: 0px 0px 10px #000000;
-mox-box-shadow: 0px 0px 10px #ad1010;
-ms-box-shadow: 0px 0px 10px #ad1010;
-o-box-shadow: 0px 0px 10px #ad1010;
box-shadow: 0px 0px 10px #000000;}
#Blog-Banner2:hover {
height: 110px;
}
#Blog-Banner2 h2 {
color: #FFF;
font-family: "Bitter",arial,sans-serif;
margin-bottom: 5px;
font-size: 14pt;
text-align: center;
border-bottom: 1px solid #FFFFFF;
height: 27px;
}
#MIMB1{margin-left: 10px;
background: #000;
border: 3px solid #000;
width: 505px;
height: auto;
float: left;
margin-top: -147px;
border-bottom: 3px solid #fff;}
#MIMB1 .widget-content{padding:0px; margin:0px}
.SSK{box-shadow:inset 0px 0px 16px #000;margin-left:0px; margin-top: 0px; margin-bottom:10px; width:930px; height: 280px; background:rgba(0,0,0,0); position:relative; border:3px solid #000; padding:10px; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out}
.SSK:hover{background:rgba(0,0,0,0); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out}
#slider2{width: 468px;
height: 60px;
margin-top: -315px;
margin-left: 0px;
overflow: hidden;
background-color: #000;
border: 3px solid #000;
position: absolute;
border-radius: 0px;}
#mask{overflow:hidden}#slider2:hover #pause{opacity:1}
#slider2:hover #progress{background-color:rgba(255,255,255,0.0)}
#slider2:hover ul,#slider:hover #progress,#slider:hover #overlay{-moz-animation-play-state:paused;-webkit-animation-play-state:paused}
#pause{width:468px;height:60px;position:absolute;top:0;opacity:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in}
#progress{width:1px;height:1px;background-color:#000;-moz-animation:progress 35s infinite;-webkit-animation:progress 35s infinite;position:relative;top:-1px;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in}
#overlay{width:4680px;height:60px;position:absolute;top:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in;opacity:0.5;-moz-animation:overlay-fade 35s infinite;-webkit-animation:overlay-fade 35s infinite}#slider2 ul{width:2400px;list-style:none;padding:0;margin:0;-moz-animation:slide-animation 35s infinite;-webkit-animation:slide-animation 35s infinite;position:relative;left:0px;overflow:hidden}#slider2 li{display:inline;width:468px;height:60px;margin:0;padding:0;float:left;position:relative}
#slider2 li:last-of-type{background-color:#000}#slider2 li a{display:block;text-decoration:none}
#slider2 li span{display:block;width:560px;padding:15px 20px;position:absolute;bottom:0;left:0;background-color:rgba(54,44,48,0.6);border-top:1px solid #000;text-shadow:1px 1px 1px #000;pointer-events:none;text-align:left}@-webkit-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-moz-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-webkit-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-moz-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-webkit-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}}@-moz-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}}
#slider2 ul li span h2{font-size:24px;line-height:24px;color:#fff;font-weight:normal;font-family:'Communist-Regular';text-shadow:1px 1px 1px #000}::-webkit-selection{background:transparent}
#slider4{width: 468px;
height: 60px;
margin-top: -330px;
margin-left: 478px;
overflow: hidden;
background-color: #000;
border: 3px solid #000;
position: absolute;}
#mask{overflow:hidden}#slider4:hover #pause{opacity:1}
#slider4:hover #progress{background-color:rgba(255,255,255,0.0)}
#slider4:hover ul,#slider:hover #progress,#slider:hover #overlay{-moz-animation-play-state:paused;-webkit-animation-play-state:paused}
#pause{width:468px;height:60px;position:absolute;top:0;opacity:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in}
#progress{width:1px;height:1px;background-color:#000;-moz-animation:progress 35s infinite;-webkit-animation:progress 35s infinite;position:relative;top:-1px;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in}
#overlay{width:4680px;height:60px;position:absolute;top:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in;opacity:0.5;-moz-animation:overlay-fade 35s infinite;-webkit-animation:overlay-fade 35s infinite}#slider4 ul{width:2400px;list-style:none;padding:0;margin:0;-moz-animation:slide-animation 35s infinite;-webkit-animation:slide-animation 35s infinite;position:relative;left:0px;overflow:hidden}#slider4 li{display:inline;width:468px;height:60px;margin:0;padding:0;float:left;position:relative}
#slider4 li:last-of-type{background-color:#000}#slider4 li a{display:block;text-decoration:none}
#slider4 li span{display:block;width:560px;padding:15px 20px;position:absolute;bottom:0;left:0;background-color:rgba(54,44,48,0.6);border-top:1px solid #000;text-shadow:1px 1px 1px #362c30;pointer-events:none;text-align:left}@-webkit-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-moz-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-webkit-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-moz-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-webkit-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}}@-moz-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}}
#slider4 ul li span h2{font-size:24px;line-height:24px;color:#fff;font-weight:normal;font-family:'Communist-Regular';text-shadow:1px 1px 1px #000}::-webkit-selection{background:transparent}
#JTS{background: transparent;
margin-top: 253px;
margin-right: 35px;
padding: 3px;
border: 5px solid #000000;
border-bottom: 3px solid #fff;
border-radius: 5px;
width: 117px;
height: 26px;
float: right;}
#JTS .widget-content{padding:0px; margin:0px}
#MODalexa{border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(233, 233, 233);
border-bottom-color: rgb(197, 197, 197);
border-bottom-color: rgb(150, 150, 150);
border-bottom-color: rgb(145, 145, 145);
border-bottom-color: rgb(51, 51, 51);
border-bottom-color: rgb(37, 37, 37);
border-bottom-color: rgb(27, 27, 27);
border-bottom-color: rgb(26, 25, 25);
border-bottom-color: rgb(26, 25, 25);
border-bottom-color: rgb(24, 23, 23);
border-bottom: 5px solid #fff;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
border: 5px solid #000000;
float: left;
background: transparent;
padding-left: 0px;
width: 120px;
height: 95px;
margin-left: 580px;
margin-top: 189px;
border-radius: 0px 0px 0px 0px;
border-bottom-color: rgb(255, 255, 255);}
#MODalexa:hover{-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
border: 5px solid #000000;border-radius: 10px 10px 10px 10px;box-shadow:0 0 30px #000000;}

4. Kemudian Cari Kode 'content-wrapper', jika sudah ketemu taruh kode dibawah ini diatas kode 'content-wrapper'

<div id='Blog-Banner2'><h2>Banner 468x60</h2>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a>
</div>
<div class='SSK'>
<div id='MODalexa'>
<a href='http://www.alexa.com/siteinfo/http://darkkage10.blogspot.com/'><script src='http://xslt.alexa.com/site_stats/js/s/a?url=http://darkkage10.blogspot.com/' type='text/javascript'/></a>
</div>
<div id='JTS'>
<div class='widget-content'>
<a href='http://www.blogger.com/follow-blog.g?blogID=4053232321759648581' target='_blank'><img alt='Join This Site' src='http://goo.gl/7aybbA' title='Join This Site'/></a>
  </div></div></div>
<div class='MIMB1 section' id='MIMB1'>
<div class='widget HTML' id='HTML6'>
<div class='widget-content'>
<a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomR76-h9qrHAudb0qY-Q8KU_gAQWLoAtHoi8jIOP9nq32s084kEMUCPSoO3y7E7XyGM9odtl8O1CIPPrElh8-Twng-KsMrK8FT2IA2GEBd-T5HlyywcDeTCfAZ6FQUH4xD6TbSnjIpFWv/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomR76-h9qrHAudb0qY-Q8KU_gAQWLoAtHoi8jIOP9nq32s084kEMUCPSoO3y7E7XyGM9odtl8O1CIPPrElh8-Twng-KsMrK8FT2IA2GEBd-T5HlyywcDeTCfAZ6FQUH4xD6TbSnjIpFWv/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomR76-h9qrHAudb0qY-Q8KU_gAQWLoAtHoi8jIOP9nq32s084kEMUCPSoO3y7E7XyGM9odtl8O1CIPPrElh8-Twng-KsMrK8FT2IA2GEBd-T5HlyywcDeTCfAZ6FQUH4xD6TbSnjIpFWv/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomR76-h9qrHAudb0qY-Q8KU_gAQWLoAtHoi8jIOP9nq32s084kEMUCPSoO3y7E7XyGM9odtl8O1CIPPrElh8-Twng-KsMrK8FT2IA2GEBd-T5HlyywcDeTCfAZ6FQUH4xD6TbSnjIpFWv/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a>
</div>
</div>
</div>
<div class='widget-content'>
<div id='slider2'>
<div id='mask'>
<ul>
<li><a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
</ul>
</div>
<div id='progress'>
</div>
<div id='overlay'>
</div>
<div id='pause'>
</div>
</div>
</div>
<div id='slider4'>
<div id='mask'>
<ul>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a>
</li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
</ul>
</div>
<div id='progress'>
</div>
<div id='overlay'>
</div>
<div id='pause'>
</div>
</div>
</div>

Untuk kodenya bisa kalian edit edit lagi.
Semoga Bermanfaat!!!!!

JIKA MAU COPAS, SERTAKAN SUMBER!!!!!

Cara Membuat Menu Navigasi Dropdown Keren Versi Dark Kage

Assalam'ualaikum, kali ini Dark Kage akan ngeshare "Cara Membuat Menu Navigasi Dropdown Keren Versi Dark Kage". Oke sebelumnya bagi yang memasang banner Dark Kage hapus aja bannernya karena saya sudah menghapus, soalnya biar lebih simple blog ini tidak kebanyakan banner.....

Oke kembali lagi ketopik kita, untuk melihat contohnya klik dibawah

[Demo Menu]

Gimana kerenkan :v

Caranya

1. Buka dashboard
2. Klik template
3. Edit html
4. Cari ]]><b:skin/> untuk lebih mudah tekan Ctrl + F
5. Jika sudah ketemu, masukan kode dibawah ini dan taruh diatas ]]><b:skin/>

/* Menu Navigation Dark Kage
----------------------------------------------- */
  #DKmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#DKmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#DKmenu li {
  float: left;
  padding: 0px;
}
#DKmenu li a {
  background: #333333 url('http://cssmenumaker.com/sites/default/files/menu/45/seperator.gif') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#DKmenu > ul > li > a {
  color: #cccccc;
}
#DKmenu ul ul a {
  color: #cccccc;
}
#DKmenu li > a:hover,
#DKmenu ul li:hover > a {
  background: #7a0a0a url('http://cssmenumaker.com/sites/default/files/menu/45/hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#DKmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
/*left:0;*/
}
#DKmenu li:hover ul {
  display: block;
}
#DKmenu li li {
  background: url('http://cssmenumaker.com/sites/default/files/menu/45/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#DKmenu li:hover li a {
  background: none;
}
#DKmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#DKmenu li ul a:hover,
#DKmenu li ul li:hover > a {
  background: #7a0a0a url('http://cssmenumaker.com/sites/default/files/menu/45//hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#DKmenu p {
  clear: left;
}

Eitsss belum selesai...
Untuk mengaktivkan menunya kamu harus masuk-in htmlnya,
caranya cari kode 'content-wrapper' , lalu taruh kode dibawah ini diatas 'content-wrapper'

<div id='DKmenu'>
<ul>
  <li><a href='/'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Oke kalian bisa edit edit lagi menunya....
Semoga bermanfaat.....

Jika Mau Copas, Mohon Sertakan Sumber 

Cara Membuat New Tab Menjadi Keren

Assalam'ualikum, Di Hari Minggu Ini Saya Gak Tahu Mau Post Apa Jadi Mendingan Post Ini Aja..
Oke Langsung Ketopiknya....

Buka Aja Link Ini

Untuk Penginstalannya Pasti Anda Bisa..
Oke Semoga Bermanfaat

Cara Membuat Banner 125 Berputar Disidebar

Assalam'ualaikum, Sorry Jarang Post Nih Soalnya Ujian ( Masih Ujian Sih ). Oke Langsung Aja Ya

Demonya Lihat Di Sidebar Dark Kage
Atau Disini Aja

1. Buka Dasboard
2. Pilih Template, Edit Html
3. Cari ]]><b:skin> , Tekan Ctrl + F Untuk Mempermudah Pencarian
4. Taruh CSS Dibawah Ini

#MAHJ125 img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
border: outset 4px #7a0a0a;
margin: 0px 0px;
text-align: center;
padding: 0px;
margin-left: 0px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
#MAHJ125 img:hover {
border-radius: 100%;
border: outset 4px #7a0a0a;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
-moz-transform:rotate(715deg);
-webkit-transform:rotate(715deg);
-o-transform:rotate(715deg);
}

Jika Sudah Save Template.....
Belum Selesai, Buka Tata Letak, Tambahkan Gadget, Pilih Javascript/Html, Masukan Html Dibawah Ini

<div id='MAHJkotakbesar1'/><div id='MAHJ125'>
<a href="http://naruto-loverzindo.blogspot.com/"><img title='All About Anime & Manga Naruto ' src="http://i.imgur.com/IEJ6xrW.gif" width="125" height="125" /></a><a href="http://naruto-loverzindo.blogspot.com/"><img title='All About Anime & Manga Naruto ' src="http://i.imgur.com/IEJ6xrW.gif" width="125" height="125" /></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img alt='Dark Kage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomR76-h9qrHAudb0qY-Q8KU_gAQWLoAtHoi8jIOP9nq32s084kEMUCPSoO3y7E7XyGM9odtl8O1CIPPrElh8-Twng-KsMrK8FT2IA2GEBd-T5HlyywcDeTCfAZ6FQUH4xD6TbSnjIpFWv/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL'/></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img alt='Dark Kage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomR76-h9qrHAudb0qY-Q8KU_gAQWLoAtHoi8jIOP9nq32s084kEMUCPSoO3y7E7XyGM9odtl8O1CIPPrElh8-Twng-KsMrK8FT2IA2GEBd-T5HlyywcDeTCfAZ6FQUH4xD6TbSnjIpFWv/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL'/></a> </div></div>

Kode Berwarna Merah Ganti Dengan Kode Banner Kamu....
Semoga Bermanfaat...

Cara Memperpendek Link Menjadi goo.gl

Assalam'ualaikum, Oke Pada Malam Senin Saya Akan Memposting Trick Oke Langsung Aja

1. Buka Ini
2. Masukan Url Blog Kamu
3. Klik Shorten Url
Jadi Deh, Kalau Blog Dark Kage Ini http://goo.gl/hnKXr1
Semoga Bermnafaat Ya

Macam Macam Border

Assalam'ualaikum, Dipagi Yang Cerah Ini Saya Akan Memberi Tahukan Macam Macam Border Oke Langsung Saja. Border Bisa Dibilang Garis Tepi Dan Banyak Macamnya..

Border Dashed
border: 5px dashed #7a0a0a;

Border Dotted
border: 5px dotted #7a0a0a;

Untuk Sementara Dark Kage Post Dua Dulu

Cara Mengubah Warna Highlight Dengan CSS

Assalam'ualaikum, Padahal Gw Sakit, Tapi Gw Sempatkan Ngepost. Oke Postingan Kali Ini "Cara Mengubah Warna Highlight Dengan CSS" Oke Langsung Aja..

1. Buka Blogger
2. Klik Template
3. Klik Edit Html
4. Cari Kode ]]</b:skin> , Tekan Ctrl + F Untuk Mempercepat Pencarian
5. Jika Sudah Ketemu, Masukan Kode Dibawah Ini Diatas ]]></b:skin>

::webkit-selection { background #ffff00 /* Google Chrome */}
::selection { background: #ffff00; /* Safari */ }
::-moz-selection { background: #ffff00; /* Firefox */ }

6. Ganti Kode Warna Biru Dengan Warna Yang Kamu Mau, Simpan Template

Sekarang Sudah Terganti....

Semoga Bermanfaat

Cara Membuat Sesuatu Berputar Dengan CSS

Assalam'ualaiku, Kali Ini Dari Pada Gak Tahu Mau Post Apa Mending Post Ini, Oke Demonya Lihat Dibawah

Itu Hanya Menambahkan CSS

Oke CSSnya

#Darkkagealexa{-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
border: 5px solid #7a0a0a;
float: left;
background: Transparent;
padding-left: 0px;
width: 120px;
height: 95px;
margin-left: 0px;
margin-top: 0px;
border-radius: 0px 0px 0px 0px;
position: absolute;}
#Darkkagealexa:hover{transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
border: 5px solid #7a0a0a;border-radius: 10px 10px 10px 10px;box-shadow:0 0 30px #7a0a0a;}

Kalian Hanya Perlu Menambahkan CSS yang Berwarna Merah
Sementara Kode Yang Berwarna Biru Itu Kalian Bisa Ganti, Semakin Banyak Angkanya Semakin Banyak Berputarnya, Semakin Sedikit Angkanya Semakin Sedikit Berputarnya.
Semoga Bermanfaat!!!!!

Cara Membuat Swirl Simple

Assalam'ualaikum, Tadi Ada Teman Saya Yang Minta Trick Buat Swirl.... Jika Kalian Belum Tahu Bisa Lihat Gambar Dibawah

Itu Contohnya, Kalau Tertarik Langsung Saja...

1. Buka Gambar Yang Mau Di Swirl



2. Buka Pen Tool, Lalu Buatlah Seperti Ini Digambarmu




3. Buka Brush Lalu Setingannya Seperti Ini



4. Klik Lagi Pen Tool, Baru Klik Kanan, Klik Ctrl + Shift + N, Baru Klik Stroke Path



5. Klik Ok
6. Untuk Lebih Bagus Kamu Tambahkan Outer Glow



7. Klik Pen Tool, Klik Kanan Pilih Delete Path
8. Hapus Yang Sudah Ditandai



Selesai
Ini Gambar Yang Dijadikan Tutornya

Semoga Bermanfaat, Kalau Copas Kasih Sumber Ya!!!
Jika Ada Pertanyaan Tanyakan Dikomentar

Cara Membuat Banner Slidder Elegant Dengan CSS

Assalam'ualaikum, Kali Ini Dark Kage Akan Memberikan Trick Yang Bagus Oke Langsung Saja....
Ini Demonya

• 
• 
• 
• 
  
  

Gimana??? Kerenkan, Hihiihi Ini Kode

CSS

#slider2 {transform: skew(26deg, 0deg) ;
-webkit-transform: skew(26deg, 0deg) ;
-moz-transform: skew(26deg, 0deg) ;
-o-transform: skew(26deg, 0deg) ;
-ms-transform: skew(26deg, 0deg) ;
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #7a0a0a;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 5px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
border:dashed 5px #000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#fff;
border:5px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #7a0a0a;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:&#39;Shojumaru&#39;;
text-shadow:1px 1px 1px #7a0a0a;
}

HTML

<div id='slider2'>
<div id='mask'>
<ul><li>
  <a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a>
</li>
<li><a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a>
</li>
<li><a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscYWHRbtkdCxshPX7tejWi273g8GaJRs3Gu9JW3RXEJE3TBRsBh34q_UVW8mseHle0GQNXLetFTDtY9imh8ecommx_NArJL_c2QeOR205FOr98wJ6NUOy7vzLJV-ZgIPcUPc8iwXWzm_h/s1600/468-With-Spin.gif'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>

Oke Semoga Bermanfaat :D 

Kumpulan Block Quote Keren Dengan CSS

Assalam'ualaikum, Kali Ini Dark Akan Akan Membagikan Blockquote Keren Dengan CSS, Blockquote Ini Buatan Saya Sendiri..

1. Blue Blockquote

[Demo Here]

CSS :

blockquote {border:double 7px #0048ff;
-moz-border-radius: 38px;
-webkit-border-radius: 38px;
border-radius: 38px;
}
blockquote:hover {border:double 7px #0048ff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;}

2. Elegant Blockquote

[Demo Here]

CSS :

 blockquote {border:dashed 7px #0048ff;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
transform: skew(25deg, 0deg) ;
-webkit-transform: skew(25deg, 0deg) ;
-moz-transform: skew(25deg, 0deg) ;
-o-transform: skew(25deg, 0deg) ;
-ms-transform: skew(25deg, 0deg) ;}
blockquote:hover {border:dashed 7px #0048ff;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;transform: skew(-25deg, 0deg) ;
-webkit-transform: skew(-25deg, 0deg) ;
-moz-transform: skew(-25deg, 0deg) ;
-o-transform: skew(-25deg, 0deg) ;
-ms-transform: skew(-25deg, 0deg) ;}

Kali Ini Dua Aja Dulu Nanti Saya Tambahkan..
Semoga Bermanfaat!!!

Cara Membuat Gambar Postingan Berputar

Assalam'ualaikum, Pada Malam Ini Dark Kage Akan Memberikan Trick Blog, Oke Kali Ini "Cara Membuat Gambar Postingan Berputar, Kalau Mau Lihat Demonya Lihat Aja Blog Ini....

Oke Langsung Aja.....

1. Buka Dasboard
2. Template
3. Edit Html
4. Cari Kode </head>, Pake Ctrl + F Biar Lebih Gampang.....
5. Taruh Kode Dibawah Ini Diatas </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'><style>.post img{margin:10px;padding-right5px;width:100px;height:100px;text-align:center;-webkit-transition:All 2.346s ease;-moz-transition:All 2.346s ease;-o-transition:All 2.346s ease;-webkit-background-clip:padding-box;-webkit-box-shadow:0 0 0 3px #7a0a0a;-moz-box-shadow:0 0 0 3px #7a0a0a;box-shadow:0 0 0 3px #7a0a0a;-webkit-border-top-left-radius:60px;-webkit-border-bottom-left-radius:60px;-moz-border-radius-topleft:60px;-moz-border-radius-bottomright:60px;border-top-left-radius:60px;border-bottom-right-radius:60px;-o-border-top-left-radius:60px;-o-border-bottom-right-radius:60px}.post img:hover{box-shadow:1px 1px 10px 3px rgba(0,0,220,0.6);border-radius:0;-webkit-transition:All 2.346s ease;-moz-transition:All 2.346s ease;-o-transition:All 2.346s ease;-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg)}
</style></b:if>

Kode Diatas Bisa Diedit edit lagi
6. Pratinjau Dulu, Kalau Udah Bagus Baru Disimpan

Oke Semoga Bermanfaat