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

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

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

طريقة التركيب :

ادخل إلى مدونتك ، ثم اختر لوحة التحكم .

من لوحة التحكم اختر -> قالب -> تحرير قالب HTML .

الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

اضف الكود التالي فوقه .

 @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> 

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