قائمة شخصية Profile

قائمة شخصية Profile

يوجد الآن مشاهدة التعليقات : 21

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات


قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن تضاف في صفحة أو في أداة...
شرح طريقة التركيب * الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته .. يوضع فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
1. اضف اداة Html/Javascript وضع بها الكود التالي
<style>
.profile-container {
    position: relative;
    width: 100%;
    float: none;
}
.avatar img:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.profile {
    background: #f6f6f6;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.avatar img {
    display: block;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;width: 100%; height: 250px;
}

.follow {
    margin: 4px 0 0 0;
}

.follow button {
    display: block;
    width: 100%;
    border: 0;
    background: #268cde;
    color: white;
    font-family: tahoma;
    font-size: 15px;
    padding: 7px 0;
    margin: 0;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    cursor: url(http://2.bp.blogspot.com/-IJ8uMvhlKVU/VFDoIGDIn3I/AAAAAAAAGio/K2vVTU7nX84/s320/chm.png),pointer;
-moz-transition: all .3s ease 0s;
}

.follow button i {
    font-size: 10px;
    color: #b9daf4;
}

.follow button:hover {
    background: #3096e8;
}

.follow button:active {
    background: #2085d6;
}

.profile-list {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    color: #767b7e;
    font-size: 13px;
    text-align: right;
}

.profile-list li {
    cursor: pointer;
    background: #ffffff;
    border-top: 1px solid #F2F2F2;
    padding: 15px 10px;
}

.profile-list li:last-child {  
    border-radius: 0 0 3px 3px;;
    -o-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
}

.profile-list li [class^="icon-"] {
    margin: 0 3px 0 0;
}


.profile-list .profile {
    border-radius: 3px 3px 0 0;
    position: relative;
}

.profile-list li {
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(250px) rotateX(-90deg);
    -o-transform: perspective(250px) rotateX(-90deg);
    transform: perspective(250px) rotateX(-90deg);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.profile-list .first {
    -webkit-transition: 0.2s linear 0.8s;
    -o-transition: 0.2s linear 0.8s;
    transition: 0.2s linear 0.8s;
}

.profile-list .second {
    -webkit-transition: 0.2s linear 0.6s;
    -o-transition: 0.2s linear 0.6s;
    transition: 0.2s linear 0.6s;
}

.profile-list .third {
    -webkit-transition: 0.2s linear 0.4s;
    -o-transition: 0.2s linear 0.4s;
    transition: 0.2s linear 0.4s;
}

.profile-list .fourth {
    -webkit-transition: 0.2s linear 0.2s;
    -o-transition: 0.2s linear 0.2s;
    transition: 0.2s linear 0.2s;
}


.profile-container:hover .profile {
    border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
}

.profile-container:hover .profile-list li {
    -webkit-transform: perspective(350px) rotateX(0deg);
    -o-transform: perspective(350px) rotateX(0deg);
    transform: perspective(350px) rotateX(0deg);
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
}

.profile-container:hover .profile-list .second {
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.profile-container:hover .profile-list .third {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.profile-container:hover .profile-list .fourth {
    transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
} 
</style>
<div class="profile-container unfold">
<div class="profile">
<div class="avatar"><img src="https://s-media-cache-ak0.pinimg.com/236x/f8/a0/c2/f8a0c27c55a56099b79b22bad13f476a.jpg" /></div>
<div class="follow"><button><i class="fa fa-plus"></i> تابعني</button></div>
</div>
<ul class="profile-list">
    <li class="first"><a href="#" target="_blank"><i class="fa fa-user"></i> من أنا</a></li>
    <li class="second"><a href="#" target="_blank"><i class="fa fa-list"></i> أعمالي</a></li>
    <li class="third"><a href="#" target="_blank"><i class="fa fa-thumb-tack"></i> مدونتي</a></li>
     
    <li class="fourth"><a href="#" target="_blank"><i class="fa fa-star"></i> المفضلة </a></li>
</ul>
</div>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 21 تعليقًا:

  1. يا اخي لا اعرف اين اضع الاكواد

    ردحذف
    الردود
    1. حمل الملف المرفق افتح HTML-Javascript انسخ الكود توجه لتخطيط اضف اداة Html/Javascript ضع بها الكود

      حذف
  2. أخي ينفع اضعها في صفحه html (مثل ننصحكم في صفحة واحد يعني)

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

      حذف
  3. راااااااااااااااااااااااااائع أخي حسام

    ردحذف
  4. يعطيك العافية اخوي حسام راائع :lv

    ردحذف
  5. اخي ممكن اطلب كيفية اضافة الزيارات لمواضيعي جربت من مواقع كثير مانفع شيء بس دائرة سودة وتدور
    هذا ايملي قد ترسل لي شيء او مشابة ارجوك بسرعة مستعجل:-bd
    ali5000harbone@gmail.com

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

      حذف
  6. يعطيك العافية
    ممكن كود هذه اضافة
    http://im89.gulfup.com/IgYwCR.png

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

      حذف
  7. هل يوجد قالب html كامل لهذه الصفحة فانا محتاجها على شيء غير البلوجر

    ردحذف
    الردود
    1. إذا اردتها كما بالمعاينة فسأرسلها لك أترك بريدك الإلكتروني

      حذف
  8. مرحبا أنا أريد هته الأكواد
    http://jsfiddle.net/iHussam/mq7ksmht/39/embedded/result/
    لأضيفها في صفحة html
    المرجو إرسالها في اليميل
    ahmedtech965@gmail.com

    ردحذف
  9. هل يمكن وضع هذه الأكواد لتعمل محل القالب

    ردحذف
  10. هذا القلب ليس بصيغة Xml
    كيف اقوم بتحويلة الى Xml

    ردحذف
    الردود
    1. هذا ليس قالب بل اضافة

      حذف
  11. لما ارفع القالب يكتب هذا

    ‏لم نتمكن من حفظ نموذجك.

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

    Content is not allowed in prolog.

    ارجو حل المشكلة

    ردحذف
    الردود
    1. قم بتحرير القالب بأي محرر ثم انسخه والصقه مباشرة داخل القالب

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

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم