تعريف الكاتب لمدونات البلوجر

السلام عليكم زوار ومتتبعي مدونة المتميز
سأقدم لكم في هذه التدوينة المفيدة على المدونة تعريف لكاتب  او منشئ مدونتك, هذا التعير يقرب زائر المدونة من منشئها ولمعاينة التعريف المرجو مشاهدة التعريف اسفله

لإضافة التعريف لمدونتك ما عليك سوى ان تقوم باضافة كود HTML في تخطيط مدونتك ولا تنسى التغيرات

"قم بتغير الروابط الحمراء إلآ رابط صورتك وصفحتك 
أما الزرقاء فقم بتغير اسمك وتعريفك"

<div class='iuauthor-item'>

<div class='image-wrap'>

<img class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZVZebUoZy_DGtJDV99aDMxdjRyx8viTBSoffhzWiH1Q24bF2Aamu7oRGI6TnuhOzfP3F0d0qUsIflOD74akHbtQ7btr5ygf7TgskqDKGH5jxDNHT3anYd91v2JK3GAEXzAtUJnRH90c/s1600/11759617_631534050316615_1981070165_n.jpg'/>

</div>

<h4 class='iuauthor-name'><a href='https://www.facebook.com/motamaiez' target='_blank'>رضوان شاطير</a>

<p>

مدون مغربي عمري 15 سنة أقطن بالمغرب مهووس بمجال المعلوميات اشارك كل خبراتي ومعارفي معكم مشرف على مدونة المتميز </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>