Widget Profil Penulis Dengan Background Blur Efek

Widget Profil Penulis Dengan Background Blur Efek - Membuat tulisan pada blog sudah pasti ada pencipta, penulis atau pengarang untuk memudahkan pembaca mengenal profil orang yang membuat artikel tersebut. Ucapan kalimat pada komentar-kritik di artikel sebelumnya, tidak sedikit komentar sahabat lain yang mamanggil saya dengan kata "Terimakasih MAS tutorialnya", padahalkan saya tidak punya kumis, masa dipanggil mas, hehe...!! Karenanya Pada kesempatan kali ini, SAHABAT BLOGGER 77 akan berbagi tutorial cara mendesain tampilan widget profil dengan efek blur pada background gambar penulis.

Widget seperti ini biasanya untuk menampilkan keterangan teks yang mengarah pada tutorial artikel yang dibahas dari postingan tersebut, seperti judul artikel, penulis dan keterangan teks yang kurang lebih seperti ini -

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke-

Karena fungsi widget ini pada blog untuk menampilkan bio data sipenulis, maka daftar profil lengkap author akan tampil saat hover (sentuhan mouse) dengan efek blur pada gambar background seperti tampilan gambar berikut

Baca juga - Cara Membuat Widget Author Box Dengan Blockquote


Untuk pengaturan CSS berikut saya hanya menggunakan perintah hover dengan css transform-translateY agar tampilan widget default tidak tertutup oleh background blur, detailnya saya menggantung background blur efeknya dengan value height='30px' dan akan tampil keseluruhan saat hover (sentuhan mouse).

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

DEMO SHOW


Tahap selanjutnya pembentukan selector HTML pada wilayah body, tepatnya widget profil ini akan tampil dibawah postingan blog Anda.

<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>