اضافة تعريف الكاتب ب السايد بار بشكل احترافى v1

السلام عليكم ورحمة الله وبركاته اعزائى متابعى مدونة البداية ويب 

اليوم نقدم لكم اضافة رائعة وجميلة ومفيدة ايضا انها اضافة تعريف الكاتب بشكل احترافى و

جديد جدا وتستطيع معاينتها عن طريق مدونتنا تحت وبطريقك يمكنك قراءة نبذه عنا ^_^ الاضافة من تطويري الشخصي ^_^

الاضافة شكلها جميل وتحتوى على ايقونات المتابعة على الشبكات الاجتماعية

***

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

1. ادخل لوحة تحكم بلوجر من هنا 
2. اذهب الى التخطيط 
3.  ثم اضافة اداة html/javascript
4. وضع فيها الكود التالي

<style>
.dabourphone-about{padding: 0px;
background: #fff;
margin-bottom: 30px}.dabourphone-about .head-bg{position:relative;background-color:#e74c3c;height:90px;background-repeat:no-repeat;background-position:center center;-webkit-background-size:cover !important;-moz-background-size:cover !important;-o-background-size:cover !important;background-size:cover !important}.dabourphone-about .head-bg .my-pic{position:absolute;bottom:-20px;right:30px;border-radius:50%;overflow:hidden;background-color:#fff;border:5px
solid #609DFF}.dabourphone-about .head-bg .my-pic
img{height:80px;width:80px}.dabourphone-about .head-bg .my-data{padding-right:130px;padding-top:46px;color:#fff}.dabourphone-about .head-bg .my-data
span{display:block;text-transform:uppercase}.dabourphone-about .head-bg .my-data .my-name{font-size:18px;line-height:16px;font-familyge_ss_threeregular;}.dabourphone-about .head-bg .my-data .my-job{font-familyge_ss_threeregular;font-size:10px}.dabourphone-about .my-words{padding:22px 25px 8px 25px;font-size:15px;line-height:21px;font-familyge_ss_threeregular;text-align:center}
.dabourphone-about .social-icon{margin-top:6px;text-align:center;border-top:1px solid #eee;padding:8px 25px 8px 25px}.dabourphone-about .social-icon
a{display:inline-block;margin-left:6px;height:24px;width:24px;color:#fff;border-radius:2px;text-align:center;font-size:18px;background-color:#ddd;transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;-o-transition:background-color ease-in-out}.dabourphone-about .social-icon a:hover{background-color:#e74c3c}.dabourphone-about .social-icon a
i{font-size:18px;display:inline;line-height:25px}.widget .tagcloud
a{display:inline-block;padding:1px
8px;color:#bbb;margin:0 0 6px 3px;border-radius:2px;border:1px
solid #eee;font-size:13px!important;text-transform:capitalize;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out}
</style>
<div class="dabourphone-about"><div class="head-bg" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1JyALfa8ICqy1BOaFwMWLWax9CFS41i4cSKiFnrfKGczLoOsn0DCt6c8w_1XkWDJqEXyVE_8qsm24FfE92rS-vRAF0YPahIbpHmSR2Cjlouu8QHSLUnbBiAAPYcek0jZ9u5DkDvLrc8Kp/s1600/about-block-bg2.jpg)"><div class="my-pic"><img alt="Mohamed Abodia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixX629tiPIqUlruKi5wxCLYmQUN1b22FLC1pK-9P_eZ-eArNUu-2zezDbaZV2StLpLPYKLSKE2BzQdulcQlSRue-MbLk-s3NqOJTKrdjPJjHDZF1pYW6b9pPjxa94LbdJ3VABT2aYdnj_e/s180-no/imohamed.png" /></div><div class="my-data"><span class="my-name"><a style='color: #fff;display:block;' href="https://www.facebook.com/mohamed.ibrahim.2036" target="_blank">عماد حدوش</a></span>
<span class="my-job">مطور ومبرمج مواقع</span></div></div><div class="my-words">مدون ومصمم ومطور بلوجر مواليد 2000 مدير مدونة البداية ويب لدي خبرتي المتوسطة في الويب بدأت في شهر 7 من 2014 وفي فترة وجيزة قطعت مسافة كبيرة ^_^</div><div class="social-icon"><a href="http://start1web.blogspot.com/" target="_blank"><i class="fa fa-facebook"></i></a><a href="http://start1web.blogspot.com/" target="_blank"><i class="fa fa-twitter"></i></a><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a><a href="http://start1web.blogspot.com/" target="_blank"><i class="fa fa-google-plus"></i></a><a href="http://start1web.blogspot.com/" target="_blank"><i class="fa fa-instagram"></i></a><a href="http://start1web.blogspot.com/" target="_blank"><i class="fa fa-linkedin"></i></a><a href="http://start1web.blogspot.com/" target="_blank"><i class="fa fa-flickr"></i></a><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a><a href="http://start1web.blogspot.com/" target="_blank"><i class="fa fa-vimeo-square"></i></a></div></div>

ملاحظة :

لا تنسى تغيير الروابط والاسماء وصورة الكاتب بما يناسبك 

***

الى هنا انتهى الموضوع 

نتمنى منكم ترك تعليق اسفل الموضوع اذا استفدت فتعليقك يسعدنا