فيسبوك
يوتوب
جوجل
تويتر
بلوجر
ووردبريس
مسابقات
محول الأكواد
التسميات:
اهلا وسهلا بكم متابعين مدونة مدهش ويب اليوم في تدوينة جديدة سنقدم لكم اضافة رائعة سبق وقدمت لكم مدونة مهووسين الويب تعريف الكاتب v1 ولاكن مدونة مدهش ويب ستقدم لكم v2 ولن اطيل عليكم هيا بنا لنكتشف الاضافة
كيفية الاضافة1-نضغط علي تخطيط
2-نضغط علي اضافة اده جديدة
3-نضغط علي HTML/JAVASCRIPT
4-وفي المنطقة الفارغة نلصق هذا الكود
<div class="widget-content">
<div class="iuauthor-item">
<div class="image-wrap">
<img class="img-circle author_avatar img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3U7TBU4f7dK-Z6mmvjxM3ifSoPNx8SxXI18ZbLTCRluB7IBkw9vPBKhPjlb0EuJrXaLnK7rlPLCqScrkLsFA0kg8OBhHv_LObljPeLkzavSv96MPkJJBEHzUU1dCmhAPYTvMnYCQiq4m/s180-no/imohamed.png" />
</div>
<h4 class="iuauthor-name"><a href="https://www.facebook.com/omarnassersaber" target="_blank">عمر ناصر</a>
<p>مدون ومصمم ومطور بلوجر مواليد 2001 مدير مدونة مدهش ويب وبعض المدونات الصغيرة الاخرى لدي خبرتي المتوسطة في الويب بدأت في شهر 2 من 2011 وفي فترة وجيزة قطعت مسافة كبيرة </p>
</h4>
</div>
<style>
/*------------------------------------------------------
Iuauthor-Item
------------------------------------------------------*/
img.img-circle.author_avatar.img-responsive {
width: 100%;
}
.iuauthor-item {
padding: 15px 10px;
text-align: center;
margin-top: -20px;
}
.iuauthor-item .image-wrap {
position: relative;
overflow: hidden;
border: 7px double #22A1C4;
width: 230px;
margin: 0 auto;
height: 230px;
margin-bottom: 15px;
}
.iuauthor-item h4.iuauthor-name a {
font-size: 18px;
margin-bottom: 10px;
display: block;
background-color: #22A1C4;
color: #FFFFFF;
border-radius: 2px;
padding-bottom: 9px;
padding-top: 6px;
}
.iuauthor-name p {
color: #22A1C4;
font-size: 14px;
margin-top: -11px;
border: 1px double #22A1C4;
line-height: 24px;
font-weight: 100;
margin-bottom: -25px;
}
.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>
</div>
الي هنا انتهينا والسلام عليكم ورحمة الله وبركاتة
مرسلة بواسطة
