Flat ui css accordion

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

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


Membuat count down lebaran time


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


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


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


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






Selamat hari raya idul fitri 1435 H


Yeay,selamat hari raya idul fitri 1435 H mohon maaf lahir dan batin yaaaa
maaf jika gw ada salah kata dan menyinggung peraaan kalian gw cuma manusia biasa gak luput dari kesalahan,gak terasa ya kita udah di penghujung ramadhan begitu cepat dia meninggal kan kita semua
bersyukur pasti nya kepada ALLAH SWT yang udah memberikan kita umur panjang dan kesehatan sehingga kita bisa menikmati ramdhan dan idul fitri seperti sekarang ini

semoga kita di pertemukan lagi di bulan ramdhan tahun depan amin ya rabbal alamin
besok udah bisa nih puas puasin makan nya,dimana waktu puasa gak ada makan siang saat nya besok udah ada makan siang,jadi bisa di sikat semua budaya thr pasti gak lupa donk
lontong pasti nya menu yang spesial buat gw besok,dan shalat idul fitri yang paling gw kangenin
karena shalat ini datang nya setaun sekali pasti nya kangen banget donk

okay,segini dulu ya post gw hari ini

see you

Belajar efek transition


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


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


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


Mau pulsa gratis? gampang


Yeay,kabar gembira buat kalian yang lagi bokek pulsa,mau pulsa gratis kan? siapa sih yang gak mau sama yang gratisan,gw pun juga mau,dan ini bukan penipuan gw barusan dapat pulsa gratis gak percaya? mau bukti nih


ini barusan sekitar jam 12 siang tadi liat tuh gambar di atas ini beneran gw gak bohong



ini juga bukti gw tarik 10 ribu tadi,emang karena point gw 10 ribu


liat dua sms itu barusan gw tebus 10 ribu,liat juga jam nya

update 1 januari 2015 total yang udah gw tarik


beneran kan? gw gak bohong emang di kasih pulsa beneran semua operator lagi
awal nya sih gw iseng beberapa minggu yang lalu,kan lagi heoh tuh sama EXCITE POINT yang kata nya di kasih pulsa juga ujung ujung nya,dan rasa penasaran gw muncul gw coba daftar lah dan gw masukin nomor hp gw untuk dikirim kode konfirmasi dan ternyata?
sampai sekarang gak dikirim kirim kode nya,kata nya sih karena gw pake telkomsel kalau gw pake smartfren lebih cepat lagi di kirim kode konfirmasi nya

setelah mencoba gagal terus
dan akhir nya gw iseng minggu kemarin daftar di CANDY.CO.ID 
yang kata nya juga dikasih pulsa,dan setelah daftar pun akhir nya gw berhasil lalu gw ngikutin petunjuk yang ada gw pilih survey yang banyak di kasih point setelah gw ikuti dan akhir nya gw dapat 5000 point,gw ikuti survey lagi dan terkumpulah 10000 point 

nih liat punya gw dibawah


dan langsung deh gw klik tebus dan akhir nya seperti tadi siang,gw dapat 10000 ribu pulsa padahal kalau gw kumpulin sampai 20 ribu sih bisa tapi karena gw lagi bokek yaudah gw tarik aja karena gak sabar hahahaha XD ini asli bukan penipuan gw tekankan sekali lagi

kelebihan candy ini MINIMAL 10 RIBU sudah bisa di tebus
kalau excite MINIMAL 20 RIBU baru bisa di tebus

yuk langsung aja ikuti cara gw





kalau udah daftar yaudah tinggal masukin nomor hp kamu lalu pilih operator yang kamu gunakan,dan selanjut nya kumpulin minimal 10 ribu point untuk tebus 10 ribu pulsa,bisa juga sampai 100 ribu kamu kumpulin point nya dan dapatkan 100 ribu pulsa juga wow banget kan?

selanjut nya tinggal ikuti survey yang ada,gampang kok tinggal ikuti cara nya aja
gak sampai satu jam kamu udah dapat 10 ribu pulsa kayak gw tadi

gampang banget kan


100% NO TIPU,kalau gak percaya silahkan di coba sendiri

see you

Bikin insturement music dengan flstudio


Yeay,udah lama nihh gak post tau sendiri lahhh kalau gw lagi UN,jadi gak sempat post sama kasih trick dan tips baru lagi,lagi fokus UN soal nya,doain ya bro semoga gw LULUS UN TAHUN INI dengan hasil nilai yang memuaskan,aminnnnn ya rabbal alamin

okay,kembali ke topik
kali ini bukan trick dan tips sihh,cuma buat kalian yang gak tau ngapain di rumah yuk bikin insturument music/beat sendiri,gak ada salah nya kan kita nyoba hal hal yang baru,asalkan positif

cara bikin instrument music/beat gimana?
kali ini gw gak kasih tutorial lengkap nya ya,cuma sekedar dasar nya aja dan software apa yang harus di perlukan,gampang kok kalian cukup punya leptop/komputer sendiri,iya lah biar gampang jadi gak harus ke warnet

yang kedua,download sofware nya nama software nya adalah 'flstudio 11' gw menggukan software ini selain pake nya mudah,dan gak binggung,juga software nya gak berat berat amat lah,beda sama sofware pembuatan instrument music yang lain,seperti 'adope audition' kalo gak salah

flstudio banyak versi nya,ada yang versi 10,11 yang paling baru cuma yang 11

apa yang baru dari flstudio 11 kali ini?


  • Performance mode � Trigger Playlist Clips live using a mouse, touch screen, typing keyboard or MIDI controller. Supports APC20/40, Launchpad, Lemur, Block, Maschine/Mikro, padKONTROL, QuNeo, Traktor Kontrol (and more).
  • Multi-touch support - FL Studio and some plugins now respond to Multi-touch with Microsoft gesture functions supported.
  • Playlist - 199 Playlist tracks, increased from 99.
  • Linking includes MIDI input port - Links now remember the MIDI input port used to avoid conflict between controllers.
  • Playlist & Piano roll � Horizontal & vertical movement locking. Shift is horizontal lock & Ctrl is vertical lock when dragging items.
  • Piano roll - Glue notes, Mouse wheel velocity, Monophonic step entry mode & Chop chords tool.
  • Right-click data entry - Most controls now allow a Right-click option to type in values.
  • Plugin Picker - Right-click to open a plugin and its presets in the Browser. Start typing plugin names to highlight entries.
  • Mixer - Page Up/Down keyboard keys cycle through the current mixer track's plugin windows.
  • Options - Play truncated notes in clips restores notes overlapping slice points in Pattern Clips. Click and hold functions. GUI animation level now selectable from sober to entertaining.



kalo udah di download,cari tutorial nya di youtube dasar dasar nya aja dulu kalau mau belajar,gw juga masih belajar nihhh nihh punya gw kalau lagi buka flstudio 11


tutorial nya





untuk tutorial nya banyak di youtube,silahkan di cari sendiri ya

okay,udah tau kan? kalau kalian udah mahir menggunakan flstudio ini keren keren loh instrument music yang akan kalian ciptakan,bisa dari hip hop/dj remix/bikin lagu sendiri juga bisa
keren banget kan

nihhh dengerin juga hasil beat gw dari flstudio dengarin disini






see you

source

Awal sentuh game online


Yeay,ingat gak waktu masa masa kecil dulu pertama kali ke warnet? apa yang kita lakuin,kayak nya masih norak banget yahh,ketik belum bisa tekan mouse masih gemeteran XD
sama kayak gw dulu,dulu gw pertama kali ke warnet itu kelas 4 sd ntahh kelas 5 sd lupa gw,dulu gw belum mengenal facebook,twitter,dan social media lain nya blogger pun belum kenal XD

jaman pertama kali gw sentuh komputer atau ke warnet dulu,gw di ajak sama teman buat nyoba ke warnet,sebener nya dulu gak banyak warnet warnet game online,gak kayak sekarang dulu kalau warnet itu gak banyak,dan warnet nya pun kebanyakan khusus buat browsing aja

karena dulu belum banyak yang pake leptop apa lagi komputer,jadi anak kuliah jaman gw dulu palingan buat tugas sering ke warnet,kalau sekarng banyak warnet warnet yang udah khusus game online,bocah sd pun udah tau ke warnet XD

gw dulu pertama kali ke warnet,gara gara di ajak teman untuk main game,gara gara bosan main ps1 dan ps2 selalu dan kami pun rame rame coba di warnet tersebut,bocah bocah semua termasuk gw XD dulu jaman gw belum kenal pb dan game game online lain nya,dan monitor nya masih tabung gw ingat banget masih menggunakan windows xp,windows xp itu dulu udah habis canggih

gak kayak sekarang rata rata paling rendah udah pake windows 7,
dulu gw paling seneng main game perang dan EMPIRE dulu gw main game empire belum tau cheat,jadi asal main aja terus di ajarin sama teman gw,teman gw ini lumayan jago karena abang nya juga punya leptop dulu,jadi dia sering main di leptop abang nya

beberapa tahun kemudian pas gw kelas 6 sd,udah mulai musim tuhh game CS (counter strike) dan warnet warnet pun udah banyak membuka warnet khusus game online biarpun gak sebanyak sekarang,gw juga seneng dengan game CS heboh banget sama game ini dulu,anak anak kampung gw pulang sekolah langsung ngacir ke warnet buat main game CS gw dulu belum terlalu pinter main CS XD


bahkan,warnet warnet lain udah mengadakan WAR cs di warnet warnet,teman teman gw yang jago pada ikut war semua,gw aja yang masih cupu mengang mouse aja gemeteran XD

dan beberapa tahun kemudian,waktu gw kelas 1 smp muncul lah game baru yaitu IDOL STREET gw suka dan cs pun makin lama makin berkurang populasi nya,bocah bocah dan abang abang pun pada main gme ini semua,sampai anak anak cina pun di tempat gw udah jago banget main game ini,kayak game dance dance gitu,kayak game AYO DANCE gw dan teman teman gw pun juga main game ini


sampai sampai waktu hari raya,gw beli CAST untuk beli baju di char gw di game idol street ini,teman teman gw pada beli semua,dan karakter nya udah berkembang pesat,gw juga gak mau kalah donk

sebelum game idol street ini game populer adalah game DOTA 3 gw juga suka main game ini karena LAN jadi bisa main satu warnet,gw main dota naruto suka banget sampai sampai kami selalu ngelan bareng main game dota ini

nahhh sebenar nya masih banyak pengalaman pengalaman gw waktu pertama kali ke warnet dan sejarah sejarah  gw main game online,kalau kalian gimana? waktu pertama kali ke warnet share di kotak komentar yaaa


see you

Efek loading dengan keyframe


Yeay,dikarenakan kemarin kemarin udah jarang post karena lagi menyelesaikan template ini XD jadi post nya pending dulu bentar,okay trick blogger loading dengan efek keyframe ini udah pernah gw post belum,kayak nya belum yahhh

apa itu loading dengan efek keyframe?
adalah loading blog dengan menggunakan css cuman di gabungkan dengan efek keyframe sehingga efek loading nya lebih mulus 

untuk demo nya silahkan kesini

udah tau kan?
yuk pasang

Efek yang di terapkan

  1. SYSTEM_BAR efek nya dari bawah naik ke atas
  2. SKYIN efek nya dari atas turun ke bawah
  3. SYSTEM efeknya keluar dari samping kiri
1.efek skyin


-webkit-animation:Skyin 4s;
-moz-animation:Skyin 4s;
}
@-webkit-keyframes Skyin{from{-webkit-transform:translate(0px,-1000px)}to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes Skyin{from{-moz-transform:translate(0px,-1000px)}to{-moz-transform:translate(0px,0px)}
}
2.efek sistem


-moz-animation:System 5s;
-webkit-animation:System 5s;
}
@-webkit-keyframes System{from{-webkit-transform:translate(0px,1000px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System{from{-moz-transform:translate(0px,1000px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
}
3.efek system bar


-webkit-animation:System_Bar 4s;
-moz-animation:System_Bar 4s;
}
@-webkit-keyframes System_Bar{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}
}
@-moz-keyframes System_Bar{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}
} 
 Cara pasang nya

contoh:

#namacsskamu {
display: inline;
width: 229px;
overflow: hidden;
float: left;
padding-bottom: 1px;
height: 120px;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tAoGNevrJz3Fpn59hxzmQOZPk-EYgZD1iZljkVmSh59s5tIyEiM4jEnLqjKzRdmeebKPcWfseqTJ-IGDTZwU-3p7YH8fNxi5uXh7rhwdwavLp4D-7kXwUHml__oCHa57Iu_qlqt4im0/s1600/nopic.jpg) no-repeat center center;
margin: 1px;
-webkit-animation:System_Bar 4s;-moz-animation:System_Bar 4s;}@-webkit-keyframes System_Bar{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}}@-moz-keyframes System_Bar{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}}

