كيف تضيف معلومات الكاتب بشكل إحترافي

          

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

أعزائي القراء إضافة جديدة وهي معلومات الكاتب بشكل إحترافي بتقنية  CSS 

صورة الإضافة :

كيفية الإضافة فقط إذهب إلى 

التخطيط < إضافة آداة < HTML/JAVASCRIPT

وانسخ الكود التالي 

<style>
 .BSprofileBorder {
 margin:0 auto;
 padding:5px;
 width:290px;
 border-radius:5px;
 border: 5px #009999 solid;
 min-height:70px;
 }.BSprofileBorder1 {
 margin:5px auto;
 padding:5px;
 width:auto;
 border-radius:5px;
 border: 5px #80C8FE solid;
 min-height:70px;
 }#BSprofile{
 border:2px solid #888;
 margin:2px 5px 0px 5px;
 padding:2px;
 }
 #BSprofile:hover {
 border:2px solid #ccc;
 cursor:pointer;
 }
 .BSprofileopacity  {
 opacity: 0.5;
 margin-left: 50px;
 -moz-transition: all 0.5s ease-out;
 -o-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 -ms-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
 -moz-transform: rotate(7deg);
 -o-transform: rotate(7deg);
 -webkit-transform: rotate(7deg);
 -ms-transform: rotate(7deg);
 transform: rotate(7deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
 zoom: 1;
 }
 .BSprofileopacity:hover  {
 opacity: 1;
 margin-left: 0px;
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 transform: rotate(0deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
 zoom: 1;
 -moz-box-shadow: 1px 1px 4px #000;
 -webkit-box-shadow: 1px 1px 4px #000;
 box-shadow: 1px 1px 4px #000;
 } 
</style>
<div>
 <div>
 <img id="BSprofile" height='50' src="YOUR_IMAGE_OR_PICTURE" width='50' align="left"/>
 I'm <a rel="me" href=https://plus.google.com/u/0/GOOGLE_PLUS_ID/ title="YOUR NAME" target="_blank"> YOUR NAME </a> YOUR OTHER INFORMATION </span> >>>
 <a style="color:#888;" href="ABOUT_ME" target="_blank">Read More &#187;</a>
</div>
</div>     

وغير ما يلي :

عنوان صورتك :

YOUR_IMAGE_OR_PICTURE

رابط صفحتك الإجتماعية :

href=https://plus.google.com/u/0/GOOGLE_PLUS_ID/

إسمك :

YOUR NAME

المزيد من المعومات :

YOUR OTHER INFORMATION

رابط لمعلومات عنك أكثر :

ABOUT_ME