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.

Rabu, 24 Oktober 2012

Rikka Takanashi Blogger Templates


Akhirnya Selesai juga template Rikka'a,yah pasti tau anime yang satu ini,yang juga menjadi anime favorite saya :) template kali ini saya beri dengan tema Rikka takanashi,dari tokoh anime di seri Chuunibyou Demo Koi ga Shitai!.


Akhir" ini benar" sibuk dengan urusan kuliah,tugas menumpuk trus.tapi karena ga tahan ingin buat thema'a tentang anime Chuunibyou Demo Koi ga Shitai,sambil curi" waktu sedikit saya buat dari template dasar sword art online,saya design ulang pada bagian header,posting dan footer'a,serta memperbaiki sedikit" kekurangan dan menambahkan fungsi dropdown menu pada bagian menubarnya,karena banyak'a request menu dropdown.untuk design'a sendiri,saya mengedit'a dahulu pakai photoshop,karena minggu" ini sangat sulit untuk mencari gambar header Rikka yang cocok,jadi saya edit sendiri saja deh~.

dan untuk hasil'a kalian dapat melihat preview dibawah ini ^^


Preview



Pengaturan Menu

<ul class='dark_menu'>
<li><a class='selected' href='#'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Anime</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>


Ganti tanda pagar '#' dengan url link site yang kamu inginkan.



sip deh,akhirnya lega juga~xD
Bila tertarik,silakan dicoba~xD
ok deh,terima kasih,saya undur diri lagi,mohon maaf kalau saya jarang" aktif,semoga masih ada banyak kesempatan waktu untuk saya aktif blogging lagi,mohon maaf apabila ada komentar yang tidak dibalas,masih banyak tugas menunggu di belakang,besok juga harus siap" menghadapi dosen yang killer",ampun deh~xDD
Akhir kata,Arigatou gozaimasu~








Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html










Selasa, 16 Oktober 2012

iPhone Style, slide to unlock dengan jquery dan CSS3



Apa kabar sobat~ akhirnya ada sedikit kesempatan juga untuk posting blog,karena kebetulan hari ini libur 2 hari~xD
Trik kali ini saya dapatkan dari CSS triks.com dengan tidak sengaja.awalnya cuma iseng' browsing trik CSS,lalu saya menemukan trik yang cukup menarik,yaitu Slide to unlock.trik ini sebenar'a udah lama juga,tapi karena saya lihat masih jarang",saya post deh~


contoh pada css-tricks.com


contoh trik modifikasi saya


apa bedanya dengan trik yang asli?

trik yang saya modif ini,diterapkan untuk blog sebagai welcome screen/splash screen.jadi fungsi slide'a menjadi tombol/menu pembuka/opening blog kita.



Tujuan dari Trik yang berupa CSS3 dan jquery ini , kalau menurut saya yang buat juga hanya iseng" agar mirip dengan sistem Unlock di Iphone.Setelah saya coba demo'a.wah ternyata lucu juga ya,ketika kita drag pointer ke kanan,maka automatis kebuka/ilang slide'a?
setelah saya periksa CSS'a ternyata Css'a menggunaka CSS keyframe yang tidak looping.teori'a sebelum kita geser slide,display masih keadaan "Block",setelah kita drag ke kanan sejauh 720px,posisi display menjadi "none".wah menarik juga nih.

lalu saya cari ide bagaimana cara menerapkan slide to unlock ini untuk fungsi lain.
saya iseng" otak atik,dan akhirnya berguna juga untuk unlock screen yang ada di blog kita *.*

bagaimana cara'a? yahh,karena ini kesempatan yang langka juga untuk saya posting,saya ceritaiin deh~xD

Pertama,begini teori'a: yang kita inginkan slide itu ada dilayar fullscreen,melayang diatas blog kita,dan kalau di unlock,slide'a hilang dan menampilkan blog kita kembali.jadi trik yang saya buat ini mirip" splash Screen atau welcome screen sebelum memasuki blog kita.kalau sudah berfungsi,tinggal tambahkan accesoriss agar tampilan'a tidak agak membosankan.misal yang ada diblog saya,saya tambahkan text messages dan gambar miku ^^

Kedua,bagaimana cara'a? :dari teori diatas,bisa saya simpulkan yaitu:
1. Bagaimana cara'a melayang?
Jawab: tambahkan Css position:fixed;

2. bagaimana cara'a slide itu ada dilayar fullscreen
Jawab: tambahkan warna background dan dibuat panjang dan lebar 100%
CSS : background:#000;(warna bg)  dan  width:100%;height:100%;
saya juga menambahkan z-index:9999 dan seterusnya,agar posisi objek ada di layer paling atas/tertinggi dari semua element dibelakangnya


3. bagaimana cara'a kalau di unlock,slide'a hilang dan menampilkan blog kita kembali?
Jawab: bagaimana cara'a? saya juga mengira itu efek dari CSS'a,tapi itu efek dari jquery'a;

$(function() {
$("h2 img").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
}
},
stop: function(event, ui) {
if (ui.position.left < 551) { $(this).animate({ left: 0 }) } } }); });


4. bagaimana cara'a menambahkan gambar dan text seperti blog johanes?
jawab :
-nah kalau yang ini,saya kreasikan sendiri~xD
-saya buat HTML sendiri dengan nama class .pesan,.pesan1,.headpesan.

.pesan saya isi dengan text ;blog johanes tidak aktif untuk sementara

.pesanhead saya isi dengan : messages from admin

