لجنة التطوير
عضوية تقوم بجلب المواضيع من مواقع اخرى
كيف حال الجميع ؟! ^^
هذا أول عمل لي وهو بنرات قياسية 100% مصممة بإحتراف لاصحاب المواقع الذين يريدون أن يستفيدون من مساحة الصفحة .. وعرض إعلانات لمواضيع منتداه او غيره
مميزات القالب :
- قياسي ويتوافق مع المتصفحات .
- مصمم بعناية .
- منسق بلغة css الاحترافية .
- خفيف وبسيط .
- يحتوي على كلمة يمين تبين إسم القسم الذي فيه الموضوع .
- أحجام رائعة ومتناسقة .
- الطول 700 بيكسل .
- العرض 900 بيكسل .
نخليكم مع القالب
رمز Code:
body {
background-color: #FBFBFB;
padding: 0px;
margin: 0;
}
/* KAi For Ever */
.ShowBar {
height: 700px;
width: 900px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 5px 7px 0px #7F7F7F;
margin-top: 10px;
background-color: #2A3F55;
margin-bottom: 10px;
}
.ShowBar a #Sh1 #Text1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #FF5F00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar #Sh1 {
width: 450px;
background-color: #808080;
height: 300px;
float: left;
background-image: url(abodefile/sh1.png);
background-position: center bottom;
}
.ShowBar #Sh2 {
width: 450px;
background-color: #2A1FFF;
height: 150px;
float: left;
background-image: url(abodefile/sh2.png);
background-position: left bottom;
}
.ShowBar #Sh3 {
width: 450px;
background-color: #FFDF00;
height: 150px;
float: left;
background-image: url(abodefile/sh3.png);
background-position: right bottom;
}
.ShowBar #Sh4 {
width: 450px;
background-color: #FFDFAA;
height: 200px;
float: left;
background-image: url(abodefile/sh4.png);
}
.ShowBar #Sh5 {
width: 450px;
background-color: #FFDF55;
height: 200px;
float: left;
background-image: url(abodefile/sh5.png);
}
.ShowBar #Sh6 {
width: 300px;
background-color: #AA5FFF;
height: 200px;
float: left;
background-image: url(abodefile/sh6.png);
}
.ShowBar #Sh7 {
width: 300px;
background-color: #55DFAA;
height: 200px;
float: left;
background-image: url(abodefile/sh7.png);
}
.ShowBar #Sh8 {
width: 300px;
background-color: #FF3F00;
height: 200px;
float: left;
background-image: url(abodefile/sh8.png);
}
.ShowBar a #Sh2 #Text2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #C43100;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh3 #Text3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #938100;
background-color: #FFDF00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh4 #Text4 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #FF5F00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh5 #Text5 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FF1F00;
background-color: #FFFBF0;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh6 #Text6 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #009F48;
background-color: #FFFFFF;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh7 #Text7 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #FF5F00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh8 #Text8 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #E2E2E2;
background-color: #2A3F55;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
فوتوشوب
برامج
م.عام
اعلان
خواطر
الإسلام
صور
ألعاب
- طريقة تغيير صور البنرات :
البنرات عددها 8
في كل كود يوجد رقم البنر وهي بالترتيب من اليسار
ابحث عن ShowBar #Sh1 وهي تحتوي على الرقم واحد = يعني اول بنر
و ShowBar #Sh2 الرقم اثنين وهي = البنر الثاني
تبحث عن الكود
رمز Code:
background-image: url(abodefile/sh1.png);
وتغير مسار الصورة إلى رابط الصورة هكذا
رمز Code:
background-image: url(http://im52.gulfup.com/B8VgkU.jpg);
ثم نكرر الطريقة مع كل الارقام من 1 إلى 8
طبعا يجب ان تكون الصورة نفس حجم الكود يعني اول بنر حجمة العرض 450 والطول 300
وأيضا عند ارادة تغيير مسمى المربع فوتوشوب او برامج او غيرها
في أكواد Div مثل
رمز Code:
فوتوشوب
تغير الكلمة إلى أي مسمى قسم ^^
هذا الكود يوضع كامل لاصحاب المواقع في أي مكان
...................................
أما لاصحاب المنتديات
ناخذ الكود
رمز Code:
فوتوشوب
برامج
م.عام
اعلان
خواطر
الإسلام
صور
ألعاب
ونضعه في header في القوالب الشائعة
العادة تضعه بعد كود
او ضعه فوق الفوتر او اي مكان تريد
وضع الكود التالي
رمز Code:
}
.ShowBar {
height: 700px;
width: 900px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 5px 7px 0px #7F7F7F;
margin-top: 10px;
background-color: #2A3F55;
margin-bottom: 10px;
}
.ShowBar a #Sh1 #Text1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #FF5F00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar #Sh1 {
width: 450px;
background-color: #808080;
height: 300px;
float: left;
background-image: url(abodefile/sh1.png);
background-position: center bottom;
}
.ShowBar #Sh2 {
width: 450px;
background-color: #2A1FFF;
height: 150px;
float: left;
background-image: url(abodefile/sh2.png);
background-position: left bottom;
}
.ShowBar #Sh3 {
width: 450px;
background-color: #FFDF00;
height: 150px;
float: left;
background-image: url(abodefile/sh3.png);
background-position: right bottom;
}
.ShowBar #Sh4 {
width: 450px;
background-color: #FFDFAA;
height: 200px;
float: left;
background-image: url(abodefile/sh4.png);
}
.ShowBar #Sh5 {
width: 450px;
background-color: #FFDF55;
height: 200px;
float: left;
background-image: url(abodefile/sh5.png);
}
.ShowBar #Sh6 {
width: 300px;
background-color: #AA5FFF;
height: 200px;
float: left;
background-image: url(abodefile/sh6.png);
}
.ShowBar #Sh7 {
width: 300px;
background-color: #55DFAA;
height: 200px;
float: left;
background-image: url(abodefile/sh7.png);
}
.ShowBar #Sh8 {
width: 300px;
background-color: #FF3F00;
height: 200px;
float: left;
background-image: url(abodefile/sh8.png);
}
.ShowBar a #Sh2 #Text2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #C43100;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh3 #Text3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #938100;
background-color: #FFDF00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh4 #Text4 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #FF5F00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh5 #Text5 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FF1F00;
background-color: #FFFBF0;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh6 #Text6 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #009F48;
background-color: #FFFFFF;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh7 #Text7 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #FFF;
background-color: #FF5F00;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
.ShowBar a #Sh8 #Text8 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #E2E2E2;
background-color: #2A3F55;
height: 20px;
width: 60px;
text-align: center;
float: right;
}
توجة إلى css رئيسي ثم
في خواص css الاضافية بالمربع الثاني ^^ ضعها اخر شي
أتمنى يكون القالب عجبكم وهذا اول عمل لي ^^ والقادم افضل بإذن الله
لا احلل التعديل على القالب أو نسبه لنفسك !
