مدونة الصحراء التقنية: إضافة تعريف الكاتب جانبية

السلام عليكم و رحمة الله تعالى وبركاته , زوار و متتبعي مدونة الصحراء التقنية كيف حالكم ؟

أولاً كيف هي الحلة الجديدة للمدونة هل أعجبكم القالب الجديد ؟
المهم في تدوينة اليوم أحضرت لكم إضافة أنيقة ورائعة هي إضافة تعريف الكاتب تأتي في جانب الصفحة الرئيسية .
معاينة الإضافة

الآن نتحول للشطر الثاني من الدرس وهو كيفية إضافة الأداة

أولا : مذهب إلى التخطيط

ثانيا : إضافة أداة

ثالثا : HTML/JavaScript

رابعا: قم بنسخ كود الإضافة

<div id='profile-wrapper'>
<img src='http://im87.gulfup.com/aeztvH.jpg'/>
<a href='https://www.facebook.com/footitoo.fhimatoor'><h2>
TAREQ BACHAR</h2>
</a>
<p>
شاب مغربي عمري 19 سنة أحب كل جديد في عالم الانترنت من مواقع وبرامج واحب التدوين ودائما ابحث عن الجديد لتطوير مهاراتي في مختلف الميادين التي تعجبني لكي انقل معرفتي وتجاربي لآخرين حتى يستفيدوا بقدر ما استفدت انا ;)<p/> 
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='https://facebook.com/footitoo.fhimatoor'/>
<a class='twitter' href='https://twitter.com/xxx'/>
<a class='behance' href='https://sahara-technique.blogspot.com'/>
<a class='skype' href='skype'/>
<a class='Tareq Msiid' href='https://khamsat.com/user/طارق بشار'/>
</a></a></a></a></a></div>
</div>
</p>
</p>
</div>
<style>
#profile-wrapper {
text-align: center;
padding: 34px 20px;
background: #FFF;
border-top: 3px solid #E24300;
margin: 0 0 20px;
font-size: 12px;
font-weight: normal !important;
}
#profile-wrapper img {
border-radius: 100%;
margin: 0 0 10px;
height: 210px;
width: 170px;
}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;
}
#profile-wrapper p {
font: normal 12px tahoma;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:10px 0 0;overflow:hidden;margin-right: 65px;}
.social-icons a.facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi01OVSPH9HFFIKkqZqP6sQ6XnHz_4cvKXVX6hX20LBFC2ZRr8dhs7kOZ801A4MUSHgr7XiR_Q-oRkUdFoBR2680Et1zr8CU6SsSVA7Suml-dTw-Tn2PEVF5Q6WTo721iEo3JTTmNlIhk/s1600/facebook.png);
}
.social-icons a.facebook:hover {
background-color: #4265b9;
}
.social-icons a.twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NKGSZLg3b64Nbq0big0R0rYJVs78BeJr7dX1tx_Rk0O8CICWMldRzPcKEdA5ecQQpYANGpqthnQ2gay_23ymK0wawHRjAAa70sBquzDwVGHvg4-bK8sNXtL861ASQAzbXumRMUshmdo/s1600/twitter.png);
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}
.social-icons a.behance {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMra4DOaKNhTOQs0E7K3pfN5bm9rqAIyIWLUtqy5D2g0HxwDbq7ihl7DeIzhKeBrsf-mL-0vGQkyfxpIPrEKbiV5iwl5j3mJ_ihSDa__yCvLsnTh5tV5b7Wzc-frc7jQh3mrIkeIUyjmra/s1600/behance.png);
}
.social-icons a.behance:hover {
background-color: #444;
}
.social-icons a.skype {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiec-ydRikoEIufqhuo9zRXuhEASYHw7Zg029GJUmOStUFBDnXglqYB6ewmH5yLZJ2VzZTj0bFe9r59IjCP4oJA3cIwnKdOThb4jLwWKYKS7Cue-dDEApdj1NBMd0hu7qqx-GPxQKxXPtQ/s1600/skype.png);
}
.social-icons a.skype:hover {
background-color: #0bbff2;
}
.social-icons a.youtube {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oe7p8nP3s-4fQ2qaYZj2Gu_JxPDHLuaXSPba5w_zJRosb1mhX1AE46cXGVe064dXJuXpEH51kOaGrjWU6lQHmgeDxLFfRz-v6xZtuLWSSLO6wDMpmsGqXR1fWVK7ub7n5sP7860qF1Y/s1600/youtube.png);
}
.social-icons a.youtube:hover {
background-color: #df3333;
}
.social-icons a.google {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmLlp7nL7aBwkDL9Xuf2YTB4GADU9ih0_IsxvZ4rpFhWx_QptQGMImSZ_9OHVAh635YMjieTVlhN5dwtj4VxlxWXlZNA6O2IKuVJIl_oplEeExTVpQLG69ZHw9w2iiWGKHdiZartV5SU/s1600/google.png);
}
.social-icons a.google:hover {
background-color: #d62408;
}
.social-icons a.khamsat {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpR2kBbKbupl0NZbIE3LEAiFkH-uxBNWqFvsjk6cC4OCoRtZ6I2xVivqRBgm5AfoL9w_vKtIGneMXeu0Iz_M2PCupb-NFldk9al2GSSaHtBtJ64HL8veoJyWid1POnEOsI7Ut4Y3FBoU/s1600/kmst.png);
}
.social-icons a.khamsat:hover {
background-color: #F39C12;
}
.social-icons.sticky-social {
text-align: right;
float: right;
}
.social-icons {
float: right;
text-align: center;
}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
float: right;
display: block;
}
.social-icons a {
background-color: #dadada;
}
.social-icons a {
width: 30px;
height: 30px;
margin: 0 3.5px !important;
}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}



/* Author Bio */
.postauthor {
background: #F5F5F5;
border-top: 1px solid #e1e1e0;
border-bottom: 1px solid #e1e1e0;
overflow: hidden;
padding: 0.7em;
}
.postauthor img {
border: 5px solid #e2dede;
float: right;
margin-left: 1em;
}
.postauthor h3 {
color: #666;
font-size: 1.2em;
margin-bottom: 5px;
margin-top: 0;
}
.postauthor p {
color: #515151;
font-size: 12px;
margin-bottom: 10px;
margin-top: 0;
}
/* by ahmad-web Author Bio End */
</style>

خامسا : قم بتغيير المعلومات بمعلوماتك الخاصة .

طارق بشار

إسمي:طارق بشار مغربي الجنسية مقيم بالصحراء المغربية مهتم و مهووس بالتقنية و المعلوميات عمري 19 سنة أطمح في أن أثرك بصمتي في كل مكان

اذا كان لديك اي استفسار عزيزي الزائر بامكانك وضعه في تعليق!

من أنا

TAREQ BACHAR

كن من بين معجبي صفحتنا على الفايسبوك

المشاركات الشائعة

إضافة تعريف الكاتب جانبية