Membuat Widget Profil Penulis Dengan Background Blur Efek

Berikut ini akan diuraikan langkah-langkah cara membuat ( Widget Profil Penulis Dengan Background Blur Efek ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Widget Profil Penulis Dengan Background Blur Efek ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

/.............
Profile widget author with css only
css design: profilestyle="hover-sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
............../
.sb77_profile_hover{
padding: 0px;position: relative;
overflow: hidden;height: 187.5px;}

.sb77_profile_hover:hover .caption{
opacity: 1;
transform: translateY(-150px);
-webkit-transform:translateY(-150px);
-moz-transform:translateY(-150px);
-ms-transform:translateY(-150px);
-o-transform:translateY(-150px);}

.sb77_profile_hover .caption{
position: absolute;top:150px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;}

.sb77_profile_hover .blur{
background-color: rgba(0,0,0,0.8);
height: 300px;z-index: 5;
position: absolute;width: 100%;}

.sb77_profile_hover .caption-text{
z-index: 10;color: #fff;
position: absolute;height: 30px;
text-align: center;top:-2px;width: 100%;
border-top:2px solid #fff;
border-bottom:2px solid #080;
padding:5px;height:26px;}

.sb77-profile-1 .sb77-imageprofile {
display: block;width: 120px;
height: 120px;border: 5px solid #2fe45D;
background: url(URL-Gambar Anda.jpg) no-repeat center center;
position: relative;margin:-8em 0 0 30px;
box-shadow: inset 1px 1px 4px rgba(225,225,225,0.5),
0 2px 3px rgba(225,225,225,0.6);}

HTML Kode

<div class="sb77_profile_hover" style="background:url(URL-Gambar/sahabatblogger77-image2.jpg) no-repeat center center;border-top:3px solid red;">
<p style="text-align:center;font: bold 18px/5px Helvetia;">
TERIMAKASIH ATAS KUNJUNGAN SAUDARA
Judul= <span itemprop='itemreviewed'><data:post.title/></span>
Penulis= <span itemprop='reviewer'><data:post.author/></span>
...Tulis text Anda disini....
<a expr:href='data:post.url'><data:post.url/></a>
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3>
SAHABAT BISNIS 77
</h3>
<p style="text-align:left;margin-left:185px;">
Name : SBTM77
Website : http://sbtm77.blogspot.com
Google+ : http://google.com/+DevyIndriyani
<a href="https://plus.google.com/u/0/109201923554462022240">Lihat Profil Lengkapku</a>
</p>
<div class="sbtm77-profile-1">
<div class="sbtm77-imageprofile"></div>
</div>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Widget Profil Penulis Dengan Background Blur Efek ) semoga bermanfaat terima kasih.

CONTOHNYA

TERIMAKASIH ATAS KUNJUNGAN SAUDARA
Judul=
Penulis=
...Tulis text Anda disini....

SAHABAT BISNIS 77

Name : SBTM77
Website : http://sbtm77.blogspot.com
Google+ : http://google.com/+SBTM77
Lihat Profil Lengkapku