كيفية إضافة تعريف الكاتب + إيقونات المواقع الاجتماعية بشكل أحترافي لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

في درسنا اليوم سوف نتعرف على طريقة تركيب إضافة تعريف الكاتب بتقنية CSS3 وبتقنية HTML لمدونات بلوجر وبطريقة إحترافية زائد المواقع الإجتماعية زائد التأثير على الإضافة .

 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
[class*="font-awesome-"]:before {font-family: 'font-awesome'}
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {font-family: 'entypo', sans-serif;}
*{ box-sizing: border-box; }
a { text-decoration: none; transition: all .4s; }
.container { margin: 0 auto; }
.container:hover .author-body { height: 70px; }
.author-body a {color:#fff}
.author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; color: #b9becd; }
.author2:before { content: ""; display: block; float: right; width: 80px; height: 80px; margin-left: 20px; background: url("http://a.top4top.net/p_73ij4p1.jpg") no-repeat; background-size: 80px; border-radius: 100%; }
.author2  h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; }
.author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }
.author-body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-left: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}
.author-body a:hover { background: #515761; }
.author-body a:last-child { border-left: none; }
.foot { /*height: 100px;*/ }
[class^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
[class^="footItem"] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
.footItem1 { background: #14b9d6;    color: white!important;}
.footItem1:hover { background: #5bcee2; }
.footItem2 { background: #f27935;    color: white!important; }
.footItem2:hover { background: #f6a172; }
.footItem3 { background: #1fbba6;     color: white!important;}
.footItem3:hover { background: #63d0c1; }
.widget-content {    box-shadow: 0 0 0 1px #D3D3D3;}
.section:first-child .widget:first-child {margin-bottom:15px}

 <div class="container">
<div class="author2">
        <h1>ضع هنا اسم الكاتب</h1>
        ضع هنا نبذة عن تعريف الكاتب
    </div>
    <div class="author-body">
      <a href="ضع رابط موقع على تويتر هنا"><span><i class="fa fa-twitter"/></span></a><a href="ضع رابط موقع على الفيس بوك هنا"><span> <i class="fa fa-facebook"/></span></a><a href="ضع رابط موقع على Dribble هنا"><span><i class="fa fa-dribbble"/></span></a><a href="ضع رابط موقع جوجل بلس هنا"><span> <i class="fa fa-google-plus"/></span></a>
    </div>
   <div class="foot">
    <a href="#" class="footItem1"><span class="fa fa-heart"/></span>102</a><a href="#" class="footItem2"><span class="fa fa-user"/></span>4,587</a><a href="#" class="footItem3"><span  class="fa fa-plus"/></span>84,023</a>
  </div>
</div>

انقر هنا للمعاينة