-kode yang warna ungu adalah nama css kamu misal nya mau di terapkan di header yaudah kode nya #header (setiap template kode nya berbeda beda) dan seterus nya

-kode yag warna merah adalah kode efek yang di atas tadi


gampang kan? kalau masih binggung tanyakan di komentar

see you

source

Membahas sedikit tentang camera 360


Yeay,kali ini gw mau nyinggung sedikit tentang camera 360 yang lagi HOT sekarang udah banyak di hp hp yang android yang telah mendownload aplikasi ini apa lagi buat yang cewek kalo gak ada camera 360 rasa nya kurang enak kalo foto foto

kalo menyinggung soal camera 360 gak ada habis nya
kita pun yang cowok udah ketipu sama yang nama nya camera 360 gara gara camera 360 ini wanita yang kita sukai udah gak natural lagi bisa di bilan bukan wujud dia yang asli melainkan duplikat seorang artis yang masuk ketubuh nya sehingga berbeda dengan yang asli nya

dan gw pun pengalaman soal camera 360 ini,gw udah pernah ketipu saat kenal sama gebetan dulu
pas lagi gw browsing browsing di facebook nya gw liat foto nya cantik banget,putih,mulus
1 minggu kemudian pun kami bertemu dan pas gw liat beda banget sama yang asli nya 50%

inilah fenomena camera 360 ini kita yang cowok udah tertipu semua sehingga membuat kita udah malas naksir sama cewek,karena kalo foto foto menggunakan camera 360 semua,dan itu udah bukan wujud asli si cewek itu lagi beda banget

jadi kalo gak cewek,naksir siapa?
bukan nya naksir sama sesama jenis yahhh maho banget XD

bisa di lihat perbedaan nya
















bukan hanya cowok aja yang tertipu sama camera 360 tapi cowok juga

camera 360 ini pun memberikan banyak manfaat,apakah itu? langsung aja

1.yang jelek,hitam,berjerawat bisa jadi ganteng dan cantik
2.yang tampang cowok bahkan bisa jadi cewek karena sangking imut nya
3.bibir yang hitam bisa menjadi pink

udah lahh,camera 360 masih HOT sekarang dan udah banyak yang pake
gara gara ini kita cowok banyak tertipu sehingga cowok udah gak suka lagi sama cewek,mungkin dia suka sama cowok juga XD

camera 360 ini juga bisa di jadikan aplikasi arternatif buat cewek yang gak bisa photoshop,jadi tinggal jepret jepret aja udah cantik,maka nya aplikasi ini paling banyak di download sekarang untuk edit foto

see you

Recent comment notifikasi berbeda


Yeay,ada trick baru nihhh yaitu recent comment dengan notifikasi tapi dengan efeck yang berbeda ini sebenernya recent comment notifikasi punya kang ismet cuma udah di beda dikit,jadi agak mirip kayak punya kang ismet gitu

awal nya gw tersesat dan tak tau arah jalan pulang   du suatu blog karena gw menemukan trick yang ini jadi gw pasang dehhh,emang mirip kayak punya kang ismet ntahh lahh yang penting gw share ulang aja disini,yang pasti udah banyak para blogger blogger pada nyari tapi gak ketemu ketemu XD okay yuk langsung aja



trick ini menggunakan jquery jadi harap pasang js nya dulu di blog kalian,versi terbaru


1.login ke blog kalian masing masing
2.pilih template
3.edit html
4.letakkan kode di bawah ini di atas kode </head>

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

kalau udah ada di template kamu,jangan di pasang lagi yahhh 

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

