أضافه تعريف الكاتب بالشكل الجديد لمدونات بلوجر

في هذه التدوينة أقدم لكم إضافه وهي واضحة من إسمها

• معاينة

لأضافة هذه الإداة أذهب إلى التخطيط > إضافة أداة > HTML/JavaScript  

وإلصق هذا الكود 

<style type='text/css'>
/* About Me */
.sidebar_about_author { height: 210px; }
.aboutpro-img:before { content: ''; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlXqSibVRGUoZ2t8oMRuSG7mAc2yBhlmA2XyHrusWK0yeK54K8fxO64Og9BWaRaAEkH7_SCdtOagENMMFMb6hRMlDnD8l5VYwz6fp0xxIKWg8ybWZMR5_Xz4upfVBlJag0DzjCa0wn0NHy/s1600/pattern-overlay.png)center top repeat; opacity: .3; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; } .aboutpro-img {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXutaB3TyPvV-f_GB5vlt1sTjZbuU6-OTBipEybHTOiVjljFJMj3mPaeZQGC_i5dlWc9RhWtz9tLulQnx7rYZIgt6NDqIaGG3k9v585Z39OEp8YZrmlEaI_sjsaHMnmHxpUYN_45nQeYZ/s1600/66.jpg); height: 210px; display: block; width: 100%; position: relative; right: 0; bottom: 0;background-size: cover; } .sidebar_about_author { height: 210px; }
.aboutpro-wrapicon{display:block;margin:-225px auto 0;position:relative;z-index:3;}
.aboutpro-wrapicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:18px}
.extender .aboutpro-icon{display:inline-block;margin:0 .5px;padding:0;border:0;}
.extender .aboutpro-icon a{display:inline-block;font-family:fontawesome;height:32px;width:32px;line-height:32px;font-weight:normal;color:#fff;font-size:80%;transition:all .5s}
.extender .aboutpro-icon:hover a,.extender .aboutpro-icon a:hover{color:rgba(255,255,255,.7);}
.aboutpro-info{font-size:12px;position: relative; bottom: 210px;    z-index: 99999;}
.aboutpro-info h4{display:table;background:rgba(255,255,255,1);margin:10px auto;font-family:Droid Arabic Kufi,Electrolize;font-size:220%;font-weight:normal;text-transform:capitalize;color:#454545;border:4px double #2e2e2e;z-index:3;padding:5px 10px}
.aboutpro-info p{position:relative;display:block;color:#fff;z-index:4;font-size:110%;text-align:center;font-family:Droid Arabic Kufi,Electrolize;line-height: 1.7em;    padding: 1px; }
</style>
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="aboutpro-img">
</div>
</div>
<div class="aboutpro-info">
<h4>iOmar</h4>
<p>إسمي سيف الدينة من العراق وإعمل في مجال التدوين </p>
</div>
<div class="aboutpro-wrapicon">
<ul class="extender">
<li class='aboutpro-icon'><a href="#" rel="nofollow" target="_blank" ><i class="fa fa-facebook"></i></a></li>
<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" ><i class="fa fa-twitter"></i></a></li>
<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" ><i class="fa fa-google-plus"></i></a></li>
<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" ><i class="fa fa-youtube"></i></a></li>
<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" ><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>

إهم التعديلات 

كل شيء باللون الأحمر يمكن تغييره 

الرابط هو رابط الصورة الخلفية ويمكن تغييره 

النص الأحمر يمكن تغييره بما تشاء 

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