.pesan1 saya isi dengan blablablablabla.panjang deh.wkwkwk

untuk gambar mikunya,cuma seperti biasa menggunakan img src,tapi luarnya saya tambahkan html dengan class name .gambarmiku. kenapa saya tambahkan? agar gambar'a bisa diatur letak dan posisinya.

5. bagaimana cara mengatur posisinya?
jawab:
menggunakan margin.

6. bagaimana cara menggunakan margin?
tambahkan saja margin-left ,margin right,margin-top dan margin bottom.
tinggal atur posisi'a/nila px.
misal:
mau geser kekanan : margin-left:10px;
mau geser keatas :margin-bottom:10px;

(tinggal atur nilai'a berapa jauh mau kamu geser objeknya.)

7. kenapa margin left bisa kekanan?
jawab:maksud dari margin left itu,memberi jarak dari sebelah kiri,maka objeknya akan kegeser kearah kanan,dan juga sebaliknya.tapi bila nilai'a kamu beri nilai minus,maka objek'a akan bergeser ke arah kiri.


8. kenapa bisa?
jawab: sebelum'a saya tanya dahulu,pernah belajar matematika tidak? xDD


Sebenarnya prinsipnya sama seperti gambar diatas.
begini teori'a,misal ada obkek sebuah bola.saat posisi margin 0,pasti kalau digambar posisinya ditengah bukan?
lalu misal kita tambahkan margin-left:5px;
jadi seperti gambar dibawah ini


maksudnya margin-left itu,posisi vertikal geser dari kiri-kekanan.tetapi kalau horizontal .margin-top dari posisi atas kebawah.(minus dan plus jadi terbalik/jadi kebalikanya).kecuali bila diberi nilai minus,maka hasil'a margin left bergeser ke kiri dan sebaliknya.

ax² + bx + c = 0  ax² + bx + c = 0  a (x + p/a) (x + p/a) = 0
 x1 = - p/a dan x2 = - q/a

itulah teori singkat tentang margin.
loh,kq jadi out off topic?=___="
wah,sepertinya saya kebanyakan belajar kalkulus~xDD



9. bagaimana mengedit style pada text " Slide to unlock " ?

kamu cukup perhatikan CSS yang saya tandai dibawah ini.


#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F));
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}




warna ██ : warna text:ganti kode warna hexadesimal'a.karena text efek'a menggunakan color gradient

kode #8B836F adalah warna ██ dan kode #52CFD2 adalah warna ██
jadi kalau digambarkan menjadi seperti ini


dan karena menggunakan efek animasi css 3,maka akan bergerak secara halus dari kiri kekanan.




warna ██ : Untuk mengatur nilai rounder/bulat pada objek tersebut.

warna ██ : untuk mengatur tebal,tipe,dan warna border.

warna ██ : untuk mengatur ukuran text.

warna ██ : tipe font.

warna ██ : jarak dari atas objek ke atas sejauh 130px. (bisa dirubah nilai'a,tinggal sesuaikan~

10. dan terakhir,bagaimana agar trik ini hanya berfungsi di home page saja?
jawab: kita tinggal menambahkan html tag conditional atau bisa lihat lebih lengkap'a disini untuk penerapanya.

sipp,kembali ke slidenya~xD


langsung saja cara pasang'a,pertama copy paste CSS yang sudah saya modifikasi dibawah ini(tidak sama dengan blog saya,ini css dasar'a),lalu copas juga HTML dan Jquery'a:

CSS

#well {
padding: 140px 20px 20px 300px;
background:#000;
overflow: hidden;
width:100%;height:100%;
position:fixed;
z-index:9999999999999999;
-webkit-user-select: none;
font-family: 'Open Sans', sans-serif;
}

#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F));
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBT01Jdff_mIjUfnre_9dCMjfAlmW6vk5iNevjZB_8Ay0SB4YAInt-0si_7xWgkj5n4O8jnbd2hSCCNHp7yXoSWqBPH7B_hnyzDYf1OymMFM3y6Fse_U4jK-i-8K9reCOr8lQNyUc2EE0/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
opacity:0.8;
}
#slider:hover {opacity:1;}

@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}

.bgslide {background:#000;width: 722px;
border-radius: 15px;}


HTML
<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>



Jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'/>
<script src='http://css-tricks.com/examples/SlideToUnlock/js/slidetounlock.js'/>

saya agak malas reupload js'a~xD
bila merasa hosting'a terasa agak lelet,tinggal download dan re-upload js'a di sites.google.com

#note
-letakan CSS di atas kode ]]></b:skin>
-letakan HTML didalam/dibawah kode <body>
-letakan jquery diatas kode </head>




selesai deh,jelas sekali bukan?nanti tampilan'a menjadi seperti ini


contoh diatas,agak berbeda dengan yang aslinya di
http://css-tricks.com/examples/SlideToUnlock/

http://sword-art-online-blogger-template.blogspot.com/



kenapa?trik yang asli tidak melayang dan tidak fullscreen.

sedangkan yang sudah saya modifikasi melayang,dan fullscreen.

kenapa agak beda dengan blog saya? jangan samalah,kalian bisa memodif'a sendiri dengan kreasi kalian sendiri... ^^

selamat mencoba dan belajar~xDD
semoga trik ini cukup bermanfaat,dan tolong jangan cuma asal copas postingan saya dan mengaku".Dosa tau :p
yosh,saya off lagi,sampai jumpa di waktu liburan ~xD
sankyu all~ *OFF