Membuat Author Box Pada Blogger

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
November 22, 2017


Apakah anda pernah berpikir untuk memiliki Author Box yang keren? Kami tahu pasti anda semua menginginkan itu.

Tapi....

Pertanyaannya apakah anda mengetahui cara membuat Author Box yang keren pada blog tepatnya dibawah postingan Blog anda seperti halnya yang saya punya dibawah postingan Blog saya ini.

Tetapi sebelum kelangkah membuat Author Box dibawah postingan blog saya ingin sedikit menjelaskan Apa fungsi Author Box pada Blog.

"Author Box Pada sebuah Blog sangat penting, dengan itu seseorang yang mengunjungi website atau blog anda mengetahui siapa penulis dari artikel/postingan yang mereka baca, dan dengan adanya author box akan membuat seseorang menambahkan anda kelingkaran pertemanan media sosial mereka"- Fungsi singkat Author Box

Langsung saja saya akan memberikan sourch Codenya untuk membuat Author Box keren pada sebuah Blog. tetapi sebelumnya perhatikan tampilan Author Box yang akan anda buat.


Apakah anda sudah tak sabar membuat Author Box yang keren seperti gambar di atas, Oke kalo begitu kita mulai dari sekarang.

Langkah 1# Login ke Blog Anda
Langkah 2# Pada dashboard Blog anda klik Tema
Langkah 3# Klik Edit HTML
Langkah 4# Cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat di atasnya.

Fungsi dari kode CSS dibawah ini adalah untuk mengatur tampilan Author Box yang akan Anda Buat. Misalnya ukuran Author Box dan ukuran Image, Jadi sangat gampang untuk mengeditnya asalkan amda paham sedikit HTML.

 /*Professional Author Box CSS Code*/

.about-author {

width : 565px;

overflow : hidden;

margin:10px 0px;

border:0px;

    background: #f2f2ef;

    margin: 0 0 30px 0;

    padding: 10px;

    border: 1px solid #EAEDEF;

    overflow: hidden;

    color: #333333;

    font-size: 14px;

    font-family: inherit;

    line-height: 24px;

}

.about-author img {

display: block;

width: 90px;

height: 90px;

margin: 0 1.2em 0 0;

float: left;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

-webkit-border-radius: 999em;

-moz-border-radius: 999em;

border-radius: 999em;

border: 2px solid #ddd;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

.about-author h3{

font-family:georgia !important;

font-size:18px !important;

margin:9px 0px !important;

color:#666 !important;

border-bottom:2px solid #666 !important;

border-top:0px !important;

}

.about-author p {

margin:0px;

text-align:justify;

color:#666;

}

/*Professional Author Box CSS Code*/ 

Langkah 5# Cari kode <data:post.body/> lalu tempatkan kode dibawah ini tepat dibawahnya.

 <div class='about-author'>

<img align='left' src='#URL IMAGE'/><p>Menjadi seorang Blogger adalah hal yang sulit saya jalani, dimana setiap hari saya harus selalu Memikirkan apa yang harus saya tuangkan dalam sebuah Kertas Digital dan itu adalah kewajiban yang harus dijalani sebagai sorang Blogger - Arman Basir</p><br/>

<p>Mari Terhubung:

<a href='#URL TWITTER' rel='nofollow' target='_blank'><font color='#00aced'>Twitter</font></a> |

<a href='#URL INSTAGRAM' rel='nofollow' target='_blank'><font color='#CD853F'>Instagram</font></a> |

<a href='#URL LINKEDIN' rel='nofollow' target='_blank'><font color='#00aced'>Linkedin</font></a> |

<a href='#URL YOUTUBE' rel='nofollow' target='_blank'><font color='#dd4b39'>Youtube</font></a>  |

<a href='#URL FACEBOOK' rel='nofollow' target='_blank'><font color='#3b5998'>Facebook</font></a> |

<a href='#URL GOOGLE+' rel='nofollow'><font color='#dd4b39'>Google Plus</font>

</a></p>

</div> 

Sekian share kali ini semoga kalian semua mempunyai Author box yang keren, lengkap dan berisi informasi yang jelas, supaya para pengunjung blog anda mengetahui identitas penulis dan memungkinkan mereka untuk menambahkan anda kelingkaran pertemanan mereka.


Artikel Menarik Lainnya


SUBSCRIBE TO OUR NEWSLETTER