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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoaS8ZU8Ddh9-Pwd1BL4DZkMv0Uis7iZm2pmerlgNc_t7ImePJ7mXYBa9ZxeuGJqQCpnKBV4mlv5f2dh01-cSJ1KjGjWOUA3qyFx_Y8IyctqgdwHmlQccmBtPcWiCEKM9xfTFX320M4z2c/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

Read More

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

Read More

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.






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.





















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

Read More

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





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

Read More

Effect Asap dengan jquery

Ini dia,koleksi Jquery menarik dari saya,dengan effect asap ini,blog kamu akan tambah menarik.untuk contoh'a,kamu bisa liat di blog akatsuki atau di gayadesign mau tau cara'a?CEkidot gan n_n

kalau mau lihat contoh'a,sobat bisa lihat disini
pertama,copy paste js ini di atas kode </body> atau di bawah kode <head>

<link href='http://www.gayadesign.com/scripts/smokeeffect/css/style.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="http://www.gayadesign.com/scripts/smokeeffect/js/smokeEffect.js" type="text/javascript"></script>

<script type='text/javascript'>
SmokeEffect.imgLocation = "http://www.gayadesign.com/wp-content/themes/gdblocked/images/smoke.png";
SmokeEffect.smokeWidth = 100;
SmokeEffect.smokeHeight = 100;
</script>

lalu masukan kode html dan js ini diblog kamu

<div id="smokeSpawnPoint">
<img alt="chimney" src="http://www.gayadesign.com/wp-content/themes/gdblocked/images/chimney.png" /></div>
<script type="text/javascript">
SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12);
</script>

selesai deh,sekarang asap'a akan muncul di blog sobat...
tapi bila sobat ingin asap'a melayang di blog sobat+ menjadi tombol back to top,tinggal ditambahkan

kode ini

<a href='#' onclick='MGJS.goTop();return false;' style='display:scroll;position:fixed;bottom:0px;left:20px;'>

dan jadi'a seperti ini

<a href='#' onclick='MGJS.goTop();return false;' style='display:scroll;position:fixed;bottom:0px;left:20px;'>

<div id="smokeSpawnPoint">
<img alt="chimney" src="http://www.gayadesign.com/wp-content/themes/gdblocked/images/chimney.png" /></div>
<script type="text/javascript">
SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12);
</script></a>

selamat mencoba,dan jangan lupa tinggalkan komentar ya n_n

Read More

15 Website yang bermanfaat untuk Blog Design dan Web Design

Buat Sobat yang hoby otak-atik blog atau ngedit blog sendiri,saya punya koleksi website Design blog nih..daripada di bookmark sendiri,mending dishare buat sobat,disini,saya berikan preview website dan URL link'a.
.kamu bisa jelajahi situs tersebut,dan mencari info tentang belajar ngeblog,html,css,photoshop,design blog,dan masih banyak lagi..
Happy Surfing!!! n_n-xDD

queness

http://www.queness.com/

Webdesignerwall

http://www.webdesignerwall.com/

Sohtanaka

<

http://www.sohtanaka.com/

Tympanus

http://tympanus.net/

Deconstructioncode

http://deconstructioncode.blogspot.com/

Jurusgrafis

http://jurusgrafis.com/

Tutorialzine

http://tutorialzine.com/

Andrewsellick

http://www.andrewsellick.com/

Tutorial9

http://www.tutorial9.net/

Buildinternet

http://buildinternet.com/

9lessons

http://9lessons.blogspot.com/

Noupe

http://www.noupe.com/

Net.Tutsplus

http://net.tutsplus.com/

Designzzz

<

http://www.designzzz.com

Designbombs

http://www.designbombs.com




















Semoga bermanfaat untuk web blog kamu n_n
jangan lupa tinggalkan komentar'a ya n_n

Read More

Permasalah Pada CSS3

Untuk sobat,yang sudah bisa menggunakan CSS3,terkadang bila kita menggunakan browser tertentu,animasi itu akan berjalan sempurna,tapi terkadang juga,animasi itu gagal.
kenapa bisa begitu????
banyak pertanyaan yang datang kepada saya
-mas,kq animasinya ga jalan,cuma pindah doank gambarnya?
 =nah,itu sebenarnya permasalahan yg umum...
masalahnya cuma 1,yaitu dari browser yang kita pakai.
karena banyak browser versi lama,tidak dapat mendukung CSS3 ini




Contoh:
CSS animasi yang kita pakai adalah kode

#tes{-webkit-transition: all 0.6s ease-out;}


#tes:hover{
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
}

Seperti yang kita tahu,bahwa kode "-webkit-transition: all 0.6s ease-out;" agar efek animasinya terlihat dan kode:
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);


kode diatas adalah kode yang sangat penting,untuk menampilkan animasinya...
tetapi,kenapa animasi ini tidak berjalan?seperti yang tadi saya katakan,masalahnya dari browser yang kamu pakai...


menurut saya,browser yang mendukung animasi adalah browser google chrome,safari,dan mozilla firefox 4..pantesan pke mozilla versi lama,animasinya ga keluar =.=a...


mozilla4 saat ini,sudah dapat  mendukung css3 animation dan untuk text shadow,gradient,css font,rounded corner,juga sudah dapat didukung...



ini script css untuk menambahkan animasi

-webkit-transition: all 0.6s ease-out; =untuk browser google chrome dan safari
-moz-transition: all 0.6s ease-out; =untuk browser mozilla firefox
-o-transition: all 0.6s ease-out; =untuk browser opera

Segeralah update browser kamu ke versi terbaru agar bisa merasakan kehebatan CSS3

Read More

Gambar anime dengan IllustStudio

buat sobat yang suka gambar anime di komputer,saya punya info menarik nih untuk sobat,saya menemukan software khusus untuk gambar anime loh n_n.
IllustStudio adalah sebuah program gambar dan ilustrasi digital
, alat-alat canggih dan ITS disesuaikan interface program untuk membuat Anime Cocok untuk profesional atau untuk pemula.

cara pengoperasian'a gampang kq,untuk layout,hampir sama dengan corel draw,tapi bedanya disini ada,paint tool, Contour Line Tool,Various Brush Tools, Ruler Tools .

ini dia penjelasan'a

Paint tool
Pengguna dapat cat secara efektif dengan "Mengacu Layer Fungsi" yang menunjuk ke lapisan, seperti lapisan sketsa, dan "Folder Kliping Fungsi" - lukisan ketika bersembunyi wilayah dari daerah menunjuk.

Pengguna dapat dengan mudah naungan ilustrasi oleh daerah lukisan tertutup oleh garis berwarna dengan gradasi lembut. Sebagai hasilnya, mereka dapat menghasilkan angka dimensi.

IllustStudio ilustrasi mendukung alur kerja pengguna dengan "Pen Tool" menyadari stroke pena alam dan "Brush Tools" memungkinkan berbagai ekspresi. Dengan menggunakan "Pola Brush Tools", pengguna dapat mengekspresikan simbol dan pola-pola dengan satu stroke.

IllustStudio memiliki "Perspektif Penguasa" yang memungkinkan pengguna untuk menggambar latar belakang perspektif dan "Radial Line Penguasa" cocok untuk gambar aksi dan desain.

bila sobat ingin mencoba software ini silakan didownload,tpi lihat dulu system minimum untuk komputer kamu n_n

1)Windows XP, Windows Vista atau Windows 7 (only 32 bits, not guaranteed to work in 64 bits)

2) Intel Pentium processor atau compatible Windows XP 1.0GHz and 2.0GHz untuk Windows Vista dan Windows 7

3) 512MB RAM for Windows XP and 1.0GB for Windows Vista and Windows 7

4) 1.0GB of free space on the hard disk

5) 1024x768 screen resolution dan color depth of 16 bits

Ok dah sobat,silakan download di

http://rapidshare.com/files/380166226/IllustStudio115eng.rar

atau

http://www.mediafire.com/?fvytomoi41j

atau

http://www.systemax.jp/en/sai/  (english version) #update!!

setelah sobat download dan lalu di'instal

Pasti butuh serial number/crack karena software ini tidak gratis juga TT..TT

tapi jangan kwatir,saya sudah punya~

silakan dicopas : LT1WJ0-9P3E1A-B5BA15-33596E-86279B

Selamat mencoba,dan jangan lupa tinggalkan komentar n_n

Read More