Home Tutorial blog

Flat ui css accordion

      Comment   
Yeay,kali ini gw akan memberikan tutorial blog lagi nih
yaitu flat ui css accordion,tentu menggunakan css3,cocok buat blog kamu yang style nya flat ui,menerapkan efek pada css tentu mempunyai selera tersendiri apa lagi beberapa waktu yang lalu udah musim flat flat ui semua,awal kehadiran flat pun setelah pihak microsoft meluncurkan windows 8 pada tahun 2013 kemarin dan bertema kan flat ui


dan akhir nya pada web designer/designer berlomba lomba
untuk memodifikasi web/blog nya sendiri dengan bergaya flat minimalis,sama dengan tutorial yang akan gw bahas hari ini bertema flat juga tapi menggunakan animasi accorditon
untuk lebih jelas silahkan terapkan di blog masing masing dan edit sesuai selera


See the Pen Flat ui css accordion by Ojik kidiw (@kidiw) on CodePen.

silahkan di kreasikan sendiri ya

see you

Membuat progress loading bar ala youtube

      Comment   
Yeay,membuat progrees loading bar di blog tentu banyak sekali tutorial nya di google
dan efek dari animasi loading bar itu bermacam macam,ada yang bentuk cubik animasi ada yang seperti loading google+ bahkan seperti loading animasi pada windows 8,nah kali ini gw akan memberikan tutorial serupa juga tapi ini efek nya berbeda dari pada yang lain

apa yang membuat efek yang gw share ini berbeda?
ya,karena efek loading bar nya seperti di youtube,pernah liat kan? di bar atas kalian yang panjang warna merah ini di penampakan nya



beda banget kan dari progress loading bar dengan yang lain nya?
selain pemakain nya simple juga gak terlalu memberatkan blog,yuk langsung aja pasang

Basic code nya
letakkan kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>
setting
height:"2px" untuk ketebalan loading bar
a.bg=a.bg||"#db3131" ini untuk warna loading bar,kalau ingin mengganti nya cukup ganti kode ini #db3131

source

Membuat count down lebaran time

      Comment   

Yeay,karena besok lebaran kali ini gw akan share trick baru yaitu "membuat count down timer"
apa sih count down timer itu? count down timer itu adalah waktu,detik,jam yang menghitung mundur dari target yang udah di tentukan,nah kali ini count down timer nya menghitung mundur dari detik sekarang ini juga sampai tangah malam nanti dan tiba nya hari raya idul adha,keren kan?

makasih buat kang ismet,atas source
setelah gw otak atik jadi lah kayak gini,demo nya bisa di lihat blog gw sekarang ini,yuk meriah kan lebaran idul adha ini dengan menaruh assessosis di blog kamu XD

langsung aja yah

<style type='text/css'>
#lebaran {
background:#397249 url(URL GAMBAR KAMU) no-repeat left;
color: white;
font-size: 150%;
text-transform: uppercase;
text-align: center;
padding: 20px 0;
font-weight: normal;
border-radius: 5px;
line-height: 1.8em;
margin-top: 8px;
margin-left: 20px;
width: 941px;
}
.putih {color:white}
</style>
<div id='lebaran'>
    <span id='countdown'/>
</div>
<script src='https://sites.google.com/site/dfgdgdgdfhdhdgdfg/asdasdasd/ojkd.js' type='text/javascript'/>
letakkan kode di atas,di bagian html mana aja
dan edit kode warna merah dengan url gambar kamu

gampang kan

see you

Membuat loading cubic animasi

      Comment   

Yeay,membuat efeck loading pada blog membuat blog kita lebih menarik apa lagi jika koneksi lagi lelet saat membuka suatu halaman blog,jika blog tersebut tidak menerapkan efek loading di blog nya maka saat pengunjung koneksi nya lagi lelet dia tidak bisa merasakan efek loading di blog tersebut,alias simple cuma loading di browser nya keliatan

nah,bagai mana kalau kita mererapkan efek loading dengan bentuk cubic animasi?
pemakaian nya pun sangat simple,sehingga ketika blog kita di load oleh browser efek loading nya akan keliatan dan gak bikin pengunjung bosan

dari pada penasaran yuk pasang

1.loading cubic animasi ini menggunakan jquery,letakkan kode ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

2.letakkan kode di bawah ini di atas kode ]]><b:skin

