Cara Artikel Tidak Bisa di Copy di Bagian Tertentu

Author Box With Social Media

XDTPD Blogs | Hallo sahabat blogger, kali ini kita akan membahas tentang cara membuat Author blog dengan sosial button di blogger. Author Box juga sangat patut untuk dipasang diblog kita, karena bisa memperkenalkan penulis ataupun pemilik blog kepada para pembacanya.

Selain itu, dengan adanya Author Box yang dilengkapi dengan sosial media icons juga sangat bermanfaat agar semua para pembacanya dapat menghubungi pemilik blog tersebut saat mereka memiliki keluhan ataupun pertanyaan seputar artikel yang mereka baca.

#CARA MEMBUAT AUTHOR BOX DENGAN SOSIAL MEDIA DI BLOGGER

Baiklah, yang sudah tidak sabar untuk memasang author box dengan social medianya silahkan ikuti langkah-langkah berikut ini.

Masuk ke Dashboard  blogger seperti biasanya.

Kemudian, Silahkan masuk kemu Template dan klik Edit HTML

Selanjutnya cari kode <data:post.body/> dan letakkan kode dibawah ini tepat dibawah kode tersebut.

<!-- deskripsi penulis -->
<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>
  Seorang Blogger pemula yang sedang belajar
<data:post.authorAboutMe/>      
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
<!-- deskripsi penulis end -->

Kemudian masukkan kode CSS dibawah ini tepat sebelum kode ]]></b:skin> ataupun </style>

/* CSS Author Box */
.authorboxwrap{
    background: #fff;
    margin: 0px 0px -4px;
    padding: 15px;
    overflow: hidden;
 border: 1px solid #f0f0f0;
}
.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:#00b02a}
.author_description_container h4 a:hover{color:#333}
.author_description_container p{margin:0;color:#888;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;    border-bottom: 4px solid #273d6b;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;    border-bottom: 4px solid #2a7bab;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;    border-bottom: 4px solid #902319;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

Jika sudah selesai simpan Templatenya dan silahkan lihat blognya, jika gak ada kesalahan saat pemasangan kode diatas, maka author box akan muncul.

Selesai

Itu saja tutorial cara buat author box semoga dapat membantu dan bermanfaat bagi semua para blogger. Jika ada pertanyaan silahkan tanyakan pada kolom komenta. Oh iya, tetap kunjungi XDTPD Blogs karena pada blog ini akan selalu mengupdate berbagai artikel menarik lainnya yang patut untuk dibaca.