Cara Memasang Author Box Di Blogger!

By /

Pada kesempatan kali ini saya akan memberikan tutorial cara memasang Author Box dibawah postingan blog, sebenarnya ini bukan hal yang baru dalam dunia blogging, karena sudah banyak blog yang share artikel tentang cara memasang Author Box di blogger ini.

Tetapi pada postingan ini mungkin sedikit berbeda dengan postingan cara memasang author blog yang di sediakan oleh blog lain. Perbedaannya sendiri adalah bahwa author box pada postingan kali ini tampak lebih profesional, tidak tahu menurut anda sekalian karena pendapat setiap orang pasti berbeda. Yang membuat author box ini terlihat lebih profesioal yaitu author box tersebut dilengkapi dengan tombol donasi paypal buat para admin blogger itu sendiri sekaligus dilengkapi juga dengan tombol situs jejaring sosial.

seperti apakah author box profesional tersebut? Anda bisa langsung mencobanya dengan cara mengikuti tutorial di postingan ini.

Baca juga: 6 Aplikasi Belajar Coding Gratis Terbaik!

Cara Memasang Author Box Dibawah Postingan Blog

cara memasang Author Box dibawah postingan blog

Berikut langkah-langkah cara memasang Author Box di blogger yang bisa kamu coba.

  1. Silahkan Log in ke akun Blogger kalian masing-masing
  2. Masuk ke halaman theme -> Edit HTML
  3. Silahkan cari kode ]]></b:skin> biar cepat gunakan CTRL + F
  4. Jika sudah ketemu, silahkan copy dan paste kode di bawah ini tepat di atasnya kode ]]></b:skin> 
    <style> /*Author box by alimadura*/ #AliMaduraAB{ margin: 10px 0; } #AliMaduraAB a:hover { background: none!important; } #AliMaduraAB .AM1 { background: #BAB6B6; padding: 20px; } #AliMaduraAB .AM1 .amavatar { float: left; line-height: 1; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000;}#AliMaduraAB .AM1 .AMAuthorinfo { margin: 0 0 0 110px;}#AliMaduraAB .AM1 .AMAuthorinfo h6 { margin: -4px 0 0 0; color: white; font-size: 20px;}#AliMaduraAB .AM1 .AMAuthorinfo h6 span { font-size: 11px; font-weight: normal; margin: 0 0 0 1em; background: #333; padding: 1px 9px 2px 9px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; filter: alpha(opacity=60); opacity: 0.6;}#AliMaduraAB .AM1 .AMAuthorinfo p { color: #333; margin: 0; font-weight: normal; font-size: 14px;}#AliMaduraAB .AM2 { background: #666;}#AliMaduraAB .AM2 a.amsocial-item { display: block; float: left; padding: 15px; color: white; text-align: center;}#AliMaduraAB .AM2 .amsocial-item .icon { height: 32px; width: 32px;}#AliMaduraAB .AM2 .amsocial-item > span { display: block; margin: auto; text-align: center;}#AliMaduraAB .AM2 .amsocial-item .label { font-weight: bold; font-size: 13px;}#AliMaduraAB .AM2 .amsocial-item .click { font-size: 11px; color: #EAEAEA; line-height: 1;}#AliMaduraAB .AM2 a.amsocial-item:hover { background:#2E9947!important;}#AliMaduraAB .AM3 { background: #2E9947;}#AliMaduraAB .AM3 form, #AliMaduraAB .AM3 a.donation-button { display: block; float: left;}#AliMaduraAB .AM3 .donation-button { background: #A10048; border: none; margin: 0; padding: 10px; font-family: Impact; font-size: 30px; color:white; line-height: 1.5em;}#AliMaduraAB .AM3 .donation-button:hover { background:#000000; cursor: pointer;}#AliMaduraAB .AM3 .register-button { display: block; color: white; border: none; margin: 0; text-align: right; font-family: Impact; font-size: 30px; text-align: right; padding: 10px; line-height: 1.2em;}#AliMaduraAB .AM3 .register-button:hover { color: black; cursor: pointer;}#AliMaduraAB .AM2 .amsocial-item.twitter .icon {background-position: 0 -32px;}#AliMaduraAB .AM2 .amsocial-item.facebook .icon {background-position: 0 -64px;}#AliMaduraAB .AM2 .amsocial-item.gplus .icon {background-position: 0 -96px;}#AliMaduraAB .AM2 .amsocial-item.linkedin .icon {background-position: 0 -128px;}#AliMaduraAB .AM2 .amsocial-item.youtube .icon {background-position: 0 -160px;}#AliMaduraAB .AM2 .amsocial-item.pinterest .icon {background-position: 0 -192px;}#AliMaduraAB .amsocial-item .icon {background-image:url(http://4.bp.blogspot.com/-YhnL54vOTVA/UchjEWZmKpI/AAAAAAAAICg/_UjQ2BUPJDo/s1600/AM-Social-Madura.png)!important;background-repeat: no-repeat}</style>

     

  5. Silanjutnya silahkan cari code <data:post.body/>s
  6. Silahkan copy-paste kode dibawah ini dan letakkan di atas /di bawah kode <data:post.body/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div id="AliMaduraAB" data="1"> <div class="row AM1"> <div class="amavatar"><a href="http://www.blogkamu.com/"><img alt='author-avatar' src='urlgambar.png' class='amavatar avatar-90 photo' height='100' width='100' /></a> </div><div class="AMAuthorinfo"> <h6>Posted By : Ali Madura<span>Site Owner</span></h6> <p>tokoria.id is the founder of Blogger Spice. is the owner and founder of BloggerSpice.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share technical hacking/security tips with you. And God is the center of his being. </p><div class="clear"></div></div><div class="row AM2"><a target="_blank" href="http://www.blogkamu.com/" class="amsocial-item website" meta="website"><span class="icon"></span><span class="label">Website</span><span class="click"><span class="val">10</span> clicks</span></a><a target="_blank" href="https://twitter.com/" class="amsocial-item twitter" meta="twitter"><span class="icon"></span><span class="label">Twitter</span><span class="click"><span class="val">2</span> clicks</span></a><a target="_blank" href="http://www.facebook.com" class="amsocial-item facebook" meta="face"> <span class="icon"></span><span class="label">Facebook</span><span class="click"><span class="val">10</span> clicks</span></a> <a target="_blank" href="https://plus.google.com/117552853082726584245" class="amsocial-item gplus" meta="gplus"> <span class="icon"></span> <span class="label">Google+</span><span class="click"><span class="val">7</span> clicks</span></a> <a target="_blank" href="http://www.linkedin.com/" class="amsocial-item linkedin" meta="linkedin"> <span class="icon"></span><span class="label">LinkedIn</span><span class="click"><span class="val">4</span> clicks</span></a> <a target="_blank" href="https://www.youtube.com/user/youtubekamu" class="amsocial-item youtube" meta="youtube"> <span class="icon"></span> <span class="label">Youtube</span><span class="click"><span class="val">3</span> clicks</span></a> <a target="_blank" href="http://pinterest.com/" class="amsocial-item pinterest" meta="pinterest"><span class="icon"></span><span class="label">Pinterest</span><span class="click"><span class="val">3</span> clicks</span></a><div class="clear"></div></div><div class="row AM3"><form class="author-donation" action="https://www.paypal.com/" method="post"><input type="hidden" name="cmd" value="_donations"/> <input type="hidden" name="business" value="emailkamu@gmail.com"/> <input type="hidden" name="lc" value="US"/><input type="hidden" name="item_name" value="Donate Blogger Spice"/><input type="hidden" name="no_note" value="0"/><input type="hidden" name="currency_code" value="USD"/><input class="donation-button" type="submit" name="submit" value="+Donate this author"/></form><a href="http://www.blogkamu.com/" class="register-button">Become an author</a><div class="clear"></div></div></div></b:if>

  7. Terakhir simpan template anda dan silahkan cek hasilnya

Keterangan :

  • Ganti urlgambar.png dengan url gambar anda
  • Ganti www.blogkamu.com dengan alamat blog anda.
  • Ganti semua link sosial medua dengan sosial media anda termasuk linkedin
  • Ganti emailkamu@gmail.com dengan email akun Paypal anda
  • Ganti 117552853082726584245 dengan ID google plus anda

Sekian tutorial dari tokoria.id tentang cara Memasang Author Box Dibawah Postingan Blog, semoga bermanfaat!

Scroll to Top