#page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0;
left:0;z-index:9999;background:#fff url('http://2.bp.blogspot.com/-t2gSISF0Sdc/U4XzAzFl5qI/AAAAAAAADVY/nYmOzAOnbus/s1600/Loader3.gif') no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

3.next,letakkan kode di bawah ini di atas kode </body> 

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading....</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

dan liat hasil nya,gampang kan
udah dulu yah post gw kali ini,jangan lupa ninggalin jejak di komentar

see you

Label cloud full color

      Comment   

Yeay,membuat suatu label di blog membuat blog kita lebih rapi dengan kategori kategori yang ada di blog,sehingga banyak kalangan blogger menaruh label nya di widget template nya,selain berkesan rapi juga membuat pengunjung gak kebingungan harus mencari kategori di blog tersebut
membuat label di blog ada dua macam style nya ada yang menurun seperti text biasa ada juga yang cloud

nah,kali ini gw akan bahas yang label cloud untuk mempercantik nya tentu saja kalangan blogger berexperimen dengan cara nya masing masing,kali ini kita akan membuat label tetap berbentuk cloud tapi full color gimana,menarik banget kan

dari mati penasaran yuk langsung aja coba

1.letakkan kode di bawah ini di atas kode ]]><b:skin

.label-size {
  position:relative;
  text-transform:uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Arial;
  color:#fff!important;
  }
