Cara Memasang Biografi Author Dibawah Posting Seperti Sastro Design

Alex 3/11/2015 Add Comment Css, Html, Tutorial

Pada bagian posting setiap blog biasanya terdapat profil atau biografi penulis, contohnya pada Sastro Design Ini. Fungsinya adalah untuk menunjukkan siapa yang menulis atau pemilik blog. Ada berbagai macam gaya atau style, salah satunya seperti Sastro Design ini. Untuk membuatnya cukup mudah, hanya menggunakan html dan css. Berikut akan saya jelaskan langkah-langkahnya.

Silahkan masuk ke dahsboard blog anda, pilih Template > Edit HTML

Salin kode css berikut

/* Biografi Author
URL : http://sastrodesign.blogspot.com
----------------------------------------------- */
#author{
border: 5px solid #F6F5F7;
padding: 10px;
margin-top: 70px;
margin-bottom: 10px;
}
.author-snip{
text-align: center;
}
.author-name{
text-align: center;
font-size: 18px;
}
.author-image {
width: 100px;
height: 100px;
margin: -70px auto auto;
border: 5px solid rgb(246, 245, 247);
border-radius: 100%;
}
.author-image img {
border-radius: 100%;
width:100px;
height:100px;
}

Letakkan di atas kode ]]></b:skin>

Salin kode html berikut

 <div id="author">
<div class="author-image">
<img src="URL IMAGE" />
</div>
<div class="author-name">
<a href="SOCIAL URL">NAMA AUTHOR</a>
</div>
<div class="author-snip"> 
DESCRIPTION 
</div>
</div> 

URL IMAGE : Isi dengan url gambar/foto anda
SOCIAL URL : Isi dengan link sosial media anda
DESCRIPTION : Isi Dengan deskripsi singkat
Jika sudah silahkan simpan dan lihat hasilnya

Cukup mudah bukan, anda bisa menyesuaikan gayanya sesuai keinginan anda dengan menambahkan css.

Facebook Twitter Google+ LinkedIn Pinterest

Muhammad Dimas Saputro

Saya adalah seorang blogger dan web designer amatir. Belajar web design itu menyenangkan kita bisa melihat website dan blog yang indah, kita juga bisa membuatnya. Saya seorang pelajar dan hobi saya ngeblog, membuat template dan pramuka menjadi kegiatan yang menyenangkan.