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, 31 Mei 2012

Trik CSS Pseudo-elements

Hai sobat~saya mau share ilmu CSS lagi nih,tapi tingkat menengah.jadi yang ingin belajar,coba dan usaha dulu sebelum bertanya.tadinya sih saya mau share css yang paling dasar dulu,tapi males karena ga sempet(im sorry=_=v) jelasin'a karena banyak sekali,dan mungkin akan jadi buku.wkwkwkw.kali ini tentang CSS Pseudo - elements?apa itu?CSS pseudo-elemen adalah CSS yang digunakan untuk menambahkan efek khusus pada beberapa seleksi element yang kita inginkan tanpa harus menambahan html.css ini sebenar'a sudah umum dan banyak digunakan web designer yang sering kita lihat sekarang banyak yang ahli menggunakan CSS3 hingga terlihat artisitik.saya juga sudah lama menggunakan ini sih,baru sekarang saya share,karenalagi ada waktu luang~jadi bagi yang ingin belajar,silakan dibaca dari awal :)




Contoh template yang saya terapkan menggunakan trik ini yaitu:

1. Haiyore nyaruko-san
2. Sora no otoshimono
3. Shinobu oshino
4. Green minimalist
5. Fairy tail
6. blog saya sendiri :)

Dan beberapa trik seperti cloud animation,text animation,ribbon menu css3,dll



bagaimana cara menerapkanya?
Mudah saja,yang perlu kita lakukan adalah membuat/mengetik CSS'a sendiri secara manual dengan 4 CSS Pseudo yang akan saya bahas yaitu.

1. :First-line
2. :First-letter
3. :before
4. :after

Saya akan jelaskan satu - persatu,tapi untuk awal penerapanya menggunakan Sintaks dari pseudo-elemen seperti dibawah ini.


.namacss/class:pseudo-elemen

keterangan:
.nama css/class adalah nama css yang terkait dengan Html.
pseudo-element= fungsi yang kita inginkan(:before atau :after atau :first-line atau :first-letter)



Contoh:
Misalkan saya punya HTML dengan nama class

<div class='header'>isi content </div>

lalu nama cssnya

.header {isi css;}


setelah itu saya ingin menambahkan css pseudo :after,maka menjadi

.header:after {isi css;}


#note:
-bukan diganti/tapi ditambahkan!
-Sintask bisa berupa awalan .'titik' atau # 'pagar'
tergantung dari HTML yang akan digunakan ID atau class.
ID = div id
class= div class

mengenai ID dan class,bisa baca di blog teman saya Z-ept.blogspot.com










:First-line
CSS ini berfungsi untuk menambah style khusus untuk baris pertama pada teks.
Bila sobat perhatikan contoh dibawah ini,Baris pertama pada text berwana merah dan text huruf besar semua.kenapa?karena pada css p.css1:first-line saya tambahkan css color:#ff0000 (warna merah) dan small caps(huruf kapital).tapi tidak hanya sebatas itu,kita juga bisa saja memasukan background,text shadow,font-size ataupun border didalam css :first-line,tapi hanya untuk baris pertama penerapanya.tergantung kemauan dan kreatifitas kamu :)

Contoh:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS
p.css1:first-line
{
color:#ff0000;
font-variant:small-caps;
}

HTML
<p class='css1'>Isi text</p>












:first-letter
Seperti nama'a sendiri,Surat/Kata pertama,fungsinya untuk membuat Drop-cap text atau membuat Style pada Huruf pertama di suatu paragraf.CSS inilah yang seringkali digunakan untuk keperluan Tipografi yang bergaya Magazine.

Coba sobat perhatikan contoh dibawah ini,Pada huruf pertama 'L' kenapa text'a berwarna merah dan ukuran text'a besar?
sama sperti tadi,hanya saja saya menambahkan font-size:50px agar ukuran text lebih besar.dan inti'a css:first letter hanya berlaku untuk huruf pertama dalam 1 paragraf.

Contoh:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS
p.css2:first-letter
{
color:#ff0000;
font-size:50px;
}

HTML
<p class='css2'>Isi text</p>


Untuk Contoh lainya kamu bisa lihat langsung di template terbaru saya :
-sora no otoshimono
-shinobu oshinom
-green minimalist
-fairy tail.







:First-line dan:first-letter
Jika ingin menggabungkan 2 fungsi,kamu tinggal memasukan nama css yang sama agar berfungsi pada suatu paragraf tersebut.
Maka hasilnya bisa dilihat pada contoh dibawah ini.


Contoh:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

CSS
p.css3:first-letter
{
color:#ff0000;
font-size:50px;
}
p.css3:first-line
{
color:#ff0000;
font-variant:small-caps;
}


HTML
<p class='css3'>Isi text</p>













:before
CSS ini fungsinya digunakan untuk memasukkan beberapa konten CSS sebelum konten dari elemen utama.
CSS ini pula sekarang sedang pupuler dikalangan web designer yang tergila" dengan CSS3 karena fungsinya untuk menambahkan elemen CSS yang terpisah dengan elemen pertama,jadi penggunakan css ini tidak perlu menambahkan kode html baru,cukup menyamakan nama css dengan nama html yang sudah ada.untuk lebih jelasnya ,pertama saya ambil contoh kotak untuk elemen pertama dari 30 trik menarik yang sudah saya posting sebelumnya.


Dibawah ini adalah css kotak biasa.

Kotak

HTML
<div class='kotak1'>kotak</p>

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

Tapi setelah saya menambahkan css .kotak1:before

CSS
.kotak1:before
{
content:"";
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background:
#00C4FD;
width: 80px;
height: 80px;
text-align: center;
position: absolute;
margin-left: 145px;
border: 7px solid
white;
margin-top: -25px;
}
Hasilnya menjadi seperti dibawah ini.

Kotak


kenapa bisa ada lingkaran di sebelah kotaknya? itu karena saya menambahkan beberapa lagi css pada .kotak1:before dengan panjang dan lebar 80 px,border radius,dan border/garis pinggir sebesar 7px.

#Note: menambahkan .kotak1:before{ bukan berati mengganti/menimpa css .kotak1{ (css utama)
#kalau CSS utama tidak ada,maka CSS .kotak:before tidak akan muncul.

dan kenapa di CSS itu saya menambahkan position absolute?karena jika tidak elemen css'a akan berada didalam kotak tersebut,jadi css position:absolute lah yang berfungsi agar elemen pseudo :before posisinya menjadi tidak terpaku/tergantung lagi pada css.kotak1(element utama)untuk posisinya bisa menggunakan margin atau dengan css posisi top,bottom,left,right.

jika saya tidak menggunakan posisi absolute,maka hasilnya akan menjadi seperti dibawah ini:

Kotak

Element css pseudo :before akan fix didalam elemen kotak tesebut.






:after
CSS ini fungsinya sama saja dengan :before,fungsinya digunakan untuk memasukkan beberapa konten CSS setelah konten dari elemen utama.

Teorinya,kalau yang :before posisinya ada diatas elemen utama,sedangkan posisi :after ada dibawah elemen utama.

Urutan:
1. :before
2. main element
3. :after


CSS
namacss:after {









:before dan :after
Lalu apakah kedua fungsi css ini bisa digunakan bersamaan pada suatu element?tentu saja bisa,yang perlu kamu lakukan hanya menyamakan class name html yang akan dijadikan element utama.

Misalkan tadi saya mempunyai kotak 1

Kotak

Lalu saya tambahkan css .kotak1:after dan hasilnya menjadi seperti dibawah ini:


Kotak



menggunakan css pseudo after dan before bukan hanya sekedar buat element bulat dan kotak loh?selai kita bisa menambahkan border dan background,kita juga dapa menggantinya dengan gambar,cara'a menambahkan url pada background,dan sesuaikan dengan ukurannya.dan juga apakah sobat perhatikan template" saya seperti green minimlist dan fairy tail?kenapa pada posting style'a bisa seperti itu?rahasianya saya menggunakan css ini dengan menambahkan Segitiga diatas posting,dan mengatur'a sehinggan terliaht unik.segitiga'a darimana? ada di postingan saya 30 trik menarik css 3



Nah,segini dulu tutorial dasar" CSS tingkat menengah dari saya~
semoga bermanfaat,dan saya harapkan anda jangan cuma baca,copy paste lalu dicoba,tapi pahami fungsi"nya! agar mudah dipahami oleh diri kalian sendiri,dan tidak tergantung pada saya truz nanya ini itu.Selamat belajar :)







Rabu, 30 Mei 2012

Fairy Tail Blogger Template


Apa kabar sobat?akhirnya saya posting juga yang gambar'a cowo,masa gadis trus?wkwkwk
template kali ini tema'a anime fairy tail,tapi design'a saya buat simple dan bersih tidak menggunakan shadow.pada template ini saya menambahkan fitur Slideshow jmpress dengan Jquery yang saya temukan dari codrops.tapi sudah saya edit dan modifikasi jquery,css dan HTML'a.kalau aslinya ukuran slide besar,dan text dengan gambar terpisah.

Di template ini sudah saya buat background full dan text ada diatas gambar,sehingga mempunyai style yang sama dengan posting.kenapa saya menggunakan fitur ini?karena menurut saya effect transisi'a menarik dan pergerakan'a halus.sebenar'a saya jg sudah menemukan yang versi 100% css,tapi karena masih kaku dan agak berat,jd saya pikir pakai jquery saja~

lalu untuk menubar'a sendiri saya buat 2 bagian yang ada diatas slide dan dibawah slide.kenapa saya buat begitu?supaya design'a beda dari pada yang lain.aneh bukan?itulah saya~xD


-Preview-




Untuk pengaturan menu: Buka blogger=>templates=>Edit HTML lalu cari HTML seperti dibawah ini,lalu ganti tanda pagar '#' dengan URL link yang kamu inginkan.

Pengaturan Menu 1


<div id='nav'>
<ul><!--menu1 -->
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Guestbook</a></li>
</ul>
</div>


Pengaturan Menu 2
<div id='nav'>
<ul><!--menu2 -->
<li><a href='#'>Exchange link</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Email</a></li>
</ul>
</div>


Pengaturan Slide


Untuk pengaturan slide,kamu bisa mengganti judul deskripsi dan gambar background

perhatikan kode HTML dibawah ini


<section class='jms-slideshow' id='jms-slideshow'>

<div class='step' data-color='color-2'>
<div class='jms-content'>
<h3>Fairy tail.</h3><!--judul -->
<p>From fairest creatures we desire increase, that thereby beauty&#39;s rose might never die</p><!--deskripsi -->
</div><img src='http://1.bp.blogspot.com/-cUTj3II-RLU/T8VwP3NsP3I/AAAAAAAACFk/LubIeKeC73c/s1600/Konachan.jpg'/><!--background -->
</div>

<div class='step' data-color='color-3' data-rotate-x='80' data-y='900'>
<div class='jms-content'>
<h3>Lucy</h3><!--judul -->
<p>But as the riper should by time decease, his tender heir might bear his memory</p><!--deskripsi -->
</div>
<img src='http://3.bp.blogspot.com/-QEaahlh_3Is/T8X5iJvn8KI/AAAAAAAACF4/jJWyLGD5O0c/s1600/Untitled-1.jpg'/>
</div><!--background -->

<div class='step' data-color='color-4' data-rotate='170' data-x='-100' data-z='1500'>
<div class='jms-content'>
<h3>Natsu</h3><!--judul -->
<p>Within thine own bud buriest thy content and, tender churl, makest waste in niggarding</p><!--deskripsi -->
</div>
<img src='http://2.bp.blogspot.com/--CGd44RWfoo/T8X78syIpHI/AAAAAAAACGA/qk7wPwKREMY/s1600/Untitled-1.jpg'/>
</div><!--background -->

<div class='step' data-color='color-5' data-x='3000'>
<div class='jms-content'>
<h3>Erza Scarlet</h3><!--judul -->
<p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p><!--deskripsi -->
</div>
<img src='http://4.bp.blogspot.com/-JYz7PVA8ak0/T8X9bwECMtI/AAAAAAAACGI/GRneOuwP1ck/s1600/Untitled-1.jpg'/>
</div><!--background -->

<div class='step' data-color='color-1' data-rotate-y='45' data-x='4500' data-z='1000'>
<div class='jms-content'>
<h3>Happy</h3><!--judul -->
<p>Thou that art now the world&#39;s fresh ornament and only herald to the gaudy spring</p><!--deskripsi -->
</div>
<img src='http://2.bp.blogspot.com/-FcU2OCnIvUI/T8YAXLnzZSI/AAAAAAAACGU/46J9OtzWliw/s1600/Untitled-1.jpg'/>
</div><!--background -->

</section>


saya sudah menandai tiap html'a sperti
<!--judul -->  warna merah
<!--Deskripsi --> warna orange
<!--background --> warna biru

kamu tinggal mengganti judul dan deskripsi slide'a.
Untuk background'a sendiri,kamu tinggal mengganti url gambar seperti yang ada diatas dengan gambar yang kamu inginkan.
Ukuran gambar tepat'a 602 × 262










Simple bukan?bila tertarik silakan dicoba~
Arigatou gozaimasu minna-san~
Selamat mencoba,semoga bermanfaat :)

Senin, 28 Mei 2012

Counter Strike - Global Offensive


Publisher: Valve Corporation
Developer: Valve Corporation, Hidden Path Entertainment
Release Date: Mar 31, 2012
Genre: First Person Shooter
Platforms: Windows,  Mac OS X,  Xbox 360,  PlayStation 3

Counter-Strike: Global Offensive (CS: GO) is an online first-person shooter based game currently in development by Valve Corporation and Hidden Path Entertainment, who also co-developed Counter-Strike: Source. It is the fourth game in the Counter-Strike franchise, excluding Counter-Strike: Neo and Counter-Strike: Online. Counter-Strike: Global Offensive expands upon the team-based action gameplay that it pioneered with Half-Life: Counter-Strike. CS: GO features new maps, characters, and weapons, and delivers updated versions of the classic CS content. In addition, CS: GO introduces new gameplay modes, matchmaking, leader boards, and more.

Counter-Strike: Global Offensive 2012 - Like previous games in the series, Global Offensive is an objective based multiplayer first person shooter. Each player joins either the Terrorist or Counter-Terrorist team and attempts to complete objectives or eliminate the enemy team. For example, in demolition maps, often abbreviated "de", the terrorist team is given an explosive to plant at a designated location. The Counter-Terrorists must defend the location until time runs out and if the bomb is planted, defuse it. Global Offensive is planned to launch with demolition, hostage rescue, and a new game mode called arsenal. Arsenal is based on a popular mod for both Counter Strike and Counter Strike: Source called gun game, and made in collaboration with the creators of the mod.

Global Offensive, like previous installments, operates in short rounds that end when all players on one side are dead or an objective is completed. Once a player dies they must wait until the round ends to respawn in most game modes. Players purchase weapons and equipment with money awarded based on their performance. Completing objectives or killing enemies earns the player money while negative actions, like killing a teammate, takes money away from the player. In addition, when a round ends all players receive some amount of money, with players on the winning team receiving substantially more. Global Offensive adds new weapons and equipment not seen in previous installments, most notably the molotov cocktail which temporarily covers a small area in fire, making it impossible to pass through without taking significant damage.

Screenshots:








System Requirements:
- OS: Windows 7 / Vista / XP
- CPU: 3.0 GHz P4, Dual Core 2.0 (or higher) or AMD64X2 (or higher)
- RAM: 1GB
- HDD: 6 GB of Space
- VGA: ATI Radeon X800 or higher with 128 MB VRAM or more

Download:

http://adf.ly/8VGPh
Password: szone.vn
Instal:
1.Install game then Install VMware Workstation v8.0.1
2. Run VMware, in the "File" menu - "Open" to select "Open image format for virtual machines" and import the folder Image\CSGOBeta.ovf.
3. Start the game with a shortcut on the desktop virtual machine Semoga Bermanfaat! Salam TYZ!

Sabtu, 26 Mei 2012

Green Minimalist Blogger Templates

Lanjut sob~ saya kembangkan lagi nih template Shinobu oshino.design'a saya buat dengan CSS3 Pseudo sehingga agak sederhana dari template sebelumnya da tambah abstrak juga.yahh,namanya juga template aneh tapi unik,kalau tidak unik,bukan teemplate johanes nama'a~xD




-Preview-



-Pengaturan menu

Buka blogger=>templates=>edit HTML lalu cari HTML seperti dibawah ini,lalu ganti tanda pagar '#' dengan URL link yang kamu inginkan.



<div id='nav'>
<ul>
<li><a href='http://#'>Home</a></li>
<li><a href='http://#'>About</a></li>
<li><a href='http://#'>Contact</a></li>
<li><a href='http://#'>Guestbook</a></li>
<li><a href='http://#'>Exchange link</a></li>
<li><a href='http://#'>Sitemap</a></li>
</ul>
</div>













Selamat mencoba,semoga bermanfaat :)

Jumat, 25 Mei 2012

Splash Effects dengan CSS3 dan Curtain opening dengan Jquery



Splash Effects dengan CSS3 dan Curtain opening dengan Jquery.namanya panjang juga ya?ahh,karena ini adalah hasil experimen saya sendiri dengan menggabungkan dua trik yang fungsinya berbeda.
pertama Untuk text effect'a adalah trik lama yang saya dapat dari Splash & Coming Soon Page Effects with CSS3(Codrops)(hanya html dan css3) dan Tombol close serta work animasinya menggunakan Jquery animated Curtain


Seperti yang kalian tahu,Jquery animated itu fungsinya membuat tirai buka tutup pada halaman blog,tapi yang saya ambil hanya bagian tombol dan script yang sudah saya edit sendiri.

Trik ini sudah saya terapkan pada template terbaru saya : Shinobu Oshino

Untuk menggunakan Trik ini,selalu back-up template kamu agar tidak terjadi sesuatu yang diinginkan,karena ada kemungkinan kamu akan menemui beberapa problem seperti:
-tombol open tidak dapat di klik.

Kenapa tidak bisa diklik?
Ada kemungkinan Jquery tidak aktif karena:
-ada jquery lain yang sama.
-ada js lain yang bentrok dengan jquery curtain.
-widget" external yang menggunakan Js.

Saya sendiri sebenarnya masih bingung,karena beberapa blog yang menggunakan template Shinobu oshino yang menggunakan JSplash effect ada yang tombolnya bisa di klik dan ada yang tidak.

Semula saya pikir itu karena masalah versi browser ataupun koneksi internet karena pemanggilan Jquery blum di load oleh browser.tapi setelah saya cek sendiri ternyata yang jadi masalah adalah jquery dibawah ini:


https://sites.google.com/site/djogzs/js/jquery.easing.1.3.js

Saya mengecek dengan developers tools goggle chrome dan ternyata di beberapa blog ada yang bisa dan ada yang tidak,jadi menurut saya coba kamu download jquery diatas,dan upload di hostingan kamu.


hmm,ok deh langsung saja yang mau coba~

buka blogger =>template=>edit HTML

lalu Copy paste CSS diatas kode ]]></b:skin>

Setelah itu copy paste HTML dibawah kode </head>
terakhir,copy paste JQUERY di atas kode </head>

Atau...

copy paste di atas kode </body>

-Preview pada template shinobu oshino-

Untuk mengganti Url blog pada splash screenya,kamu cukup mengganti url blog ini.
http://shinobu-oshino-blogger-template.blogspot.com
*buka blogger=>template=>edit HTML


CSS
.sp-container {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: fixed;
display:none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
background: radial-gradient(rgba(0, 0, 0, 03.), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
-webkit-animation-name: tes;
-webkit-animation-duration: 1s;
-moz-animation-name: tes;
-moz-animation-duration: 1s;

}
.sp-content {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-5 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation: blurFadeIn 3s ease-in 8s backwards;
-moz-animation: blurFadeIn 1s ease-in 8s backwards;
-ms-animation: blurFadeIn 3s ease-in 8s backwards;
animation: blurFadeIn 3s ease-in 8s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.sp-container h2.frame-5 span:nth-child(3) {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #85373b;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px double rgba(255, 255, 255, 1 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.sp-circle-link a{color:#fff;}
.sp-link {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
bottom: 190px;
margin: auto;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
font-size: 30px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-link a{color:#fff;}

.sp-circle-link:hover {
background: #85373b;/* By Johanes Dj - http://Djogzs.blogspot.com*/
color: #fff;/* By Johanes Dj - http://Djogzs.blogspot.com*/
}
/* By Johanes Dj - http://Djogzs.blogspot.com*/
@-webkit-keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

/* By Johanes Dj - http://Djogzs.blogspot.com*/
@-moz-keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

@keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}
@-webkit-keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
@keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}






HTML


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.sp-container {display:block}
</style>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sp-container'>
<div class='sp-content'>
<h2 class='frame-1'>Loading</h2>
<h2 class='frame-2'>3</h2>
<h2 class='frame-3'>2</h2>
<h2 class='frame-4'>1</h2>
<h2 class='frame-5'>
<span>Welcome </span>
<span>To </span>
<span>My blog</span>
</h2>
<a class='sp-link' href='#'>http://shinobu-oshino-blogger-template.blogspot.com</a>
<a class='sp-circle-link' href='#'>Open</a>
</div>
</div></b:if>







Jquery

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script src='https://sites.google.com/site/djogzs/js/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$curtainopen = false;
$(&quot;.sp-circle-link&quot;).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>



#style2
-Comming soon~



#style3
-Comming soon~


Untuk trik Jquery curtain sebenarnya dulu sudah pernah saya posting,tapi karena triknya masih sama dengan yang asli,jadi saya hapus,karena saya ingin membuat seuatu yang berbeda dengan style saya sendiri,mungkin kaliaan masih penasaran dengan tombol open close yang saya buat,tapi munngkin nanti pasti saya share trik'a~xD dimohon kesabaranya :)

Arigatou gozaimasu~
semoga bermanfaat :)

Kamis, 24 Mei 2012

Cloud Animasi dengan CSS3

Cloud Animasi dengan CSS3

Hai sobat kali ini saya mau sharing trik menarik lagi nih,namanya Cloud animasi seperti yang saya pasang diblog saya.tapi untuk trik ini,saya modifikasi sendiri css dan htmlnya menjadi 2 versi,yang pertama awan'a berwarna putih menggunakan CSS3 css pseudo pada background.dan yang kedua awan akatsuki yang hanya diberi background gambar awan akatsuki yang saya buat sendiri,cukup menarik bukan?


Tapi sebelum menggunakan trik ini saya ingatkan untuk:

-Membackup terlebih dahulu blog kamu agar tidak terjadi sesuatu yang diinginkan.

-mengetahui bahwa menggunakan trik ini harus dapat mengatur posisi awanya sendiri,karena ada kemungkinan saat kamu menggunakan trik ini,elemen yang dibelakangnya akan tertutupi.

Contoh kemungkinan problem:
-Header tertutup oleh awan ini hingga header tidak bisa berfungsi untuk diklik.

-Bila kamu menggunakan menubar pada blog kamu maka ada kemungkinan tertutupi oleh awan ini.

Solusi:
-Gunakan/ganti nilai z-index menjadi lebih rendah/tinggi(-99999999 s/d 99999999) pada Css #awan1 atau #akatsuki

-Gunakan Margin-top/bottom untuk mengatur posisi.(default yang saya atur 0px*posisi paling atas*)


Jika ada yang belum mengerti bisa tanyakan pada saya :)

untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML

lalu letakan CSS di atas kode ]]></b:skin>

Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <body>




1. Awan putih



CSS

#awan1 {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.awan1 {
width: 200px; height: 60px;
background: #ffffff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.awan1:before, .awan1:after {
content: '';
position: absolute;
background: #ffffff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.awan1:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.putih1 {
-webkit-animation: moveclouds1 15s linear infinite;
-moz-animation: moveclouds1 15s linear infinite;
-o-animation: moveclouds1 15s linear infinite;
}
.putih2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds1 25s linear infinite;
-moz-animation: moveclouds1 25s linear infinite;
-o-animation: moveclouds1 25s linear infinite;
}
.putih3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
.putih4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds1 18s linear infinite;
-moz-animation: moveclouds1 18s linear infinite;
-o-animation: moveclouds1 18s linear infinite;
}
.putih5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
@-webkit-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}




HTML

<div id='awan1'>
<div class='awan1 putih1'/>
<div class='awan1 putih2'/>
<div class='awan1 putih3'/>
<div class='awan1 putih4'/>
<div class='awan1 putih5'/></div>




2. Awan Akatsuki




CSS

#akatsuki{position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.akatsuki {
width: 200px; height: 138px;
background:url("http://4.bp.blogspot.com/-fyOVfdo1pFQ/T74QloE-dWI/AAAAAAAAB_E/RNYaqEDBAPY/s1600/Untitled-1.png") no-repeat top center;
position: relative;
}

.awanmerah1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.awanmerah2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds2 25s linear infinite;
-moz-animation: moveclouds2 25s linear infinite;
-o-animation: moveclouds2 25s linear infinite;
}
.awanmerah3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
.awanmerah4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds2 18s linear infinite;
-moz-animation: moveclouds2 18s linear infinite;
-o-animation: moveclouds2 18s linear infinite;
}
.awanmerah5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
@-webkit-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}




HTML


<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>










Selamat mencoba dan semoga bermanfaat.
Oia,bila ada yang mau mengcopas trik ini,saya ingatkan untuk Peraturan blog saya! sertakan sumbernya!!
saya benci dengan PLAGIAT!!!!!! MUST DIEEEEEE!
baca Kebijakan disini... thx





Tombol Menu Unik dengan CSS3 Animasi

Tombol Menu Unik dengan CSS3 Animasi

Mencari sesuatu yang baru memang sulit.dibutuhkan kerja keras untuk mendapatkan sesuatu yang baru.inspirasipun tidak akan datang jika kita hanya berdiam diri,dan akhirinya setelah keliling" dunia browsing browsing dan browsing.akhirnya,kepala gw pusing @___@"
wakakaka,memang bikin galau trik yang satu ini.sebelum'a saya cuma iseng" dengan CSS3 keyframe yang saya buat n modif sendiri di header blog saya,tapi karena kepikiran yang lain juga,banyak messages gajelas di fb yang minta share" cara'a,yweslah saya share deh.tapi trik ini agak beda dengan yang ada di header saya,beda'a CSS ini saya terapkan untuk tombol readmore.tapi sebenarnya bisa juga untuk tombol menu sendiri.karena kalau saya nyebarin masang animasi sebesar itu yang seperti blog saya,yang ada saya malah nyebarin dosa memberatkan blog kamu deh.wakwkawkawk.tapi untuk trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan untuk upgrade browser kamu ke versi yang terbaru,dan jangan sekali" menggunakan Internet Explore,karena IE tidak 100% mendukung CSS3 animasi.ok lansung saja~
Sebelumya saya ingatkan dahulu untuk,BACKUP TEMPLATE ANDA sebelum menggunakan trik ini ==v
#kerusakan template bukan tanggung jawab saya.


Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100% mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan dicoba"~xD


Trik dibawah ini,adalah trik untuk tombol Readmore kamu.
saya akan jelaskan untuk Contoh Style 1 *contoh'a ada dibawah*

Trik 1

Pertama buka blogger=>rancangan=>Edit HTML,copy paste CSS dibawah ini diatas kode [
]]></b:skin>

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

Setelah itu simpan,dan centang expand widget templates,lalu cari kode html yang seperti ini/ yang mirip" seperti dibawah ini(kode HTML dibawah ini berasal dari template guilty crown)

#note.ada kemungkinan saat kamu mencari kode html dibawah ini,kamu akan menemukan 2 kode yang sama persis.
#solusi:dicopas dua"a

<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More....</a>
</span>

lalu hapus semua kode diatas,kemudian diganti Dengan kode html dibawah ini

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Setelah Itu simpan dan lihat hasilnya~

-Contoh uji coba di template guilty crown-

Trik 2

CSS'a sama dengan cara diatas,beda'a cara yang dibawah ini kita tinggal mengganti hanya mengganti kode html
<a expr:href='data:post.url'>Read More...</a>
dengan
<a href="http://alamatlink">namalink</a>
Tujuanya agar Url linknya bisa kita sesuaikan dengan alamat link yang kita inginkan.ganti http://alamatlink dengan url link kamu.
(berlaku untuk semua style)

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a href="http://alamatlink">namalink</a></div></div>
kamu tinggal ganti alamat dan nama linknya.bisa di letakan dimana saja(kode HTTML ada tempatnya)
diantara kode body
#buat yang ga ngerti (<body> isi html </body>)
atau bisa juga diletakan di (rancangan=> add a gadget=>HTML/JavaScript=> copy paste lalu simpan.


Tambahan: Untuk mengganti warna,kamu tinggal ganti kode warna hexa dan rgbanya.
misal

Warna merah:
Hexa :#ff0000

Rgba color: rgba(255,0,0,0.9);

Info lanjut'a ada dipostingan saya

-Tips design menggunakan CSS3

-Tips memilih warna design blog





Style1

DEMO

CSS
.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;

}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

HTML
<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Style 2


CSS
.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}

.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}

.circlewrapper3 {float:right;}

.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}

.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}


.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}

.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}

.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}


@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}


HTML
<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='data:post.url'>Read More</a>
</div>


Style3




CSS

span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
height: 4px; width: 4px;
background: #fff;
display: inline-block;
margin: 2px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/
.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}
.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}
.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;
border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/
background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}





HTML

<div class='loading'>
<p class='tombol-readmore'><a expr:href='data:post.url'>Readmore</a></p>
<span class='l-1'/>
<span class='l-2'/>
<span class='l-3'/>
<span class='l-4'/>
<span class='l-5'/>
<span class='l-6'/></div>





Style4



CSS
.menureadmore1 {
clear: both;
margin:auto;
background: black;
font-size: 15px;
color: #32BDE8;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px solid
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;}

.menureadmore1::before {
content: "";
position: absolute;
width: 125px;
margin: auto;
height: 125px;
border: 8px solid
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -30px;
margin-left: -30px;
}

.animasimenureadmore1 {
position: absolute;
width: 105px;
margin: auto;
height: 105px;
border: 8px dotted rgba(50, 189, 232, 0.8 );
-webkit-box-shadow: 0 1px 4px
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -100px;
margin-left: -20px;
-moz-animation:spin5Pulse 2s infinite linear;
-webkit-animation:spin5Pulse 2s infinite linear;
}

@-moz-keyframes spin5Pulse {
0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -moz-transform:rotate(-360deg); opacity:0;}
}
@-webkit-keyframes spin5Pulse {
0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -webkit-transform:rotate(-360deg); opacity:0;}
}



HTML

<div class='menureadmore1'>
<a expr:href='data:post.url'>Readmore</a>
<div class='animasimenureadmore1'/>
</div>















Rabu, 23 Mei 2012

Shinobu Oshino Blogger template

 Shinobu Oshino Blogger template
Shinobu Oshino Blogger template,sebenarnya ini template awalnya buat blog pribadi saya,yang artikel'a mengenai anime dan yang berbau japan.sudah di design sekeren mungkin tambah ini tambah itu.tapi karena udah maless duluan karena nanti pastinya ga bakal keurus.alhasil setelah template'a sudah rapih.langsung dishare aja deh~xD


Tema template kali ini adalah Shinobu Oshino karakter yang saya ambil dari anime Bakemonogatari.untuk cerita anime'a,cari di google ya :p.Template ini adalah hasil modifikasi dari template uchiha Itachi=> Sora no otoshimono yang sudah saya tambahkan beberapa fitur dalam template ini,diantaranya:

-Breadcrumb
-Autoreadmore.
-Simple Vertikal menu.
-Threaded Comment. //Fungsi reply//
-Dan Splash screen Text effect dengan CSS3 keyframe dan jquery. //Hanya di halaman Home page//



-Preview-


Untuk Splash screenya sendiri,adalah hasil modifikasi saya dengan menggabungkan dua trik yang fungsinya berbeda.
pertama Untuk text effect'a adalah trik lama yang saya dapat dari Splash & Coming Soon Page Effects with CSS3(Codrops)(hanya html dan css3) dan Tombol close serta work animasinya menggunakan Jquery animated Curtain

Seperti yang kalian tahu,Jquery animated itu fungsinya membuat tirai buka tutup pada halaman blog,tapi yang saya ambil hanya bagian tombol dan script yang sudah saya edit sendiri.


-Preview-

Untuk mengganti Url blog pada splash screenya,kamu cukup mengganti url blog ini.
http://shinobu-oshino-blogger-template.blogspot.com
*buka blogger=>template=>edit HTML

-Pengaturan menu

Buka blogger => edit HTML => lalu cari kode html seperti dibawah ini.

<div id='nav'>
<ul>
<li><a href='http://#'>Home</a></li>
<li><a href='http://#'>About</a></li>
<li><a href='http://#'>Contact</a></li>
<li><a href='http://#'>Guestbook</a></li>
<li><a href='http://#'>Exchange link</a></li>
<li><a href='http://#'>Sitemap</a></li>
</ul>
</div>

lalu ganti tanda pagar '#' Dengan Url web yang kamu inginkan dan ganti pula nama link'a.








Link download update!!!
-post tampa gambar(fixed) (27-05-2012)
-pagenavi(fixed)
-template tanpa splash effect update! = jd simple~

bagi yang sudah menggunakan template ini,silakan download dan upload lagi ke template kamu,terima kasih :)

Menarik bukan?Untuk triknya membuat splash screennya,nanti saya share kq =___=v
mohon kesabaranya,karena saya msh sibuk kuliah :)

#note:pengeditan template itu diluar tanggung jawab saya ==v
Selamat mencoba,Arigatou Gozaimasu :)
Semoga bermanfaat~xD

Jumat, 18 Mei 2012

Sora no otoshimono Blogger template

Sora no otoshimono Blogger template

Sora no otoshimono,Anime kali ini adalah salah satu anime favorite saya,terutama ikaros *.*.hwahhh,jangan anime'a deh dibahas,yg penting gambar'a udah disensor~xDD.


Nah,template kali ini adalah hasil pengembangan template uchiha itachi dan juga blog saya yang lama blog akb.

beberapa konten yang rusak sudah saya perbaiki,dan pada bagian posting saya rubah style'a dengan tambahan auto readmore,karena pd template sebelumnya saya tidak pasang.lalu pada halaman posting,saya tambahkan feature breadcrumbe.

dan yang tadi'a sidebar tidak ada,sudah saya kembalikan menjadi normal,karena template itachi sebenar'a bertujuan untuk blog komik manga,karena itu posting'a sangat lebar.untuk design'a,saya ga buat aneh",simple aja deh, =___=v





-Screenshot-



-Pengaturan menu

Buka blogger => edit HTML => lalu cari kode html seperti dibawah ini.



<div id='nav'>
<ul>
<li><a href='http://#'>Home</a></li>
<li><a href='http://#'>About</a></li>
<li><a href='http://#'>Contact</a></li>
<li><a href='http://#'>Guestbook</a></li>
<li><a href='http://#'>Exchange link</a></li>
<li><a href='http://#'>Sitemap</a></li>
<li><a href='http://#'>Email</a></li>
<li><a href='http://#'>Rss</a></li>
</ul>
</div>

lalu ganti tanda pagar '#' Dengan Url web yang kamu inginkan dan ganti pula nama link'a.








huftt,akhirnya selesai juga project Anime season ke 7 ini.


Selamat mencoba,Arigatou Gozaimasu :)
Semoga bermanfaat~xD








Rabu, 16 Mei 2012

Single Submenu dengan CSS3

Single Submenu dengan CSS3

apa kabar sobat,udah lama nih saya ga share trik css lagi,kali ini saya tadinya cuma iseng" otak-atik box css3,tapi akhirnya jadi begini deh,lalu saya buat saja jadi menu.menu ini menggunaan hover effect transform.jadi ketika kita hover/arahkan kursor kemenu,maka akan menampilkan beberapa menu lagi.
karena itu saya sebut saja nama'a sub menu.menu'a saya buat 2 style.yaitu dengan 4 menu dan 8 menu.tadi'a sih pengen nambahin lagi,tapi karena sudah agak lelah,jadi saya posting saja sekarang,mungin nanti saya modif lagi trik sub menu ini.

untuk contoh'a,kalian bisa lihat sendiri dibawah ini.direkomendasikan untuk menggunakan browser versi terbaru agar hasil'a maksimal.trik ini tidakberat kq,karena ini bukan css3 animation keyframe==v

bila kalian mau mencoba,silakan copy paste saja CSS dan HTML dibawah ini.

Css'a ditaruh di atas kode ]]></b:skin> .sedangkan untuk HTMl'a diantara <body> isi HTML </body>.
atau bisa juga ke layout=>add a gadget=> HTML/javascript.

-4 menu-


-HTML
<div class="ringMenu">
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
</ul></div>


-CSS

.ringMenu {
width: 100px;
margin:auto;
}

.ringMenu:hover {}

.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}




-8 menu-




-HTML

<div class="ringMenu">
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
<li class="topright"><a href="#">topright</a></li>
<li class="topleft"><a href="#">topleft</a></li>
<li class="bottomright"><a href="#">bottomright</a></li>
<li class="bottomleft"><a href="#">bottomleft</a></li>
</ul></div>



-CSS


.ringMenu {
width: 100px;
margin:auto;
}

.ringMenu:hover {}

.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}

.ringMenu ul li.topright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
right: -102px;
}

.ringMenu ul li.topleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
left: -102px;
}

.ringMenu ul li.bottomright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
right: -102px;
}

.ringMenu ul li.bottomleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
left: -102px;
}




-Style 1 4menu-





HTML

<div class='ringMenusatelit'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>




CSS

.ringMenusatelit {
width: 100px;
margin:auto;
}

.ringMenusatelit:hover {}

.ringMenusatelit ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenusatelit ul a {
color: white;
}
.ringMenusatelit ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenusatelit ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenusatelit ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenusatelit ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenusatelit:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenusatelit ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 0px;
left: -202px;
}
.ringMenusatelit ul li.top a {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;}

.ringMenusatelit ul li.left a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;}

.ringMenusatelit ul li.bottom a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
}

.ringMenusatelit ul li.right a {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
}
.ringMenusatelit ul li.main a {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenusatelit ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -0px;
left: -101px;
}
.ringMenusatelit ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenusatelit ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: 202px;
}





-Style 2 4menu-






-HTML-
<div class='ringMenubulat'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>





-CSS-


.ringMenubulat {
width: 100px;
margin:auto;
}

.ringMenubulat:hover {}

.ringMenubulat ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat ul a {
color: #000;
}
.ringMenubulat ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenubulat ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 0px;
left: -202px;
}
.ringMenubulat ul li.top a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.left a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.bottom a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.ringMenubulat ul li.right a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenubulat ul li.main a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -0px;
left: -101px;
}
.ringMenubulat ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenubulat ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: 202px;
}






-Style 3 4menu-


HTML
<div class='ringMenubulat1'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>


CSS




.ringMenubulat1 {
width: 100px;
margin:auto;
}

.ringMenubulat1:hover {}

.ringMenubulat1 ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat1 ul a {
color: #000;
}
.ringMenubulat1 ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat1 ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenubulat1 ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat1 ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat1:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat1 ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 350px;
left: 120px;
}
.ringMenubulat1 ul li.top a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.left a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.bottom a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.ringMenubulat1 ul li.right a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenubulat1 ul li.main a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
top: 270px;
left: 90px;
}
.ringMenubulat1 ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 90px;
right: -30px;
}
.ringMenubulat1 ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 180px;
left: 60px;
}





-Style 4 4menu-





-HTML-
<div class='ringMenubulat2'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>


-CSS-




.ringMenubulat2 {
width: 100px;
margin:auto;
}

.ringMenubulat2 ul li a:hover {}

.ringMenubulat2 ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat2 ul a {
color: #000;
}
.ringMenubulat2 ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat2 ul li a {
display: block;
width: 100px;
height: 30px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 30px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ringMenubulat2 ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat2 ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat2:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat2 ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 120px;
left: 2px;
}
.ringMenubulat2 ul li.top a {-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
color:#fff;}

.ringMenubulat2 ul li.left a {
color:#fff;}

.ringMenubulat2 ul li.bottom a {
color:#fff;
}

.ringMenubulat2 ul li.right a {color:#fff;-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;}

.ringMenubulat2 ul li.main a {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;color:#fff;
border-radius: 50px;}

.ringMenubulat2 ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
top: 90px;
left: 2px;
}
.ringMenubulat2 ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 30px;
left: 2px;
}
.ringMenubulat2 ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 60px;
left: 2px;
}













Untuk HTML'a sendiri,ganti tanda pagar '#' Dengan URL web yang kamu inginkan,dan ganti juga namalinknya



Bila sobat mau mengganti warna background'a,perhatikan css dibawah ini


background: #161616; = diganti kode hexa decimal'a.

.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}


Untuk mengganti warna hover effect'a,

.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}






mengenai kode warna hexa,bisa dilihat disini

mengenai kode warna rgba colour ,bisa dilihat disini










Menarik bukan?arigatou gozaimasu selamat mencoba,semoga bermanfaat :)