06‏/11‏/2014


قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن تضاف في صفحة أو في أداة...
شرح طريقة التركيب * الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته .. يوضع فوق </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>

قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن تضاف في صفحة أو في أداة...
شرح طريقة التركيب * الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته .. يوضع فوق </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>
21 Blogger تعليقات
Disqus
21 التعليقات
المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

راااااااااااااااااااااااااائع أخي حسام

المشرف
avatar

شكرا مرورك أروع .

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar
المشرف
avatar

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

المشرف
avatar

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

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

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

Content is not allowed in prolog.

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

المشرف
avatar

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

المشرف
avatar

هذا ليس قالب بل اضافة

المشرف
avatar

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

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