Muka Author Box Widget Untuk Blogger

Menampilkan info kecil tentang penulis di akhir artikel akan lebih berguna bagi pembaca . Ketika pembaca ( pengunjung ) menyukai artikel yang sangat baik , mereka mungkin harus tahu tentang penulis yang menulis ? dari mana ? . Oleh karena itu penulis blog harus menambahkan info penulis kotak di bawah setiap posting blog . Bahkan dapat membuat affability baik dengan pembaca baik .Apakah Anda pikir info tentang orang yang memberi Anda setiap hal berharga yang telah Anda diharapkan untuk waktu yang lama ? Anda mungkin mengatakan Ya . Karena itu adalah kesenangan kita untuk mengetahui tentang orang- orang yang memberi kita hal-hal yang berharga . Jadi Dalam hal membaca artikel , Pembaca harus memiliki lezat tahu tentang penulis setelah membaca artikel.Muka kotak penulis adalah widget yang menampilkan info kecil blog penulis atau penulis dengan gambar profil dan ikon sosial . Widget ini dikembangkan oleh saya . Ini benar-benar gratis . Anda dapat menggunakan blog sangat mudah . Hanya beberapa kode sederhana harus menambahkan di blog Anda . Itu terlihat elegan dan premium . Bahkan blog penulis dapat memperoleh pengikut media sosial melalui widget ini .

Live Demo Download

 Saya akan merekomendasikan untuk menambahkan kotak penulis di bawah ini setiap posting blogger. Anda dapat menambahkan di mana saja, tidak ada masalah! Artikel di bawah ini adalah tempat terbaik. Pergi melalui langkah-langkah yang diberikan di bawah ini untuk menambahkan Muka Author Box di Blogger.

 1. Pergi ke Blogger → Pilih blog → Template → Edit HTML.
2. Cari (Ctrl + F) <data:post.body/> dan tambahkan kode HTML berikut setelah itu.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="about-author">

<h3 class="boxtitle">About Author</h3>

<div class="authorbox">

<div class="authorsocial">

  <li><a class="fb" href="http://facebook.com/SoftGlad" rel="nofollow"></a></li>

  <li><a class="twitter" href="http://twitter.com/soft_glad" rel="nofollow"></a></li>

  <li><a class="google" href="https://plus.google.com/114636838169087641091" rel="author"></a></li>

  <li><a class="in" href="http://sa.linkedin.com/in/ashiqhassan" rel="nofollow"></a></li>

</div>

  <div class="authorinfo">

<img src="profileimg.png" />

<p>He known as Ashiq Hassan, is the founder and the brain behind SoftGlad. A 16 

year old teen from kerala, India. He provides high quality tutorials about latest 

web design and technology trends. He loves music and likely to be a musician in 

Vstars Band. <a href="#">Read More</a></p>

</div>

</div>

</div>

</b:if>

Sesuaikan: Anda harus mengubah beberapa hal dari atas kode HTML. Ganti semua URL situs media sosial dengan media URL sosial profil (garis # 5, 6, 7 dan 8). Ganti profileimg.png (baris # 11) dengan URL foto Anda. Tambahkan info Anda sendiri di antara dua </ p> tag.

3. Sekarang kita harus gaya kotak penulis dengan menambahkan kode CSS. Lagi Cari]]> </ b: skin> dan tambahkan kode berikut sebelum atau di atasnya.

.about-author {

    width: 100%;

}

.authorbox {

    overflow: hidden;

    padding: 0;

    background: #333;

    color: #ccc;

}

.authorbox .authorinfo {

    color: #ccc;

}

.authorbox .authorsocial {

    float: left;

}

.authorbox .authorsocial li {

    list-style: none;

    margin: 0;

    position: relative;

}

.authorbox .authorsocial li a {

    width: 32px;

    display: block;

    background: url("http://softglad.at.ua/images/social-logo32.png");

    height: 32px;

    margin: 0;

}

.authorbox .authorinfo img {

    float: left;

    margin: 4px 10px 4px 5px;

    border-radius: 100%;

    width: 17%;

    background: #fff;

    padding: 5px;

}

.authorbox .authorinfo p {

    margin: 0;

    font-size: 18px;

    padding: 0 5px;

    line-height: 25px!important;

    font: 15px "Armata", Arial;

    text-align: left;

}

.authorinfo p a {

    text-decoration:none;

    color:#fff;

}

.authorbox h3 {

    margin: 0;

    display: inline-block;

    background: #333;

    color: #fff;

    font: bold 20px Arial;

    padding: 5px 10px;

}

h3.boxtitle {

    background: #333;

    color: #fff;

    margin: 0 auto;

    width: 25%;

    padding: 2px 10px;

    font: bold 16px "Armata", Arial

}

.authorbox .authorsocial li .fb {

    background-position: 0px 0px;

}

.authorbox .authorsocial li .twitter {

    background-position: 0px -32px;

}

.authorbox .authorsocial li .google {

    background-position: 0px -64px;

}

.authorbox .authorsocial li .in {

    background-position: 0px -96px;

}

.authorbox .authorsocial li .in:hover {

    background-position: -32px -96px;

}

.authorbox .authorsocial li .google:hover {

    background-position: -32px -64px;

}

.authorbox .authorsocial li .twitter:hover {

    background-position: -32px -32px;

}

.authorbox .authorsocial li .fb:hover {

    background-position: -32px 0px;

}

.authorbox:hover img {

    background: #1BC3F8;

}

.authorbox .authorinfo img, .authorbox .authorsocial li a {

    -webkit-transition: .5s;

    -moz-transition: .5s;

    -ms-transition: .5s;

    -o-transition: .5s;

    transition: .5s;

}

@font-face {

    font-family: 'Armata';

    font-style: normal;

    font-weight: 400;

    src: local('Armata'), local('Armata-Regular'), 

url(http://themes.googleusercontent.com/static/fonts/armata/v3/FG9R9aX-RIX_AvJI8USOWg.woff) format('woff');

} 

4. Simpan Template. Itu saja.

Saya harap Anda menyukai widget ini. Jangan mengirim umpan balik Anda dalam komentar di bawah ini dan jika Anda mendapatkan kesalahan ceritakan dalam komentar. Lakukan Berbagi dengan teman Anda dan nikmati.

Share on Facebook Share on Twitter Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.