Membuat Author Box Dengan Google+ Badge Dan Postmeta
Memanfaatkan Google+ Badge biar penempatannya anggun dan pas di blog, kali ini aku mencoba menciptakan author box yang di dalamnya terdapat Google+ Badge yang di simpan berdampingan dengan postmeta dan tombol sharing.
Postmeta yang aku gunakan di sini sanggup juga berkhasiat 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 aku terbitkan sebelumnya yang sanggup Anda baca lagi pada link-link di bawah ini.
Baca juga:
- Mengatasi Missing Required Field Update Dan Hcard Author
- Membuat Widget G+ Author Di Blog
- Membuat Share Button Blogger Ala Kompi Ajaib
Penampakannya ibarat pada gambar di bawah ini.
Bagi yang ingin mencobanya silahkan gunakan isyarat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwbDWhJDHTgyN0zhDvTx8VYlYDAuPieZ9taGS4ZTFzuiV8SGeQQMXoZgi_MV3pQhidvSPi-pxEZHczPps1zq5OWAPOt-hUFHIoUKbYSYnxwVTFzE5KCBWquBaZCMgGGdeembLHrYC-uMU/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 != "true"'>,</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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=620\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>Facebook</a>
</li><li class='twicon'>
<a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>Twitter</a>
</li><li class='bicon'>
<a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>Blog</a>
</li><li class='emicon'>
<a expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' 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 isyarat </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 isyarat javascript di atas sudah ada silahkan abaikan langkah di atas.
Selamat mencoba...
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Author Box Dengan Google+ Badge Dan Postmeta"
Posting Komentar