Memasang Multi Author Box di Bawah Postingan Blog - Karena banyak dari temen temen sobat bangbil yang bertanya cara membuat Multi Author Box, nah ane bakalan share nih tutorialnya dan ada tambahan tombol sosmed (sosial media)nya juga loh..
Tampilan Multi Author Box
Gimana? kalian tertarik? yuk langsung pasang!
Cara Memasang Multi Author Box di Bawah Postingan Blog
1. Buka Blogger > Template > Edit HTML
2. Cari kode <data:post.body/> biasanya kode ini lebih dari satu guys, kalian cari yang paling bawah sendiri
3. Kalian tambahkan kode dibawah ini tepat setelah kode <data:post.body/>
2. Cari kode <data:post.body/> biasanya kode ini lebih dari satu guys, kalian cari yang paling bawah sendiri
3. Kalian tambahkan kode dibawah ini tepat setelah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<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
</p>
<div class='authorsocial'>
<a class='img-circle1' href='FACEBOOK' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='TWITTER' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='GOOGLE PLUS' 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 = dengan deskripsi yang kalian inginkan
Facebook,Twitter,Google Plus = ganti dengan link sosial media kalian
4. Selanjutnya, kalian taruh kode dibawah ini tepat sebelum kode ]]></b:skin> atau </style>
Facebook,Twitter,Google Plus = ganti dengan link sosial media kalian
4. Selanjutnya, kalian taruh kode dibawah ini tepat sebelum kode ]]></b:skin> atau </style>
/* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.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:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.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;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;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;}
5. Simpan Template
Okeh segini dulu tutorial tentang Memasang Multi Author Box di Bawah Postingan Blog semoga membantu kalian untuk memperkenalkan diri ke visitor blog kalian.
Source : http://twistedshape.blogspot.com/2015/06/memasang-multi-auhor-box-di-bawah-postingan.html
Source : http://twistedshape.blogspot.com/2015/06/memasang-multi-auhor-box-di-bawah-postingan.html