Cara membuat kotak/box about author sebenarnya mirip dengan Cara Membuat / Memasang Permalink SEO di Blog. Keduanya menggunakan CSS3 dan Kode HTML tetapi kebanyakan kasus yang pernah saya dapati, Kotak Permalink kebanyakan tidak menampilkan gambar, berbeda dengan Box About Author yang menampilkan gambar pemilik/publisher di sebelah kiri dan diikuti urain singkat mengenai author yang ada pada kolom kanan sehingga tampilannya terlihat lebih unik dan menarik.
Selain kelebihan di atas, Box Author/Publisher juga dilengkapi oleh 3 jenis Link Floating Social Bookmark seperti Facebook, Google Plus dan Twitter dengan efek hover yakni efek yang akan berubah ke gambar yang lebih terang jika tersentuh pointer mouse .
.lsauthorbox {
position: relative;
margin: 20px auto;
border: 1px solid blue;
padding: 5px;
min-height: 115px;
max-width: 650px;
-webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px;
border-radius: 0px 15px 0px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.lsauthoravatar {
background: #fff;
border: 1px solid #ccc9bd;
float: left;
height: 100px;
padding: 2px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
width: 100px;
}
.lsauthoravatar img {
height: 100px;
width: 100px;
}
.lsauthorlabel {
font-family: 'Arial', 'lucida grande', sans-serif;
background: #333;
color: #fff;
display: block;
font-size: 11px;
font-weight: bold;
line-height: 20px;
height: 20px;
margin-left: -43px;
position: absolute;
bottom: -10px;
left: 50%;
text-align: center;
width: 86px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.lsauthorcontent {
margin-left: 120px;
}
.lsauthorhead {
border-bottom: 1px solid #ddd;
margin-bottom: 12px;
padding: 0 160px 3px 0;
position: relative;
}
.lsauthorbox h3 {
font-family: Arial;
color: #302E29;
font-size: 20px;
font-weight: normal;
line-height: 25px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.lsauthorsocial {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 4px;
right: 0;
}
.lsauthorsocial li {
float: left;
margin-right: 4px;
padding: 0;
}
.lsauthorsocial li a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZP70G1aWCrgtu4HsQiCGHqufH2vx-fPV8s4i7fBo6caDk2ZpngF9rNd1iOv6uBpQ77FTR3177qfehLeCKHhcXDczM45pm9ivQ8JSculCWFQbKyvmqCCI891ooH2ABWeQca8l3c2iL-7M/s75/icons_user_links.png) no-repeat 0 0;
color: #C1B7A3;
display: block;
height: 20px;
font-size: 0;
text-indent: -99999px;
width: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.lsauthorsocial li a.authorFacebook {
background-position: -20px 0;
}
.lsauthorsocial li a.authorGooglePlus {
background-position: -40px 0;
}
.lsauthorsocial li a.authorTwitter {
background-position: -60px 0;
}
.lsauthorsocial li a.authorBlog:hover {
background-position: 0 -20px;
}
.lsauthorsocial li a.authorFacebook:hover {
background-position: -20px -20px;
}
.lsauthorsocial li a.authorGooglePlus:hover {
background-position: -40px -20px;
}
.lsauthorsocial li a.authorTwitter:hover {
background-position: -60px -20px;
}
.lsauthorbox p.bio {
font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
font-size: 12px;
line-height: 18px;
}
.lsauthorbox p a {
color: #E65002;
}
Read :
Pasang/Copy CSS diatas dan taruh di atas code ]]></b:skin>
Wah keren mas artikelnya..
BalasHapusNtar saya coba kalau punya blog baru
ok bro
Hapusnah ini boleh juga nih.. :d
BalasHapusboleh apanya kak :D
Hapusboleh dipake.. (p)
Hapusoke gan :D
Hapuskeren nih pastinya :)
BalasHapuskeren blog kamu mas :)
Hapusyang di atas saya masih banyak mas :>)
Hapuswkwk . :)
HapusWow :) terima kasih gan triknya :)
BalasHapuscomeback
thanks gan :)
Hapusoke kak
BalasHapuskeren gan artikelnnya ... :D salam ...
BalasHapusoke :)
Hapusoke thnks tutornya sobat..kunjungan balik dari admni My Note :)
BalasHapusterima kasih sobat :) segera meluncur :-)
Hapus