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

Unknown

9:14 ص

20 تعليقات

شاركه غرد جوجل+

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

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

طريقة التركيب :

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJussBALOfp7rerTOc5XvA-Opa3giETcY295-ZHrJGuhoAnxQ432KOwfsOfKfAiQEWfAXkubuR_7iJk68obkZWC-Mg4SLVshTqos4jQny5Ew41E_YFlYC22a34UgH7SJg8XS5JW75EOjI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig192MDDuRR7RkvI8g5J6qca2fuosnlZkWBLJuHpJB2tSrxKucpHT3n2BVtYcEYEkbvOc1Nh0VBmMwowpf_mlHJEmF9IaGDu6xf6MMTeagJPZKDQhksxpZP1-YpFlJrodJUmzjimnjyZBH/s1600-r/users81.png" />
<a href="https://www.facebook.com/Emad.Eyad15">EMAD EYAD</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirTONu0yGvxMahvAV0lTZQNsEzV90nHNGrNDz-DB-6TDfYXow_iGwMfU8Js8RhTjvbdMsLc8m4_nDDOWFFnC5eQSBzeZzfJvhbnUcb8XgHXY5u9D8lgx5fhhdTgKMOzofDx55dvVdcSxq4/s1600-r/suitcase57.png" />
<a href="http://th3dreamweb.blogspot.com/">مدون بمدونة حلم ويب</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpb0t6U1ix_QohW8FpV4lICZbRX4hppFsVYabQdKxiB0VqOYkjVfxVU3szfixfcHwKOhHJPOKk_O2gedbqo9EEae8Gi5woVn7XdLFboNQ99IwNoxJsn81eF739G-D7pPT65chCjZph7Bmh/s1600-r/pin71.png" />
<a href="#">السلط - الاردن</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLe0x3RSSdDEaxPM0AAOJOLMM1qnSZFKXTsFWNhqkkIZ6BgaJ1fMTmYlZ7IUpA_UAP6us4hQ7NgtstCrJ8KT-3bEYG5WwmjtUf_4xZZgK2Hrktzap3VnByTdRIPoOl1DDunPpd-vQKiwe/s1600-r/candles5.png" />
<a href="#">29 - 8 - 2000</a>
</li>
</ul>
</div>
<div class="form-contact">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjzb8bvLSh-fxCFfdHcCXkAUfeM4gocnYbPEXhG_NiXtN9VYymFkQ0HkQ3TIbMdpNC4SmDAmdn0-ARVvX7e7RjNvHRJTIJqpTeut0zekcNVXmLGSbdiI3A1bpQ2zxpka7I8bl7fgu99I-6/s1600-r/symbol20.png" />
<a href="#">emad.eyad16@gmail.com
</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDFqkH3EU80G0ZMTRQCYCeLYCpIccbKHkz8UEuV8GC58bB21hx2NzMw2d97JehzHv6rESxDUfegdsHX-Y9TFFi91I7JKBC9LYsjc9HizWUaDUvWovpHOFLGe0nD07Gv8pa1P2aqWd2NEU5/s1600-r/connection27.png" />
<a href="http://th3dreamweb.blogspot.com/">th3dreamweb.blogspot.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3c5wZh54JrgfEYkzwv_SqUxe9CdPlBNfCQbDAQZevexL0wXcHrjTz8D2oD09fgqiA_el70gsI5YMwNAdUON2leU_mIoutFHCZA1YUuercwwDhdD08g04UfSwBqfLyvsXmfXRSgOypvWQK/s1600-r/black218.png" />
<a href="#">لا يوجد</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpn3qQAGe9l5_UEwtnBy5kYLASi251kHQ15HGhXqZln5iCxn5NLaW7hfBmnOQUOvuQzfvGSBfulddpHrocy-xAQlhy5-XgS42QUV-3kezdMcR-7zGHZArEpkwFY2hhXzUEsCSSkkQ2DH3t/s1600-r/phone+call41.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>

احفظ الاضافة واذهب للمعاينة 

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

الى هنا نكون قد وصلنا الى ختام التدوينة 

في أمان الله