الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
زِرين بسيطين وبتصميم إحترافي يتضمن المعاينة مع التحميل بإدراج حجم الملف ونص اخر، أزرار بتصميم نقي بإستخدام Css فقط مما يجعلها جد خفيفة وأيضا لها منظر جد رائع تجذبك لضغط عليها 😊 ما يتبقى عليك إلى تركيبها وإستعمالها في موقعك نبدأ بالمعاينة أولا
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>/* CSS Simple Butn Ar1web */
.whitebutton {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebutton a {background: #fff;color: #666;display: block;font-size: 17px;font-weight: 700;font-family: Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;}
.whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #34B4E2;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down {margin: -30px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-right: 6px;color: #aaa;}
.whitebutton:hover .up {opacity: 1;transform: translate(0,0);}
.whitebutton:hover .down {opacity: 1;transform: translate(0,-90px);}
.whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebuttondemo a {background: #34B4E2;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;transition: 350ms;}
.whitebuttondemo a:before {content:'\f002';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebuttondemo a:hover {color:#fff;}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebuttondemo .up {background: #444;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebuttondemo:hover .up {opacity: 1;transform: translate(0,0);}
4. أضف الكود الآتي بداخل الموضوع في تبويب HTML<div class="whitebuttondemo">
<a href="#" target="_blank">معاينة</a><br>
<span class="up">إضغط للمشاهدة</span>
</div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">تحميل مباشر</a><br>
<span class="up">إضغط للبدء</span><br>
<span class="down">2.3MB .rar</span>
</div>
* لإستعمال كود واحد مثل معاينة فهو محدد باللون البرتقالي من البداية لنهايته
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
أزال المؤلف هذا التعليق.
ردحذفغريبة ! جربت وضع كودد css فوق skin
حذفشككتني لكن جربتها بمدونة وبدون أي مشكل :
http://ly-ar1web-v3.blogspot.com/2014/09/blog-post.html
حذفضع هذا الكود :
<div class="whitebutton">
<a href="#" target="_blank">هنا النص</a><br>
<span class="up">هنا النص</span><br>
<span class="down">1.6MB .rar</span></div>
أزال المؤلف هذا التعليق.
حذفلقد وضعت الأكواد بنفسي في تدوينة أخرى من مدونتك كما تشاهد بالصور لا خطأ .. على ما اعتقد قد يكون هنا كود أو شيئ بسيط في كود الموضوع هو الذي يجعلها تظهر بذلك الشكل جرب بموضوع اخر أو ضع موضوع جديد فقط بالأزرار لتترك الشك
حذفالصور :
http://im58.gulfup.com/RwbEHz.png
http://im58.gulfup.com/QY5no9.png
أزال المؤلف هذا التعليق.
حذفأزال المؤلف هذا التعليق.
حذفوالله لا اعلم المشكل مجدد في نفس الموضوع نسخت الكود ولصقته ولم يعد المشكل يمكنك مشاهدة الصورة جربها بنفسك بالضغط على inspecter l'elments
حذفالصورة :
http://im47.gulfup.com/Fnqbqg.png
الكود :
<div class="whitebutton">
<a href="#" target="_blank">تحميل مباشر</a><br>
<span class="up">إضغط للبدء</span><br>
<span class="down">2.3MB .rar</span></div>
أزال المؤلف هذا التعليق.
حذفقالبك لا يحب الأزرار @@,
حذفالقائمة موجودة من زمان وقد رأيتها
تفضل التدوينة :
http://www.ar1web.com/2014/10/css-side-menu.html
أزال المؤلف هذا التعليق.
حذفأزال المؤلف هذا التعليق.
حذفالكود المسؤل هو .menu-outer > nav ul
حذفستجد top: 15%;
إذا زدت في الرقم فذلك يعني نزول الأقسام إذا نقصت في الرقم فالعكس ،
يعطيك العافية ازرارجميلة :lv
ردحذفلدي نفس المشكلة لدى الأخ ياسر ما الحل
ردحذفلا تتعب نفسك تم الحل =D لقد وضعت الأكواد بين الوسميين style لقد اشتغلو تمام شكرا لك
ردحذفالحمد لله :D أفزعتني أنت الأخر
حذفتشكر على مرورك المميز ، مدونتك جيدة واصل على هذا المنوال في تقديم المواضيع موفق .
ردحذفأخي الأزرار لم تشتغل على هذا القالب في مدونتي ولما بحتت في أكواد css وجدت أن هناك أكواد لأزرار أخرى أتت مع القالب لكن لا أعرف كيف أستعملها ... هل يمكنك إرشادي
ردحذفهذه المدونة : www.bloggxp.com
الأزرار تشتغل تم تجربتها على نفس القالب تم تعديلها لتناسب القالب الذي لديك حمل الأكود وضعها مباشرة فوق
حذف</head>
http://www.gulfup.com/?uxDRLT
بالنسبة لأزرار المتواجدة لديك ستجدها بالملف التالي فقط ضع كود الزر في الموضوع :
http://www.gulfup.com/?PNGi7a
شكرا أخي .. لكن الملفات التي رفعتها لي فارغة .. المرجو أن ترفع ملفات text مباشرة على مركز الخليج دون وضعها في مجلدالضغط وأتأسف على الإزعاج
ردحذفتفضل : http://goo.gl/H8JbJq
حذفالملف بإسم Css Button Simple هو للأزرار التي بهاته التدوينة ضعها مباشرة فوق </head>
والملف الأخرر للأزرار الخاصة بقالب Bmag
شكرا لك اخي حسام والله مبدع وتقبل اعتزاري بشأن ما بدر مني وشكرا
ردحذفيا اخي ممكن طلب
ردحذفكيف اضيف هذه اضافة الى مدونتي مثل الذي في مدونتك
http://im89.gulfup.com/meZ5Ki.png
صعود ونزول
واذا لا تريد ان تعطيني اضافة شكرا
أزال المؤلف هذا التعليق.
ردحذفسيتم وضعها في تدوينة بإذن الله في الأيام القادمة
حذفشكرا اتمني ان تكون باسرع وقت ممكن :-bd
حذفشكرا لك أخي الكريم :]
ردحذفhttp://nabd-blog.blogspot.com/