السلام عليكم ورحمة الله وبركاته متابعى مدونة مستر الإنترنت او مستر نت اليوم بنقدملكم إضافة تعريف الكاتب مع شبكات التواصل الإجتماعى الإضافة من تصميمنا الخاص يارب تعجبكم لو عجبت متنساش تسيبلنا تعليق تحفيزى 💗
المعاينة و تحميل الأكواد
معاينة تحميل
<div class='nmauthor_about'>
<div class='image-wrap'>
<img alt='محمد إبراهيم' class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-4XX4MlGEtZjlf7WQxe4a2RLmRqB4W5bkjwN-yJlFcNPRIleg6R8iOcl3GEsG81iA4BCRnNsm1wdq8mEPY9kEMWoihuNCwzHksPWTj78rqbpib1GAQPqvm5RMwDVkwpaBg5PtVtpZz26/s320/AVATAR+FOR+AUTHOR+SIDEBAR.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>
شرح التركيب
اولاً : نبحث عن الوسم ]]></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%;
}
.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='image-wrap'>
<img alt='محمد إبراهيم' class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-4XX4MlGEtZjlf7WQxe4a2RLmRqB4W5bkjwN-yJlFcNPRIleg6R8iOcl3GEsG81iA4BCRnNsm1wdq8mEPY9kEMWoihuNCwzHksPWTj78rqbpib1GAQPqvm5RMwDVkwpaBg5PtVtpZz26/s320/AVATAR+FOR+AUTHOR+SIDEBAR.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 إرتفاع أى مربعة كى تعمل الإضافة بشكل صحيح
ليست هناك تعليقات
نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊
محول الاكواد محول الأكواد تابع المدونة تابع المدونة