Jumat, Desember 30, 2011

Cara Baru Membuat Slide Profil Di Blog Dengan Css


  1. Login Ke Akun Blogger Sobat
  2. Pada Dasbor Pilh Rancangan/Design  Kemudian Pilih Tambah Gadget / Add Gadget Dan Pilih Yang HTML/JAVASCRIPT
  3.  Copas Kode Berikut Tepat Didalamnya

 <style>.tejaslide a { display: block; height: 130px; margin:0px; background: rgba(215,215,215,0.6);border: 1px solid #ccc; height: 130px; overflow: hidden;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-radius: 10px;}.tejaslide img{float:left;}        .tejaslide h5 { color: #333; text-align: center;height: 80px;margin-top:30px;font: italic 18px/65px Georgia, Serif;opacity: 1;-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-radius: 10px;}        .tejaslide a:hover h5 { margin-top: -130px; opacity: 0; }        .tejaslide div { position: relative; color: white; font: 12px/15px Georgia, Serif;height: 130px; padding: 10px; opacity: 0; -webkit-transform: rotate(180deg); -webkit-transition: all 0.8s linear; -moz-transform: rotate(180deg); -moz-transition: all 0.8s linear; -o-transform: rotate(180deg); -o-transition: all 0.8s linear;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; -khtml-border-radius: 10px;}.tejaslide a:hover div {background:-moz-linear-gradient(top,#ddd,#444);background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#444));color:#000;opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; -khtml-border-radius: 10px}</style>
<section class="tejaslide">
<a href="http://tejahtc.blogspot.com/">
<h5>
About The Author</h5>
<div>
<img height="35" src="http://i1130.photobucket.com/albums/m533/mansen7/UAS.jpg" style="border: 0px;" width="35" />Nama saya Juli Mansen Gurning, Saya Bukan Seorang Blogger, Desainer atau Apapun  Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...</div>
</a>
</section>

  4 . Kemudian Klik Simpan Dan Lihat Hasilnya.. :)

Catatan :
kode Yang Berwarna Merah Bisa Sobat Ubah Dengan Url foto sobat Apabila Ukuran Gambar Sobat Berukuran Lebih dari 50px x 50px  Sobat Bisa Mengubah Ukurannya Sesuai Ukuran Foto sobat..Dengan Mengubah Angka 50 (kode yang berwarna Kuning) dengan ukuran fotonya
                         KOde Yang Berwarna Hijau Bisa Sobat Ubah Dengan Kata-kata Sobat Sendiri

Semoga Sobat Semua Senang Apa Yang Saya Share Kali Ini... hehehe :D
Dan Dipostingan Yang Selanjutnya Saya Akan Membahas Tentang

-Cara Membuat Toolbar Sendiri Di Blog
-Cara Membuat Menu Melayang Di Samping Kanan Blog
Judul: Cara Baru Membuat Slide Profil Di Blog Dengan Css
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Unknown

Terimakasih atas kunjungan Sobat beserta kesediaan Anda membaca artikel ini. Kritik dan Saran sobat dapat sampaikan melalui Kotak komentar dibawah ini.

Tidak ada komentar: