1. Home
  2. Tips Blog
  3. Tutorial Blog
  4. Memasang Author Box Profesional Dibawah Postingan Blog

Memasang Author Box Profesional Dibawah Postingan Blog

13:18
Alimadura.com Memasang Author Box Profesional Dibawah Postingan Blog - Author Box? Sebenarnya cara memasang author box dibawah postingan ini bukan hal yang baru dalam dunia blogging, karena sudah banyak yang share di beberapa blog tetangga baik itu trafik blognya ramai ataupun tidak ramai. Tapi paling tidak dipostingan ini sedikit berbeda dengan cara memasang author blog tetangga (mungkin). Perbedaan menurut admin sendiri adalah bahwa author box pada postingan kali ini tampak lebih profesional, tidak tahu menurut anda sekalian karena pendapat setiap person pasti berbeda. Yang membuat author box lebih profesioal disini adalah 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 cek langsung demonya (postingan) atau anda bisa perhatikan gambar di bawah ini :
memasang-author-box-profesional-dibawah-postingan-blog

Cara Memasang Author Box Dibawah Postingan Blog

Jika anda ingin memasang author box lebih profesional, silahkan ikuti langkahnya di bawah ini :
  • Silahkan Log in ke akun Blogger Account dan pergi Dashboard Blogger
  • Silahkan klik -> Template -> Edit HTML-> klik  ►
  • Silahkan cari kode ]]></b:skin> biar cepat gunakan CTRL + F
  • Jika sudah ketemu, silahkan copy-paste kode di bawah ini tepat di atasnya
    • <style>
    /*Author box by www.alimadura.com*/
    #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqkUoIyRXH488jaqbxwnea_5ttwh8plP6nI4omE6teDHTRPHETliJAwiaQX5FpWtPB47-UWwxi6yIZKGRE9dF62bfAWB-3NXVwfOhEsnEZuvZLw7aeZxcHrAZPSh-zidNsSJfA_yNuHVg/s1600/AM-Social-Madura.png)!important;background-repeat: no-repeat
    }
    </style>

  • Silanjutnya silahkan cari code <data:post.body/>
  • 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.alimadura.com/"><img alt='author-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhb-eWyLsT_Epb6xhQ1u0JLlALtQ8aT3IiPPiy4Gw-Ck-G21eP3iJ4Npmrj3iLWY7bpgv1EOKHKpqK-9OJbZo9FaqIdYuRSUX8PPZ44w2bzr69qTYMCuwDys2R_EbGYumMx0ynBVU0MJw/s198-no/sandy+doank.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>Ali Madura is the founder of Blogger Spice. Ali Madura 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.alimadura.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/sandydoank12" 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/sandydoank12" 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/profile/view?id=159657601" 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/sandydoank12" 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/sandydoank12" 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/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_donations"/>
    <input type="hidden" name="business" value="sandydoank12@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.alimadura.com/" class="register-button">Become an author</a><div class="clear"></div></div></div></b:if>

  • Terakhir simpan template anda dan silahkan cek hasilnya
Keterangan :
  • Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhb-eWyLsT_Epb6xhQ1u0JLlALtQ8aT3IiPPiy4Gw-Ck-G21eP3iJ4Npmrj3iLWY7bpgv1EOKHKpqK-9OJbZo9FaqIdYuRSUX8PPZ44w2bzr69qTYMCuwDys2R_EbGYumMx0ynBVU0MJw/s198-no/sandy+doank.png dengan url gambar anda
  • Ganti www.alimadura.com dengan alamat blog anda.
  • Ganti semua sandydoank12 dengan ID sosial media anda
  • Ganti sandydoank12@gmail.com dengan email akun Paypal anda
  • Ganti 117552853082726584245 dengan ID google plus anda
  • Ganti profile/view?id=159657601 dengan ID linkedin anda

OK, sampai disini dulu ulasan dari alimadura.com semoga bermanfaat dan selamat mencoba Cara Memasang Author Box Profesional Dibawah Postingan Blog

2 Comments

  1. AnonymousSunday, 28 July, 2013

    mantab masbero,
    btw kode html nya kurang penutup div nya kayanya yah hhe

    ReplyDelete
    Replies
    1. Sandy DoankMonday, 29 July, 2013

      matut tengkiyu atas koreksinya masbero.............

      Delete

Mohon diperhatikan
1. No Spam
2. No Link

Subscribe to: Post Comments ( Atom )