Cara membuat Author atau Profile Box Information

Berikut ini akan diuraikan langkah-langkah cara membuat Author atau Profile Box Information() semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : (Author atau Profile Box Information) sebagai berikut :

1. Login ke akun blogger
2. Klik tema
3. Edit html

Masukan CSS di bawah ini :

<style>
.left {left: 25px}
.right {right: 25px}
.bottom {position: absolute;bottom: 15px}
#profileBox {
background: #999955;
background-image: linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
margin-top: 100px;height: 150px}

#profileBox:after {
content: "";position: absolute;background: #E9E2D0;margin: -67.5px 0 0 40px;
border-radius: 10px;width: 90%;height: 275px;z-index: -1}

#profile {
position: absolute;width:75%;color:blue;height: 225px;padding: 25px;
padding-top: 0;padding-bottom: 0;top: 170px;left:73px;background: #E9E2D0;
box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black;z-index: 5}

#profile img {
width: 120px;float: left;border-radius: 5px;margin-right: 20px;
box-shadow: 0 15px 10px -10px #666, 0 1px 4px #999, 0 0 40px #ccc inset}

#profile p {font-family: Verdana;color: #555;font-size: 13px}
#profile span {font-family:courier;color:purple}
.pagination {list-style:none;display:inline-block;padding:0}
.pagination li {display:inline;text-align: center}
.pagination a {
float: left;display: block;font-size: 14px;padding: 5px 12px;
color: #fff;margin-left: -1px;line-height: 1.5}

.pagination a.active {cursor: default}
.pagination a:active {outline:none}
.menu {position: relative}
.menu:after {
content: '';position: absolute;width: 100%;height: 35px;left: 0;bottom: 0;
z-index: -1;background:#666}

.menu a {color:yellow;padding:13px 5px 5px;margin:0 10px;position:relative}
.menu a:hover {color: #fff}
.menu a:hover:after {
content: '';position: absolute;width: 24px;height: 24px;background: red;
border-radius: 100%;z-index: -1;left: -3px;bottom: 4px}

.menu a.active {background: #1E7EE2;color: #fff;font:bold 14px/22px Verdana}
.menu a.active:hover:after {display: none}
.menu a.active:before {
content: '';position: absolute;top: -11px;left: -10px;width: 18px;
border: 10px solid transparent;border-bottom: 7px solid #104477;z-index: -1}
</style>

Masukan Kode HTML di bawah ini :

<div id="profileBox"></div>
 <div id="profile">
 <img src="http://URL-Gambar Anda.png">
<h2>SAHABAT BISNIS 77</h2>
 <p>...Tulis sebuah informasi disini....</p>
<ul class="pagination menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#" class="active">My Profile</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
 <span class="left bottom">phone: +62 823 1022 ****</span>
 <span class="right bottom">adress: Bandung, Indonesia</span>
 </div><!..ending profile tag..>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah

simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,

dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Author atau Profile Box Information) semoga bermanfaat terima kasih.