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 :

1. Login ke akun blogger
2. Klik tema
3. Edit html

Masukan CSS di bawah ini :

/.............
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);}

Masukan Kode HTML / Javascript di bawah ini :

<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 BLOGGER 77
          </h3>
<p style="text-align:left;margin-left:185px;">
Name : DEVY INDRIYANI
Website : http://sahabatblogger77.blogspot.com
Google+ : http://google.com/+DevyIndriyani
<a href="https://plus.google.com/107420567168573488940">Lihat Profil Lengkapku</a>
</p>
<div class="sb77-profile-1">
<div class="sb77-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.