طريقة اضافة نبذة تعريفية عن صاحب المدونة في بلوجر بطريقة مميزة مع روابط التواصل

<div id=’profile-wrapper’>
<img src=’https://lh5.googleusercontent.com/-1rIDCmPez7Y/AAAAAAAAAAI/AAAAAAAAABU/ehtdhP6WjeQ/s120-c/photo.jpg‘/>
<text style=’background:#fff;border : 2 px dashed #000; font:14 px droid kufi;text-align:center’  class=’green’><span><a href=”http://ar-cher.blogspot.com“>محمد ارش</a><span></span></span></text>
<p>مدون عربي مسلم , عمري 16 سنة , احب عالم التكنولوجيا والتدوين على بلوجر , اسعي للارتقاء بمدونتي بتقديم الافضل لزواري , كما احب مساعدة الاخرين و مشاركة الفائدة معهم , واتشرف بان اكون مساهما في حملة اثراء المحتوى العربي بتقديم محتوى مميز و رائع <p/>
<div id=’social-wrapper’>
<div class=’social-icons sticky-social’>
<a class=’facebook’ href=’https://www.facebook.com/profile.php?id=100004326226439‘/>
<a class=’twitter’ href=’https://twitter.com/crestoo_skeer‘/>
</a></a></div>
</div>
</p></p></div>
<style>
#profile-wrapper {
height: 450px;
width: 280px;
text-align: center;
padding: 34px 20px;
background: #FFF;
border: 2px solid #00b4ff;
border-radius: 15px;
margin: 0 0 20px;
font-size: 12px;
font-weight: normal !important;
}
#profile-wrapper img {
border-radius: 5px;
margin: 0 0 10px;
height: 250px;
width: 250px;
float:center;
}
#profile-wrapper h2 {
font: normal 25px tahoma;
color: #F34D4D;
text-align:center
}
#profile-wrapper p {
font: normal 12px tahoma;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:10px 0 0;overflow:hidden;margin-right: 65px;float:center}
.social-icons a.facebook {
background-image: url(http://3.bp.blogspot.com/-pdQxvxA7dds/U0ieyygWJrI/AAAAAAAAAGc/3KI36bc8hno/s1600/facebook.png);
}
.social-icons a.facebook:hover {
background-color: #4265b9;
}
.social-icons a.twitter {
background-image: url(http://2.bp.blogspot.com/-qEwCYfxBfPM/U0ie0ZQki3I/AAAAAAAAAG8/fuhSYM5vbIQ/s1600/twitter.png);
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}

.social-icons.sticky-social {
text-align: right;
float: right;
}
.social-icons {
float: center;
text-align: center;
}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
float: right;
display: block;
}
.social-icons a {
background-color: #dadada;
}
.social-icons a {
width: 30px;
height: 30px;
margin: 0 3.5px !important;
}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}    /* Author Bio */
.postauthor {
background: #F5F5F5;
border-top: 1px solid #e1e1e0;
border-bottom: 1px solid #e1e1e0;
overflow: hidden;
padding: 0.7em;
}
.postauthor img {
border: 5px solid #e2dede;
float: right;
margin-left: 1em;
}
.postauthor h3 {
color: #666;
font-size: 1.2em;
margin-bottom: 5px;
margin-top: 0;
}
.postauthor p {
color: #515151;
font-size: 12px;
margin-bottom: 10px;
margin-top: 0;
}
.green{
background: #e2e0e0;
border: 1px dashed #2db5e8;
border-radius:5px;
color: #333;
display: block;
padding: 5px;
color: #333;
text-align: center;
direction: rtl;
font-family:15px ‘Droid Arabic Kufi’, serif;
border-radius: 4px;
max-width: 800px;
margin: 5px auto;
}
</style>