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

الكل يريد ان يتباها بانه مالك ومدير لمدونته واليوم احضرنا لكم اداة رائعة مطورة لتعريف عن الكاتب او المدون ومعلومات كثيرا عنك تستطيع وضعها في هاته الاداة مثل اين تسكن ما اسمك رقم هاتفك بريدك الالكتروني .......... الى اخره في الحقيقة الاضافة رائعة جدا وانا عجبتني كثيرا فانصحك باضافتها لمدونتك لتزيد جمالا .

اضافة اداة تعريف الكاتب

صورة عن الاضافة 

اضافة اداة تعريف الكاتب

طريقة الاضافة 

اضف هذا الكود في اداة جافا سكربت من التخطيط

الكود 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
.admin{
    width: 300px;
    height: 480px;
    background: #343434;
    border: 1px solid #131313;
    margin: -1px;
    border-radius: 4px;
}
.cover{
    height: 120px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjjOxUxXVADVkAYvs_7ouMq-BrhmhOOUgR63eeAynSFpvVhG7UD-0b69PEKVRlvkGveNuMqIgJc-L_2a9GfeuIkNoWxkMKUTO9n5NnEbz9IxrK6bF4zWpLHm-ktvi-VUCKwPQvhc6d8tJI/s1600-r/Space-Desktop.jpg) no-repeat;
    border-bottom: 1px solid #868282;
    background-size: 300px;
    box-shadow: 0px -140px 310px -100px #000 inset;
}

.profile{
    width: 120px;
    height: 120px;
    background: url(http://lh3.googleusercontent.com/-UTndummHG1Q/AAAAAAAAAAI/AAAAAAAAMZY/IF0N_s_tfEA/s512-c/photo.jpg) no-repeat;
    border: 4px solid #fff;
    margin: -100px auto 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
    background-size: 120px;
}
.form-info{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-info ul{
    margin: 0;
    padding: 0px;
}
.form-info ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-info ul li img{
    display: block;
    float: right;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-info ul li a{
display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-info ul li a:hover{color:#fff;}
.form-contact{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-contact ul{
    margin: 0;
    padding: 0px;
}
.form-contact ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-contact ul li img{
    display: block;
    float: left ;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-contact ul li a{
display: block;
    float: left ;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-contact ul li a:hover{color:#fff;}
.form-socail{
    text-align: center;
}
.form-socail i{
color: #9E9E9E;
    font-size: 32px;
    padding: 5px;
}
.form-socail i:hover{
color:#fff;
}
</style>


<div class="admin">


<div class="cover">
</div>
<div class="profile">
</div>
<div class="form-info">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBRB5C6KpXpKzKorbmCvtj454jo_F5kGnDzWPqTUrRpAcG688aXhdaLWfhIkz7fdVtwXxSe-QX1Io9t3j6nizeclA7DoOZJ70s6J_YzEGzbRO13d_xTe3Vi_WNSCPJGzbqVdQs0jCIWKCq/s1600-r/users81.png" />

<a href="https://www.facebook.com/aouadiilyass">الياس عوادي</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uZCExOv7laiCnrjWEIu3YdUNuJJQtmgIyPPhJt89NjLFBj3OcKTaubX7ebWw0AtCRVBxNyQbrO6i6XrcF47KFKXgA2NmMCLTdMCzQzFh1TO12ZnpIXqbg92kv1_XwVleReg5f42Q9u8F/s1600-r/suitcase57.png" />

<a href="http://www.tech1net.com/">طالب ومدون</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypIHEQd3t2Nd9QcLCFcCojejQAiFJMVYLCD4mP-QSPUhfClE-bP8U-l0NkAzLbrCl5Atg-2uJlJqDt4FbWSGjja1xKicdmcgfV_uyW4DT58tpEq1t5b6LoeTQuuEIBPxXiMyOKVipEWXg/s1600-r/pin71.png" />
<a href="http://www.tech1net.com/">وادي سوف - الجزائر</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FHmJwLe4etj_M_h5LX5KyYRY4xKWUJhjDqu8C67zdpuA7caQdhq17PyRT-CE-Yq5UEZnhXuvY5_ihy2R-7erKQ4orBLoVc7SOwPpUYB0QnNSEM4FrQlBnnvmhpICqyV9sXzb1MAJn32x/s1600-r/candles5.png" />

<a href="http://www.tech1net.com/">26 مارس 1998</a>
</li>
</ul>
</div>
<div class="form-contact">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlkQagCMGcJadg9cC1YwwA6d-TnRl_-4Ye3c12Yf3OAITiuCHpXJ8_GyK0qIzsbElCbLN8RNVWww_z0xeEswR2PVoM8Ixmsr6PGZPywRFSng_rVvqHFM87h5I0zvLJbo_4qYju1N_HSlq/s1600-r/symbol20.png" />

<a href="ilyasse7555@gmail.com">ilyasse7555@gmail.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PuUI4kxNyUwVKMHQ0od2JM_m9KwRqtxZNUR183thvX-OTD7f3r2PzSafGPPHJI8SDDfUiUH4EBXiPOSWG_9tyalAHam18g-mzyjviqsxgLgTrdx1ttO9YaJ48ybuB3tGSyjfmx9Gvu1w/s1600-r/connection27.png" />

<a href="http://www.tech1net.com/">مدونة تقني الانترنت</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmRKeujtkH2L1Mr83GqVDEy5lpMl-AMlBScfg4GU3uiKv6pua_2VlunGSpz7pkgx72snKdC18yNhz4JTdSMOPynvp7rKpsFzvlwAf_-cmINQfYEPkJ_5AgGNsAiDjAo_vZKxlWNAGUXBHe/s1600-r/black218.png" />

<a href="#">boite postal : 39040</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvivD_FnZ0h-BimLRrZj0WuMiTmM3IJ12400T49mEXSQBnkZbKgPSeLpCEmGzd2Tc6NDOF-ow8MsuFYMuv77pTY0uPfDbZd67FSvORk_YxEWEfMSbHEhJwE-_6IOCRVcpxNQnRSxj2aBj/s1600-r/phone+call41.png" />

<a href="#">0778910166</a>
</li>
</ul>
</div>
<div class="form-socail">


<a href="https://plus.google.com/u/0/101505699917353213667">
<i class="fa fa-google-plus-square"></i></a>

<a href="https://www.youtube.com/channel/UCgWrqDdOyqq-87-jaQqoaoA">
<i class="fa fa-youtube-square"></i></a>

<a href="حسابك على لنكدين">
<i class="fa fa-linkedin-square"></i></a>

<a href="https://twitter.com/ilyasse7555">
<i class="fa fa-twitter-square"></i></a>

<a href="https://www.facebook.com/aouadiilyass">
<i class="fa fa-facebook-square"></i></a>


</div>
</div>

مدونة دكتور المحترف

ثم غير ما يجب تغيره واي مشكل في التغير فالتعليقات مفتوحة ومبروك عليك الاضافة