• قائمة شخصية أحترافية 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
    يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
    قائمة شخصية أحترافية profile

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

    11 تعليقات
    كيف تعلق ؟

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

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

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

        حذف
      2. شكرأ لك اخى اسعمد استمر

        حذف
      3. العفو اخي الكريم

        حذف
    2. قالب ممتاز حلو روووعة القيسي

      ردحذف
    3. أيضا موضوع جميل والله متميز

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

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

      ردحذف
    6. اخي ممكن هنا
      suhaebm5@gmail.com

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

        حذف

    contact-us

    الاسم

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

    رسالة *