اضافة من انا - تعريف الكاتب لمدونات بلوجر 2016

السلام عليكم اليوم احضرنا لكم اضافة رائعة تعرف بها نفسك لزوار مدونتك ويصبح الزوار يعرفون صاحب المدونة اضافة رائعة من مدونة عرب ويب بشكل احترافي وعصري وتملك الاضافة ععلى الاسم والوصف والشبكات الاجنماعية وخلفهم الصورة بتأثير رائع .

طريقة الاضافة

سهلة جدا ما عليك ان تدخل لتخطيط أضف أداة Html/Javascript وضع بها الكود التالي 

<style type='text/css'>
/* About Me */
.sidebar_about_author { height: 200px; }
.aboutpro-img:before { content: ''; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaocaVZGqhxyTHoQK64cQECz_V2ijLhoPQWhvaQdFgqNw6p9pcPF1TeKvJ-tT-TLYeJiD2btNcfsqd5P0G3U7kP6UHHbwe7Fr4RQyPAfez3FASqS63DJYrI0RSoE88wSNAYSfa-nP1Ts/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/AVvXsEiUI9Fxg0tXzYSJi3VfVEAD0zf4MH0ZmCca2HHfbWgfEW-wBrqVN4VOJ2JO1g0fCIs_cKWx_2EoDhJjFo7VsYqmb-Pqzfwwa8VylOTxaSY9IXgm-xeaFfunkDeRRZgEWatsSGtI_Rb-gec/s1600/66.jpg); height: 200px; display: block; width: 100%; position: relative; right: 0; bottom: 0;background-size: cover; } .sidebar_about_author { height: 200px; }
.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: 200px;    z-index: 99999;}
.aboutpro-info h4{display:table;background:rgba(255,255,255,1);margin:10px auto;font-family:&#39;Playfair Display&#39;,serif;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 Naskh,sans-serif;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>iHussam</h4>
<p>حسام بها، مغربي الجنسية ، مهتم ومتابع لكل ما يتعلق بالتقنية، محب للتصميم والألعاب أيضاً، هاوٍ بجمع شخصيات ديزني،لا تنسى متابعتي عبر المواقع الاجتماعية.</p>
</div>
<div class="aboutpro-wrapicon">
<ul class="extender">
<li class="aboutpro-icon"><a href="facebook" rel="nofollow" target="_blank" ><i class="fa fa-facebook"></i></a></li>
<li class="aboutpro-icon"><a href="twitter" rel="nofollow" target="_blank" ><i class="fa fa-twitter"></i></a></li>
<li class="aboutpro-icon"><a href="googleplus" rel="nofollow" target="_blank" ><i class="fa fa-google-plus"></i></a></li>
<li class="aboutpro-icon"><a href="youtube" rel="nofollow" target="_blank" ><i class="fa fa-youtube"></i></a></li>
<li class="aboutpro-icon"><a href="rss" rel="nofollow" target="_blank" ><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>

التغييرات :
غير كل ما هو محدد بالأحمر بالروابط الاجتماعية
المحدد بالوردي يغير بالكلمات
المحدد بالأخضر يخص رابط الصورة