Globalimous: Tutorial blog

Home Tutorial blog

Flat ui css accordion

MurliCyber 11/16/2014 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

Jquery Original post Tutorial blog

Membuat progress loading bar ala youtube

MurliCyber 11/15/2014 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

Css3 Javascript Original post Tutorial blog

Membuat count down lebaran time

MurliCyber 10/04/2014 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

Css3 Original post Tutorial blog

Membuat loading cubic animasi

MurliCyber 8/06/2014 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

Css3 Original post Tutorial blog

Label cloud full color

MurliCyber 7/31/2014 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 Original post Tutorial blog

Jquery iklan text google adsense

MurliCyber 7/30/2014 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

Jquery Tutorial blog

Cara menambahkan kutipan animasi

MurliCyber 7/23/2014 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

demo

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>

<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

Css3 Original post Tutorial blog

Belajar efek transition

MurliCyber 6/23/2014 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

Css3 Original post Tutorial blog

Membuat efek getar pada gambar

MurliCyber 6/14/2014 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

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

Css3 Original post Tutorial blog

Pure your ads with css3

MurliCyber 6/01/2014 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

Flat Tutorial blog

Membuat metro menu di blog

MurliCyber 5/23/2014 Comment

Yeay,akhir nya post juga nih udah lama gak update tutorial tutorial blogger lagi

okay sekarang gw update yah,sekarang gw bakalan bahas metro menu windows 8 ada yang udah pake windows 8 disini? atau mungkin masih pake windows xp? hahahaha XD

kebanyakan udah banyak yang pake yah,nah kalau kalian udah pake windows 8 tau donk menu di sudut kanan nya,liat gambar di atas arahkan ada kursor nya ke sudut kanan muncul kan?

nah,itu dia yang akan gw bahas hari ini

menu tersebut akan di kreasi kan sehingga jadi lah menu metro tersebut bisa di pasang di template kalian,dari pada penasaran yuk liat demo nya

demo

Yuk langsung aja pasang

1.login ke blogger
2.pilih edit html
3.letakkan kode di bawah ini di atas kode ]]></b:skin

.metro-menu {
background: #000;
bottom: 0;
list-style: none outside none !important;
margin: 0 !important;
padding: 20px 0 0 !important;
position: fixed;
top: 0;
transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
width: 76px;
opacity:0;
}
.metro-menu.left {left: -60px;}
.metro-menu.left:hover {left: 0;}
.metro-menu.right {right: -60px;}
.metro-menu.right:hover {right: 0;}
.metro-menu:hover {
right:0;
opacity:1;
}
.metro-menu > li {
background-position: 50% 10px;
background-repeat: no-repeat;
cursor: pointer;
height: 84px;
position: relative;
text-align: center;
}
.metro-menu li > a {
color: #FFFFFF;
display: block;
font-family: "Segoe UI",arial,helvetica;
font-size: 11px;
line-height: 1.2 !important;
padding: 61px 0 10px;
text-decoration: none;
}
.metro-menu > li.home {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfZkNZfsleUbbB8i1-jtfISHKHPyar5feXazbDah7_Zwbi7O7gYagbvKJiAso8PIrGod_6qcx18PnZOLyJqfe7_pUEJp1if6ic-zFoP4WVoV7h8RI8BWlbplkplkFf8CtpSyBbXtFiu3p/s1600/home.png");
}
.metro-menu > li.refresh {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimcolLxCEjlzkWbUu4iB057Zv-U8GVccpv8gC0Slz8Shs2Q8S5G5b1vguewaRu38nsgcTwoVCsKToyIvOH7f9BNhtJuBOGqN5gP6LrGPdtpWUAtn6s5Q0OuApJuBTy7Xdh9K5Dkx3tii1P/s1600/refresh.png");
}
.metro-menu > li.download {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUidBsM4xTDdDxVdiZmJ4wkYqC1xdH3sdBWQ3adq2PmpuZbhujvY7QrMh1ttstMxgbZ-9EuNnzZ_xsohWp9aU1s83WsXTiD0RF93A9qbOvU9gr80pGZtqQIFY_34MPlmczT4B8fIzTG4cs/s1600/download.png");
}
.metro-menu > li.back {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4nlnBhtpiaKmWBNvfNU95mTaRsh5GoweO_SHTBOktUnPdtKOuGWMn_L7bao-1XgKfCBNv3nAiqESSlE2UQd2Z3UJmUZZ8gGJyQhrQCyq_Hb-z4dYfcCdaTp7jvya5yCWtcPYGV9bGVzH/s1600/back.png");
}
.metro-menu > li.next {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutYWh2KVLD9SiVY80NpMdYfTUE6eFCFzmy4xD76Aj9KAKm85HJT5JuuBGMhsoMeH06IzcE62v_wKhedtOCosLkxSlsET67UG2IY7C1w6hpke2nmnk1WOdl1UcLxLcX_IQoFssRUl6kry9/s1600/next.png");
}
.metro-menu > li:hover {
background-color: #232323;
}

4.letakkan kode di bawah ini di bawah kode <body>

<ul class="metro-menu left">
<li class="home"><a href="#">Home</a></li>
<li class="refresh"><a href="#">Refresh</a></li>
<li class="download"><a href="#">Download</a></li>
<li class="back"><a href="#">Back</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>

menu di atas berada di sebelah kiri,kalau kamu merubah nya kesebelah kanan rubah tulisan left menjadi right

contoh:
<ul class="metro-menu left"> " menjadi " <ul class="metro-menu right">

see you

source

Css3 Jquery Tutorial blog

Membuat slideout navigation

MurliCyber 5/13/2014 Comment

Yeay,udah lama nihhh gak post udah berapa hari yahhh? ah lupakan

udah jarang ngurusin blog nih gw bukan karena sibuk atau apa sih cuma lagi malas post aja,padahal gw udha libur panjang nihhh harus nya ngurusin blog donk enak,karena gw ada yang lebih penting dari pada ngurusin blog jadi gw tinggalin aja deh blog ini,kurang bahan buat ngepost juga jadi kalau lagi ngewifi gw cuma pantau blog gw aja sekali kali juga ada blogwalking ke blog blog kalian pastinya

ngurusin pacar juga gak kalah penting dari pada ngurusin blog hahahaha XD

kok udah ngomong masalah pacar ini? lupakan lagi

okay,kali ini gw mau share tutorial slideout navigation,ya!

slideout navigation ini adalah navigasi bertema FLAT kali ye,cocok soal nya buat template FLAT karena menu nya muncul dari samping,buat yang template nya FLAT gw saranin pasang navigasi ini soal nya cocok banget gak percaya? liat demo nya aja

DEMO

gimana? anda terkejutkan
yuk pasang

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

.pushmenu { /*this is the nav*/
background: #3c3933;
font-family: Arial, Helvetics, sans-serif;
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
position:fixed;
}
.pushmenu h3 {
color: #cbbfad;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
margin: 0;
background: #282522;
height: 16px;
}
.pushmenu a {
display: block; /* drops the nav vertically*/
color: #fff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-top: 1px solid #56544e;
border-bottom: 1px solid #312e2a;
padding: 14px;
}
.pushmenu a:hover {
background:#00A287;
}
.pushmenu a:active {
background: #454f5c;
color: #fff;
}
.pushmenu-left {
left: -240px;
}
.pushmenu-left.pushmenu-open {
left: 0;
}
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 240px;
}
/*Transition*/
.pushmenu, .pushmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#nav_list {
background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
cursor: pointer;
height: 27px;
width: 33px;
text-indent: -99999em;
}
nav-list.active {
background-position: -33px top;
}
.buttonset {
background: #00A287;
height: 16px;
padding: 10px 20px 20px;
}

3.lanjut,letakkan kode HTML di bawah ini di atas kode outer-wrapper (setiap template kode nya berbeda beda)

<nav class="pushmenu pushmenu-left">
<h3>Menu</h3>
<a href="#">Home</a>
<a href="#">Nav2</a>
<a href="#">Nav3</a>
<a href="#">Nav4</a>
<a href="#">Nav5</a>
<a href="#">Nav6</a>
<a href="#">Nav7</a>
</nav>

4.kode JS nya jangan lupa

$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});

gampangkan?
selebih nya bisa di edit sendiri

see you

source

Css3 Original post Tutorial blog

Efek loading dengan keyframe

MurliCyber 3/16/2014 Comment

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

SYSTEM_BAR efek nya dari bawah naik ke atas
SKYIN efek nya dari atas turun ke bawah
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

Css3 Javascript Original post Tutorial blog

Go up go down button (anti mainstream)

MurliCyber 2/28/2014 Comment

Yeay,hoaaaaaaaaaaaaaaaaaaaam udah lama nihh gak share trick trick blogger lagi udah ngebet banget pingin post padahal,tapi ketahan dengan kesibukan gw TRYOUT lagi hari ini,dan kemarin kemain gw sibuk juga dengan less dan kesibuk juga waktu menyelesaikan template ini,jadi yaaa gitu dehh jarang post

okay,kali ini gw akan bahas tentang back top,udah gak asing lagi kan di telinga kalian?

biasa nya kan back to top nya cuma tombol ke atas doank? nahh kali ini ada tombol kebawah nya juga jadi yaaa biar beda gitu dehh,untuk demo nya silahkan liat template gw sekarang? keren kann

yukk langsung pasang

1.cari kode ]]></b:skin>

2.letakkan kode di bawah ini di atas kode tadi

#GoToDown {background:#fff;text-align:center;position:fixed;top:13px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius: 2px;}
#GoToDown:before {content: "";position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#333 transparent transparent transparent; line-height:0;}
#GoToDown:hover:before {content: "";position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#888 transparent transparent transparent; line-height:0 }
#GoToDown:after {content: "";position:absolute; top:5px; right:11px; width:0; height:0; border-style:solid; border-width:12px 9px 0 9px; border-color:#fff transparent transparent transparent; line-height:0;}

#BounceToTop {
background: #888;
text-align: center;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
width: 30px;
height: 20px;
padding: 5px;
display: none;
border-radius: 2px;
}
#BounceToTop:before {
content: "";
position: absolute;
bottom: 5px;
right: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #fff transparent;
line-height: 0;
}
#BounceToTop:after {
content: "";
position: absolute;
bottom: 5px;
right: 11px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 12px 9px;
border-color: transparent transparent #888 transparent;
line-height: 0;
}

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

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); });
var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});
});
</script>
<div id='BounceToTop'/>
<div id='GoToDown'/>

4.simpan template kamu

gampang kan?

jika udah pasang back to top yang lama di template kamu,di hapus dulu biar gak double

jangan lupa komen nya

see you

source

Globalimous

Flat ui css accordion

Membuat progress loading bar ala youtube

Membuat count down lebaran time

Membuat loading cubic animasi

Label cloud full color

Jquery iklan text google adsense

Cara menambahkan kutipan animasi

Belajar efek transition

Membuat efek getar pada gambar

Pure your ads with css3

Membuat metro menu di blog

Membuat slideout navigation

Efek loading dengan keyframe

Recent comment notifikasi berbeda

Go up go down button (anti mainstream)

Featured