Memasang Kotak Profil Dibawah Posting

April 10, 2012

Bagi sobat yang ingin menampilkan profil sobat namun agar para pembaca selalu melihatnya, mungkin tutorial kali ini bisa menjawab pertanyaan sobat, nah agar lebih jelasnya bisa lihat gambar dibawah ini

Tidak hanya foto dapat diubah sewaktu-waktu, namun masih ada kelebihan lain yaitu sobat bisa menuliskan peringatan disamping foto sobat, misal saja "jika mau copas artikel ini harus ijin dahulu" ataupun "jika copas bayar goceng" hahaha, maaf kalo garing

Memasang Kotak Profil Dibawah Posting

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum kode: ]]></b:skin>

.author-box {
background: #ffffff;
margin: 10px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 2px;
border: 1px solid #E6E6E6;
}

Edit kode CSS warna biru, kode tersebut merupakan latar belakang/background dan garis/border, edit sesuai template sobat agar terlihat serasi
Langkah 3
Kemudian letakkan kode dibawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxzYD9UPgI2RzUjGShZDQuFM7IxdenePqf3PjUEFjuULDu2D9sWi7pnZlSCinitmgsLapwJXRChKmP6_EwIsRNlq9s-SahqQamB1fzwaB1z0YtJIXmhcIYmnmLbVA1gLJgGn6fpKifEI/s220/lgbig.png' width='70'/><b>About the Author</b><br/>

<div style='text-align: justify; font-family: verdana; color: #000;'>Lorem ipsum brute utinam nominati vel ut, te vis liber aliquid. Te vis vide dolores erroribus. Debitis dolorem eu pro, semper mollis dissentiunt nam at. Regione molestie dissentiet sit te. Has cetero indoctum posidonium et, dissentiunt deterruisset pro an.<br/>

</div>

</p>

</div>

</b:if>

Keterangan:
Angka 70 adalah tinggi dan lebar box
Kode yang berwarna merah merupakan link untuk image/gambar
Yang di blok adalah diskripsi

Semoga bermanfaat, Selamat mencoba dan semoga berhasil

Labels: Blog Design

koderator

Memasang Kotak Profil Dibawah Posting

April 10, 2012

0 Komentar:

Post a Comment