Pasang Kolom About The Author

About The Author ini banyak diaplikasi oleh pemakai wordpress dan sekarang saya coba sharing untuk dapat juga digunakan bagi pengguna blogspot dengan kode CSS yang simpel. penampakannya bakal seperti pada Blog Godown.

Banyak pengguna blogspot yang iri dengan pengguna wordpress karena banyak widget yang menarik disana, tapi itu bukan suatu yang susah untuk kita aplikasikan ke blog kita.

Ini contoh screenshootnya seperti yang ada pada blog Ngobrol Seputar Bisnis Online:


About the author

Kita mulai aja ya...

  • Login dulu ke account blogger kamu.
  • Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Tambahkan kode CSS berikut di atas kode ]]></b:skin>

.authbio{
color: #555;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 3px groove #ccc;
width: 475px;
padding: 10px;
margin-bottom:20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}

.authbio a{

text-decoration:underline;

}
img.alignleft {
float:left;
background-color: #c4e3e0;
border:5px solid #c4e3e0;
padding: 5px;

margin-left:5px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;

}


Setelah itu simpan dulu templatenya ntar bisa hilang..
lalu kamu ceklist Expand Template Widget.

Kamu cari kode <p><data:post.body/></p>
kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.
maka pilih kode yang kedua biar tidak tampak pada halaman utama.
setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.

<div class='authbio'>
<div style='float: left;'>
<img alt='rudy azhar' src='http://1.bp.blogspot.com/_KgIhfKU4BcE/SvRaO6PL06I/AAAAAAAAApw/l7cDVEblMRw/s400/rudy6.jpg'/></div>
<h2><strong>About The Author:</strong></h2>
<a href='http://rudyazhar.blogspot.com/2009/07/rudy-azhar-admin-rudyazhar-dot-com.html'><strong>Penulis</strong></a> ialah seorang yang lagi merambah dunia internet marketing dan belajar lebih dalam lagi. Jika anda senang dengan tulisan ini, pastikan anda <a href='http://feedburner.google.com/fb/a/mailverify?uri=internetmarketingsharing' target='_blank'><strong>Mendaftar Gratis</strong></a>! atau ambil <a href='http://feeds.feedburner.com/internetmarketingsharing' target='_blank'><strong>Feed Rss</strong></a>.</div>


Simpan template kamu dan lihat hasilnya...

Jangan lupa untuk merubah alamat foto dengan alamat foto kamu, serta kamu bisa mengganti kalimat diatas dengan kreasi kamu sendiri.

9 komentar untuk “Pasang Kolom About The Author”

  1. ok, saya coba ya. terima kasih tuk infonya :)

    salam

    romie
    www.engineeringtown.com

    BalasHapus
  2. terima kasih infonya, selamat kan bumi kita. baca disini http://www.ilpeng.com/2010/01/script-membuat-websites-anda-ramah.html

    BalasHapus
  3. :D
    sip deh... thanks buat artikelnya... salam sukses

    BalasHapus
  4. terima-kasih atas infonya, sangat bermanfaat dan membantu. Salam

    BalasHapus
  5. kok saya udah coba mas rudy, tapi gak muncul gambarnya yah :( jadinya tak hapus saja :)

    10 Tips Ampuh Mempercepat Loading Blog Anda!

    BalasHapus
  6. @Blog Pengembangan Diri gambar author maksudnya Mas, apa sudah diupload ke server? soalnya yang diambilkan URL imagenya...

    BalasHapus
  7. keren banget nih gan. sangat membantu

    BalasHapus