Tales Of Zestiria PC Games

Tales of Zestiria mengambil setting sebuah benua fiksi bernama Greenwood. Greenwood terpisahkan oleh dua negara yang masuh bertikai, Highland Kingdom, yang diperintah oleh sebuah kerajaan berbasis konstitusi, dan Laurence Empire. Di sepanjang Greenwood, dikenal kotoran yang dipicu oleh emosi negatif manusia, yang berujung pada terciptanya monster bernama Hyoma, yang kini menjadi ancaman manusia.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Kamis, 30 Desember 2010

Trik merubah tampilan homepage dan halaman posting

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...

Selasa, 28 Desember 2010

Belajar CSS3

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 ^^

Senin, 27 Desember 2010

Membuat Menu Bubbles Dengan Jquery Dan CSS3

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

Minggu, 26 Desember 2010

Apa itu em,pt,dan px?

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 ^^

Selasa, 21 Desember 2010

Membuat Link hover warna - warni dengan CSS3

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

Selasa, 14 Desember 2010

30 Trik menarik CSS3

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

Senin, 13 Desember 2010

CSS3 Gradient Generator

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

Minggu, 12 Desember 2010

Membuat menu melayang dengan sentuhan Jquery dan CSS3

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


Sabtu, 11 Desember 2010

RetroPop Template blogger

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
http://2.bp.blogspot.com/_HGekX55lw4E/TQM90TEzsLI/AAAAAAAAAVI/lEbDafsUQ2I/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='http://4.bp.blogspot.com/_HGekX55lw4E/TPYSQ0M70iI/AAAAAAAAASA/tgx8P-tbuq8/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='http://2.bp.blogspot.com/_HGekX55lw4E/TPYSPC6cMII/AAAAAAAAAR8/Ceu-lr0TLzA/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='http://1.bp.blogspot.com/_HGekX55lw4E/TPYTaBw7d4I/AAAAAAAAASE/Xby4vrud6-M/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.

Kamis, 09 Desember 2010

Cara menggunakan Google font di blogger

Cara menggunakan Google font di blogger
Ini dia sobat.google font api,google memberikan layanan kostum font dengan slogan - 'Making Beautiful Web!.dgn font dari google ini,sobat bisa mengganti font/gaya tulisan/tipografi yang unik-unik untuk blog sobat.
mau tau cara menerapkan google font api di blog kita?cekidot gan..


Sebelum menggunakan font ini,ada baik'a sobat backup dulu template'a..

Pertama,sobat kunjungi gallery font'a di diSini
disana,sobat akan lihat kumpulan variasi font yang sudah disediakan oleh google.


kalau sudah ada yg cocok,sobat pilih salah satu,atau kalau mau banyak juga boleh n_n
lalu,sobat akan dibawa kehalaman keterangan font yg sobat pilih tadi seperti gambar dibawah ini


setelah itu,sobat pilih USE THIS FONT.,lalu akan tampil halaman untuk menambahkan kode'a


tinggal di copy paste aja dah kode'a....
copy paste dimana???ini dia trik'a....

Tahap kedua,
Buka blogger sobat => rancangan=> Edit HTML.
Sobat copy paste CSS'a yang seperti dibawah ini di bawah kode <head> atau juga bisa di bawah kode ]]></b:skin>
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>

lalu sobat copy juga css'a yang seperti di bawah ini, di post title yg sobat inginkan
font-family: 'Just Me Again Down Here', arial, serif;

Contoh:

CARA PERTAMA
#sidebar h2 {
font-family: 'Just Me Again Down Here', arial, serif;
}
*contoh untuk sidebar*

body {
font-family: 'Just Me Again Down Here', arial, serif;
}
*Contoh untuk mengganti semua gaya tulisan di blog sobat*

a {font-family: 'Just Me Again Down Here', arial, serif;}
*mengganti gaya tulisan untuk link/tautan*

CARA KEDUA
<div style="font-family: 'Just Me Again Down Here', arial, serif;">Text kamu</div>

*cara agar dapat mengganti gaya tulisan pada text tertentu/yang kita inginkan*

*inti'a,taruh CSS'a di css yg menggunakan h2,h3,h4,ul,li,a,body.
yang diganti hanya font-family'a saja*

Kalau sudah..simpan template dehh..


loh???kq malah error???nah lohh....panik dah...
wkwkwkwkwkw
jgn panik gan...
mau tw kenapa error????

itu karena kita tidak menutup tag pada font css yang td kita simpan

sama saja seperti kode

<div> jika tidak menggunakan penutup </div> akan error.
tapi kode div bisa singkat menjadi <div/>

cara'a Sobat tinggal tambahkan kode garis miring  /  pada kode akhir sebelum kode >



Contoh:

awal'a seperti ini
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>

kita tambahkan kode / menjadi
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'/>

Selesai deh...
nanti ga akan error lagi
Sudah tau kan penyebab ralat pemasangan font pada blogger?
tentu'a dengan google font ini,tidak akan memberatkan blog sobat...
lain cerita'a bila sobat menggunakan @font-face,cufon,sIFR yang menggunakan  flash/banyak script yg rumit dan bisa memberatkan blog sobat.

Silakan dicoba gan..,dan jangan lupa tinggalkan komentar'a sob n_n

Kamis, 02 Desember 2010

Text 3 Dimensi dengan CSS3

Text 3 Dimensi dengan CSS3


hai sobat,saya mau share trik css3 lagi nih,kali ini saya akan share cara membuat 3D text atau text 3dimensi hanya dengan css3 hasil modifikasi saya dan ditambah dengan css hover efect animation.
jadi text animasi dah n_n.Sobat bisa lihat contoh dan Css'a DISINI.Untuk menggunanakan trik ini,ada baik'a sobat backup dulu template sobat n_n

Sebelum sobat mencoba trik ini,sobat harus tau,kalau trik hover animation hanya muncul di browser yang mendukung css3 animation,seperti google chrome.untuk mozilla,belum bisa mendukung css3 animation,tetapi untuk 3D text/shadow bisa dinikmati di mozilla4.saran saya buat sobat,sering-seringlah update browser ke versi baru agar sobat bisa merasakan kehebatan CSS3.
ok dah~ langsung aja...

pertama,kamu pilih style shadow'a DISINI
kemudian css'a sobat taruh di template sobat,jika sudah pilih salah satu,
sobat masukan kode html dibawah ini
<div id="footer_container">
<h2 class="footer_title">
Blog Johanes</h2>

Keterangan:

-Nama Text bisa sobat ganti.(yang Blog johanes)

-Ukuran font/jenis tulisan,bisa sobar rubah

-bila sobat ingin menambahkan efek gradient,sobat tinggal tambahkan kode ini
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));

-jika sobat tidak ingin menambahkan efek animasi/hover efect,sobat tinggal hapus kode
#footer_container1 h2.footer_title1:hover { isi Css }

-jika sobat ingin mengganti warna text,ganti kode HEX di color:#8BC2C5; pada css #footer_container h2.footer_title untuk warna text sebelum di hover dan kode HEX di color: #B19FD9; untuk warna text setelah di hover.

-jika sobat ingin ganti warna shadow pada text dan mengganti arah shadow,sobat tinggal ganti hex dan pixel pada css text shadow.
Contoh :text-shadow: 0px 1px #000,

0px=arah shadow Horizontal=bila diubah ke angka lebih dari 1,maka shadow akan kearah kanan,sedangkan bila diubah ke angka kurang dari -1,maka shadow akan kearah Kiri.
1px=arah shadow Vertikal=bila diubah ke angka lebih dari 1,maka shadow akan kearah bawah,sedangkan bila diubah ke angka kurang dari -1,maka shadow akan kearah atas.
#000= warna shadow text,sobat bisa ganti warna'a(HEX)



Demikian tutorial dan penjelasan tentang 3D Text Css3 dari saya.selamat mencoba,dan jangan lupa tinggalkan komentar'a ya n_n


Rabu, 01 Desember 2010

Efek Cermin Dengan CSS3

Efek Cermin Dengan CSS3

hai sobat,kali ini saya akan kasih tau gimana cara'a menambahkan efek Cermin atau Reflections pada gambar yang kita inginkan.contoh'a bisa sobat lihat disini .ini dia cara'a,Cekidot gan...


Cara'a mudah kq,sobat tinggal copy paste kode ini ke template kamu.
kode dibawah ini adalah css yang mempengaruhi efek cermin pada gambar


-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));



