إضافة تعريف الكاتب فى السايدبار بشكل مميز وخرافى

السلام عليكم ورحمة الله وبركاته متابعى مدونة مستر الإنترنت او مستر نت اليوم بنقدملكم إضافة تعريف الكاتب مع شبكات التواصل الإجتماعى الإضافة من تصميمنا الخاص يارب تعجبكم لو عجبت متنساش تسيبلنا تعليق تحفيزى 💗  

المعاينة و تحميل الأكواد 

معاينة  تحميل

شرح التركيب

اولاً : نبحث عن الوسم ]]></b:skin> ونضيف الكود التالى فوقه

/***** Meet The Author BY NeT-Mr.BlogSpot.CoM *****/
.nmauthor_about {
margin-bottom: 0px;
text-align: center;
}
.nmauthor_about .image-wrap {
position: relative;
overflow: hidden;
border-radius: 50%;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
width: 85%;
height: auto;
margin: 0 auto;
margin-bottom: 15px;
}
.nmauthor_about .image-wrap:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 10px solid #438eff;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
opacity: 0.95;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.nmauthor_about .social {
position: absolute;
width: 92.5%;
height: 92.5%;
border-radius: 50%;
background: #4397ff;
opacity: 0;
margin: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
font-size: 0px;
text-align: center;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.social.linear-3s .social-inner {
position: absolute;
width: 100%;
padding: 15px 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.social-inner .fa {
margin: 0px 5px;
font-size: 18px;
width: 30px;
height: 30px;
padding: 6px;
border-radius: 50%;
background: #f1f1f1!important;
color: #333;
}
.image-wrap:hover .social.linear-3s {
opacity: 0.95;
-webkit-transform: scale(1);
transform: scale(1);
}
.image-wrap:hover:before {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.nmauthor_about h4.author_name a {
font-size: 18px;
margin-bottom: 10px;
display: block;
color: #333;
}
.nmauthor_about p {line-height: 2.5;
padding: 0 15px;
border: double 6px #438eff;
}
.authornm {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 82%;
position: relative;
background: #438eff;
color: #fff;
text-align: center;
margin: 15px auto 18px;
}
.authornm a:visited{color:#fff;}
.authornm:before, .authornm:after {
content: "";
position: static;
display: inline-flex;
bottom: -1em;
border: 1.5em solid #418dce;
z-index: 0;
}
.authornm:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
opacity: 0.9;
}
.authornm:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
opacity: 0.9;
}
.authornm .authornm-content:before, .authornm .authornm-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.authornm .authornm-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.authornm .authornm-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.nmsp_social_icons {
padding: 11px;
}
.nmsp_social_icons ul {
text-align: center;
}
.nmsp_social_icons li {
display: inline-block;
text-align: center;
width: 18%;
margin: 0;
padding: 0;
border: 0;
}
.nmsp_social_icons li a {
display: inline-block;
margin-bottom: 15px;
}
.nmsp_social_icons li a i {
padding: 12px;
font-size: 18px;
color: #fff;
width: 40px;
height: 40px;
position: relative;
background: #438eff !important;
}
.nmsp_social_icons li a i:after {content: '';position: absolute;left: 50%;top: -8px;margin-left: -7.5px;width: 0px;
height: 0px;
border-style: solid;
border-width: 8px 6.5px 0 6.5px;
border-color: transparent;
border-top-color: #438eff !important;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(177deg);
}
.img-responsive{display: block;max-width: 100%;height: auto;}
.img-rounded {
border-radius: 6px;
}
.img-circle {
border-radius: 50%;
}

ثانياً : توجه للتخطيط  وإضغط إضافة أداة Html/JavaScript وضع فيها الكود الاتى :

<div class='nmauthor_about'>
<div class='image-wrap'>
<img alt='محمد إبراهيم' class='img-circle author_avatar img-responsive' src='https://2.bp.blogspot.com/-41VbuigrKYE/WXFUCBciKTI/AAAAAAAAAEc/0Q1QRwyLmSMYbhacKin9aU7k0mC7s3whQCLcBGAs/s320/AVATAR%2BFOR%2BAUTHOR%2BSIDEBAR.jpg'/>
<div class='social linear-3s'>
<div class='social-inner'>
<a href='//www.facebook.com/username'><i class='fa fa-facebook'></i></a>
<a href='//www.twitter.com/username'><i class='fa fa-twitter'></i></a>
<a href='//plus.google.com/username'><i class='fa fa-google-plus'></i></a>
<a href='//www.dribbble.com/username'><i class='fa fa-dribbble'></i></a>
</div>
</div>
</div>
  <h4 class='authornm'><a href='/' class='authornm-content'>محمد إبراهيم</a></h4>
<p>هذا هو مكان لكتابة فقرة تعريفية سريعة عن نفسك ومجمل أعمالك وماذ تحترف .</p>
<div class='nmsp_social_icons'>
<ul class='clearfix'>
<li class='facebook-social'>
<a href='http://www.facebook.com' target='_blank' title='Facebook'><i class='fa fa-facebook ct-transition'></i></a>
</li>
<li class='twitter-social'>
<a href='http://www.twitter.com' target='_blank' title='Twitter'><i class='fa fa-twitter ct-transition'></i></a>
</li>
<li class='Linkedin-social'>
<a href='http://www.linkedin.com' target='_blank' title='Linkedin'><i class='fa fa-linkedin ct-transition'></i></a>
</li>
<li class='pinterest-social'>
<a href='http://www.pinterest.com' target='_blank' title='Pinterest'><i class='fa fa-pinterest ct-transition'></i></a>
</li>
<li class='rss-social'>
<a href='http://www.rss.com' target='_blank' title='Rss'><i class='fa fa-rss ct-transition'></i></a>
</li>
</ul>
</div>
</div>

الأن إنتهينا من التركيب 📐 عدل على روابط التواصل ورابط الصورة بما تشاء 👍

ملاحظة هامة : يفضل ان تكون مقاس الصورة 600 عرض * 600 إرتفاع أى مربعة كى تعمل الإضافة بشكل صحيح 

دمتم فى امان الله 😉

هذا هو موضوع اليوم إذا أعجبك لا تبخل بمشاركته مع الأصدقاء من الازرار أسفله ⬇⬇