اداة التعريف بالكاتب الشكل الأول


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

معاينة للاضافة :


طريقة التركيب :
  1. اذهب الى اللوحة الرئيسية في بلوجر
  2. اختار التخطيط 
  3. اختار اضافة اداة جافا سيكرة 
  4. اضف بعدها الكود التالي :

<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(http://2.bp.blogspot.com/-eozlkqCkahk/VjPKdGZ00oI/AAAAAAAADXE/rXbds1JSaFE/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://lh5.googleusercontent.com/-p5ptKi80KNI/AAAAAAAAAAI/AAAAAAAAAJI/fM-EQ6clrZo/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="http://3.bp.blogspot.com/-Wb3WEcCg0mE/VjPQk-emmSI/AAAAAAAADXo/o7vKvwUWfVI/s1600-r/users81.png" />
<a href="https://www.facebook.com/Emad.Eyad15">EMAD EYAD</a>
</li>
<li>
<img src="http://4.bp.blogspot.com/-3JkACUeKXkM/VjPXMtfcxRI/AAAAAAAADX4/5jUsH_7nz0g/s1600-r/suitcase57.png" />
<a href="http://th3dreamweb.blogspot.com/">مدون بمدونة حلم ويب</a>
</li>
<li>
<img src="http://2.bp.blogspot.com/-GUdJAF6SU1E/VjPXk331sBI/AAAAAAAADYE/LWeYrbsAKAI/s1600-r/pin71.png" />
<a href="#">السلط - الاردن</a>
</li>
<li style="border-bottom:none;">
<img src="http://1.bp.blogspot.com/-dT7rg3pCrwU/VjPXyAZL8nI/AAAAAAAADYQ/12klq7yMG8Q/s1600-r/candles5.png" />
<a href="#">29 - 8 - 2000</a>
</li>
</ul>
</div>
<div class="form-contact">
<ul>
<li>
<img src="http://2.bp.blogspot.com/-c9IJffTwgHw/VjPZpniyrwI/AAAAAAAADYo/UAunGvs5u2E/s1600-r/symbol20.png" />
<a href="#">emad.eyad16@gmail.com
</a>
</li>
<li>
<img src="http://4.bp.blogspot.com/-ueNkhCrLfb8/VjPZ1K9WzmI/AAAAAAAADY0/qCxqirvtq9M/s1600-r/connection27.png" />
<a href="http://th3dreamweb.blogspot.com/">th3dreamweb.blogspot.com</a>
</li>
<li>
<img src="http://2.bp.blogspot.com/-4mT_GEvj3Bo/VjPaMWg_B_I/AAAAAAAADZA/uTwHRWa82w0/s1600-r/black218.png" />
<a href="#">لا يوجد</a>
</li>
<li style="border-bottom:none;">
<img src="http://4.bp.blogspot.com/-UF3cO6oH_SY/VjPagUZtSHI/AAAAAAAADZM/JH20gbywtLc/s1600-r/phone%2Bcall41.png" />
<a href="https://www.facebook.com/Emad.Eyad15">اتصل بي على فيس بوك</a>
</li>
</ul>
</div>
<div class="form-socail">

<a href="https://www.facebook.com/Emad.Eyad15">
<i class="fa fa-google-plus-square"></i></a>
<a href="https://www.facebook.com/Emad.Eyad15">
<i class="fa fa-youtube-square"></i></a>
<a href="https://www.facebook.com/Emad.Eyad15">
<i class="fa fa-linkedin-square"></i></a>
<a href="https://www.facebook.com/Emad.Eyad15">
<i class="fa fa-twitter-square"></i></a>
<a href="https://www.facebook.com/adnmej">
<i class="fa fa-facebook-square"></i></a>

</div>
</div>

احفظ الاضافة واذهب للمعاينة 
اذا واجهتك اي مشكلة ضعها في تعليق

الى هنا نكون قد وصلنا الى ختام التدوينة 
في أمان الله 
تنويه : القوالب والإضافات الصور في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.

عن الكاتب

أنا عماد إياد من المملكة الاردنية الهاشمة حبي الاول واهتمامي هو التدوين والحمد لله استطعت ان احرز نجاح كبير ومدونة حلم ويب تعبر عما اهواه

21 التعليقات لموضوع "اداة التعريف بالكاتب الشكل الأول"

الكاتب
avatar

:-bd شكراا علي الموضوع :-bd :-d

الكاتب
avatar

لا شكر على واجب لاكن اتمنا انك استقدة

الكاتب
avatar
الكاتب
avatar
الكاتب
avatar

شكرا اضافة رائعة

الكاتب
avatar

لاشكر على واجب

الكاتب
avatar

اخى نريد اضافة المعاينة والتحميل من قالب عرب ويب التى توضع بالجانب

الكاتب
avatar

انا لدي خبرة في بلوجر 3 سنوات واعرف كيف اضافتها شكرا لك

الكاتب
avatar

اخى انا اريدها هل يمكنك اعطائها لى

الكاتب
avatar

سيتم وضعها قريبا للاستخدام

الكاتب
avatar

بالله فى فى اقرب وقت لانى احتاجها

الكاتب
avatar
الكاتب
avatar

طيب انا لو استخدمت قالب عرب ويب الى بيه الاضافة تقدر تقولى استخدم الاضافة ازاى

الكاتب
avatar

ستعمل مع القالب لا تحتاج الى شرح

الكاتب
avatar

اخى حتى الان وانت لم تعطنى كيفية اضافتها الى مدونتى

الكاتب
avatar

سأعطيك الاضافة التي استعملها في مدونتي الخاصة بمعلومات التدوينة والخاصة بعرب ويب قريبا

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1 أن يكون التعليق خاص بمحتوى التدوينة
2 أن لا تضع أي روابط خارجية


الابتسامات الابتسامات