Cara buat Info Penulis atau Author Info


Salam,

Biasa kita tgk kat blog yg guna wordpress, kat bawah setiap post ade kotak info penulis (Author Info), tapi klau kat blogger tak de kan..

Kali ni saje nak kongsi cara2 nak buat Info penulis atau author info..Camne rupa author info tu? hmmm...lebih kurang cam kat bawah entry ni dan entry2 yg lain kat blog ni la..ade yg berminat???

Hihihihi klau tak de pun tetap nak kongsi jugak.
Langkah demi langkah cara buat Info Penulis atau Author Info:

1. Pergi ke Design / Edit HTML / tick Expand Widget Templates ( Note : seeloknya download full templates dulu sebagai langkah berjaga2 )

2. Cari ]]></b:skin> dan paste CSS code kat bawah ni sebelum ]]></b:skin>
.author_info {
float: left;
width: 483px;                 /* Set Width of Widget As you want */
padding: 10px;
border: 1px solid #a1cb26;    /* Border of Widget */
margin-bottom: 15px;
margin-top: 15px;
background: #F0FDC6;          /* Background Color of Widget*/
}
.author_info h3 {
font-size:17px;
color:#001530;                /* Text color of "Ditulis oleh" */
margin-bottom: 5px;
}
.author_photo {
float: left;
margin: 0 10px 0 5px;
}
.author_photo img {
border: 3px solid #ccc;       /* Border color of Image*/
 height: 100px; width:100px;  /*Height and Width of Avatar of Author */
}
3.Cari <div class='post-footer-line post-footer-line-3'>, dan paste code kat bawah ni selepas <div class='post-footer-line post-footer-line-3'>. ( Note :Boleh juga letak code kat bawah ni selepas <data:post.body/> )
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://4.bp.blogspot.com/_rGfAms2eYNQ/TTeo89MJXFI/AAAAAAAAEEQ/p8qqpQK9rtA/s1600/imej korang.JPG'/></div>
<h3>Ditulis oleh:<a href='http://anamarza7.blogspot.com/'>Anamarza</a> </h3>

<p>Ibu kepada sepasang cahaya mata. <a href='http://www.blogger.com/profile/xxxxxxxxxx'>Klik sini</a> untuk melihat profile saya.</p><p>Ikuti saya di<a href='http://www.twitter.com/abcdefg'><b>Twitter</b></a> atau jadi kawan saya di <a href='http://www.facebook.com/abcdefg' target='_blank'><b>Facebook</b></a>.</p>
</div>

</b:if>
4. Tukar :
  • URL image yg berwarna merah kepada url gambar korang sendiri
  • URL berwarna biru kepada url korang sendiri
  • Ayat yg berwarna ungu (purple) kepada ayat korang sendiri
  • Atau kalau tak nak letak link twitter dan facebook tu, pepandai la korang adjust sendiri eik...
5. Dah siap Save sahaja...

Note :  Untuk menyesuaikan dengan warna dan tema blog korang, ubah CSS code berwarna hijau mengikut kesesuaian blog korang.

Kalau tak berjaya guna code kat atas ni boleh tgk tutorial asal kat sini " thetricks.net "

Untuk blog saya ni, saya guna code yg lain sikit, tapi tak de sumber asal tutorial, sbb buat pun ikut "try and error" jer..klau ade yg teringin nak cuba info penulis/author info style macam kat bawah entry nih, inform jer la eik, nanti saya cuba buat tutorial lain plak.

3 comments:

  1. alhamdulilah jadi...thanz bnyak2..

    ReplyDelete
  2. trima kasih di atas tutorial ni... amt membntu...^^

    ReplyDelete
  3. As-Salam. Saya juga ada buat simple punya tanpa CSS .. :)

    ReplyDelete