Cara Membuat Warna Background Sidebar Warna Warni Dengan Css

Tutorial kali ini ialah Cara Membuat Warna Background Sidebar Warna Warni Dengan Css. Kita tidak perlu edit gambar begini begitu, warna ini warna itu untuk mempercantik tampilan sidebar blog sobat. Yang juga gambar-gambar seperti itu hanya akan menambah beban blog sobat (kebanyakan sih orang bilang begitu) cukup dengan sedikit sentuhan CSS maka sobat dapat membuat warna background sidebar akan tampak warna-warni yang menawan dan mempesona. supaya lebih jelas sobat dapat melihat contoh yang sudah dibuat dibawah ini :

Nah bentuknya seperti ini sobat

Sahabat bisa berkreasi Sesuai dengan

keinginan sobat sendiri

warnapun bisa sahabat ganti sesuai

dengan yang diinginkan oleh sahabat

 lumayan mantap bukan ?! hehe

.

Nah apabila sahabat tertarik berikut adalah kode cssnya silahkan copy dan pastekan pada halaman posting milik sahabat

<div style="

background: -moz-linear-gradient(top, #FF0000, #FFFF00);

background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFFF00));">

GANTI DENGAN TULISAN SAHABAT DISINI

</div>

Nah kalau mau lebih rame lagi silahkan lihat contoh dibawah ini :

Nah bentuknya seperti ini sobat

Sahabat bisa berkreasi Sesuai dengan

keinginan sobat sendiri

warnapun bisa sahabat ganti sesuai

dengan yang diinginkan oleh sahabat

 lumayan mantap bukan ?! hehe
.

Nah untuk kodenya silahkan sahabat copy kode dibawah ini ya :

<div style="

background: -moz-linear-gradient(-40deg, black, green, yellow, orange, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(16%,orange), color-stop(32%,yellow), color-stop(48%,green), color-stop(64%,blue), color-stop(80%,indigo), to(violet));">GANTI DENGAN TULISAN SAHABAT DISINI

</div>

Read more...

Cara Membuat Tombol Button Keren Dengan CSS

Cara Membuat Tombol Button Keren Dengan CSS - Ini bisa jadi alternative untuk mempercantik tampilan blog sahabat.Tombol button dengan css perhatikan gambar disamping.Baiklah tanpa basa-basi lebih baik kita kelangkah pemasangan nya saja perhatikan langkah-langkah nya dibawah ini mari simak ^_^

1.Login Blogger Pastinya
2.Pilih Template - Edit HTML
3.Cari Kode ]]></b:skin> 
4.Setelah Ketemu Letakan CSS Dibawah Ini Diatas ]]></b:skin>

.awesome,.awesome:visited{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXaX9XSB4wCpJW2b604UT_YP2xYrxNmuxf8VQYGctt4mdCfuIv2DpSJet2RDzgYAOyam76YLxAhDrQTL93tPXqw760nYZkgEbZCWUKe_uG3PCXYNXnPUNg1Oha1Q7y_esXcVMqQNGPtoQ/s1600/alert-overlay.png) repeat-x;display:inline-block;padding:5px 10px 6px;color:#fff;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);text-shadow:0 -1px 1px rgba(0,0,0,0.25);border-bottom:1px solid rgba(0,0,0,0.25);position:relative;cursor:pointer;font-family:Calibri,Arial,sans-serif}
.awesome:hover{background-color:#111;color:#fff}
.awesome:active{top:1px}
.small.awesome,.small.awesome:visited{font-size:18px;padding:}
.awesome,.awesome:visited,.medium.awesome,.medium.awesome:visited{font-size:24px;font-weight:bold;line-height:1;text-shadow:0 -1px 1px rgba(0,0,0,0.25)}
.blue.awesome,.blue.awesome:visited{background-color:gold}
.blue.awesome:hover{background-color:beige}
.orange.awesome,.orange.awesome:visited{background-color:#ff5c00}
.orange.awesome:hover{background-color:#d45500}

5.Save Template..!!

• Mudahkan,Sekarang Kita Masuk Ketahap 2,Pergi Ke Tata Letak Lalu Pilih Add Widget/Tambah Gadget.

Masukan Kode Dibawah Ini :
<div style="text-align: center;">
<a class="small blue awesome" href="http://www.http://www.cobainfo.com/">JUDUL BUTTON ANDA</a><br />
<br /></div>

Catatan :

• Kode Berwarna Merah Ganti Dengan URL Yang Anda Inginkan

• Kode Berwarna Hijau Ganti Dengan Judul Button Anda 

• Kode Berwarna Biru Adalah Ukuran Button,Anda Bisa Mengganti Ukuran Tersebut Misal Medium

*Untuk Menentukan Warna Button Anda Bisa Melihat Settingan Nya Pada Kode CSS Yang Tadi Anda Tambahkan Diatas

]]></b:skin>,small blue asesome Pada Kode Diatas Menandakan Button Anda Berwarna Biru Ubahlah Sesui Keinginan Anda.

Sekian Dan Selamat Mencoba

Read more...

Galery gambar dengan effek mask css3

pembuatan galeri gambar dengan menggunakan css3 dengan efek mask  yang terdapat deskripsi kami mencoba hal yang berbeda yang dapat Anda lakukan dengan properti CSS . Dengan mask CSS, Anda dapat menutupi atau klip setiap elemen ke bentuk yang diinginkan. untuk membuat sebuah galeri gambar ini cukup simple dan tidak serumit yang kita bayangkan karena mekai full css3 dan no jQuery untuk itu kita simak bersama-sama bagaimana pembuatanya
1. Kopi dan tempelkan kode css ini  dalam document html
css

.box-post {width:23%;
background:#ffffff;display:block;position:relative;border:solid 2px #eeeeee; overflow:hidden;color:#FFFFFF;height:180px;float:left;margin:4px;-moz-box-shadow: 0 0 2px #999999;-webkit-box-shadow: 0 0 2px #999999;box-shadow: 0 0 2px #999999}
.box-post img {width:100%;height:100%;}
.box-post a{color:#ffffff;}
.image-mask .mask-title {width:99%;height:0px;overflow:visible;background:rgba(0,0,0,0.7);opacity:0;height:0px;
position:absolute;top:0;left:0;display:block;padding:3px;text-align:center;font-family:Arial, Helvetica, sans-serif;
font-size:17px;line-height: 1.4em;text-transform:uppercase;}
.image-mask:hover .mask-title{background-color: rgba(0,0,0,0.6);filter: alpha(opacity=0);opacity: 1;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;height:140px;padding:3px;cursor:pointer;}
.image-mask .mask {width:99%;height:0px;overflow:visible;background:rgba(0,0,0,0.3);opacity:0;height:0px;
position:absolute;bottom:0;left:0;display:block;padding:3px;text-align:center;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
.image-mask:hover .mask{background: #459BF9;opacity: 1;height:30px;line-height:30px;font-family:Arial, Helvetica, sans-serif;zoom:150%;}
.mask a{text-decoration:none;color:#fff}.mask a:hover{text-decoration:none;color:#CCCCCC}

2. Sekarang kita tinggal panggil dengan htmlnya
html

<div class="box-post image-mask">
<div class="mask-title">Title</div>
<img src="thumb2.jpg" />
<div class="mask"><a href="#">Reamdore</a></div></div>
 
<div class="box-post image-mask">
<div class="mask-title">Title</div>
<img src="thumb2.jpg" />
<div class="mask"><a href="#">Reamdore</a></div></div>
 
<div class="box-post image-mask">
<div class="mask-title">Title</div>
<img src="thumb2.jpg" />
<div class="mask"><a href="#">Reamdore</a></div></div>

3. Cukup mudah bukan semoga tutorial yang saya berikan ini semoga bermanfaat,

Read more...

Sliding Hover Transition dengan CSS3

Sliding Hover Transition merupakan sebuah slide Gambar yang terbangun dari penggabungan kinerja CSS3. Untuk Sliding Hover Transitio sesederhana ini menjadi sangat menarik dan tidak akan membebani loading blog. CODE ini bisa kamu terapkan dalam sebuah posting blog mau pun di widget blog, and bisa memanfaatkan CODE ini dalam sebuah posting tentuknya yang terdapat sebuah gambag dan kamu bisa memberi diskripsi gambar dengan menggunakan tag yang akan kia pelajari. dalam penerapan CODE ini cukup mudah hanya memperhatikan tutorial yang akan kami berikan, mungkin langsung saja kita buat sebuah codenya :
1. Silahkan anda login terlebih dahulu ke Blogger.com
2. Silahkan masuk ke Edit Tempat Blog
3. Setelah Itu cari kode ]]></b:skin> dan kopi paste kode dibwah ini diatasnya .

CSS

/* Hover Transition */
 
.gambar {width:400px;
overflow: hidden;
display: inline-block;
position: relative;
height: 200px;
}
.gambar img{width:400px; height:100%;
vertical-align: bottom;
}
 
.gambar:hover .overlay {
right: 200px;
}
.gambar:hover .description {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* IE 5.5-7 */
filter: alpha(opacity=100);
/* Netscape */
-moz-opacity: 1;
/* Safari 1.x */
-khtml-opacity: 1;
/* Modern browsers */
opacity: 1;
 
transition: 1s ease-in;
-webkit-transition: 1s ease-in;
}
 
.gambar .overlay {
display: block;
position: absolute;
height: 200px;
width: 100%;
top: 0;
right: -100%;
 
transition: .4s ease-out;
-webkit-transition: .4s ease-out;
}
.gambar .overlay .rectangle,
.gambar .overlay .arrow-left {
position: absolute;
top: 0;
}
.gambar .overlay .rectangle {
display: block;
margin-left: 200px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.95);
}
.gambar .overlay .arrow-left {
position: relative;
left: 0;
width: 0;
height: 0;
top: 0;
bottom: 0;
 
border-bottom: 200px solid transparent;
border-right: 200px solid rgba(255,255,255,.95);
}
 
.gambar .description {
text-align: left;
position: absolute;
padding: 30px 50px;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #cc6812;
 
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5.5-7 */
filter: alpha(opacity=0);
/* Netscape */
-moz-opacity: 0;
/* Safari 1.x */
-khtml-opacity: 0;
/* Modern browsers */
opacity: 0;
 
transition: .2s ease-out;
-webkit-transition: .2s ease-out;
}
.gambar .description h3 {
text-align: center;
font-size: 20px;
margin-bottom: 25px;
font-weight: bold;
}
 
.gambar .link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
margin: 0;
}

 

4. Sekarang hampir aja selesai sekarang kita tinggan memanggil tag cssnya dengan HTML dan html ini bisa anda taruh pada sebuah postingan kalian

HTML

<div class="gambar">
<a class="link" href="#"></a>
<div class="overlay">
<div class="arrow-left"></div>
<div class="rectangle"></div>
</div>
<div class="description">
<h3>Project</h3>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
<img src="tumb.jpg"> </div>

Selesai

Read more...