/* Komentar Notif */
#show-total {
position:fixed;
top:1px; /* jarak dari atas */
right:280px; /* jika ingin kesebelah kiri tukar right menjadi left */
z-index:9999; /*pengaturan always top*/
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000; /*warna total komentar*/
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCUKNwE4DLuOgeiTAhVJcDjOQUIL9aw112HOWUkstBvMTllAQcT8QAtfp5u6xHDB64OMMK0FSlZ49UlBPyhfTM5EzlpJUVLSTg7uGoO437H72wOVIrHnq0FKn38UNPaZeijbF5HuFDPg/s1600/lonceng.png&#39;);
display:block;
position:fixed;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCUKNwE4DLuOgeiTAhVJcDjOQUIL9aw112HOWUkstBvMTllAQcT8QAtfp5u6xHDB64OMMK0FSlZ49UlBPyhfTM5EzlpJUVLSTg7uGoO437H72wOVIrHnq0FKn38UNPaZeijbF5HuFDPg/s1600/lonceng.png&#39;);
display:block;
position:fixed;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:310px;
position:fixed;
top:50px;
right:-381px;
z-index:9999;
background-color:#222;
padding:15px 13px 25px 15px;
color:#d35400;
font-family: Arial, Sans-serif;
border-top:8px solid #d35400;
transition:0.5s ease;
}
#cm-wrapper:before {
content:&quot;&quot;;
width:0;
height:0;
position:absolute;
top:-24px;
right: 303px;
border:8px solid transparent;
border-color:transparent transparent #d35400;
}
#cm-scroll {
width: 100%;
height: 600px;
overflow: auto;
position: relative;
}
#comments-container {
color:#666;
font-family: Arial, Sans-serif;
}
#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #599b29;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:left;
}
.cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-top:1px solid #333;
border-bottom:1px solid #111;
margin-right:10px;
}
.cm-outer code {
color:#a6a658;
font-size:11px;
}
.cm-outer li.selected {
border-left:4px solid #fffe8c;
}
.cm-outer li:first-child {
border-top:none;
}
.cm-outer li:last-child {
border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#d35400;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcMPrh7MNALNDg604rFFqQa7pasX-QOt-Dd4gWjavMGk713byiqzJ65qyLrwL134rcrZlCi6nyZzcKpQyViBsXttwVPD9BPmQ5dbtp67sfc87Lrdep_KuJcd1teb67N2gJMeQm84-gDM/s1600/anon5.png&#39;) no-repeat 50% 50%;
overflow:hidden;
border-radius:100px;
position:absolute;
top:10px;
left:0;
border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#d35400;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOoxkeYjFw6mp4FWPOMb_RoONIY7jWMJ53d3_YzUd7TDQdZ_9nZiR1p5A1ZviI6NzurKbndA_-_oPKPmvPDoMr8lRAkF0iAr3zLOlAZ3mziyNTh3Rgqb7piPptxXVgRVUWwwBikJsDU/s80-c/gravatar.png);
}
.bg_hitam{
display: none;
position: absolute;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:99;
opacity:.30;
}
.sticky {
position:fixed;
top:42px;/* jarak dari atas*/
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:&quot;\201C&quot;&quot;\201D&quot;&quot;\2018&quot;&quot;\2019&quot;
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556} 

6.lanjut,letakkan kode di bawah ini di atas kode </body> 

<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
  <div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://www.zynation.net",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
        $('.jsfiddle-demo').each(function() {
        $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
    });
}, 5000);
//]]>
</script>
<script src='https://googledrive.com/host/0B8zY82qas755NGNtcURKUXJkYjA' type='text/javascript'/>

kode yang warna ungu ganti dengan url blog kamu

nahh untuk selebih nya bisa di edit sendiri letak nya,warna nya,jumlah komentar yang di tampilkan
kalau kurang ngerti tanya di komentar jangan chat gw okay

see you

source

Screen shot blog lebih menarik dengan placeit.net


Yeay,cara untuk screen shot blog itu banyak ada yang menggunakan software,plugin dll nahh kali ini gw mau ngomongin soal screen shot blog,tau screen shot kan? itu loh TEMBAK LAYAR *bukan tolol!
bukan tembak layar,tapi mengambil gambar di layar pc/lepi kamu apa mau ambil gambar software,blog,web,game dll bisa di bilang mencatak gambar di dalam layar kamu,kayak foto gitu

plugin dan software untuk screen shot gambar ini sangat banyak,tapi menurut gw yang the best cuman plugin
dari google crome yaitu awesome screenshot selain cara pakai nya gampang,juga cara mengambil gambar nya penuh (sampai kebawah) susai selera juga ada

yang gw bahas kali ini PLACEIT.NET adalah sebuah web untuk mengambil gambar blog kita,dengan style responsive juga,dan di lengkapi dengan bingkai gitu seakan akan blog kita ada yang buka XD melalui leptop,tablet,dan hp padahal cuma di taruh bingkai lohhh contoh nya liat gambar di atas,keren kan?

untuk cara nya gampang kok
silahkan ambil gambar blog kamu dulu secara menyeluruh menggunakan plugin google crome ini 
kalau udah silahkan ke placeit.net

gak payah di bikin tutorial cara nya gampang banget kok,kalau kurang ngerti tanyakan lewat komentar yahhh


see you