lalu sobat cari kata :
img { 

di template sobat,lalu copy paste css dibawah ini di css gambar sobat.

jadi seperti ini
img {
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
}

selesai deh.dengan cara diatas,akibat'a semua gambar di blog sobat,akan berefek cermin semua..
karena secara umum,semua gambar menggunakan tag "img"
nah loh!!!jangan panik ya...jika sobat ga mau pake cara diatas,ada cara alternatif nih n_n

Pertama,masukan Css ini di tempate sobat

.post-image {
float: left;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
-webkit-border-radius: 3px;
}


lalu sobat copy paste juga kode html di bawah ini
<img alt="Some title" class="post-image" src="http://1.bp.blogspot.com/_HGekX55lw4E/TPC27RymowI/AAAAAAAAARY/cZLpuzQKUOY/s1600/Untitled-2.jpg" />
Url gambar bisa sobat ganti

Selesai deh,dengan cara ini,sobat bisa menentukan sendiri gambar mana yang akan diberi efek cermin n_n selamat mencoba,dan jangan lupa backup dlu template sobat sebelum Berexperimen


mudah bukan?silakan dicoba...

Senin, 29 November 2010

Animasi Sharingan Dengan CSS3

Animasi Sharingan Dengan CSS3

hai sobat,kali ini saya mau share cara membuat animasi sharingan hasil experimen sendiri nih n_n
silakan sobat coba2 buat iseng2.tapi trik css3 animation ini,hanya akan terlihat di browser tertentu seperti google chorme
.untuk mozilla firefox belum dapat mendukung animasi ini  .bila sobat mau lihat contoh'a,bisa dilihat Disini
ini dia trik'a


Pertama,masukan CSS ini di template sobat


.Sharinganmadara {
background: url(http://2.bp.blogspot.com/_BnQGKEnfHss/SthsOiM1xmI/AAAAAAAAAAU/J7kM6fsIPik/s320/300px-Mangekyou_Sharingan_Madara.svg.png) no-repeat;
height: 300px; line-height: 46px;
width: 300px;
-webkit-transition: all 2s ease-in-out;
}

.Sharinganmadara:hover {
-webkit-transform: rotate(900deg);
}
Url gambar bisa sobat ganti dengan gambar sobat

lalu masukan kode HTML ini di blog soba/elemen halaman.

<div class="Sharinganmadara">
</div>


selesai deh...
selamat mencoba,semoga bermanfaat,dan jangan lupa tinggalkan komentar'a n_n

5 kode HTML untuk Mengatur tampilan blog

5 kode HTML untuk Mengatur tampilan blog
Saya dapat pertanyaan dari teman saya,bagaimana bisa sidebar hanya bisa tampil di home page?sedangkan pada saat membaca artikel,sidebar'a menghilang??ini dia trik'a. .

trik'a adalah kode logika/html/if. dengan kode ini kita bisa menambahkan sedikit kode sehingga menjadi b:if cond=, dalam artinya, jika kondisi...guna'a agar kita dapat menghilangkan elemen yang berat di halaman tertentu yang kita inginkan,

Macam2 kode...
Ada 5 macam yang yang bisa saya temukan di google n_n

1.<b:if cond='data:blog.url == data:blog.homepageUrl'> isi widget</b:if>
Kode di atas ini fungsinya agar widget hanya pada homepage atau halaman utama saja. Contohnya sidebar pada blog saya di akatsuki akb.

2.<b:if cond='data:blog.pageType != &quot;item&quot;'> isi widget </b:if>
kode ini fungsi'a supaya widget ada di halaman homepage dan label atau di kategori post. saya belum dapat contoh'a

3.<b:if cond='data:blog.pageType == &quot;item&quot;'>isi widget </b:if>
Kode ini berfungsi agar widget hanya ada ketika kita membaca posting blog saja. Contoh'a adalah kotak komentar yang terdapat dibawah posting blog kita.

4.<b:if cond='data:blog.url != data:blog.homepageUrl'> isi widget </b:if>
Kode ini berfungsi agar widget ada di halaman posting. Contohnya kebetulan saya tidak memakainya. :). Fungsi ini kebalikan dari kode ke 1.

5.<b:if cond='data:blog.url == &quot;url postingnya disini&quot;'> isi widget </b:if>
Kode ini berfungsi agar widget ada ketika kita membaca posting tertentu. sobat tinggal ganti kata yang tulisan'a tebal dengan url posting sobat.


Contoh sederhana untuk menghilangkan Tab Slider di halaman depan/home page


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- begin featured content slideshow -->
<div id='featured'>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
</div>
</div>
</div>
</div>
<!-- end featured content slideshow -->
</b:if>

Yang ini contoh untuk menghilangkan Sidebar di halaman posting. . .


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section id='sidebar' showaddelement='yes'>
<b:widget id='HTML8' locked='false' title='Chatbox' type='HTML'/>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
<b:widget id='HTML16' locked='false' title='' type='HTML'/>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='Text1' locked='false' title='info' type='Text'/>
<b:widget id='BlogList1' locked='false' title='Daftar Blog Saya' type='BlogList'/>
</b:section></b:if>



Selamat mencoba dan semoga bermanfaat untuk blog sobat.
jangan lupa kasih komen'a ya n_n

Sabtu, 27 November 2010

Tips memilih Warna Design Blog

Tips memilih Warna Design Blog
Hai sobat,apa kabar?sehatkan?Bagaimana menurut sobat tentang blog saya?kerenkan n_n penuh warna yang menarik dan ditambah dengan CSS3,tanpa menggunakan gambar sama sekali yang cocok untuk design blog kita.
Mau tau kenapa saya memilih 5 warna ini dari sekian banyak warna?Cekidot gan.

Tips memilih Warna Design Blog




Pertama,sobat kunjungi http://www.colourlovers.com/palettes
disana sobat bisa lihat perpaduan warna yang menarik dan bisa memberikan sejuta inspirasi untuk warna blog kita

jika sobat sudah jatuh hati dengan salah satu warna/sesuai tema'a dengan blog sobat,di klik saja warna'a..
setelah itu,sobat akan masuk ke halaman tentang warna yang sobat pilih tadi.
Contoh'a nanti akan tampil seperti gambar dibawah ini.

Tips memilih Warna Design Blog



















Bila sobat perhatikan, di setiap keterangan warna'a,ada HEX dan RGB.
apa itu??tapi sebelum'a saya tanya dulu...

1.apakah sobat tidak asing dengan kode ini di template sobat?
background:#FFFFFF

2.apakah sobat tidak asing dengan kode ini di template sobat?
text-shadow:1px 1px 0 rgba(255,255,255,0.4);

pasti sobat tau n_n
yapp HEX adalah hexadecimal warna yang digunakan untuk,html,CSS blog/website sobat dalam angka atau huruf 6 DIGIT.

sedangkan Rgb/atau biasa disebut RGBA Colour adalah model warna aditif di mana warna merah, hijau, dan biru ditambahkan bersama dalam berbagai cara untuk menggabungkan angka yang luas dari warna.

nah,sobat udah tau kan?tinggal di copy paste aja kode hex'a ke blog sobat.

nah!!!! ada lagi nih sobat,saya juga akan share software bermanfaat.
nama'a ColorPic dari http://www.iconico.com

Tool ini sangat bermanfaat untuk mencuri Warna Blog teman sobat(jangan curi warna saya TT..TT)
ups..salah pengertian nih.hehehehe
keunggulan dari tool ini adalah
-dapat menyimpan/capture 16 warna sekaligus
-mudah digunakan
-ukuran software yang kecil
-Warna yang ditampilkan,HEX
-dapat mengedit warna
-Atur Hue, Saturation
-yang pasti GRATIS

Cara menggunakan tool ini adalah:
-Color pic harus dalam keadaan aktif,jangan di minimize.
-arahkan kursor kamu ke layar yang ada warna'a.
pilih palette kosong untuk mengisi warna kamu
-lalu gunakan tombol keyboard CTRL + G untuk mengambil warna.
kemudian ColorPic akan menampilkan warna'a dipalette dan muncul kode HEX'a..
mudah bukan??

saya juga akan share tool alternatif lainya.
http://www.colorpicker.com/
http://www.colorschemer.com/
http://www.free-webmaster-tools.com

Hasil'a..seperti warna template saya yg dulu gan n_n



semoga artikel ini Bermanfaat untuk blog sobat n_n
terima kasih,dan jangan lupa tinggalkan komentar'a

Jumat, 26 November 2010

Memasang Accordion Dengan Jquery dan Css

Memasang Accordion Dengan Jquery dan Css
sobat udah pernah liat blog teman sobat sidebar'a bisa buka,lalu menutup??ini dia trik'a namanya Accordion,kalau sobat belum tau seperti apa Accordion,sobat bisa lihat contoh'a disini dengan Accordion kamu bisa mengurangi
tempat blog kamu.trik ini tdk akan memberatkan blog kq.ok,dah langsung aja saya kasih tau cara'a n_n



Pertama,masukan kode HTML ini ke blog kamu...
isi widget yang kamu iginkan.contoh:bukutamu,blogroll,link dan sebagai'a

<div class="container">
<h2 class="acc_trigger"><a href="#">Menu1</a></h2>
<div class="acc_container">
<div class="block">


Isi widget/text kamu disini

</div>
</div>

<h2 class="acc_trigger"><a href="#">Menu2</a></h2>
<div class="acc_container">
<div class="block">


Isi widget/text kamu disini

</div>
</div>
</div>

kemudian,masukan CSS ini di template sobat

h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(http://www.sohtanaka.com/web-design/examples/accordion/h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}


Note:url gambar bisa kamu ganti sesuai kebutuhan.atau dapat diganti dengan CSS 3

Memasang Accordion Dengan Jquery dan Css
Memasang Accordion Dengan Jquery dan Css


setelah itu,copy paste script ini di bawah kode ]]></b:skin>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

});
</script>



selesai deh...
selamat mencoba n_n