Wordpress Style Author Bio Box For Blogger

Welcome to the Website of Oto Website, Saya ucapkan bagi seluruh pengunjung yang sedang membaca Artikel Oto Website, atau mungkin sedang tersesat di blog ini melalui Search Engine. Kali ini dalam artikel ini kita akan umembahas tentang tutorial blogger kembali.

Apakah Anda pernah melihat Author Box atau Kotak Admin di salah satu blog Wordpress? Kalo Anda pernah melihatnya apakah Author Box tersebut cukup membuat Anda terkesan?

Kenapa Saya bertanya seperti itu? Ya karna kali ini Author Box yang ada pada Wordpress lah yang akan kita bahas tentang bagaimana cara menambahkannya pada blogspot dan tutorial kali ini Saya beri judul: Wordpress Style Author Bio Box For Blogger. Sebelumnya blog ini juga pernah membahas Kotak Admin untuk blogspot yang berada DISINI.

Untuk lebih jelasnya tentang Wordpress Style Author Bio Box For Blogger dan bentuknya silahkan Anda lihat demo berikut ini:

SceenShot ▼

(gambar oleh dek_rif)

Live Demo

Lihat Demo

Tambah Wordpress Style Author Bio Box For Blogger

Wordpress Style Author Bio Box For Blogger ini peletakkan di bawah postingan blogger, atau di bawah artikel blog Anda, berikut ini adalah kode yang di gunakan untuk membuat Wordpress Style Author Bio Box For Blogger.
Letakkan tag berikut di bawah tag <data:post.body/> yang kedua dalam template Anda.
Atau
Letakkan tag berikut sebelum tag <div class='post-footer-line post-footer-line-1'> dalam template Anda.

/* Code for the author box starts here otowebsite.blogspot.com */
<style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:105px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }
a.gplus-s{background: url("https://code-otowebsite.googlecode.com/svn/trunk/gp-icon.png") no-repeat 0 0px; color: #666;  font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}
</style>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "Author Name"'>
<div id="postauthor">
<div id="author-info">
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_118ChHKE4ltjG9-88QU5E_y2TMlW0MNx-fkbuIH1WVeOkETkXkVL958h4xk7_PBpsqVcg9MWSqdp-1Y6p1wcpqouzA7gHFsGSNWWxYfYKgJAhFWbBQ38ZSjIXYw6lzaGj9SOK9oVA4/s1600/author.jpg'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName Semoga Artikel ini banyak berguna.</h5>
<p>Jika Anda menyukai Artikel ini Anda dapat mengikuti Oto Website di <strong>
<a href="http://twitter.com/otowebsite" rel="nofollow" >Twitter  </a> </strong>.Berlangganan <strong> feed  Oto Website via <a href="http://feeds.feedburner.com/otowebsite" rel="nofollow" >RSS</a> atau  <a href="http://feedburner.google.com/fb/a/mailverify?uri=otowebsite&loc=en_US" rel="nofollow" > EMAIL </a>  </strong>untuk mendapatkan Update terbaru.</p></div>
<div id="author-connect">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21&appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>      
<a href="https://twitter.com/otowebsite" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @otowebsite</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://plus.google.com/115780777398536909642" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if></b:if>

Keterangan:

• Ganti kode yang di blok biru dengan URL Gambar Anda.
• Ganti kode yang di blok kuning dengan ID feedburner Anda
• Ganti kode yang di blok hijau dengan ID twitter Anda
• Ganti kode yang di blok ungu dengan URL ID facebook Anda.
• Ganti kode yang di blok merah dengan ID Google Plus Anda.

Dari Meja Editor

Saya rasa cukup untuk kali ini, yang membahas tutorial blogger berjudul Wordpress Style Author Bio Box For Blogger. Saya harap Anda menyukai tutorial di atas dan tidak mengalami kesulitan dalam pembuatan atau pemasangan, Jika Anda mengalami masalah tentang tutorial di atas silahkan tinggalkan pertanyaan Anda pada form komentar!