Cara Membuat Silde Profil Keren di Blog - Kali ini saya akan berbagi Tips Blog yaituCara Membuat Slide Profil Keren di Blog Slide Profil in berfungsi untuk meringkas sekilas tentang kamu atau tentang Blog kamu, kamu bisa memasangnya di Bagian Sidebar atau dibawah Posting. Lihat Demonya di bawah ini.
Sorotkan Kursornya.
Perhatian Sebelum membuatnya Harap ganti kata-katanya dengan Info kamu dan URL Gambar nya Ok.
Perhatian silahkan sobat ganti Kata-kata yang berwarna merah dengan Info lainnya, dan URL Gambarnya ok.
Selamat Mencoba.
Sorotkan Kursornya.
Perhatian Sebelum membuatnya Harap ganti kata-katanya dengan Info kamu dan URL Gambar nya Ok.
<style>.blazerslide 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;}.blazerslide img{float:left;} .blazerslide 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;} .blazerslide a:hover h5 { margin-top: -130px; opacity: 0; } .blazerslide 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;}.blazerslide 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="blazerslide">
<a href="http://blazerracing.blogspot.com/">
<h5>
About The Author</h5>
<div>
<img height="50" src="http://lh5.googleusercontent.com/-Wi8QOR0KZMI/AAAAAAAAAAI/AAAAAAAAADg/oH_1Ohsd8pU/s512-c/photo.jpg" style="border: 0px;" width="50" />Nama saya Fajar Lesmana pemilik Blazer Blog saya melakukan kegiatan Bloging untuk menambah Ilmu dan memeberi Ilmu pada Anda...</div>
</a>
</section>
Perhatian silahkan sobat ganti Kata-kata yang berwarna merah dengan Info lainnya, dan URL Gambarnya ok.
Selamat Mencoba.
Posting Komentar