Pasang Kolom About The Author

Pasang Kolom About The Author

Posted by rike on 0

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:









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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWVCmhnnqiQ1M4LWaoCtBkDcrrtHUAtN66IZDZkBdQUTVd4Ot8gqEhiGpIRw8_dPd57iOuSJ8n6heyZ_IIcoHpv7ljdH0VWyIyB2BNqv7KZlsfRaJ55OeDmsaj3UF4NYaCOCjaDh92/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.