الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن تضاف في صفحة أو في أداة...
<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😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
يا اخي لا اعرف اين اضع الاكواد
ردحذفحمل الملف المرفق افتح HTML-Javascript انسخ الكود توجه لتخطيط اضف اداة Html/Javascript ضع بها الكود
حذفأخي ينفع اضعها في صفحه html (مثل ننصحكم في صفحة واحد يعني)
ردحذفنعم يمكن فقط حمل الملف ثم انسخ كل ما به وضعه في صفحة جديدة ضعه في تبويب HTML
حذفراااااااااااااااااااااااااائع أخي حسام
ردحذفشكرا مرورك أروع .
حذفيعطيك العافية اخوي حسام راائع :lv
ردحذفاخي ممكن اطلب كيفية اضافة الزيارات لمواضيعي جربت من مواقع كثير مانفع شيء بس دائرة سودة وتدور
ردحذفهذا ايملي قد ترسل لي شيء او مشابة ارجوك بسرعة مستعجل:-bd
ali5000harbone@gmail.com
فعلا لن تشتغل وبتجربة مني لأن بعض القوالب لا تقبل الخاصية او الأكواد، عموما ارسلت لك رابط قد ينفعك بالتوفيق .
حذفيعطيك العافية
ردحذفممكن كود هذه اضافة
http://im89.gulfup.com/IgYwCR.png
فقط انسخها عادي بتحديدها وضعها في الموضوع تلقائيا سينتج لك كود خاص بها في تبويب HTML
حذفهل يوجد قالب html كامل لهذه الصفحة فانا محتاجها على شيء غير البلوجر
ردحذفإذا اردتها كما بالمعاينة فسأرسلها لك أترك بريدك الإلكتروني
حذفمرحبا أنا أريد هته الأكواد
ردحذفhttp://jsfiddle.net/iHussam/mq7ksmht/39/embedded/result/
لأضيفها في صفحة html
المرجو إرسالها في اليميل
ahmedtech965@gmail.com
هل يمكن وضع هذه الأكواد لتعمل محل القالب
ردحذفيمكن
حذفهذا القلب ليس بصيغة Xml
ردحذفكيف اقوم بتحويلة الى Xml
هذا ليس قالب بل اضافة
حذفلما ارفع القالب يكتب هذا
ردحذفلم نتمكن من حفظ نموذجك.
تعذر تحليل النموذج نظرًا لأن صياغته غير صحيحة. يرجى التأكد من إغلاق جميع عناصر XML بشكل سليم. رسالة خطأ XML:
Content is not allowed in prolog.
ارجو حل المشكلة
قم بتحرير القالب بأي محرر ثم انسخه والصقه مباشرة داخل القالب
حذفالسلام عليكم اخى العزيز انا لسة بصمم فى مدونتى ووضعت هذا القال لكن لما يتم تخصيص الصفحة التسجيل كيفة افعل
ردحذف