05‏/11‏/2014

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

غريبة ! جربت وضع كودد css فوق skin
شككتني لكن جربتها بمدونة وبدون أي مشكل :
http://ly-ar1web-v3.blogspot.com/2014/09/blog-post.html

المشرف
avatar


ضع هذا الكود :
<div class="whitebutton">
<a href="#" target="_blank">هنا النص</a><br>
<span class="up">هنا النص</span><br>
<span class="down">1.6MB .rar</span></div>

المشرف
avatar

يعطيك العافية ازرارجميلة :lv

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

لدي نفس المشكلة لدى الأخ ياسر ما الحل

المشرف
avatar

لا تتعب نفسك تم الحل =D لقد وضعت الأكواد بين الوسميين style لقد اشتغلو تمام شكرا لك

المشرف
avatar

لقد وضعت الأكواد بنفسي في تدوينة أخرى من مدونتك كما تشاهد بالصور لا خطأ .. على ما اعتقد قد يكون هنا كود أو شيئ بسيط في كود الموضوع هو الذي يجعلها تظهر بذلك الشكل جرب بموضوع اخر أو ضع موضوع جديد فقط بالأزرار لتترك الشك
الصور :
http://im58.gulfup.com/RwbEHz.png
http://im58.gulfup.com/QY5no9.png

المشرف
avatar

الحمد لله :D أفزعتني أنت الأخر

أزال المؤلف هذا التعليق. - حذف
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

والله لا اعلم المشكل مجدد في نفس الموضوع نسخت الكود ولصقته ولم يعد المشكل يمكنك مشاهدة الصورة جربها بنفسك بالضغط على 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>

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

قالبك لا يحب الأزرار @@,
القائمة موجودة من زمان وقد رأيتها
تفضل التدوينة :
http://www.ar1web.com/2014/10/css-side-menu.html

أزال المؤلف هذا التعليق. - حذف
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

الكود المسؤل هو .menu-outer > nav ul
ستجد top: 15%;
إذا زدت في الرقم فذلك يعني نزول الأقسام إذا نقصت في الرقم فالعكس ،

المشرف
avatar

شكرا لك اخي موضوع جميل و اكثر من رائع اتمنى زيارة مدونتي و ترك تعليقك و شكرا لك

http://mudwnp.blogspot.com/

مدون محترف

المشرف
avatar

تشكر على مرورك المميز ، مدونتك جيدة واصل على هذا المنوال في تقديم المواضيع موفق .

المشرف
avatar

أخي الأزرار لم تشتغل على هذا القالب في مدونتي ولما بحتت في أكواد css وجدت أن هناك أكواد لأزرار أخرى أتت مع القالب لكن لا أعرف كيف أستعملها ... هل يمكنك إرشادي
هذه المدونة : www.bloggxp.com

المشرف
avatar

الأزرار تشتغل تم تجربتها على نفس القالب تم تعديلها لتناسب القالب الذي لديك حمل الأكود وضعها مباشرة فوق
</head>
http://www.gulfup.com/?uxDRLT
بالنسبة لأزرار المتواجدة لديك ستجدها بالملف التالي فقط ضع كود الزر في الموضوع :
http://www.gulfup.com/?PNGi7a

المشرف
avatar

شكرا أخي .. لكن الملفات التي رفعتها لي فارغة .. المرجو أن ترفع ملفات text مباشرة على مركز الخليج دون وضعها في مجلدالضغط وأتأسف على الإزعاج

المشرف
avatar

تفضل : http://goo.gl/H8JbJq
الملف بإسم Css Button Simple هو للأزرار التي بهاته التدوينة ضعها مباشرة فوق </head>
والملف الأخرر للأزرار الخاصة بقالب Bmag

المشرف
avatar

شكرا لك اخي حسام والله مبدع وتقبل اعتزاري بشأن ما بدر مني وشكرا

المشرف
avatar

يا اخي ممكن طلب
كيف اضيف هذه اضافة الى مدونتي مثل الذي في مدونتك
http://im89.gulfup.com/meZ5Ki.png
صعود ونزول
واذا لا تريد ان تعطيني اضافة شكرا

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

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

المشرف
avatar

شكرا اتمني ان تكون باسرع وقت ممكن :-bd

المشرف
avatar

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

المشرف
avatar
محمد محمود 12/21/2014
delete

شكرا لك أخي الكريم :]

http://nabd-blog.blogspot.com/

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