.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  transition: all 0.4s ease-in-out;
}
.label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.label-size-1 a:hover {background:#16a085;}
.label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.label-size-2 a:hover {background:#2980b9;}
.label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.label-size-3 a:hover {background:#27ae60}
.label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.label-size-4 a:hover {background:#8e44ad}
.label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.label-size-5 a:hover {background:#c0392b}

kode yang warna merah adalah warna nya,bisa di ganti sendiri sesuai selera

2.simpan template kamu

3.setting widget label di tata letak


pilih tampilan cloud di widget label kamu

4.simpan lagi dan lihat hasil nya
dan tara! widget label kamu udah keren dengan style full color
warna label nya bisa di ganti sendiri sesuka hati


see you

Jquery iklan text google adsense

      Comment   

Yeay,udah lumayan lama nih gak post karena gw lagi sibuk edit template yang sekarang jadi post nya gw pending dulu,tunggu selesai template ini baru gw ngepost lagi
kali gw mau bahas apa ya,oiya kali ini gw akan kasih trick pasang iklan text google adsense itu loh iklan text untuk mencari penghasilan lewat blog nama iklan nya adalah 'google adsense' biasa nya kan kalau mau pasang iklan text gitu harus lewat google adsense kan bentuk iklan text gitu,nah kali ini kita bisa membuat nya sendiri tanpa harus ngambil dari google adsense lagi

trick ini menggunakan jquery sehingga loading blog agak lama,bisa di custom text sendiri juga
dari pada penasaran yuk langsung aja pasang

trick nya simple kok

1.cari kode </head> letakkan kode di bawah ini di atas kode tadi

<script src='//googledrive.com/host/0B22vSZUsgbQfcDJPbGhFZGh5d1U/iklan-teks-ag-ga.js' type='text/javascript'></script>

2.letakkan kode di bawah ini di atas kode ]]><b:skin

#iklan-teks {
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana,Tahoma,Serif;
  color:#f0523f;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
.iklan-teks-post-footer .iklan-header {border-bottom:0;}
#iklan-teks h2.iklan-header:first-child {border-top:0;}
#iklan-teks h2.iklan-header:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:120px;
  padding:10px 70px 10px 10px;
  z-index:1;
  background:white;
  font:normal 13px Verdana,Tahoma,Serif;
  color:white;
  position:relative;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana,Tahoma,Serif;
  color:#f0523f;
  margin:0 0 5px 0;
}
a.judul {
  font:normal 20px Verdana,Tahoma,Serif !important;
  color:#f0523f !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana,Tahoma,Serif !important;
  color:#2c343e;
  text-decoration:underline;
}
.isi-iklan a {
  font:normal 13px Verdana,Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover {
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background:#f0523f;
  border-radius:50%;
  cursor:pointer;
  height:34px;
  float:right;
  margin-right:-60px;
  margin-top:-40px;
  width:34px;
  text-align:center;
  line-height:34px;
}
.panah-besar:hover {background:#2c343e;}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:-4px;
  z-index:2;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#f2f2f2;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:-103px;
  color:#000;
  z-index:2;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
}

3.taruh kode ini di widget html/javascript

<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header='Blogger Tutorial' style='border-top:none'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Blogger Tutorial</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Blog yang berisi seputar kode-kode web pada platform blogger.</span><a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJJojvY130mjnmHclVtfaPFzTm6r3p9bnf6zpIJZOVJTBppkfIda7k3ZYjQ4b05IH52sXZBfnxG28PRSOBPmuyLQNgRPmNy-kvuIGfxgl6AwvS6n2-w8Yimdw6_gcdoHhG1xXlYyKaX4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJJojvY130mjnmHclVtfaPFzTm6r3p9bnf6zpIJZOVJTBppkfIda7k3ZYjQ4b05IH52sXZBfnxG28PRSOBPmuyLQNgRPmNy-kvuIGfxgl6AwvS6n2-w8Yimdw6_gcdoHhG1xXlYyKaX4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJJojvY130mjnmHclVtfaPFzTm6r3p9bnf6zpIJZOVJTBppkfIda7k3ZYjQ4b05IH52sXZBfnxG28PRSOBPmuyLQNgRPmNy-kvuIGfxgl6AwvS6n2-w8Yimdw6_gcdoHhG1xXlYyKaX4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJJojvY130mjnmHclVtfaPFzTm6r3p9bnf6zpIJZOVJTBppkfIda7k3ZYjQ4b05IH52sXZBfnxG28PRSOBPmuyLQNgRPmNy-kvuIGfxgl6AwvS6n2-w8Yimdw6_gcdoHhG1xXlYyKaX4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <span class='info-iklan'>Ads by <data:blog.title/></span><span class='info-icon'><a href='#' target='_blank'><img alt='info' src='https://dl.dropboxusercontent.com/s/vf5xajbwo5kzhus/info.png'/></a></span>
</div>

itu isi iklan text nya bisa di edit sendiri
simple kan?

see you

source






Cara menambahkan kutipan animasi

      Comment   

Yeay,kali ini zynation balik lagi ke trick trick blogger karena udah lumayan lama gak ngepost tentang blogger lagi,okay kali ini gw bakalan bahas soal animasi judul nya yaitu "cara menambahkan kutipan animasi" lumayan kan buat bikin puisi tapi style animasi keren loh cuma ini menggunakan javascript sedikit jadi loading blog agak berat

dari pada penasaran yuk liat demo nya



keren kan? yuk pasang

1.letakkan kode ini di widget html/javascrip di tata letak blog kalian

<link href="https://googledrive.com/host/0Bxyf5AC_ilPwRFpfcHhFSXEzXzg" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0Bxyf5AC_ilPwYUlfNHRkbjh6ekk" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>
2.ini kode HTML nya jadi terserah letakkan kode ini di mana asalkan di bawah kode <body>

<!-- Ani Quote  -->
<div id="words">
<ul class="word-container">
<li data-author="--- Jose Mujica " data-easeout="lightSpeedOut">Saya disebut presiden termiskin di dunia, tetapi saya tak merasa miskin. Orang miskin adalah mereka yang bekerja hanya untuk menjaga gaya hidup mewahnya dan selalu menginginkan lebih.</li>
<li data-author="--- Thomas Alva Edison " data-easeout="fadeOutDown"> Banyak kegagalan dalam hidup ini dikarenakan orang-orang tidak menyadari betapa dekatnya mereka dengan keberhasilan saat mereka menyerah.</li>
<li data-author="---  Mohandas Gandhi " data-easein="fadeInDown">Mereka yang berjiwa lemah tak akan mampu memberi maaf yang tulus. Pemaaf sejati hanya melekat bagi mereka yang berjiwa tangguh.</li>
<li data-author="---  Voltaire " data-easeout="bounceOut"> Pendidikan mengembangkan kemampuan, tetapi tidak menciptakannya.</li>
<li data-author="---  Soekarno " data-easein="bounceIn"> Laki-laki dan perempuan adalah sebagai dua sayapnya seekor burung. Jika dua sayap sama kuatnya, maka terbanglah burung itu sampai ke puncak yang setinggi-tingginya; jika patah satu dari pada dua sayap itu, maka tak dapatlah terbang burung itu sama sekali.</li>
<li data-author="---  La Fontaine " data-easein="lightSpeedIn"> Kemenangan yang paling indah adalah bisa menaklukkan hati sendiri.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>
3.save template kalian dan liat hasil nya

kata kata nya bisa di ganti sendiri

udah dulu deh,segini dulu pada siang yang panas ini XD

see you

source

Belajar efek transition

      Comment   

Yeay,hei hei hei
udah lama gak ngepost dan komentar kalian pun udah jarang gw balas yah hahahaha XD bukan sibuk sih,cuma gak tau kenapa akhir akhir ini gw lagi malas ngepost jadi blog gak terurus begini udah berdebu nih blog gw,gak gw sapu sapu udah berjaring laba laba lagi di bagian header

okay,kali ini gw bakalan bahas apa yah,ya
gw bakalan bahas tentang efek transition apa itu transtion

apa itu transition?
transition itu css efek lambat cepat nya ketika di hover menurut gw bisa di bilang efek lambat atau cepat ketika di hover,supaya lebih menarik aja 

okay,yuk langsung aja liat demo nya

demo 1


arah kan kursor nya kesini

gimana efek ketika di hover lambat kan,nah itu dia kegunaan efek transtition tadi coba kita liat css tanpa efek transition

demo 2

arah kan kursor nya kesini

beda kan,iya lah soal nya kurang menarik untuk hover tanpa menambahkan css transition
sekarang kita liat basic code css nya di atas

#tion {
background: #ddd;
margin-left: 50px;
width: 180px;
height: 50px;
font-family: "Segoe UI Light","Open Sans Light",Sans-serif;
text-align: center;
font-size: 15px;
color: #222;
padding: 8px;
box-shadow: 0px 3px 1px rgba(0,0,0,0.2);
margin-top: 8px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.1s ease-in-out;}

#tion:hover{color:#fff;background: #FFCC00;}


yang kode warna merah adalah css transition nya,jadi kalau tanpa css transition ini kalian letakkan di dalam isi css kalian yang ingin di hover,maka akan tampak seperti demo 2 tanpa transition,jika menggunakan css transition maka seperti demo 1 kalau kode yang warna biru adalah durasi efek hover nya makin kecil angka nya makin cepat efek hover nya,makin banyak angka nya makin lambat efek hover nya
yuk liat contoh di bawah ini



jika angka durasi kita perbanyak transition nya 0.8s

#tion18 {
background: #ddd;
margin-left: 50px;
width: 180px;
height: 50px;
font-family: "Segoe UI Light","Open Sans Light",Sans-serif;
text-align: center;
font-size: 15px;
color: #222;
padding: 8px;
box-shadow: 0px 3px 1px rgba(0,0,0,0.2);
margin-top: 8px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
}
arah kan kursor nya kesini


semakin lambat kan efek hover nya,makin banyak angka durasi nya makin lambat efek nya

jika angka durasi nya kita perkecil transition nya 0.1s

#tion88 {
background: #ddd;
margin-left: 50px;
width: 180px;
height: 50px;
font-family: "Segoe UI Light","Open Sans Light",Sans-serif;
text-align: center;
font-size: 15px;
color: #222;
padding: 8px;
box-shadow: 0px 3px 1px rgba(0,0,0,0.2);
margin-top: 8px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
}


arah kan kursor nya kesini

gampang kan,inti nya efek transition ini efek untuk memperlambat atau mempercepat ketika kursor di arah kan ke sesuatu object

see you

Membuat efek getar pada gambar

      Comment   

Yeay,kali ini gw akan bagi bagi trick blogger lagi nih,yaitu cara membuat gambar bergetar menggunakan css3 animasi,ya kali ini akan bahas soal getar getar bukan cetar cetar milik syahrini yah hahahaha XD
membuat efek getar pada gambar ini kebanyakan menggunakan keyframe sehingga ketika di hover ya gitu gambar nya akan bergetar tapi tetap menunggunakan css3 biar gak berat loading blog nya

silahkan liat demo nya di bawah ini,arahkan kursor nya ke gambar




ojkd

udah,langsung aja pasang

basic css getar nya



#namacssyangdihover:hover {
animation-name: digoyang;
-moz-animation-name:  digoyang ;
-webkit-animation-name:  digoyang;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes  digoyang  {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes  digoyang  {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes  digoyang  {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

yang tulisan #namacssyangdihover,adalah nama css gambar kalian yang ingin di kasih efek getaran
css nya bisa di edit sendiri

mudah kan?

see you

source

Pure your ads with css3

      Comment   

Yeay,dihari minggu yang lagi cuaca gak jelas ini gw mau bagi bagi trick blogger lagi ah yaitu pure ads css3
kayak nya udah ada yang pernah request deh ini,tapi gak tau deh perasaaan gw udah ada yang request tapi belum gw kabulin hahahaha XD sekarang gw kabulin deh

apa itu pure ads css3?
seperti template zynation sebelum nya kan ada tuh di footer dalam post yang ada 3 slot banner 125x125 itu loh yang kalau di hover akan kebuka,keren kan? nah itu menggunakan css3 jadi css nya simple gak ribet sehingga di blog kalian gak terlalu berat waktu load post nya

dari pada gw jelasin panjang lebar,langsung aja deh liat demo nya


See the Pen Pure ads banner with css3 by Ojik kidiw (@kidiw) on CodePen.

gimana? keren kan

1.Cari kode ]]></b:skin letakkan kode di bawah ini di atas kode tadi

.banners-pl {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 2px 2px 2px #222;
    margin-bottom: 30px;
    padding: 8px;
    position: relative;
    width: 590px;
    z-index: 15;
}
.corte-img {
    cursor: pointer;
    height: 167px;
    overflow: hidden;
    position: relative;
}
.corte-img > img {
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    position: absolute;
    z-index: 50;
    opacity: 1;
    left: 0;
}
.banners-pl:hover .corte-img > img {
    opacity: 0;
    margin-top: -167px;
}
.conten-pl-home {
    position: absolute;
    top: 0;
    z-index: 10;
}
.conten-pl-home a {
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 2px 0 #333333 inset;
    display: block;
    float: left;
    margin: 28px;
    padding: 6px;
    position: relative;
    text-decoration: none;
    width: 125px;
    height: 125px;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.conten-pl-home a:hover {
    background: #07aaee;
}
.banners-pl .conten-pl-home a strong {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-weight: normal;
    right: -20px;
    padding: 3px 6px;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
    top: 0;
    z-index: 9999;
}
.banners-pl .conten-pl-home a strong {
    opacity:0;
    -webkit-transition-property: opacity, top;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity, top;
    -moz-transition-duration: 500ms;
    -o-transition-property: opacity, top;
    -o-transition-duration: 500ms;
    transition-property: opacity, top;
    transition-duration: 500ms;
}
.conten-pl-home  a:hover strong {
    opacity:1;
    top: 120px;
}
2.kalau mau di letakkan di dalam post/di footer post silahkan cari kode berikut
<div class='post-footer'> (setiap template kode nya berbeda beda) kalau udah letakkan kode di bawah ini di bawah kode tadi

 <div class="banners-pl">
<div style="position:relative">
<div class="corte-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVj5AqhGE4i1pFEV0_l7iW-_wMAiDLjuMFG6lwTCcQjfFvlbLEhAlLtxp0uvu34fpJCueCk4mHJrtf1OH1jm20JuZmnhVP-IcTb8pehtUEDvI27IGH5Tj3UJb0mNXarXmwhPtlsI-oF4U/s1600/ad88.jpg" />
</div>
<div class="conten-pl-home">
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1zxE19tlY14C9hj58ut0y4U4_EqmqdZ9JfbzzF0yWKlV3qv2bTbESBy5VcYvS_JQChSos3kBQTqMkpJj0nIDhT6E6a6j0A2iMbS3Xa8b2pvRbNrL1ivX6WGN0Urp2zY7W7s9dyC5fgV6/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1zxE19tlY14C9hj58ut0y4U4_EqmqdZ9JfbzzF0yWKlV3qv2bTbESBy5VcYvS_JQChSos3kBQTqMkpJj0nIDhT6E6a6j0A2iMbS3Xa8b2pvRbNrL1ivX6WGN0Urp2zY7W7s9dyC5fgV6/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1zxE19tlY14C9hj58ut0y4U4_EqmqdZ9JfbzzF0yWKlV3qv2bTbESBy5VcYvS_JQChSos3kBQTqMkpJj0nIDhT6E6a6j0A2iMbS3Xa8b2pvRbNrL1ivX6WGN0Urp2zY7W7s9dyC5fgV6/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
</a>
</div>
</div></div>

simpan template kalian
gimana gampang kan?

see you

source