Trik Komputer

Senin, 14 November 2011

Sexy Hover for Image using CSS3

Tidak tahu sudah berapa banyak trick hover Beben Koben si bloglang anu ganteng kalem tea bagi buat kalian sobat² tercinta :x :"> Silahkan diacak-acak saja pada kotak pencarian ;) Namun sudah banyak juga, tetapi masih saja menarik perhatian buat dibahas. Karena unik & gaya daya tarik tersebut bisa menjadi acuan pembahasan kali ini.
Come from talked about how to make sexy image hover effects using CSS3 b-) http://designstutorial.com/ web yang menyuguhkan beraneka ragam artikel mancap punya.
Seksi efek hover pada gambar ini menghasilkan transform:scale() (zoom effect), transition-duration (timing process) and transform:rotate (efek berputar-putar) :P

Selain variabel lainnya, dikombinasikan menjadi satu kesatuan terciptalah kreasi sexy ;))

Basic CSS 3

.img {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
float: left;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.img:hover {
cursor: pointer;
-webkit-transform: scale(0.7);
-webkit-box-shadow: 0px 0px 20px #555;
-moz-transform: scale(0.7);
-moz-box-shadow: 0px 0px 20px #555; 
-o-transform: scale(0.7);
-o-box-shadow: 0px 0px 20px #555; 
}

Kode diatas memakai uniqueID .img sehingga dalam pemakaian nanti menggunakan atribute class="img" Code transform: scale(0.5) menjadikan gambar ke skala yang lebih kecil. Perhatikan nominal (0.5), makin kecil ya jadi kecil, makin besar nominalnya ya makin besar :D Sorot gambar dibawah berikut (worked on full posted methode)

Hover gambar disamping kiri dan itu merupakan coded dasar efek CSS 3 seksih, sekarang mari kita masukan bumbu ajaib guna menampilkan efek full stylish :))

.img .mask{
width: 100%;
background-color: rgba(191,138,64,.9);
position: absolute;
height: 100%;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
#img-1:hover .mask{
height: 0%;
}
#img-2:hover .mask{
height: 0%;
margin-top: 120px;
}
#img-4:hover .mask{
margin-left: 200px;
margin-top: 115px;
height: 0%;
width: 0%;
}
#img-3 #mask-1 {
width: 50%;
}
#img-3 #mask-2{
width: 50%;
margin-left: 200px;
}
#img-3:hover #mask-1{
width: 0%;
}
#img-3:hover #mask-2{
margin-left: 400px;
width: 0%;
}
#img-5:hover .mask{
margin-left: 219px;
margin-top: 135px;
height: 0%;
width: 0%;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
}
#img-6:hover .mask{
height:0%;
margin-top:225px;
}

Kode HTML

Demo Sexy Image Hover Effects using CSS3

demo Sexy Hover for Image using CSS3

Original Efecto Hover

From Gem@ created

MAIN TITLE

Descriptions Of Title

Gem@

Sabtu, 12 November 2011

Beautiful Subscribes Box

Korek sana-sini, gabungkan menjadi satu, terciptalah subscribes box alias kotak berlangganan. Default blogger sudah menyediakan fitur berikut, Design ► Page Elements ► Add a Gadget ► Choose Follow by Email (New!)
Begitulah salah satu cara mendapatkan pelanggan agar berlangganan artikel kita via email ;)) Bila sobat sudah familiar dengan kode CSS bisa langsung dikreasikan juga Follow by Email bawaan blogger tersebut. Tapi tidak semua sobat mahir dengan kode-kode kan :P Sebenarnya hanya dengan menggunakan syntax link saja sudah bisa kok ;)) :">
No Gaya No Style, No Style No Good :P

Demo Box Subscribes

Kode CSS

#subscribe {
width: 393px;
height: 150px;
position: relative;
padding: 15px;
background-color: #717FBC;
border: 3px solid #5599FF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#subscribe p {
line-height: 21px;
padding-right: 50px;
color: #eee;
font-size: 18px;
}
#subscribe a.page-sub {
display: block;
width: 85px;
height: 83px;
position: absolute;
background: url(http://GAMBAR-KERTAS.PNG);
right: -25px;
top: 0;
z-index: 1;
text-indent: -9999em;
}
#subscribe:hover a.page-sub {
background-position: 0 -84px;
}
#subs {
background:url(HTTP://GAMBAR-SUBSCRIBE.PNG);
height: 24px;
width: 216px;
margin-top: 5px;
}
#btn {
margin: -40px 255px;
}
#btn input {
background: url(HTTP://GAMBAR-TOMBOL.PNG);
height: 43px;
width: 142px;
border: 0px;
cursor: pointer;
}
.box {
height: 37px;
width: 250px;
font-size: 18px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Kode HTML

<div id="subscribe">
<div id="subs"></div>
<a class="page-sub" title="Subscribe to Myblog" href="#">Subscribe to Myblog</a>
<p>Join yuk dengan kita, berlangganan artikelku supaya update terus!!!</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="_blank">
<input name="email" type="text" class="box"/>
<div id="btn">
<input value="" type="submit" />
</div>
<input type="hidden" value="beben-koben" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
</form>
</div>

Yang perlu sobat lakukan dalam mengubah coded² diatas yaitu:

1. Download image dan pasangkan ke dalam code CSS (tulisan warna merah tua) DL Gambar.
2.Gantikan beben-koben dengan ID feedburner kalian.
3. Warna, padding, margin, width, height or tetek bengek lainnya silahkan atur² sampai bagus :)
4. Save.
Semoga bermanfaat \m/

Jumat, 11 November 2011

Make Animated Search Box use CSS3

Dahulu bila ingin membuat sesuatu yang sedikit berbau-bau animasi harus memakai script. Sekarang dengan hadirnya CSS3 memberi sentuhan berbeda, dan pasti akan lebih meramaikan kreasi efek animasi yang ada. ketika diklik pada bagian kotaknya bisa memanjang dulu pakai jQuery! Kini dengan hanya menggunakan code CSS 3 sudah bisa kita membuat hal semacam itu ;)
This tutorial come with title created by Ian Thomas b-) Sudah tertera jelas beserta bumbu-bumbunya disana :D Coba sama sobat klik gambar panah dibawa ini ya, seperti itulah demonya...

Demo Animated Search Box Using CSS

Bagaimana, keren kan bisa memanjang dan memendek seperti karet kolor...eh...
Kalau sobat mau melihat-lihat kreasi CSS lain, dari tingkat mudah, ½ susah, susah, and banget susah silahkan jalan² http://cssradar.com/ <-- bangkrut!!! ;))
Semoga bermanfaat \m/

Kamis, 10 November 2011

Add Google Books to Blogger

Sarana dan milik paman google sudah Koben kupas. Sekarang Beben Koben si bloglang anu ganteng kalem tea akan mengupas . Bagi sobat blogger yang memang suka membaca, koleksi buku dari googel ini bisa menjadi acuan ;)) Terdapat ± ada 29 kategori buku yang bisa dipilih/dibaca. Setelah meneliti ternyata dalam pemakaian syntax guna melihat buku tersebut ada 2 hal pokok menjadi patokan yakni ID & ISBN buku tersebut. Usefully resource for read & Google Books API Family.
Kenapa Koben berkesimpulan ID and ISBN itu 2 keharusan! Dengan dua cara itu aku akan mencoba menerangkan gimana cara mebaca versi cover, dan juga menampilkan book google embed ke dalam blog kita :))

Coba letakkan ID buku berikut kedalam form action dibawah: OMwH1oaXE7UC - xeJXUZZtZEoC

Langsung terbuka dalam format cover kan :-" Dari web klik saja tulisan Read now =)) Fungsi ID lebih condong bila sobat mau bermain static link ;)
Bagaimana bila memang dari kalian menginginkan buku google ini tampil langsung di dalam blog? Begini caranya... Cari tag <head> kemudian masukkan script berikut tepat dibawahnya.

<script type="text/javascript" src="http://books.google.com/books/previewlib.js"></script>Ketika sobat mau memosting artikel, carilah kode ISBN terlebih dahulu di web google books :D
Setelah itu, buat syntax script seperti berikut ketika akan memosting sebuah artikel

<script type="text/javascript">
GBS_insertPreviewButtonPopup('ISBN:9781590597323');
</script>

Gantikan deretan angka tersebut dengan ID ISBN buku yg akan ditampilkan :)

Saran saya buat mencari kode ISBN dengan cepat:

Pilih buku terlebih dahulu, lalu klik full windows browse.
Ctrl + U or klik kanan pada mouse View Page Source.
Ctrl + F or press F3 lalu ketikkan ISBN.
That's it.

Happy books \m/

Rabu, 09 November 2011

Google Maps Services

Tidak ada kerjaan, ya seperti biasa ngubek² kembali :D Yang akan Koben bahas sekarang mengenai . Sangkin banyaknya developer yang bermain dengan fasilitas satu ini, pusing buat ngikutinnya :)) Bayangkan saja peta bisa dibuat muter² , di zooming² etc. Mau bereksplore ria seputar google map, satroni saja blog berikut :-bd
Bikin peta standard via google dengan hasil begini saja sudah cukup bagus kok ;))

Lihat My Address di peta yang lebih besar.

Google Map Via Satelite

Andai kecepetan koneksi tidak mendukung, terus keadaan memang mengharuskan melihat peta coba pakai jurus kamehameha :D
Recommendated:

Adios amigos parantos, Beben Koben si bloglang anu ganteng kalem tea cab's...
Happy maps \m/

Selasa, 08 November 2011

Make The Advanced Search Box For Blogger

Koben akan kembali mengangkat tutorial mengenai . Nih jalan² dulu sok , , and ...
Untuk sekarang berlaku bagi google custom search. Karena dengan itu Beben akan menerangkan bagaimana make the advanced search box for blogger :)) Advanced disini meliputi bagaimana pencarian berdasarkan judul postingan saja, seluruh konten postingan, diatur dengan waktu. Opsi waktu yang bisa digunakan anytime, < 24 hours, < 3 days, < 1 week, < 2 weeks, < 1 month, < 2,3,6 months and < 1 year :-"

Bagi sobat yang belum punya google custome search bisa buat dahulu di Make Your Google Custom Search klik tulisan

Create a Custom Search Engine

Kalau memang tertarik buat memasangnya di blog, sobat bisa lihat demo di blog ini. Klik pada tab menu kanan dekat my main search box (kotak warna merah putih itu loh) dengan tulisan Adv.Search
Cara pemasangannya cukup dengan jalan Add a Gadget ► HTML/JavaScript

<form action="http://www.google.com/cse" method="get" target="_blank">

<input name="cx" type="hidden" value="XXXXXXXXXXXXXXXXXXXXX:_XXXXXXXXXX"/>

<input value="FORID:11;GIMP:FF0000;T:222222;ALC:003366;GFNT:666666;LC:1122CC;BGC:FFFFFF;VLC:6611CC;GALT:009933;" name="cof" type="hidden"/>

<input name="q" placeholder="Type your keywords..." type="search" size="35"/>

<script type="text/javascript">
document.write ('<select name="as_qdr">');
document.write ('<option selected="selected" value="all"/>anytime');
document.write ('<option value="d"/>&lt; 24 hours');
document.write ('<option value="d3"/>&lt; 3 days');
document.write ('<option value="w"/>&lt; 1 week');
document.write ('<option value="w2"/>&lt; 2 weeks');
document.write ('<option value="m1"/>&lt; 1 month');
document.write ('<option value="m2"/>&lt; 2 months');
document.write ('<option value="m3"/>&lt; 3 months');
document.write ('<option value="m6"/>&lt; 6 months');
document.write ('<option value="y"/>&lt; 1 year</select>');
</script>

<input type="submit" value="Go"/>

<br />

<input value="title" name="as_occt" type="radio"/><span class="1">Search By Titles</span>&nbsp;&nbsp;<input value="body" name="as_occt" type="radio"/><span class="1">Search By Content</span>

</form>

Gantilah key-search XXXXXXXXXXXXXXXXXXXXX:_XXXXXXXXXX dengan kepunyaan kalian masing²
SAVE.
Dengan metode begini kita bisa lebih efisien dalam melakukan pencarian content blog ;) Semoga bermanfaat :)
Resource by: www.itjobscareerusa.com
Google make change anymore for google search custome, learning that first :-/
http://insidesearch.blogspot.com/2011/11/ten-recent-algorithm-changes.html
Happy search \m/

Senin, 07 November 2011

Slider Content use 100% CSS3

Informasi terhangat mengenai feature dari dunia CSS3. Sebelumnya para developer sudah berhasil membuat hack . Dengan hanya menggunakan CSS trick lightbox dapat terealisasikan. Sekarang giliran , tentunya juga cuma memakai attribute CSS b-) Bagaimana ini bisa terjadi???
Lagi-lagi variabel CSS3 keyframes berperan melakukan ini semua ;)) Dengan semakin berkembangnya jurus² baru Cascading Style Sheets3 kita para blogger diberikan jalan alternatif dalam menampilkan sesuatu hal yang berbau efek animasi :D Karena kredibilitasnya yg belum bisa diterima di semua jenis browsingan, maka kode-kode yang ditulis berjibun lumayan banyak sob ;;) :D

Firefox selalu memakai atribut @-moz-keyframes, Safari and Chrome pakai @-webkit-keyframes Opera masih menunggu :P

Demo Slider Content use CSS3

Bagaimana sobat-sobat...kerrreeennn kan :x Live demo from original article and file download!

Beben Koben si bloglang anu ganteng kalem tea sudah mempraktekannya, dengan menambahkan size-image supaya image yg ukurannya kecil bisa sama dengan tampilan slider ;)

Coded CSS3

#slider {
width: 600px;
height: 200px;
margin: 10px auto 5px;
overflow: visible;
background-color: #333;
border: 10px solid #333;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
position: relative;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#mask {
overflow: hidden;
}
#slider:hover {
background-color: #fff;
border: 10px solid #fff;
-webkit-animation: rotatey 400ms ease-out;
-moz-animation: rotatey 400ms ease-out;
}
#slider:hover #pause {
opacity: 1;
}
#slider:hover #progress {
background-color: #F00;
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width: 600px;
height: 200px;
position: absolute;
top: 0;
opacity: 0;
background-image: url(http://IMAGES/PAUSED/32x32px.png);
background-position: 566px 10px;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#0F0;
-moz-animation:progress 18s infinite;
-webkit-animation:progress 18s infinite;
position:relative;
top:-1px;
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
}
#overlay {
width: 600px;
height: 200px;
position: absolute;
top: 0;
background-image: url(http://IMAGES/OVERLAY/600x200px.png);
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
opacity: 0.5;
-moz-animation: overlay-fade 18s infinite;
-webkit-animation: overlay-fade 18s infinite;
}
#slider ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 18s infinite;
-webkit-animation:slide-animation 18s infinite;
position:relative;
left:0px;
}
#slider li {
display: inline;
width: 600px;
height: 200px;
margin: 0;
padding: 0;
float: left;
position: relative;
background-image: url(http://IMAGES/LOADER/32x32px.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
}
#slider img {
width: 600px;
height: 200px;
margin: 0;
padding: 0;
float: left;
}
#slider li a {
display:block;
text-decoration:none;
}
#slider li span {
display: block;
width: 580px;
padding: 5px 10px;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(54,44,48,0.6);
border-top: 1px solid #111;
pointer-events: none;
text-align: left;
}
#slider ul li span h2 {
font-size: 20px;
line-height: 10px;
color: #fff;
font-weight: bold;
text-shadow: 1px 3px 1px #333;
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-moz-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}

Coded HTML

<div id="slider">
<div id="mask">

<ul>

<li>
<a href="#" title=""><img src="http://LINK-IMAGE-600X200px.jpg" /></a>
</li>

<li>
<a href="#" title=""><img src="http://LINK-IMAGE-600X200px.jpg" /></a>
<span><h2>Your Image Caption Here</h2></span>
</li>

<li>
<iframe src="http://LINK-WEB-HERE" width="600" height="200" frameborder="0" scrolling="no"></iframe>
<span><h2>Your Caption Here</h2></span>
</li>

<li>
<a href="#" title=""><img src="http://LINK-IMAGE-600X200px.jpg" /></a>
</li>

</ul>
</div>

<div id="progress"></div>
<div id="overlay"></div>
<div id="pause"></div>
</div>

Jika ada kode rusak bentrok sama emotikon, lihat via Ctrl + U saja sob, abis mau upload gagal terus, ziddunya gi error keknya. Nanti kalau sudah bisa saya pasang link download bumbunya :) (kalau ingat) :P
http://ginva.com/2011/12/css-content-slider/
http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
Good luck \m/