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



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='http://2.bp.blogspot.com/-Qh_sHEPX-DY/UK9RmtNQ36I/AAAAAAAAFuo/pVmwYzXaW8o/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!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top