قائمة شخصية أحترافية profile

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


شرح طريقة التركيب
* الكود التالي هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته .. يوضع فوق </head>
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>
لاضافة الادة في صفحة ثابتة
قم بوضع الكود تالي في صفحة جديدة داخل تبويب HTML مع تغير الكلمات والروابط بما تناسبك
<Center>
<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/qaisi1web">أسعد القيسي</a>
</li>
<li>
<img src="http://4.bp.blogspot.com/-3JkACUeKXkM/VjPXMtfcxRI/AAAAAAAADX4/5jUsH_7nz0g/s1600-r/suitcase57.png" />

<a href="http://qaisi1web.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="#">25 6, 1998</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="#">assadalqaisi77@gmail.com</a>
</li>
<li>
<img src="http://4.bp.blogspot.com/-ueNkhCrLfb8/VjPZ1K9WzmI/AAAAAAAADY0/qCxqirvtq9M/s1600-r/connection27.png" />

<a href="http://qaisi1web.blogspot.com/">qaisi1web.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="#">Sect Badr : 22 , 11090</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="#">962798973806+</a>
</li>
</ul>
</div>
<div class="form-socail">


<a href="https://plus.google.com/+أسعدالقيسي0/">
<i class="fa fa-google-plus-square"></i></a>

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

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

<a href="https://www.facebook.com/qaisi1web">
<i class="fa fa-facebook-square"></i></a>
</div>
</div>
</Center>
<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://i.imgur.com/251zXuK.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://i.imgur.com/iwc2kDJ.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>
لاَضافة داخل أداة Html/Javascript
 <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/qaisi1web">أسعد القيسي</a>
</li>
<li>
<img src="http://4.bp.blogspot.com/-3JkACUeKXkM/VjPXMtfcxRI/AAAAAAAADX4/5jUsH_7nz0g/s1600-r/suitcase57.png" />

<a href="http://qaisi1web.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="#">25 6, 1998</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="#">assadalqaisi77@gmail.com</a>
</li>
<li>
<img src="http://4.bp.blogspot.com/-ueNkhCrLfb8/VjPZ1K9WzmI/AAAAAAAADY0/qCxqirvtq9M/s1600-r/connection27.png" />

<a href="http://qaisi1web.blogspot.com/">qaisi1web.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="#">Sect Badr : 22 , 11090</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="#">962798973806+</a>
</li>
</ul>
</div>
<div class="form-socail">


<a href="https://plus.google.com/+أسعدالقيسي0/">
<i class="fa fa-google-plus-square"></i></a>

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

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

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


</div>
</div>
<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://i.imgur.com/251zXuK.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://i.imgur.com/iwc2kDJ.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>
قد تواجهة اخطاء في الاضافة لانه تخصيصها يختلف من قالب لاخر لكن نستقبل مشاكلكم في التعليقات .. بالتوفيق

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

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
11 التعليقات
avatar

كيف تغير الصوره الشخصيه

avatar

لتغير صورة الكوفر ابحث عن رابط التالي
http://i.imgur.com/251zXuK.jpg

لتغير صورة شخصية ابحث عن رابط التالي
http://i.imgur.com/iwc2kDJ.jpg

avatar

قالب ممتاز حلو روووعة القيسي

avatar

أيضا موضوع جميل والله متميز

avatar

شكرا لك اخي أسامة

avatar

شكرأ لك اخى اسعمد استمر

avatar

العفو اخي الكريم

avatar
أزال أحد مشرفي المدونة هذا التعليق.
avatar
أزال أحد مشرفي المدونة هذا التعليق.
avatar

اخي ممكن هنا
suhaebm5@gmail.com

avatar

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

كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *