Membuat Author Box Dengan Google+ Badge Dan Postmeta

Membuat Author Box Dengan Google+ Badge Dan Postmeta

Bola Hero Gawai

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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

72 Comments Add Comment

Makin giat aja mas adi di tutorial blog. Btw saya ambil bonusnya :D

Balas

heheh saya lebih memilih yang lama mas adhy. tapi ini ringan ya loaadingnya. :) penuh kreatif deh.. hehehe... :-d

Balas

Mencoba konsekuensi dengan niche blog kang heheeehehe... =D

Balas

Iya sis masih sama ringannya =D

Balas

eksperimen terus...:))
btw eta di jsfiddle ngedit (ngarubah) 3x nyak? hehehe...

Balas

Keren kang :)
Hebring pisan pokona mah :-d

Balas

Mantap nih kreasinya, sangat tertarik untuk memasangnya di blog.

Balas

kode css lumayan besar juga nantinya untuk loading,tapi sangat terlihat elegan kalau ditampilakn dibawah related post :)

Balas

keren banget selalu ada yang baru kalau ke sini

Balas

kode CSS tidak begitu pengaruh terhadap loading, yang sangat pengaruh terhadap loading adalah javascript. setiap penambahan kode pasti ada pengaruh, maka dari itu semua kita harus bisa seleksi widget seperti apa yang dibutuhkan blog kita dan apa yang tidak butuh. :)

Balas

wah wah maknyus ini mas ..keren :-d

Balas

Oke banget nih mas .. :) Keren lah .. :-bd

Balas

Makin mantep saja jadinya yah Kang author box nya :D
Sangat kreatip nih Kang Adhy gak kalah sama yang Muda :-d

Balas

Wow manatap eh mantap kang .. kayakna 4 gelas tah kopi na hehe
tiasa teu kinten-kintena di cobian hehe

Balas

Nu tos sepuh tea pangalaman atuh kang .. moal eleh sa rit dua rit hihi

Balas

kunjungan pagi mas Adhy, boleh dicoba itu... ntar deh masuk kulkas dl :)

Balas

Ah apal wae kang Beben mas hehehe =D biasa kang bongkar pasang :D

Balas

Hatur nuhun kang =D

Balas

Silahkan mas Felix dicoba =D

Balas

Betul kata sista Leony, sebaiknya kita selektif terhadap widget yang kita pakai, jangan sampai ada widget dg fungsi sama dipasang double.

Widget di atas, bagi yang belum punya author box dan widget sharing. :D juga bisa mengatasi missing required field update dan hcard author di rich snippets.

Balas

Iya sis hehhehe biar enggak basi =D

Balas

Makasih mas Fajrin :D

Balas

Makasih juga mas Nasar :D

Balas

Heheheehe...mung eleh cangkeng yeuh kang haadeueuhh... :D

Balas

Muhun kang, biasa bereksperimen... bongkar pasang... :D

Balas

Heheehehe kelamaan tar beku sis heheeh :D

Balas

patut dicoba nih kang autornya mau coba ah praktekin dulu xixixi ^_^

Balas

Punten..
Lama tidak hadir jadi, jadi kaku lagi mau belajar. Hapunten.
ikut experimen Mas Adhy.....

Balas

Mas Adhy ..itu memang masih muda...

Balas

Kayaknya masih belum responsive ya mas Author Boxnya..

Balas

makin gagah kang kalo ada yang author box begitu hehe :D

Balas

mantaf banget kang , pengen praktekin ahhh

Balas

met siang,nyimak we kang nju teu semangat ngeblog.sukses sllu buat blog ma orgnya salam blogger majalengka

Balas

tapi ude pake kacemate kwkwkwkwk....

Balas

ijin pasang di template demo dulu bang adhy...
saya ingin tanya, kalau letaknya diluar postingan penerapannya seperti ini juga ya bang..?
terima kasih sebelumnya

Balas

saya udah coba pasang di luar post.body, malah error bang adhy.
ada solusi gak..? @@,

Balas

tampilam author box nya sangat sederhana sekali ya mas. Jadi pengen juga nich pasang author box, tapi kayaknya blog saya sudah penuh widget nya hehe :D

Balas

Hehehehe iya kata siapa udah tuir =D masih muda nih :D baru anak tiga kok =D

Balas

Wih semakin keren aja .... :D

Balas

Silahkan sis Friska =D untuk pertanyaan di forum udah dijawab sis :D silahkan dicoba

Balas

Silahkan mas Marlon, wah sekarang PPnya pakai pendamping hehehe =D

Balas

Iya mas, soalnya G+ Badge-nya ga bisa responsive =D

Balas

Iya jadi bisa narsis hehehehe :D

Balas

Silahkan sista =D

Balas

tergantung dimana letak kode html nya mas :)

Balas

Siip kang salam blogger juga =D

Balas

Untuk post meta, tidak bisa disimpan di luar postingan. Pasti akan error =D untuk G+ Badge dan share button bisa disimpan di mana aja :D

Balas

niche blog itu yg gmn seh kang? maklum nubi...

Balas

Heheehehe iya blognya mbak Ririn kan udah rame hehehe =D

Balas

Heheheehe makasih mas :D eh blognya makin keren mas, responsive homepagenya bagus....

Balas

kodenya taruh sebelah mana kang?

Balas

Seperti biasa kode CSS simpan di atas skin
]]></b:skin>
dan kode HTML di simpan di bawah postingan. Di bawah kode
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Balas

okelah kalau begitu bang...
terima kasih atas responnya...

Balas
This comment has been removed by the author.

Itu ada pengaruh ke loading ga mas? kalau secara pribadi, bagi saya lebih nyaman yang kaya biasa mas, apa mungkin belum kebiasa kali ya?

Balas

Yang ini enggak sih mas... untuk tombol sharenya juga cukup ringan menggunakan css sprite untuk imagenya.

Balas

Iya mas.... Saya lebih Mengedepankan loading nya mas .. dulu saya mah belum tahu soal lebih dalem lagi ... :)

Balas

Walah, mantap kang dan pastinya valid :D

Balas

mantap kang, bookmark dulu =D

Balas

Langsung praktek ajah deh kang ... Hehehe Naksir banget pas ngeliat itu box di blog nya mba Lionely , Hehehe ^_^

Balas

Iya heheheh =D

Balas

Silahkan mas :D

Balas

Silahkan mas ^_^

Balas

keren dan simple mas , author box nya ......
jadi mau pingin pasang deh . :)

Balas

kalo hanya membuat postmeta saja gimana kang?

Balas

Mas gimana cara pemasangannya...??

Balas

baik mas terima kasih tapi saya tetap gak bisa mas gagal :D

Balas

punya saya acak2kan kang, bantu solusinya :) pcfreesoftwarez.blogspot.com/2014/01/bcalm-responsive-blogger-template.html

Balas

bles di komentar saya yah kang,hee =D

Balas

Bagus ini tytorialnya Kang Adhy saya coba nih terima kasih :-bd

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×