SOFTWARE PENCIPTA MENU DENGAN MUDAH


Adalah Css Tab Deisgner. software yang memudahkan blogger untuk menciptakan sebuah tabmenu, software ini sangat ramah sekali untuk digunakan sehingga dengan mudah dan cepat kita bisa menghasilkan sebuah tabmenu yang indah nan elegan.

Software ini mempunyai 2 style menu yaitu horizontal menu dan vertical menu,


[Klik gambar untuk memperjelas]

Selain itu kita dapat melihat source code dari project yang kita buat.
Fitur keren lainnya adalah kita bisa mencocokan tampilan menu yang sudah kita buat ke 7 browser yang sudah disediakan :
1) Internet Explorer
2) Netscape
3) Opera
4) Mozilla Firefox
5) Konqueror
6) Safari
7) Camino

Download via : Mediafire | Css Tab Designer v2.0 [1.45Mb]
Learn More

MEMBUAT ANIMASI GALERI UNIK DENGAN CSS3


Setelah sekian minggu tidak update akhirnya saya dapat meluangkan waktu untuk kembali meng-update blog ini dengan posting-postingan yang sobat tunggu-tunggu (siapa yang nunggu? -_-") tentunya saya akan kembali share apa yang saya ketahui tentang keindahan css3, heuheuheu..

Pada kesempatan kali ini saya akan mengajak sobat untuk membuat Animasi Galeri dengan Css3 yang pasti unik dan menarik dilihat mata (o.o).
Fitur utama Css pada tutorial ini adalah z-index yang berfungsi untuk menempatkan suatu objek didepan ataupun dibelakang objek lainnya.

Silahkan saksikan live demonya :
hanya di http://se-avancee.blogspot.com





  • FACEBOOK
    Facebook


  • SE AVANCEE
    Se Avancee


  • TWITTER
    Twitter



/* First Css States */

ul#index_SE {
margin-top:10px;
text-align:center;
}

ul#index_SE li {
background:#ccc;
height:300px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding: 0 10px;
position:relative;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 10px #000;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#SE-Gallery1 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}

#SE-Gallery2 {
background-color:#69732B;
z-index:3;
}

#SE-Gallery3 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}

/* Hover States */

ul#index_SE li:hover {
z-index:4;
}

#SE-Gallery1:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}

#SE-Gallery2:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}

#SE-Gallery3:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}




/* Content Styling */

ul#index_SE li img {
background:#fff;
margin-top: -5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 5px #aaa;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}

h5 {
font-family: comic Sans MS;
padding-bottom: 10px;
}




<ul id="index_SE">
<li id="SE-Gallery1">
<h5>
FACEBOOK</h5>
<a href="http://facebook.com/" target="_blank"><img alt="Facebook" height="auto" src="https://lh4.googleusercontent.com/-RFxyYq_BUE0/Tqa5zp0XFvI/AAAAAAAABko/o39fosqkw3Q/s232/IpodFB.png" title="Facebook" width="auto" /></a>
</li>

<li id="SE-Gallery2">
<h5>
SE AVANCEE</h5>
<a href="http://se-avancee.blogspot.com/" target="_blank"><img alt="Se Avancee" height="auto" src="https://lh5.googleusercontent.com/-ok-U5R1v3pA/Tqa5zESyUrI/AAAAAAAABkg/wxsBkBrElJU/s232/ipodSA.png" title="Se Avancee" width="auto" /></a>
</li>

<li id="SE-Gallery3">
<h5>
TWITTER</h5>
<a href="http://twitter.com/" target="_blank"><img alt="Twitter" height="auto" src="https://lh4.googleusercontent.com/-_3zsJsBOYec/Tqa5yqYrQlI/AAAAAAAABkc/lFRj5oaSFxQ/s232/IpodTW.png" title="Twitter" width="auto" /></a>
</li>
</ul>


Catatan :

* -webkit-transform: rotate(10deg); & -moz-transform: rotate(10deg); berfungsi untuk membuat suatu objek menjadi miring atau terbalik, 10deg menunjukan nilai kemiringan 10 derajat.
* -moz-transform: scale(1.1) rotate(-8deg); & -webkit-transform: scale(1.1) rotate(-8deg); berfungsi untuk membuat suatu objek miring atau terbalik (rotate) sekaligus membesarkan suatu objek, scale atau skala 1.1 adalah nilainya.

Pertanyaan lebih lanjut silahkan salurkan pada komentar dibawah ini.

Learn More

ANIMASI 2 GAMBAR DENGAN HOVER POSITION


Kembali lagi akhirnya saya akan posting yang berkaitan dengan kategori Tutorial Blog dan Css untuk membuat Animasi 2 gambar dengan hover position, postingan ini adalah sebuah request dari salah seorang sahabat saya yaitu Rahman Al Firous pemilik blog Mbah Qopet doi request postingan ini karena terinspirasi dari logo blog Se Avancee.

Jadi sobat yang lain tidak perlu membayangkan lagi apa yang akan saya bahas dihalaman ini karena sudah ada live demonya :D. Sebenarnya tutorial ini hanya memerlukan 1 gambar, tetapi sobat harus membuat 2 gambar tersebut menjadi 1 seperti ini :

<--- Lihat contoh 2 gambar yang saya jadikan satu.
Usahakan gambar agar sama besar dan sama rata kiri-kanan-atas-bawah, agar pada saat gambar disentuh dengan kursor (hover) sobat tidak terlalu sulit untuk mengatur posisinya.

Ok, saya akan memberikan dua demo dengan tambahan transisi -moz-transition-duration: 1s; agar gambar akan terlihat seperti berjalan.









#Putra {
background: url('URL GAMBAR') no-repeat scroll center top transparent;
height: 210px;
margin-top: -39px;
width: 240px;
}
#Putra:hover {
background: url('URL GAMBAR') no-repeat scroll center bottom transparent;
margin-top: -26px;
}



#Tenzhung {
background: url('URL GAMBAR') no-repeat scroll center top transparent;
height: 210px;
margin-top: -39px;
width: 240px;
}
#Tenzhung:hover {
background: url('URL GAMBAR') no-repeat scroll center bottom transparent;
margin-top: -26px;
-moz-transition-duration: 1s;
}



<div id="Putra">
Disini lahan kosong, silahkan sobat berkreasi sendiri sesuka hati atau boleh juga dikosongkan asal jangan dicoret-coret</div>



<div id="Tenzhung">
Disini lahan kosong, silahkan sobat berkreasi sendiri sesuka hati atau boleh juga dikosongkan asal jangan dicoret-coret</div>


Catatan :

* Ubahlah nilai margin pada css apabila posisi gambar belum pas,  karena beda ukuran gambar maka akan beda juga pengaturan nilai margin nya.
* -Moz-transition-duration: 1s berfungsi untuk memperlambat reaksi ketika disentuh kursor (hover), artinya lama durasi pada reaksinya, 1s menunjukan nilai durasi 1 second (detik).
* Ubah nilai height (tinggi) setengah dari tinggi gambarnya, misalnya gambar mempunyai tinggi 500px maka height: 250px; namun itu tidak menjamin kalo gambar tidak sama rata.

Penjelasan lainnya, pertanyaan silahkan sobat salurkan pada komentar dibawah ini.


Learn More

KEBODOHAN BLOGGER DALAM MELAKUKAN COPY PASTE


Copy Paste atau biasa juga di sebut dengan copas adalah kata-kata yang sangat tidak asing didengar oleh telinga kita apalagi dalam dunia blogging. Setelah geram dengan kelakuan copaser sejati yang banyak menjiplak postingan-postingan saya akhirnya saya memutuskan untuk membuat artikel ini, agar orang-orang itu tersadar kalau mereka sedang berada dalam jurang kebodohan.

Copaser : Ahh.. gan buat apa mentingin konten cape2 ngetik merangkai kata?! gue sih lebih suka yang instan-instan aje.. yang penting sih earing adsense gue lancar..
Anti Copaser : Iya.. ane juga tidak munafik dengan yang namanya duit, tapi saran ane lebih baik jauhi copy paste karena copas akan membuat anda seperti ini :

1. Semakin Bodoh
Seseorang yang selalu melakukan copy paste akan membuat dirinya semakin bodoh karena dia tidak pernah menggunakan otaknya untuk berfikir dan membiarkan otaknya lumpuh karena dibatasi kerja oleh si pemiliknya, jelas ini sangat merugikan untuk dirinya sendiri.

2. Membuat Blog anda berjalan ditempat 
Membuat Blog sobat akan selalu berjalan ditempat sulit untuk berkembang karena kontennya hanya itu-itu saja membuat para pembacanya bosan dan cepat-cepat menekan tombol "x" pada tab browsernya (kabur).

3. Melakukan Pembajakan
Jelas yang namanya copy paste sama dengan melakukan pembajakan karena sobat tidak mempunyai izin untuk mempublikasi karya orang lain tanpa mencantumkan nama si pemiliknya.

4. Merugikan orang lain
Merugikan orang lain terutama si pemilik asli kontennya, karena karyanya yang jiplak tidak disertakan link ke tautan sumbernya.

5. Penjara
Bisa menjebloskan sobat ke penjara, kenapa bisa? karena telah melakukan pembajakan dan sanksi hukuman pembajak adalah 5 tahun penjara.

Itulah 5 hal kerugian yang akan ditanggung oleh si copaser terutama copaser yang tidak pernah menghargai karya orang lain (tidak pernah menautkan link). Namun kenapa yang no 5 lebay banget? masa cuma karena copas postingan aja di penjara? hmm... itu ngga lebay lho ya.. jangan main-main sama pembajakan, siapa tau orang yang postingannya sobat copas itu adalah postingan paling berharga (postingan terakhir) karena si penulisnya sudah meninggal dan si keluarga ngga terima dilaporkanlah sobat kepolisi kebetulan keluarganya itu orang-orang berduit semua ditambah lagi salah satu keluarganya ada yang angkatan.! Waaaaa..! silahkan menanggung derita cuma gara-gara copas postingan, yang menurut sobat sepele.

Biasanya copaser paling banyak adalah blog yang membahas tentang berita, hal-hal unik, aneh (maaf) dan sebagainya yang tidak jauh dengan berita, kenapa saya bilang paling banyak diblog yang memiliki konten seperti itu? karena berita tidak mungkin didapat dari pemikiran sendiri atau filing, pasti dia dapat dari tkp sementara kita sendiri tidak mungkin keliling-keliling cari berita-berita ya kan? jadi, disitulah terjadi copy paste.
Sementara itu konten berita lah yang paling banyak dicari orang namun paling sulit untuk dibuat sendiri.


Tips untuk melakukan copy paste yang benar :

1. Edit Judul
Editlah judul dari judul aslinya namun tidak menghilangkan arti dari judul sebenarnya, agar keyword tidak sama dan memudahkan untuk menempati posisi yang bagus di search engine
2. Edit Isi
Editlah isinya agar si mbah google tetap ramah dengan blog anda, dan pengunjung tidak mudah bosan dan cepat kabur
3. Optimasi
Lakukan optimasi agar keyword anda tidak ditendang sana-sini
4. Tautkan link sumber
Yang paling penting tautkan link sumbernya, untuk menghargai karya orang yang kita copas
5. Live link
Terkadang saya aneh juga kenapa blogger yang copy paste susah banget nyantumin live link, padahalkan ngga rugi kan? malah sangat untung copaser dapat postingan baru.

Dan cukup sekian pembahasan tentang copy paste, mudah-mudahan sobat bisa lebih menghargai karya orang lain, atau bahkan menjauhi yang namanya copy paste. :-)

BERANTAS PEMBAJAKAN DARI NEGERI KITA INDONESIA.



Kritik, masukan, cacian, makian, hinaan..
Kirim ke Se.avancee@gmail.com
Learn More