طريقة إضافة تعريف الكاتب بشكل جد متميز وإحترافي
في أول موضوع لمدونة إفهم ويب سنتناول وفيه طريقة إضافة تعريف الكاتب بشكل جد متميز وإحترافي من تصميم عرب ويب طريقة التركيب كا الأتي
أولا نقوم بتحرير القالب
ونبحث عن هذا الوسم ]]></b:skin> بستعمال F+Ctrl
ثم نضع هدا الكود فوقه
وبعدها نبحث عن هدا الوسم <data:post.body/> ونضع تحته هذا الكود
في أول موضوع لمدونة إفهم ويب سنتناول وفيه طريقة إضافة تعريف الكاتب بشكل جد متميز وإحترافي من تصميم عرب ويب طريقة التركيب كا الأتي
أولا نقوم بتحرير القالب
ونبحث عن هذا الوسم ]]></b:skin> بستعمال F+Ctrl
ثم نضع هدا الكود فوقه
الكود:
;}
.pro-me-right{float:right;width:200px;margin:5px 5px 30px 5px;position:relative;border-left:1px dashed #DDD;}
.pro-me-left{width:98%;text-shadow:1px 1px #fff;font-family: Electrolize,ge_ss_threeregular;font-size:100%;color:#666;padding:10px;}.pro-me-left h6 a{font-family: 'Great Vibes';font-size: 35px;margin:20px auto;text-decoration:none;}
.hero-image-parent{position:relative;height:160px;width:160px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:1px dashed #DDD;}
.pos{position:absolute;display:block;height:33px;width:33px;border:1px solid #DDD;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;z-index:100;opacity:0;}
.hero-image-holder{width:130px;height:130px;position:relative;margin:0 auto;margin-right: 12px;}
.hero-image.hero_animate{width:130px;height:130px;margin:-52px 0 0 -64px;border-radius:50%;}
.hero-image{position: absolute;top: 45%;left: 46%;overflow: hidden;background-position: center center;background-repeat: no-repeat;box-shadow: inset 5px 0 0 4px rgba(242, 242, 242, 1), 0 1px 2px rgba(150, 150, 150, 0.73);transition: all 0.2s ease-out;border: 4px solid #fff;}
.pos_1{top:60px;left:-26px;}.pos_2{top:125px;left:0px;}.pos_3{top:150px;right:65px;}.pos_4{top:129px;right:3px;}.pos span{display:none;top:0;}a.pos i{color:#34AACD;font-size:22px;}a.pos.pos_1 i{position:relative;top:5px;right:5px;}a.pos.pos_2 i{position:relative;top:5px;right:7px;}a.pos.pos_3 i{position:relative;top:6px;right:11px;}a.pos.pos_4 i{position:relative;top:7px;right:4px;}
a.pos.pos_1 i,a.pos.pos_2 i,a.pos.pos_3 i,a.pos.pos_4 i{color:#fff;}.pos_2{background:#F03D3D;}.pos_1{background:#2AA9E0;}.pos_3{background:#3B5998;}.pos_4{background:#E42D2D;}
.fa-star:before {content: "\f005";}
.pos_4:hover {background: #CF2C2C;}.pos_3:hover {background: #4669B3;}.
وبعدها نبحث عن هدا الوسم <data:post.body/> ونضع تحته هذا الكود
الكود:
youtube'/></a>
<a class='pos pos_4' href='https://plus.google.com/' style='opacity: 1;'><i class='fa fa-google-plus'/></a>
<div class='hero-image-holder'>
<img alt='Hm' class='hero-image hero_animate' src='http://3.bp.blogspot.com/--ezHEbfm2Oc/VGFApHQo2-I/AAAAAAAAGsQ/Ii6q-8hEbFI/s1600/iHussam.png'/>
</div>
</div>
</div>
<div class='pro-me-left'>
<h6><a class='g-profile' data-gapiattached='true' data-gapiscan='true' data-onload='true' href='https://plus.google.com/+iHussam' rel='author' title='Hm'>
<span>iHussam</span>
</a>
</h6>
<p><span style='font-style: normal; font-weight: normal;'>حسام بها</span> : من <span style='font-style: normal;color:#EC2424;'>المملكة المغربية</span>, <span style='font-style: normal;color:#333333;'>اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته </span>,<span style='font-style: normal;color:#333333;'>لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة عرب ويب تعبر عما أهواه . </span><br/>
<i class='fa fa-star'/><i class='fa fa-star'/><i class='fa fa-star'/><i class='fa fa-star-half-o'/><i class='fa fa-star-half-o'/>
</p></div>
</div>
