Trik merubah tampilan homepage dan halaman posting
Sobat bosen dengan tampilan blog sobat?sekedar berbagi ilmu,bagaimana caranya warna background pada home page berbeda dengan tampilan saat membaca posting blog,seperti blog saya.mau tau cara'a gan?Cekidot gan...



Untuk dapat merubah tampilan blog,cara yang kita gunakan hanya CSS3 dan HTML b:if cond yang sudah saya kasih tau di artikel 5 Kode HTML Untuk Mengatur Tampilan Blog.yang kita lakukan sekarang,hanya merubah css pada tampilan posting,kita tidak perlu menambah kode HTML lagi pada primary CSS/homepage.disini saya hanya akan share trik sederhana untuk mengganti background.

yang kita akan gunakan adalah kode HTML:
<b:if cond='data:blog.pageType == &quot;item&quot;'> isi widget </b:if>

Dan CSS external dengan Style HTML:
<style type='text/css'> Isi CSS </style>


TRik pertama: merubah warna background pada Halaman posting.


Sobat copy paste dulu kode HTML di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


isi CSS



</style>
</b:if>


letakan kode diatas kode </head>


Setelah itu,jangan disimpan dulu,jangan lupa copy paste CSS background sobat.

Contoh:
misalkan background pada blog sobat bewarna hitam=#000000; (kode hexadecimal)
seperti dibawah ini
<b:skin><![CDATA[/*



body {
background:#000000;
}




]]></b:skin>

tinggal copy paste saja CSS'a menjadi seperti di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


body {
background:#000000;
}


</style>
</b:if>


background'a kan masih warna hitam,ganti warna backgroundnya agar beda ^^
misalkan kita ganti ke warna Putih=#ffffff;

contohnya menjadi seperti dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


body {
background:#ffffff;
}


</style>
</b:if>


lalu disimpan deh,lihat hasilnya pasti halaman homepage dan halaman posting,warna'a akan berbeda ^^

untuk trik merubah warna font,posting,navbar,footer,header,caranyapun sama,kita hanya copy css'a saja.
saya sengaja tidak share karena tiap template,mempunyai nama css yang berbeda tiap templatenya.
untuk body,sudah umum dan tidak pernah beda dengan template lain,
sobat bisa berkreasi sendiri,dengan cara copy paste primary css sobat ke css external yang kita coba tadi.sobat harus pintar2 pintar nih ngeditnya ^^

oia,satu lagi nih..kalau backgroundnya ingin diganti dengan gambar,tambahkan
" url(url gambar); "

Contoh:
body {
background:#ffffff url(http://urlgambarkamu.jpg);
background-attachment: fixed;
}
background-attachment: fixed; digunakan agar posisi gambar tetap/tidak berubah saat kita scroll halaman ke atas/kebawah.contohnya seperti blog saya


selamat mencoba,dan jangan lupa komentar kalau ada galat atau masalah,thanks...

Belajar CSS3
apa kabar sobat?sehat kan?sebelum'a saya mengucapkan natal dan tahun baru 2011 ^^
ok,kali ini saya mau share tentang dasar - dasar tentang trik CSS3 yang sudah kita coba selama ini
,mungkin sebagian dari sobat hanya copy paste css ke template,tanpa mengerti arti kode tersebut dan fungsinya,dan mengalami kesulitan untuk mengatur sendiri css'a.
pertama kita harus tahu dulu apa itu CSS??


Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengatur beberapa komponen atau elemen dalam sebuah web sehingga akan lebih terstruktur dan seragam dengan HTML/script.Untuk saat ini terdapat tiga versi CSS, yaitu CSS1,CSS2 dan saat ini yang sedang populer adalah CSS3 .CSS 1 dikembangkan berpusat pada pemformatan dokumen HTML,CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
Selain itu CSS 2 mendukung penentuan posisi konten, downloadable, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk printer.sedangkan CSS3 adalah gaya bahasa terbaru dan terbesar di cakrawala dari web, dan memiliki kemampuan design yang lebih baik daripada versi css sebelum'a

apa saja yang bisa dilakukan CSS3?
ini dia daftar Kemampuan CSS3:
-Text shadow pada tulisan and box shadows pada background dan kotak = efek bayangan
-Sudut bulat atau biasa disebut rounded corners
-Gradient atau gradasi warna pada text dan background
-Animasi dan transisi
-Berbagai macam css font seperti google font api
-Multi background images
-rgba color
-border style
-multi colums count(untuk menentukan jumlah kolom)
-column gap (untuk menentukan jarak antar kolom)
-column rule (untuk menambahkan sebuah garis antar kolom)
-content hover effect(hover efect*ituloh,bila kita arahkan kursor ke onject,akan muncul animasi'a)
-kaleborasi CSS3 dengan jquery,mootools,yui,dan javascript.
-photo slider,accordation,tabslider,dan masih banyak lagi yang akan dikembangkan.

sobat sudah taukan apa saja yg bisa dilakukan css3?
sekarang saya akan sharing beberapa tutorial css3 .
pertama,kita belajar text shadow dulu ya ^^


TEXT SHADOW
Bayangan teks disusun dalam urutan sebagai berikut: x-offset, y-offset, kabur, dan warna
berdasarkan keterangan gambar diatas,
-syntax Text-shadow adalah perintah untuk menampilkan text shadow.
-angka 2px(pixel) arah x-offset/horizontal maka posisi bayangan akan  ke kanan. sedangkan bila kita masukan nilai kurang dari -1,maka arah bayangan akan ke kiri.
-angka 3px arah y-offset/vertikal maka posisi bayangan akan keatas,sedangkan bila kita masukan nilai kurang dari -1,maka arah bayangan akan ke bawah.
-nilai ketiga 2px,adalah efek blur/bayangan/atau tingkat kekaburan.bila kita mempertinggi nilai blur tersebut,maka tingkat kekaburan'a akan meluas.
-untuk kode warna,sperti yang sobat tahu menggunakan kode warna hexadecimal.

pada inti'a,prinsip kerja text shadow sama dengan tabel grafik seperti gambar diatas.

sama hal'a dengan trik 3DText.
Contoh:


pada prinsip 3Dtext,kita hanya mengubah posisi bayangan berdasarkan arah pada nilai yang kita tentukan.
untuk shadow biasa kita hanya memasukan  text-shadow: 0px 1px 0 #000.
tetapi untuk 3d text,kita tambahkan koma"," untuk memanjangkan shadow'a
menjadi seperti ini
 text-shadow: 0px 1px 0 #152794,text-shadow: 0px 2px 0 #05a0aa;
mengapa shadow pertama 1px sedangkan shadow kedua 2px?
karena prisip kerja 3D text menggunakan layer shadow.untuk layer pertama dibuat posisi'a ke atas 1 px,shadow ke 2 diubah ke posisi yg lebih tinggi daripada shadow pertama.tingkat kekaburan pada text diberi nilai "0" agar lebih realistic efek 3Dnya...



BORDER - RADIUS -CORNER


Singkat'a untuk border radius mirip dengan properti padding dan margin (misalnya border-radius: 20px). Dalam rangka untuk browser untuk membuat jari-jari border radius, tambahkan "-webkit-" dalam font nama properti untuk browser webkit"google chrome,safari" dan "-moz-" untuk Firefox,dan O untuk browser Opera.
Contoh:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
kode diatas yang bernilai 8 px,artinya tingkat kebundaran pada bagian kiri dan kanan bernilai 8 px,bila kita naikan nilai'a,akan semakin bulat.

untuk lebih specify css'a lihat Kotak 2 pada gambar diatas dan css dibawah ini:
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
disini,saya hanya memasukan nilai radius untuk bagian atas,sebelah kiri dan bawah sebelah kanan,maka akan membulat di sudut tertentu saja.
kenapa efek bundar hanya terlihat di bagian atas,kiri dan kanan,bawah?
karena kita tidak memasukan nilai'a,otomatis menjadi "0".

CSS3 ANIMATION KEY FRAME




mungkin sudah pernah mencoba Efek animasi yang menggunakan -moz-transform yang sudah digunakan pada contoh yang sudah saya share sebelum'a di artikel 30 Trik menarik CSS3. Jika sebuah class menggunakan -moz-transform dan ditambah dengan -webkit-transition maka efek animasinya akan terlihat.dan yang terpenting,kita menggunakan -webkit-transition: all 0.6s ease-in-out dimana 0.6s adalah waktu gerak dan ease-in-out adalah tipe efek yang digunakan.

Beda'a dengan CSS3 animation,kita bisa menentukan sendiri efek animasi'a di tiap frame/atau proses animasi itu berlangsung.contoh css3 animation ada di
yang "infinity Bounce effect"besar/kecil terus menerus bila kita arahkan kursor ke objek" ,"Fade effect" , "Bounce effect" dan "multi animasi".

ok deh,pertama saya jelaskan dari infinity Bounce effect.

infinity Bounce effect

Perhatikan CSS dibawah ini
.kotak14animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak14animasi:hover {
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}


pada .kotak14animasi adalah kode tetap untuk css style pada object,dengan warna,lebar dan tinggi yang sudah ditentukan,dengan -webkit-transition.
lalu pada .kotak14animasi:hover,kita menambahkan
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;

-yang pertama,-webkit-animation-name: scale; adalah nama keyframes yag sudah terikat dengan @-webkit-keyframes scale ,bila nama'a berbeda,css tidak akan bekerja.
-yang kedua -webkit-animation-duration: 0.5s; adalah durasi animasi itu sendiri dan..
-yang ketiga -webkit-animation-iteration-count: infinite; adalah css yang terpenting agar animasi berjalan tak terbatas.


Selanjutnya..
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}
pertama,coba sobat perhatikan css ini
-webkit-keyframes scale adalah nama keyframenya.
-webkit-transform adalah efek animasinya.

{ from{-webkit-transform: scale(1);}
kode di atas ini adalah posisi awal,dengan Scale (1) besarnya 100 % dengan objek aslinya.
lalu pada css:
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}

adalah tengah prosesanimasi itu berlangsung dengan scale 0.85 = 85% object itu mengecil

lalu membesar lagi ke posisi awal menjadi scale(1)
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;

itulah mengapa cara kerja infinity Bounce effect bisa tidak terbatas.


selanjutnya...

Fade effect
sama dengan infinity Bounce effect,menggunakan -webkit-transition,hover dan keyframes.
disini bedanya kita menggunakan effect yag berbeda.Fade effect adalah efek transparant,tapi aka kembali lagi menjadi timbul.
fade efect menggunakan css opacity,yang membuat effect transparant pada object.

perhatian css dibawah ini
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}
0% adalah posisi awal object tersebut,opacity 1.0= 100%,lalu..
50 % posisi tengah animasi =0.5 =50% efek transparant..
dan terakir pada posisi 100%,akan timbul kembali object tersebut.


Bounce effect

untuk Bounce effect,hanya beda di keyframesnya saja.
@-webkit-keyframes bounce {
from {
margin-left: 0px;
}
to {
margin-left: 250px;

margin-left: 0px; adalah posisi/letak awal object.
margin-left: 250px; akan berpindah posisi 250px dari letak awal object tersebut.

dan yang terakhir...


Link/background warna-warni
@-webkit-keyframes pulsate {
0% { background-color:#DEDEDE;color:#797979;}
5% { background-color:#109F9D;color:#9EA9AF;}
10% { background-color:#B19FD9;color:#797979;}
15% { background-color:#D600AF;color:#EAEAEA;}
20% { background-color:#E9E32E;color:#797979;}
40% { background-color:#38374A;color:#9EA9AF;}
45% { background-color:#711943;color:#797979;}
50% { background-color:#3FFFF5;color:#EAEAEA;}
55% { background-color:#1F67C5;color:#797979;}
60% { background-color:#6541B3;color:#9EA9AF;}
80% { background-color:#45002D;color:#797979;}
90% { background-color:#109F9D;color:#EAEAEA;}
100% { background-color:#DEDEDE;color:#797979;}
}
}
untuk trik css3 warna warni,efek animasinya lebih banyak..
tiap proses,efeknya hanya berganti warna di tiap framenya...
sobat tinggal mengganti warna background yang sobat inginkan dengan pilihan warna yang bisa sobat pilih sendiri.

Sekian penjelasan trik animasi dari saya,semoga sampai disini sobat bisa mengerti css3,dan dapat membuat kreasi sobat sendiri untuk menciptakan berbagai ide kreatif yang bisa kita kembangkan.terima kasih dan jangan lupa tinggalkan komentarnya ^^

Membuat Menu Bubbles Dengan Jquery Dan CSS3
apa kabar sobat?kali ini saya mau share trik menarik lagi nih.membuat Menu Bubbles Dengan Jquery Dan CSS3,sebenarnya'a ini trik lama ,tapi beda'a disini saya menambahkan Sentuhan CSS3 agar lebih menarik.
efek bubble akan muncul jika sobat arahkan kursor ke tombolnya.mau?cekidot gan....



Pertama,cobat copy paste CSS di bawah ini di Rancangan =>Edit HTML =>lalu letakan css'a di template sobat di atas kode ]]></b:skin>
.bubbles {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.bubbles li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.bubbles a {
padding: 15px 10px;
display: block;
color: #000000;
width: 140px;
text-decoration: none;
font-weight: bold;
background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd));
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
opacity:0.9;
-webkit-transition: all 0.6s ease-in-out;
}
.bubbles a:hover {opacity:1;}
.bubbles li em {
font-weight: normal;
background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf));
width: 130px;
height: 25px;
position: absolute;
top: -85px;
left: 3px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.bubbles li em:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:50px;
width:0;
height:0;
border-width:20px 0 0 20px;
border-style:solid;
border-color:#d6dbbf transparent;
}
Note:
-warna gradient tombol bisa sobat ganti pada css tag ".bubbles a"
-untuk mengganti warna bubble,ganti warna gradient pada css tag ".bubbles li em" dan border-color:#d6dbbf  pada css tag ".bubbles li em:after"


lalu masukan juga script dibawah ini di template sobat,tepat'a di bawah kode ]]></b:skin>

<script src="https://sites.google.com/site/djogzs/js/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">

$(document).ready(function(){

$(".bubbles a").append("<em></em>");

$(".bubbles a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-15"}, "slow");
});


});
</script>


Terakhir,masukan kode html di bawah ini di Rancangan=>Elemen Laman=>tambah gadget=>HTML/JavaScript lalu letakan kode html'a ,lalu disimpan.

<ul class="bubbles">
<li>
<a href="http://djogzs.blogspot.com/" title="Home sweet home">Home</a>
</li>
<li>
<a href="http://djogzs.blogspot.com/" title="siapa aku?">About</a>
</li>
<li>
<a href="http://djogzs.blogspot.com/" title="Johanes">Contact</a>
</li>
</ul>
Setelah itu lihat hasilnya ^^

oia,sobat bisa ganti URL,nama link,dan pesan yang ada pada bubbble dengan kata2 sobat sendiri.
contoh " title="siapa aku?" "

dan bila sobat ingin menambahkan tombol lagi,tinggal copy paste kode html dibawah ini.
<li>
<a href="http://djogzs.blogspot.com/" title="pesan">Nama link</a>
</li>
lalu letakan kode'a di atas kode " </ul> "

selamat mencoba,dan jangan lupa tinggalkan komentarnya n_n

Apa itu em,pt,dan px?
sobat mungkin terdengar agak asing dengan dengan em,pt,dan px?
sekedar berbagi pengetahuan tentang apa itu em,pt,dan px,yang biasa kita temukan pada css template blog kita.ke tiga elemen itu berfungsi hampir sama kq ...

langsung aja saya mau kasih tau aja nih ^^



pertama,kita pejari pixel dulu ya ^^
PX/PIXEL

Dalam dunia blog,pixel digunakan untuk mengatur besar text,gambar,background,dan widget2 yang ada pada web/blog,tapi Dalam digital imaging,px atau yang biasa kita sebut pixel (atau elemen gambar) adalah satu titik dalam citra raster. Pixel adalah elemen terkecil dialamatkan layar, itu adalah unit terkecil dari gambar yang dapat dikendalikan. Setiap piksel memiliki alamat sendiri. Alamat dari piksel yang sesuai dengan yang koordinat. Pixel biasanya disusun dalam grid dua dimensi, dan sering direpresentasikan menggunakan titik-titik atau kotak. Setiap pixel adalah contoh dari gambar asli; sampel lebih biasanya memberikan representasi yang lebih akurat yang asli. Intensitas setiap pixel adalah variabel. Dalam sistem warna gambar, warna biasanya diwakili oleh tiga atau empat intensitas komponen seperti merah, hijau, dan biru, atau cyan, magenta, kuning, dan hitam. pixel istilah digunakan untuk merujuk ke skalar elemen tunggal representasi multi-komponen (lebih tepat disebut photosite dalam konteks sensor kamera, meskipun sensel kata baru ini juga kadang-kadang digunakan untuk menggambarkan unsur-unsur sensor kamera digital), sementara di lain istilah ini mungkin merujuk ke set intensitas seluruh komponen tersebut untuk posisi spasial.

Dalam sistem warna yang menggunakan subsampling kroma, konsep multi-komponen pixel bisa menjadi sulit untuk diterapkan, karena kinerja intensitas untuk komponen warna yang berbeda sesuai dengan bidang spasial yang berbeda dalam sebuah representasi seperti itu.Kata pixel didasarkan pada kontraksi pix ("gambar") dan el (untuk "elemen").nilai 1pixel sama dengan 0,01cm.pixel mempunyai tingkatan,yaitu megapixel dan gigapixel(resolusi yg lebih besar)

M?
Em adalah suatu satuan pengukuran dalam bidang tipografi. Unit ini mendefinisikan proporsi lebar surat dan tinggi sehubungan dengan titik ukuran font saat ini. Awalnya unit berasal dari lebar "M" modal pada huruf saat ini digunakan. Unit ini tidak didefinisikan dalam istilah apapun jenis huruf tertentu, dan dengan demikian adalah sama untuk semua ukuran font pada titik tertentu. Jadi, 1 em dalam huruf titik 16 adalah 16 poin.dalam dunia blog,em digunakan untuk mengganti ukuran font pada blog.


dan yang terakhir...

Pt?
pt,adalah Perusahaan Perseroan terbatas..Loh???bukan itu >. Pt singkatan dari point,yaitu besaran/nilai ukuran yang lebih kecil daripada pixel dan em.
nilai pt sering digunakan untuk nilai perpindahan objek pada trik css3 animation,sperti css dibawah ini
.kotak1animasi:hover {-moz-transform:translate(4em, 0pt);
-webkit-transform:translate(4em, 0pt);}


Berikut nilai convertan'a antara px,em dan pt.

semoga bermanfaat ^^

Membuat Link hover warna - warni dengan CSS3
Mungkin sobat sudah pernah melihat atau menggunakan trik ini menggunakan javascript dan jquery yang membuat link jadi berkedip warna - warni,tetapi trik menggunakan javasript itu bisa membuat blog kita berat
,bahkan jadi hang...nah,disini saya akan kasih tau gimana cara'a membuat kostum link hover dengan pilihan warna yang bisa kita atur sendiri menggunakan KEYFRAME CSS3.trik ini sangat mudah digunakan,dan tidak akan memberatkan blog sobat karena penggunaan css'a tidak terlalu banyak.


untuk contoh'a bisa sobat lihat dan rasakan di blog ini,tpi harus menggunakan browser yang mendukung CSS3 ya..sayang'a mozila firefox belum mendukung TT..TT
sobat coba menggunakan google chrome deh..
langsung aja saya kasih tutorial'a nih n_n

Pertama,buka blog sobat
buka Rancangan => edit HTML

lalu masukan css dibawah ini di template sobat.

a:hover {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulsate {
0% { background-color:#DEDEDE;}
5% { background-color:#109F9D;}
10% { background-color:#B19FD9;}
15% { background-color:#D600AF;}
20% { background-color:#E9E32E;}
40% { background-color:#38374A; }
45% { background-color:#711943; }
50% { background-color:#3FFFF5; }
55% { background-color:#1F67C5; }
60% { background-color:#6541B3; }
80% { background-color:#45002D; }
90% { background-color:#109F9D; }
100% { background-color:#DEDEDE; }
}

Keterangan1:
kode "a:hover" bisa sobat ganti ke elemen yang sobat atur sendiri bagian mana yang akan diberi efek hover.

CONTOH:

#header a

kita tambahkan efek hover menjadi

#header a:hover {...}

intinya,kita tinggal menambahkan kode" :hover " pada css yang kita inginkan.


sedangkan kode "a" adalah bagian tulisan/link.

Keterangan2:
"-webkit-animation-name: pulsate;" adalah css nama animasi yang terhubung/terikat ke kode "@-webkit-keyframes pulsate"

nama animasi harus sama,"pulsate"
tetapi bisa sobat ganti dengan nama sobat sendiri n_n


"-webkit-animation-duration: 3s;"
adalah durasi animasi

"-webkit-animation-timing-function: ease-in-out;"
adalah fungsi dari animasi ini


Keterangan3
0% sampai 100% adalah proses animasi dari pertama sampai akhir animasi,tiap perses/proses'a bisa kita atur efect'a di tiap frame.
bisa dari 0% sampai 100% atau lebih,tergantung banyak'a animasi yang kita tambahkan.

color:#DEDEDE; adalah kode warna Hexadesimal link/tulisan
background-color:#DEDEDE adalah kode untuk warna background,
atau bisa disingkat menjadi background saja.



MODIFIKASI:

Kode diatas tadi hanya merubah warna pada background link,jadi...
bagaimana dengan link'a?ini dia trik'a....

"background-color:#DEDEDE;" sperti yang kita tahu,background-color adalah kode css yang biasa digunakan untuk mengganti warna background,atau bisa disingkat menjadi background:#kodewarna;
untuk merubah warna link'a,kita tinggal menambahkan "color:#kode warna;"
jadi tinggal hapus aja warna'a seperti contoh di bawah ini.


@-webkit-keyframes pulsate {
0% { color:#DEDEDE;}
5% { color:#109F9D;}
10% { color:#B19FD9;}
15% { color:#D600AF;}
20% { color:#E9E32E;}
40% { color:#38374A; }
45% { color:#711943; }
50% { color:#3FFFF5; }
55% { color:#1F67C5; }
60% { color:#6541B3; }
80% { color:#45002D; }
90% { color:#109F9D; }
100% { color:#DEDEDE; }
}

bila kita ingin menambahkan efek kedua'a/background dan warna,tinggal dimasukan kedua css'a jadi seperti dibawah ini.


@-webkit-keyframes pulsate {
0% { background:#ffffff;color:#DEDEDE;}
5% { background:#000000;color:#109F9D;}
10% { background:#ffffff;color:#B19FD9;}
15% { background:#000000;color:#D600AF;}
20% { background:#ffffff;color:#E9E32E;}
40% { background:#2b2b2b;color:#38374A; }
45% { background:#ffffff;color:#711943; }
50% { background:#2b2b2b;color:#3FFFF5; }
55% { background:#ffffff;color:#1F67C5; }
60% { background:#2b2b2b;color:#6541B3; }
80% { background:#ffffff;color:#45002D; }
90% { background:#2b2bb;color:#109F9D; }
100% { background:#ffffff;color:#DEDEDE; }
}


ada satu lagi nih...
ingin tambahkan efek campuran "bold,italic,underline,font-family,font-size,shadow dan border"?
hahahaha,pusing dah ngeliat'a =,="
bisa kq,tinggal ditambahkan aja css'a

Setelah itu,buka blog sobat dan lihat hasilnya n_n

Selamat mencoba,dan jangan lupa tinggalkan komentar'a ya n_n

Dibutuhkan segera Guru Otomotif (2 orang) untuk SMK Muhammadiyah Jambi.
Alamat : Sungai Bahar Unit 2, Muaro, Jambi. 36365

Fasilitas :
• Gaji 1 juta
• Tempat tinggal.

Bagi yang berminat dapat menghubungi Bp. Amat Kasbani ( 0813 6694 0708 )

MECHANICAL / PIPING ENGINEER
Requirements:
1. Sarjana S1 Teknik Mesin. D3 silahkan Apply
2. fresh graduate atau experience ( 0-10 years experience ).
3. Minimal menguasai AutoCAD 2D/3D.
4. Menguasai bahasa Inggris lisan/tulisan.
Syarat umum:
1. Menguasai MS Office
2. Pekerja keras dan mampu bekerja di bawah tekanan
3. Mempunyai komunikasi interpersonal yang baik
4. Teliti, loyal, dan berinisiatif tinggi

Kirim lamaran, CV, foto, ijazah, transkrip, dan sertifikat yang mendukung,
secepatnya, dikarenakan dari pihak Truba Arabia akan datang interview pada tanggal 26 December 2010 dari Jedah ke Indonesia
kirim ke wahyu@trubarabia.com

info lanjut hub : wahyu@trubarabia.com


PT. Nissan Motor Indonesia are looking for best candidates to fill in Nissan College Department locate in TB Simatupang (Jakarta) as :

TRAINER STAFF

Responsibilities :

•Learn all of company business process and needs
•Create training module to meet the needs
•Deliver training to develop our knowledge thirst employees
•Handle training administration


Requirement :

•Bachelor degree from reputable university, major in Industrial, Electrical Architecture, and Mechanical Engineering; Communication; Psychology with GPA min 3.00 out of 4.00.
•Preferably fresh graduate or max. 1 year of experience.
•Having many organizational experiences.
•Having a big passion in education or learning activities
•Having interest in automotive, join as a member of automotive club will be an advantage
•Fluent in English is a must (Oral and Written).
•Having driving license (SIM A) is a must
•Hard and also smart worker, customer oriented, ready to take challenge.
•Having a good communication skill, initiatives, fast learner and a good team player.


Please submit your complete application letter
Before December 31st, 2010 to:

hrd@nissan.co.id
(Subject: NC Trainer Staff)

Only short listed candidates who meet requirement and sent application by email will be notified.

URGENTLY REQUIRED

We are is an export oriented manufacturing company which specializing in textiles (production yarn and gloves). We invite you to join our prestigious team as :


1.    SECRETARY MANAGER (SC)
Min. D3 Secretary / Hotel & Tourism / all degree, Female age max. 28th years old
2.    WAREHOUSE SUPERVISOR (WH SPV)
Min. S1 all degree, Male age max. 35th years old, Have experience min. 3 years in related field, Have knowledge Warehouse system and implementation
3.    IT SUPERVISOR (IT SPV)
S1 Informatics / System Information Engineering , Male / Female age max. 35th years old, Have experience min. 3 years in related field, Have knowledge Accounting system consept, security system, fingerprint, circuit camera (DVR & CCTV), programmer aplication and having implementation in manufacturing company
4.    ENVIRONMENT STAFF (EN)
S1 Chemical / Environment Engineering, Male age max. 28th years old, Have knowledge Treatment of solid & liquid waste
5.    GA STAFF (GA)
S1 Civil Engineering, Male age max. 28th years old, Have knowledge Civil project experience
6.    ACCOUNTING STAFF (AC)
S1 Accounting Economic, Female age max. 28th years old, Have knowledge Accounting activities
7.    IMPORT STAFF (IM)
S1 Business Economic, Female age max. 28th years old, Have knowledge Exim procedure
8.    MARKETING STAFF (MKT)
Min. D3 Businees / Marketing, Male / Female age max. 35th years old, Have experience min. 3 years in related field, Have knowledge Marketing consept and able to selling product

9.     MARKETING ADMINISTRATION (ADM MKT)
Min. S1 all degree, Female age max. 28th years old



General Requirements :
o    From reputable University with min. GPA 2.75
o    Fresh Graduate are welcome and Have experience in related field will be preferred
o    Nice Appearance and Good Communication
o    Computer literacy, Fluently in English & Mandarin will be preferred

Please Send your Application to :
HRD MITRA SARUTA INDONESIA, PT
JL. Raya Krikilan Km. 28th, Driyorejo, Gresik - 61177
or Email to : recruitment.msi@gmail.com
Visit Us at : www.mitra-saruta.co.id
,

30 Trik menarik CSS3
ini dia kehebatan CSS3,effect'a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat tergantung banyak'a pemakaian css pada blog sobat
,nah..kali ini saya akan share 30 Kreasi css3 dari saya yang unik2 n_n
 ,terdiri dari jenis CSS3 border radius atau corner,CSS3 gradient,dan CSS3 animation.untuk menikmati CSS3 ini,disarankan sobat menggunakan browser versi terbaru,dan mendukung CSS3 agar tidak ralat dalam menampilkan CSS3 ini sperti google chrome,safari,dan mozilla firefox,tetapi mozilla firefox saat ini belum mendukung 100% CSS3 animation.





Kode HTML

masukan kode html ini di elemen halaman sobat,tapi ganti class name pada kode html di bawah ini

<div class="ganti dengan nama css/kotak"></div>


Contoh:
<div class="kotak2"></div>
<div class="lingkaran"></div>

CSS3 Border radius

kotak1
.kotak1 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}

Kotak2
.kotak2 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}

Segitiga atas

segitiga bawah

segitigakanan

segitigakiri

.segitigabawah {
border-color:#333333 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigaatas {
border-color:transparent transparent #333333;
border-style:solid;
border-width:0 20px 20px;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigakanan {
border-color: transparent transparent transparent #333333;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigakiri {
border-color:transparent #333333 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}

Lingkaran
.lingkaran {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background:#00C4FD;
width: 80px;
height: 80px;
line-height: 70px;
text-align: center;
}

Kotak3
.kotak3 {
-webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
-moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;}

Kotak4
.kotak4 {
background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#00C4FD), to(#FFFF55));
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;}

CSS3 Gradient

Kotak5
.kotak5 {
background: -webkit-gradient(
radial, 500 25%, 20, 500 25%, 40, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
500px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak6
.kotak6 {
background: -webkit-gradient(
radial, 480 25%, 20, 500 25%, 40, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
480px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak7
.kotak7 {
background: -webkit-gradient(
radial, 450 25%, 40, 500 25%, 20, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
450px 25%, 40px, 500px 25%, 20px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak8
.kotak8 {
background: -webkit-gradient(
radial, 500 50%, 10, 500 50%, 80, from(orange), color-stop(0.6, #fff), to(lightblue)
);
background: -moz-radial-gradient(
500px 50%, 10px, 500px 50%, 80px, from(orange), color-stop(0.6, #fff), to(lightblue)
) no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak9
.kotak9 {
background: -webkit-gradient(
radial, 500 50%, 20, 500 50%, 100, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
);
background: -moz-radial-gradient(
500px 50%, 20px, 500px 50%, 100px, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
) no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak10
.kotak10 {
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

Kotak10
.kotak11 {
background: -moz-linear-gradient(top, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}

CSS3 Animation

horizontal
.kotak1animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak1animasi:hover {-moz-transform:translate(4em, 0pt);
-webkit-transform:translate(4em, 0pt);}

berputar
.kotak2animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak2animasi:hover {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);}

horizontal+vertikal
.kotak3animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak3animasi:hover {
-moz-transform:translate(-3em, 1em);
-webkit-transform:translate(-3em, 1em);}

Ukuran
.kotak4animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak4animasi:hover {
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);}

border
.kotak5animasi {
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak5animasi:hover {
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;}

Lingkaran
.kotak6animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak6animasi:hover {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

ukuran box
.kotak7animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak7animasi:hover {
width: 300px;}

Warna
.kotak8animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak8animasi:hover {
background:#D2506C;}

shadow+background trasparant
.kotak9animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak9animasi:hover {
-moz-box-shadow:0 0 20px #D2506C;
-webkit-box-shadow:0 0 20px #D2506C;
background-color:rgba(255, 255, 255, 0.8);}

Shadow 2 warna
.kotak10animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak10animasi:hover {
-webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
-moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
}

multi animasi
.kotak11animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak11animasi:hover {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulsate {
0% { width:100px; }
5% { width:150px; left:-25px; }
10% { width:100px; left:0px; }
15% { width:150px; left:-35px; }
20% { width:100px; left:0px; }
40% { width:100px; background-color:#38374A; }
45% { width:150px; left:-25px; background-color:#FFFF55; }
50% { width:100px; left:0px; background-color:#FFFF55; }
55% { width:150px; left:-25px; background-color:#FFFF55; }
60% { width:100px; left:0px; background-color:#3FFFF55; }
80% { width:100px; background-color:#45002D; }
100% { width:100px; background-color:#00C4FD; }
}

Bounce effect
.kotak12animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak12animasi:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes bounce {
from {
margin-left: 0px;
}
to {
margin-left: 250px;
}
}

Fade effect
.kotak13animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak13animasi:hover {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
}
@-webkit-keyframes fade {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}

infinity Bounce effect
.kotak14animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak14animasi:hover {
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}

rotate
.kotak15animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 1.0s ease-in-out;
}
.kotak15animasi:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

Hello
apa kabar n_n
.kotak16animasi {
background: #e3e3e3;
border: 1px dashed #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.kotak16animasi::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
.kotak16animasi > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
.kotak16animasi > div:first-child {
position: relative;
z-index: 2;
}
.kotak16animasi:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.kotak16animasi:hover > div:first-child {
opacity: 0;
}
.kotak16animasi:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

Khusus untuk trik ini,kode html'a seperti dibawah ini
<div class="kotak16animasi">
<div>
Hello</div>
<div>
apa kabar n_n </div>
</div>
moving
.kotak17animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 1.0s ease-in-out;
}
.kotak17animasi:hover {
-webkit-transform: translate(540px,-200px);
}


Keterangan:
-webkit-transition: all 0.6s ease-in-out; *waktu effect animasi*
-moz-transform:translate(3em, 0pt); *moving effect/berpindah tempat/horizontal*
-moz-transform:rotate(30deg); *rotate effect/berputar*
-webkit-transform:translate(-3em, 1em); *moving effect/berpindah tempat/horizontal+vertikal*
-webkit-transform:scale(1.3); *scale effect/mengubah ukuran*
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4); *effect shadow/bayangan*
background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent; *effect gradient*


Webkit :Google Chrome

Moz : Mozzila firefox






Selamat mencoba,semoga bermanfaat dan jangan lupa tinggalkan komentar'a ya n_n

CSS3 Gradient Generator

Sobat bingung dalam menentukan warna saat membuat css gradient yang sobat buat?saya punya alternatif'a nih..CSS3 gradient generator.dengan generator ini,akan memudahkan kita untuk mengatur besar,radius dan
warna yang kita inginkan.Cekidot gan.



Sobat bisa kunjungi situs alternatif'a di
http://csscorners.com/

http://www.colorzilla.com/gradient-editor/

http://www.westciv.com/tools/gradients/

http://freehtml5templates.com/gradientgenerator/gradient-generator.php

Semoga bermanfaat gan n_n

Pasti semuanya uda tau dengan kartun kan ? tapi apa bisa mengubah foto biasa menjadi foto kartun ? dan jawabannya adalah bisa donk…
Sebenarnya membuat foto kartun tidak la sesulit apa yg kamu pikirkan. Itu semua hanya membutuhkan kreativitas dan ketelitian, tapi untuk hasil akhir yg memuaskan saya menyarankan kamu semua utk menggunakan foto yg high resolution, klo kamu masih mau menggunakan foto yg punya low resolution bisa-bisa hasilnya tidak bagus, sebenarnya sih tidak masalah itu semua tergantung kembali dari kreativitas dan ketelitian kamu dalam menggunakan Photoshop.
Dari pada kebanyakan bicara, kita coba saja membuat foto kartun,,,

 
 
>> Lanjuuuuut…!!!


Step 1
Buka foto yang akan dibuat menjadi kartun, lalu  tekan Ctrl+J untuk menduplikatnya.


Step 2
Lalu seleksi fotonya menggunakan Pen Tool
Lihat Gambar….

Kalo uda selesai menyeleksinya klik Kanan Mouse> Make Selection
 


Step 3
Lalu pilih dan klik Select> Inverse
Setelah itu tekan DELETE di keyboard kamu untuk membuat Background nya menjadi transparent (hilang/terhapus)


Step 4
Pilih Layer Background, lalu duplikat dengan menekan Ctrl+J. Maka akan terbentuk layer baru dengan nama Background Copy, pindahkan layer Background Copy ke posisi paling atas (lihat gambar).
Pertama-tama tekan tombol D dikeyboard kamu untuk mengembalikan warna ke default (Foreground Hitam dan Background Putih). Pilih layer Background lagi, lalu tekan Ctrl+Backspace untuk mengubah Layer Background menjadi warna putih (atau sesuai dengan warna Background Color).


Step 5
Duplikat lagi Layer 1 dengan menekan  Ctrl+J
Di Layer 1 Copy pilih Image> Adjustment> Brightness/Contrast
Setting seperti di gambar…


Step 6
Klik Filter> Sketch> Stamp.


Step 7
Duplikat Layer 1 Copy (layer yg sudah diberi Efek Stamp) dengan menekan Ctrl+J.
Lalu tekan Ctrl+Klik di layer baru (Layer 1 Copy 2) setelah terseleksi tekan lagi Ctrl+Backspace untuk membuat jadi putih.
 
Step 8
Sekarang pindahkan Layer 1 Copy menjadi di atas Layer 1 Copy 2
Lihat gambar…..



Step 9
Pilih Layer 1 Copy (masih dalam keadaan terseleksi)
Lalu klik Adjustment Layer> Solid Color
Lihat gambar utk lebih jelasnya….


Step 10
Tetap di Layer Color Fill 1, ubah layer efek nya menjadi Multiply.


Step 11
Sekarang kita akan membuat garis-garis muka atau Highlight agar kelihatan lebih real.
Ubah posisi Layer 1 menjadi di atas Layer Color Fill 1 atau  tepat dibawah Layer Background Copy (lihat gambar).


Klik Filter> Blur> Gausian Blur.


Step 12
Klik Filter> Artistic> Cutout.


Step 13
Ubah layer efek Layer 1 menjadi Multiply dan ubah Opacity nya menjadi 50%.

Temporary Results :

Garis-garis wajahnya uda agak kelihatan kn..??


Step 14
Sekarang waktunya utk sarapan pagi. Eeh, salah mksud nya membersihkan bintik-bintik diwajah dengan menggunakan Eraser Tool (ingat !!! bintik-bintik difoto bukan jerawat, haha) 


Step 15
Saatnya kamu mewarnai mata, gigi, bibir dan lain-lain…
Caranya dengan membuat layer baru di atas Layer Color Fill.
Lalu gunakan Brush utk mewarnainya.


Step 16
Buat layer baru diatas layer Background.
Lalu beri warna dengan menggunakan Paint Bucket Tool
Step 17
Pilih Layer 1 Copy, lalu pilih Image> Adjustment> Brightness/Contrast
Settingan seperti gambar (atau sesuaikan dengan foto kamu)


Final Results
 



Selamat berkreativitas…
Mudah-mudahan kamu mendapatkan hasil akhir yg lebih baik dari apa yg saya dapatkan…


Source: berbagai sumber

Membuat menu melayang dengan sentuhan Jquery dan CSS3
Apa kabar sobat?udah pernah lihat menu melayang belum?pasti sudah kan..kali ini saya mau share trik menu melayang,tetapi menu ini dilengkapi jquery dan css3.effect animasi hover'a dengan css3 dan
effect melayang dengan jquery yang selalu mengikuti layar kita.contoh'a bisa sobat lihat disini mau tau cara'a?lets go...


Pertama,buka blogger sobat, Rancangan => Edit HTML
lalu masukan css dibawah ini ke template sobat

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:80px;}
#floatMenu ul {list-style-type: none;}
#floatMenu ul li a {
display:block;
background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
border:1px solid #999;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
width:80px;
-webkit-transition: all 0.6s ease-out;
box-shadow: #333 0px 0px 10px;
-moz-box-shadow: #333 0px 0px 10px;
-webkit-box-shadow: #333 0px 0px 10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
border-right:6px solid #999;
width:150px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
}
#floatMenu ul.menu1 li a:hover {border-color:#09f;}

Note:
-bila sobat ingin mengganti warna background menu'a,sobat tinggal ganti kode warna'a.
-sobat juga bisa ganti warna hover menu'a dengan mengganti kode warna'a.

Selanjut'a.sobat masukan script di bawah ini di bawah kode ]]></b:skin>

<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script>
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>


terakhir..sobat masukan kode html di bawah inidi elemen halaman sobat,atau bisa di template sobat di atas kode </body>

<div id="floatMenu">
<ul class="menu1">
<li><a href="#" onclick="return false;"> Home </a></li>
<li><a href="#" onclick="return false;"> About </a></li>
<li><a href="#" onclick="return false;"> Contact </a></li>
<li><a href="#" onclick="return false;"> Blog </a></li>
<li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li>
</ul>
</div>

Note:
-Ganti tanda # dengan Url sobat.
-Ganti juga Nama link sobat.

selesai deh..
selamat mencoba sob,dan jangan lupa tinggalkan komentarnya n_n


RetroPop Template blogger
Untuk sobat yang suka template simple,tapi bagus dan penuh warna,saya mau share template buatan saya sendiri nih n_n.daripada disimpen di flashdisk berhari2,mending saya share aja buat sobat.template ini full CSS3
tanpa menggunakan gambar sama sekali,kecuali untuk logo dan background'a.tpi untuk dapat merasakan css3,disarankan menggunakan browser versi terbaru yang mendukung css3 seperti google chrome dan mozilla,tetapi untuk fasilitas readmore css3 animation,tidak bisa dilihat dengan browser mozilla.
Preview


Fitur blog Retropop
1. Comment list yang stylist,dan dilengkapi dengan CSS3

2. Sharebar menggunakan CSS3 bila di hover

3. menggunakan Font google api:Philosopher,pada semua text
RetroPop Template blogger

4. Tombol readmore dilengkapi CSS3 animation dan Jquery text bubble



Pengaturan Blog:
1. untuk masalah UNDEFINED pada tanggal posting,sobat ganti format time pada
Pengaturan => Format,lalu ikuti pengaturan Format Header Tanggal,Format Tanggal Index Arsip dan Format Timestamp seperti gambar di bawah ini

RetroPop Template blogger


2.Untuk mengganti logo pada header blog, cari url dibawah ini pada template sobat
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVXeMz04BeHvSq2nyXhlKGxyieKZsug-2bWfhm5YZQWsE2tZdtjWq1fZBg0LYbNP1Swlf80OC0rXsvW5b8Qz0akye8eUL_sQf2qf8LQ1tAup90Apa1exkEchSyPuPwI98TZzGXsqB1R0/s1600/logo.png

lalu ganti dengan gambar milik sobat

3. Untuk mengganti Link pada category-nav,

sobat cari kode:
<ul id='menu'>
<li class='first'><a href='http://djogzs.blogspot.com/search/label/CSS' title='Css3'>CSS</a></li>
<li class='page_item page-item-8211'><a href='http://djogzs.blogspot.com/search/label/Jquery' title='Jquery'>Jquery</a></li>
<li class='page_item page-item-8227'><a href='http://djogzs.blogspot.com/search/label/HTML' title='HTML'>HTML</a></li>
<li class='page_item page-item-8227'><a href='http://djogzs.blogspot.com/search/label/Tips%20blog' title='Tips Blog'>Tips Blog</a></li>
<li class='page_item page-item-8227'><a href='http://djogzs.blogspot.com/search/label/Blogger%20Template' title='Template Blogger'>Template</a></li>
<li class='page_item page-item-8227'><a href='http://djogzs.blogspot.com/search/label/Software' title='Software'>Software</a></li>
</ul>

sobat tinggal ganti Url link'a


4. untuk navbar yang kedua,sobat cari kode ini pada template sobat:

<ul id='category-nav'>
<li class='cat-item cat-item-3'><a href='http://djogzs.blogspot.com/' title='Home Sweet Home'>Home</a>
</li>
<li class='cat-item cat-item-24'><a href='http://djogzs.blogspot.com/' title='About me'>About me</a>
</li>
<li class='cat-item cat-item-12'><a href='http://djogzs.blogspot.com/p/friend-chat.html' title='Chating dengan teman'>Chats</a>
</li>
<li class='cat-item cat-item-5'><a href='http://djogzs.blogspot.com/' title='View all posts filed under Blogging'>Blogging</a>
</li>
<li class='cat-item cat-item-1'><a href='http://djogzs.blogspot.com/p/contact-form.html' title='Contact dengan email'>Contact</a>
</li>

Sobat tinggal ganti juga url link'a.

5.untuk mengganti url RSS,Rss Comment dan facebook,sobat cari kode ini pada template sobat

<a href='http://feeds2.feedburner.com/djogzs' title='Subscribe to Blog Johanes'><img alt='Subscribe to Blog Johanes' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYuq5v0MIHWQEURzzM1zOgHeWo45LU3DroEvrUyNCq8xG0KiczpPJOZJInLDlTh_NQ7aGVHwlK7dmt4ZmDV0IKRsROGK6Uxe2QMkOpJh_4AZEu-YEB3Nab7g2oclWkyFH_EFaHr-B7BY/s1600/twitter-bubble.png'/>10<br/><small>subscribers</small></a>
<a href='http://www.facebook.com/johanes.djogan' title='Add Johanes on facebook'><img alt='Add me on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLbYIrnhS6EXEJmhvEdu5ka25zge-Qd4jHDCst8UNYjvJzZKiiYLP0x3ZK6ncojGgicm1iSLn6UszQsX2Dzvc7Tm9jqhC_FJ0vRSE3pmzQDLlDlMk-_COW81QQKHYrV0WNdEbn4Zprd0/s1600/facebook-bubble.png'/>1261<br/><small>Friends</small></a>
<br/><a class='email' href='http://feedburner.google.com/fb/a/mailverify?uri=Djogzs&amp;loc=en_US'><img alt='Blog johanes dj' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW28RajGm5TrvG377AKGyAeBbC7PqMREW4M97Wkw5YD2FHG6HBycbXzwGOBSG-9nfUSsnd3wBRVcAnvhOIYtEODJ0Zxm5SFsoGC9iHU_gG6GmxrV792V8KAmGw0AohMsaMz9kD5FlEnaM/s1600/email.png'/>Get Updates by Email</a>

Sobat tinggal ganti url RSS blog sobat,url facebook dan Email RSS.



6. untuk mengganti pesan pada pengunjung pada tombol readmore,sobat pilih edit HTML,lalu Expand Template Widget.stelah itu,sobat cari kode
<li><a class='readmore' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span><data:post.jumpText/></span></a><em>Di baca ya n_n<div class='clear'/>truz kasih komentarnya</em></li>

Sobat tinggal ganti pesan'a untuk pengunjung n_n


7.Bila sobat ingin menambahkan tombol readmore pada postingan,sobat tinggal menambahkan kode
<!--more-->
pada tiap posting editor sobat,atau dengan klik tombol insert jump break pada post editor sobat
RetroPop Template bloggerRetroPop Template blogger






RetroPop Template blogger RetroPop Template blogger


Silakan dicoba gan,thanks udah mengguanakan template buatan saya sob n_n
dan jangan lupa tinggalkan komenta'a.
Diberdayakan oleh Blogger.