Membuat Author Box Dengan Google+ Badge Dan Postmeta

Author Box Dengan Google+ Badge Dan Postmeta
Memanfaatkan Google+ Badge agar penempatannya bagus dan pas di blog, kali ini saya mencoba membuat author box yang di dalamnya terdapat Google+ Badge yang di simpan berdampingan dengan postmeta dan tombol sharing.

Postmeta yang saya gunakan di sini bisa juga berguna untuk mengatasi missing required field update dan hcard author di rich snippets testing tool, juga memanfaatkan tombol share blogger ala Kompi Ajaib.

Widget Author Box kali ini memanfaatkan beberapa postingan yang telah saya terbitkan sebelumnya yang bisa Anda baca lagi pada link-link di bawah ini.

Baca juga: 

Penampakannya seperti pada gambar di bawah ini.

Screenshot Author Box

Bagi yang ingin mencobanya silahkan gunakan kode CSS dan HTML di bawah ini.

Kode CSS

.author-box{background:#fff;width:100%;position:relative;margin-top:10px;padding:10px 10px 7px;border:1px solid #ccc}
.box-right{float:right;position:absolute;width:52%;height:104px;right:0;top:0;margin:10px;padding:0;border:1px solid #ccc;border-radius:2px}
.author-profil{font-size:14px;color:#666;padding:2px 10px 2px;border-bottom:1px solid #ccc}
.update-time{font-size:14px;color:#666;padding:2px 10px 2px;border-bottom:1px solid #ccc}
.label-post{font-size:14px;color:#666;padding:2px 10px 2px;border-bottom:1px solid #ccc}
.author-profil a,.update-time a,.label-post a{color:#666;text-decoration:none}
.author-profil a:hover,.update-time a:hover,.label-post a:hover{color:#20c1ea;text-decoration:none}
.updated{border-bottom:none}
.widget-social{padding:0;margin-right:-10px;margin-left:65px;margin-top:7px}
ul.kompisocial{border:0;list-style:none;overflow:hidden;margin:10px}
.kompisocial li{float:right;background:none!important;margin-left:0;padding:0!important}
.kompisocial li a {display:block;width:20px;height:20px;background:url(http://4.bp.blogspot.com/-cE37Bhw8xiM/UnHLwzzA9TI/AAAAAAAAaYg/4uq1ntON0RE/s1600/share_buttons2.png) no-repeat transparent;text-indent:-99999em!important}
.kompisocial li a:hover{padding:0!important}
.kompisocial li.fbicon a{background-position:-60px 0;transition:all 400ms ease-in-out}
.kompisocial li.twicon a{background-position:-40px 0;transition:all 400ms ease-in-out}
.kompisocial li.bicon a{background-position:-20px 0;transition:all 400ms ease-in-out}
.kompisocial li.emicon a{background-position:0 0;transition:all 400ms ease-in-out}
.kompisocial li.fbicon a:hover{background-position:-60px -20px}
.kompisocial li.twicon a:hover{background-position:-40px -20px}
.kompisocial li.bicon a:hover{background-position:-20px -20px;}
.kompisocial li.emicon a:hover{background-position:0 -20px}

Kode HTML

<div class='author-box'>
<div class='g-person' data-href='//google.com/+AdhySuryadi' data-layout='landscape' data-rel='author' data-width='273'/>
<div class='box-right'>
<div class='author-profil'>
Ditulis oleh :<span class='author'><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'>
          <span class='post-author vcard'>
              <span class='fn'><data:post.author/></span>
          </span></a> </span>
</div>
<div class='update-time'>
Diterbitkan : <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a>
</div>
<div class='label-post'>
Pada katagori : <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' expr:title='data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
</div>
<div style='float:left;padding:0;'>
<div class='widget-social'>
<div style='margin-left:-55px;margin-bottom:-30px;font-size:14px'>Share this :</div>
<ul class='kompisocial'>
<li class='fbicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=620\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>Facebook</a>
</li><li class='twicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>Twitter</a>
</li><li class='bicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>Blog</a>
</li><li class='emicon'>
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>Email</a>
</li>
</ul>
  </div></div>
<div style='float:left;padding:0 0 0 6px;margin-left:0px;margin-top:6px'>
<div class='g-plusone' data-size='medium'/>
</div>
</div>
</div>

Silahkan ganti URL Profil Google+ //google.com/+AdhySuryadi di atas dengan URL Profil Google+ Anda sendiri.

Dan untuk menampilkan Google+ Badge jangan lupa untuk menambahkan javascriptnya di atas kode </body>

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Jika di blog Anda sudah ada kode javascript di atas sudah ada silahkan abaikan langkah di atas.

Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments