lihat juga

Monday, October 11, 2010

Menambahkan Widget Author Info di Blogger

Author Info biasanya dapat kita jumpai di wordpress karena Wordpress mempunyai plugin yang membuatnya lebih atraktif. Tapi bisakah kita memasang Author Info di Blogger? Tentu saja bisa jika dengan sedikit  modifikasi. Kita akan mencoba membuatnya.
Seperti gambar inilah yang akan kita buat:


Apakah anda juga ingin menambahkan widget ini di blog anda? berikut cara singkatnya:

1. Login ke akun Blogger anda
2. Pilih Dashboard >> Design >> Edit HTML
3. Beri centang pada "Expand Widget Templates"
4. Back up dulu template anda untuk mencegah jika nantinya terjadi kesalahan
5. Cari kode ]]></b:skin> dan tambahkan CSS berikut diatasnya:

.author_info {
float: left;
width: 533px; /* Ubah ukuran widget sesuai keinginan */
padding: 10px;
border: 1px solid #a1cb26; /* Border Widget */
margin-bottom: 15px;
margin-top: 15px;
background: #F0FDC6; /* Warna Background*/
}
.author_info h3 {
font-size:17px;
color:#001530; /* Warna text */
margin-bottom: 5px;
}
.author_photo {
float: left;
margin: 0 10px 0 5px;
}
.author_photo img {
border: 3px solid #ccc; /* Border gambar*/
height: 100px; width:100px; /*Height and Width of Avatar of Author */
}

Cari kode <data:post.body/> dan tambahkan yang berikut ini di bawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://sphotos.ak.fbcdn.net/hphotos-ak-snc3/hs299.snc3/28607_125471174149436_109854502377770_209465_768372_n.jpg'/></div>
<h3>Di Posting Oleh:<a href='http://amin-raha.blogspot.com'>BLOG AMIN</a> </h3>

<p>Saya <b>AMIN</b> dan sedang belajar Blogger, Wordpress. <a href='http://kontactr.com/user/amienk'>Klik di sini</a> untuk lebih mengenal Author.</p><p>Jika anda menyukai Tulisan ini, Jadilah fans <b>BLOG AMIN</b> di <a href='http://www.facebook.com/pages/BLOG-AMIN/109854502377770' target='_blank'><b>Facebook</b></a>.</p>
</div>

7. Simpan Perubahan

Ket: Ganti Warna Merah dengan URL gambar anda
                 Warna Hijau dengan URL dan Nama Blog Anda

ads

Ditulis Oleh : gdfysx Hari: 1:20 AM Kategori:

0 comments:

Post a Comment

surf