اداة تعريف الكاتب بالسايدبار

الكاتب بتاريخ عدد التعليقات : 10
مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب الكرام بعد غياب طويل عن التدوين قمت بوضع موضوع بسيط وهو أداة تعريف الكاتب في السايدبار مثل الموجودة في المدونة على السايدبار جانب الموضوع الاداة بسيطة وهذا سر جمالها يمكنك التعديل عليها بسهولة جدا جدا جدا فأكوادها قليلة.
طريقة التركيب
1-اذهب الى التخطيط
2-ثم اضافة اداة
3-ثم اداة Html/Javascript
4-وقم بوضع الكواد التالي
<div class='iuauthor-item'>
<div class='image-wrap'>
<img class='img-circle author_avatar img-responsive' src='http://www.shy22.com/upfiljpg/i9a32737.jpg'/>
</div>
<h4 class='iuauthor-name'><a href='https://www.facebook.com/3mran.al7ariri' target='_blank'>عمران الحريري</a>
<p>مدون ومصمم ومطور بلوجر مواليد 2001 مدير مدونة مهووسين الويب وبعض المدونات الصغيرة الاخرى لدي خبرتي المتوسطة في الويب بدأت في شهر 8 من 2014 وفي فترة وجيزة قطعت مسافة كبيرة </p>
</h4>
</div>
<style>
/*------------------------------------------------------
Iuauthor-Item
------------------------------------------------------*/
.iuauthor-item {
padding: 15px 10px;
text-align: center;
margin-top: -20px;
}
.iuauthor-item .image-wrap {
position: relative;
overflow: hidden;
border-radius: 50%;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
width: 230px;
margin: 0 auto;
height: 230px;
margin-bottom: 15px;
}
.iuauthor-item h4.iuauthor-name a {
font-size: 18px;
margin-bottom: 10px;
display: block;
color: #2C75A9;
border-bottom: 1px dashed #ccc;
padding-bottom: 9px;
border-top: 1px dashed #ccc;
padding-top: 6px;
}
.iuauthor-name p {
  color: #0894D8;
  font-size: 14px;
  margin-top: 17px;
  font-weight: 100;
  margin-bottom: -30px;
}
.iuauthor-item .image-wrap:before {
content: '';
display: block;
position: absolute;
border-radius: 50%;
border: 10px solid #f9f9f9;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
opacity: .7;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
</style>
وقم بحفظ القالب واذهب للمعاينة واذا لم تهعمل قم بوضع كود css الموجود بين style و/style وضعهما فوق  ]]></b:skin> وقم بحذف الكود مع الستايلين فوق وانتهى الدرس :)

10 تعليقات على موضوع " اداة تعريف الكاتب بالسايدبار "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء