Membuat Author Box Sederhana di Blog

Oleh Unknown

Selasa, 30 Desember 2014

Bagikan :

Tweet

Hai Sahabat, setiap blog pasti mempunyai admin kalau gk ada bearti blog hantu dong? kekekek. Dan pengunjung yang kepo pasti ingin tahu profil dari admin blog tersebut. Salah satunya dapat melalui author box.

Author box yang dibagikan oleh Kang PP cukup sederhana. Hanya ada fitur image 130x120 px, nama admin pada judul dan isi berupa data admin. Berikut demo penampakan author box.

• Demo

Berikut Cara Membuat Author Box Sederhana di Blog

1. Salin kode CSS  berikut lalu letakan diatas kode ]]></b:skin> atau </style>

.adminkotak{overflow:hidden;margin-bottom:10px}
.kotakmin{overflow:hidden;background:#EEE;padding:10px;margin:1px;margin-bottom:0}
.kotak{overflow:hidden;float:left;margin-right:20px;}
.kotak .kogam img{display:block;overflow:hidden;margin-top:10px;}
.adminkotak p {font-size:15px;line-height:1.4em;}
.admins{margin:0;font-size:20px;color:#4683EA;overflow:hidden;border-bottom: 3px solid #4683EA;}

2. Salin kode berikut lalu letakan di bawah kode <data:post.body/> :

<div class='kotakmin'>
<div class='adminkotak'>
<div class='kotak'>
<div class='kogam'>
<img alt='Admin Blog Kang PP' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpzo6GfZFnExrreWKB428Ue1kUmRhdhezEN72RpbcNhD3BETOIJCAKLrfhvHAHyB09UiQbLaIXhf4SHGFBX-souj8J4JxP8IpQaAiW0PLXkkkhQ1Fys5ymcnaoGZMAvaj0z_r05mgcn4/s1600/kang_pp.jpg' width='130'/>
</div>
</div>
    <h2 class='admins'>Putra Pamungkas Sutaryo - <i>Kang PP</i></h2>
    <p>Saya hanya remaja yang ingin menegakan Agama Allah dan berbagi. Karena saya yakin berbagi mempengaruhi kita semua. Kita berbagi masalah, kita juga berbagi solusi. <a href='http://kang-pp.blogspot.com/p/blog-page_19.html'><b><i>Selengkapnya...</i></b></a></p>
</div>
</div>

Semoga Bermanfaat ^_^

Tag : Tutorial Blog