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 -
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).
DEMO SHOW
Tahap selanjutnya pembentukan selector HTML pada wilayah body, tepatnya widget profil ini akan tampil dibawah postingan blog Anda.
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);}
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
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 >>
jadi tambah keren ya kalau widget profil penulis ada efek blur nya, kelihatan seni nya ;)
BalasHapushanya merubah tampilannya mbak,biar lebih berbeda dari yang lain,hehe
HapusKeren nih ilmunya :)
BalasHapuskunbal ya http://ryan-komputer2.blogspot.com
Wuiihh kereeeeennn
BalasHapuswah nampak lebih hidup nih tulisan profil penulisnya dan tentunya terlihat lebih menarik yambak
BalasHapusmau langsung di praktekkan langsung cuman perlu belajar lagi nih mas ,eh embak he he salam kenal
BalasHapuswah keren nih mbak blognya jadi makin cantik
BalasHapusimajinatif.. x-)
BalasHapusPatut dicoba nih
BalasHapussangat keren bos.. jadi lebih menarik dan bisa membuat kagum pengunjung yia bos...
BalasHapusni efek profile terbaru ya mbak, begitu menarik dan terus saja kreasi mbak membuat saya menunggu-nunggu, :D. Saya tunggu kreasi selanjutnya ya mbak
BalasHapussebenarnya 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..
HapusMenambah pengetahuan tentang widget profil penulis. Soalnya variasi widget ini macam-macam sekali tutorialnya. Terima kasih.
BalasHapusassalamualaikum
BalasHapusjazakalah 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
??? suwer ,,,nyerah..nyerah.. benar2 nda kuat..!
BalasHapus