Membuat Box Author Di Bawah Postingan Blog

• Demo

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>

melalui edit HTML pada Dashboard TemplateCopy kode HTML di bawah ini dan pastekan setelah tag <data:post.body/> biasanya ada 3 atau mungkin lebih code semacam itu .. Cari Code tersebut mungkin yang Paling Akhir atau code ke2/3