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

Profile Box Widget Image


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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Widget Profil Penulis Dengan Background Blur Efek
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
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 >>
= TERIMA KASIH =

15 komentar

  1. jadi tambah keren ya kalau widget profil penulis ada efek blur nya, kelihatan seni nya ;)

    BalasHapus
    Balasan
    1. hanya merubah tampilannya mbak,biar lebih berbeda dari yang lain,hehe

      Hapus
  2. Keren nih ilmunya :)

    kunbal ya http://ryan-komputer2.blogspot.com

    BalasHapus
  3. wah nampak lebih hidup nih tulisan profil penulisnya dan tentunya terlihat lebih menarik yambak

    BalasHapus
  4. mau langsung di praktekkan langsung cuman perlu belajar lagi nih mas ,eh embak he he salam kenal

    BalasHapus
  5. wah keren nih mbak blognya jadi makin cantik

    BalasHapus
  6. sangat keren bos.. jadi lebih menarik dan bisa membuat kagum pengunjung yia bos...

    BalasHapus
  7. ni efek profile terbaru ya mbak, begitu menarik dan terus saja kreasi mbak membuat saya menunggu-nunggu, :D. Saya tunggu kreasi selanjutnya ya mbak

    BalasHapus
    Balasan
    1. sebenarnya bukan baru sih mas, saya hanya menggabungkan 3 perintah CSS seperti css-profile, css-background.blur dan css-tombol paseudo sehingga tampilannya terkesan baru, karena memang belum ada yang membuat seperti ini sih,,hehe..

      Hapus
  8. Menambah pengetahuan tentang widget profil penulis. Soalnya variasi widget ini macam-macam sekali tutorialnya. Terima kasih.

    BalasHapus
  9. assalamualaikum
    jazakalah atas ilmu yg akhwat berikan
    ana baru pemula tentang pembuatan blog and smoga ilmu yg akhwat berikan
    mejadi bibit tunas yg baru bagi ilmu yg lebih bermanfaat
    trimaksih

    BalasHapus
  10. ??? suwer ,,,nyerah..nyerah.. benar2 nda kuat..!

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK