Xivanki Share !!: Cara Membuat Author Box di Blog Plus Tombol Sosial Media

Cara Membuat Author Box di Blog Plus Tombol Sosial Media - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Author Box di Blog Plus Tombol Sosial Media !! Semoga tulisan dengan kategori Tutorial Blogger !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Author Box di Blog Plus Tombol Sosial Media ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Author Box adalah suatu kotak yang berisi deskripsi singkat tentang si penulis atau admin Blog. Dan biasanya diletakkan diakhir / dibawah postingan. Tepatnya di bawah tombol Share.

Pada kesempatan kali ini, saya akan membagikan cara untuk membuat author box di blog plus tombol media sosial. Author Box yang akan saya bagikan di sini mempunyai tampilan yang lumayan keren.

Apakah sobat mau memiliki author box seperti diatas pada blog sobat. Jika mau, silahkan baca postingan ini sampai selesai.

Berikut ini langkah-langkah dalam membuat author box keren plus tombol sosial media di blog. Silahkan di ikuti dengan baik dan benar.

1. Masuk ke Blogger, pilih Blog sobat

2. Lalu klik menu Template > Edit HTML

3. Setelah itu, silahkan sobat cari kode <data:post.body/> (gunakan Ctrl+F). Biasanya, kode <data:post.body/> lebih dari satu. Jadi silahkan sobat cari kode <data:post.body/> yang paling terakhir di template sobat.

4. Jika sudah ketemu, letakkan saja kode berikut ini tepat di bawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='/' rel='author'><data:post.author/></a></h4>
<p>
DESKRIPSI SOBAT DI SINI!!
</p>
<div class='authorsocial'>
<a class='img-circle1' href='LINK FACEBOOK SOBAT' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle3' href='LINK GOOGLE+ SOBAT' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

5. Cari lagi kode ]]></b:skin>. Dan letakkan kode berikut ini tepat diatasnya.

/* Author Box */
.authorboxwrap{background:#FFF;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #fff;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#2288bb}
.author_description_container h4 a:hover{color:#222}
.author_description_container p{margin:0;color:#444;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#eb4026;color:#fff;}
.authorsocial a:nth-child(3) i {background:#2d609b;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

6. Klik Simpan Template


Selesai. Silahkan isi deskripsi singkat tentang sobat pada kotak tersebut. Ingat!! tulis deskripsi singkat saja, jangan terlalu panjang. Dan juga jangan lupa untuk memasukkan link Facebook dan Google+ sobat kedalam kotak tersebut.

Saya rasa hanya itu saja yang dapat saya bagikan pada postingan kali ini. Semoga bermanfaat untuk sobat.