.. نبذة عن شرح طريقةنا اليوم ..
الـ Shortcode أو الأكواد المختصرة هو يعتبر كود code قصير مكون من كلمة أو أثنين فقط
المدخل مسبقاً
فى (الإستبدال) داخل (
أكواد BB Codes المخصصة) الموجود بداخل لوحة تحكم منتداك ، وهذه
الأكواد بمثابة إختصار لمربع يوضع به معلومه أو تحذير أو رابط للتحميل بشكل مميز لزوار واعضاء
منتداك لتلفت نظرهم بهذا الصندوق المميز ، أتمنى أن يكون كلامي واضح ومفهوم لكم
http://i51.tinypic.com/2vcw9rd.gif
.. المعاينة (صورة) ..
http://img841.imageshack.us/img841/1127/97246700.jpg
.. المعاينة (مباشر) ..
إضغط هنا لعرض المثال المباشر
http://i51.tinypic.com/2vcw9rd.gif
.. طريقة التركيب install ..
أدخل لوحة التحكم الخاصة بمنتداك ثم تابع الصور بالترتيب
http://img59.imageshack.us/img59/1408/28083596.jpg
http://img232.imageshack.us/img232/7735/23926775.jpg
ثم إنزل أسفل الصفحه لكي تجد
(
تعاريف CSS الإضافية/Additional CSS Definitions)
تابع الصور
http://img827.imageshack.us/img827/5154/49693920.jpg
رمز PHP:
.note {
padding: 5px;
color: #666;
border: 1px solid #e6c555;
direction: rtl;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
width: 60%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
background: #ffffcc url(images/box-icons/note.png) no-repeat 99% center;
}
.note p {
padding-right: 50px;
padding-top: 8px;
text-shadow:1px 1px 0px #ffffde;
color: #cdaf4b;
}
.warning {
padding: 5px;
color: #c31b00;
border: 1px solid #ff9999;
direction: rtl;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
width: 60%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
background: #ffcccc url(images/box-icons/warning.png) no-repeat 99% center;
}
.warning p {
padding-right: 50px;
padding-top: 10px;
color: #a26060;
text-shadow:1px 1px 0px #ffdddd;
}
.info {
padding: 5px;
color: #00aeff;
border: 1px solid #68a2cf;
direction: rtl;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
width: 60%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
background: #bfe4f9 url(images/box-icons/info.png) no-repeat 99% center;
}
.info p {
padding-right: 50px;
color: #5487a4;
padding-top: 8px;
text-shadow:1px 1px 0px #d8f0fe;
}
.new {
padding: 5px;
color: #00aeff;
border: 1px solid #dadada;
direction: rtl;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
width: 60%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
background: #f7f7f7 url(images/box-icons/new.png) no-repeat 99% center;
}
.new p {
padding-right: 50px;
color: #5487a4;
padding-top: 8px;
text-shadow:1px 1px 0px #d8f0fe;
}
.download {
padding: 5px;
color: #666;
border: 1px solid #c2d7a1;
direction: rtl;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
width: 60%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
background: #e6f6cc url(images/box-icons/download.png) no-repeat 99% center;
}
.download p {
padding-right: 50px;
color: #4a60b7;
text-shadow:1px 1px 0px white;
padding-top: 5px;
}
.download p a {
color: #70983f;
text-shadow:1px 1px 0px #efffdc;
text-decoration: none;
}
.download p a:hover {
color: #486623;
text-shadow:1px 1px 0px #efffdc;
}
بعد وضع الكود code ، نذهب أسفل الصفحة ونضغط زر (
حفظ)
بعد ضغط حفظ ، تابع الصور
http://img849.imageshack.us/img849/2337/87972637.jpg
الأن فتح معك صفحه بداخلها خانات كثيره
سنعبئ الأن بعض الخانات ونضغط حفظ ، وسنكرر العمليه
في كل صندوق سنركبه ، وهم 5 صناديق كما قلنا
الان تابع معي
.. صندوق (Note) ..
في خانه (العنوان) سنكتب
رمز PHP:
Note
في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
Note
في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<div class="note"><p>{param}p>div>
في خانه (المثال) سنضع هذا الكود code
رمز PHP:
[note][/note]
في خانه (الوصف) سنكتب
رمز PHP:
لإضافة ملحوظة معينة تريد إظهارها لزوار وأعضاء موقعك داخل الموضوع
بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (
حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي
.. صندوق (Info) ..
في خانه (العنوان) سنكتب
رمز PHP:
Info
في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
Info
في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<div class="info"><p>{param}p>div>
في خانه (المثال) سنضع هذا الكود code
رمز PHP:
[info][/info]
في خانه (الوصف) سنكتب
رمز PHP:
لإضافة معلومة معينة تريد تمييزها لزوار وأعضاء موقعك داخل الموضوع
بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (
حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي مره اخرى
.. صندوق (Warning) ..
في خانه (العنوان) سنكتب
رمز PHP:
Warning
في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
Warning
في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<div class="warning"><p>{param}p>div>
في خانه (المثال) سنضع هذا الكود code
رمز PHP:
[warning][/warning]
في خانه (الوصف) سنكتب
رمز PHP:
لإضافة تحذير او تنبيه لزوار وأعضاء موقعك داخل الموضوع
بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (
حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي مره اخرى
.. صندوق (Download) ..
في خانه (العنوان) سنكتب
رمز PHP:
Download
في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
Download
في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<div class="download"><p>{param}p>div>
في خانه (المثال) سنضع هذا الكود code
رمز PHP:
[download][/download]
في خانه (الوصف) سنكتب
رمز PHP:
لإضافة روايط التحميل داخل صندوق مميز لزوار وأعضاء موقعك داخل الموضوع
بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (
حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي مره اخرى
.. صندوق (New) ..
في خانه (العنوان) سنكتب
رمز PHP:
New
في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
New
في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<div class="new"><p>{param}p>div>
في خانه (المثال) سنضع هذا الكود code
رمز PHP:
[new][/new]
في خانه (الوصف) سنكتب
رمز PHP:
لإضافة شئ جديد تريد تمييزه لزوار وأعضاء موقعك داخل الموضوع
بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (
حفظ)
وهكذا إنتهينا من اضافة أكواد الخمس صناديق
بقي لدينا شيء واحد فقط ، تابع معي
.. رفع مجلد الصور ..
أولا حمل المجلد المتواجد بالمرفقات في هذا الموضوع
بعد تحميل المجلد لا تفك الضغط من عليه ، اتركه كما هو
ثم توجه إلى السي بانل CPANEL الخاص بموقعك أو برنامج الإف تي بي
ثم إرفع المجلد داخل مجلد Images الموجود داخل مجلد vb الخاص بك
وليس Images المتواجد داخل إستايل style معين لك لا ، بل داخل مجلد الـvb
بحيث يصبح المسار هكذا (vb/images/box-icons)
بعد رفع المجلد المرفع داخل مجلد images قم بفك الضغط عنه
ستجد مجلد غير مضغوط بإسم (box-icons)
هكذا تم رفع مجلد الصور بنجاح
http://i51.tinypic.com/2vcw9rd.gif
.. طريقه إستعمال الأكواد داخل الموضوع وإختصاراتها ..
أولا : إختصارات الأكواد
صندوق الملاحظات
رمز PHP:
[note]أكتب هنا ما تريد[/note]
صندوق المعلومات
رمز PHP:
[info]أكتب هنا ما تريد[/info]
صندوق التحذيرات
رمز PHP:
[warning]أكتب هنا ما تريد[/warning]
صندوق التحميل
رمز PHP:
[download]أكتب هنا ما تريد[/download]
صندوق شيء جديد
رمز PHP:
[new]أكتب هنا ما تريد[/new]
ثانيا : طريقة الإستعمال
ستفتح موضوع جديد وتأخذ أي إختصار من الذي تم وضهم في إختصارات الأكواد
ثم تضعه داخل المحرر وتغير كلمه (أكتب ما تريد) إلى أي شيء تريده
وبعد ذلك ستضغط اعتمد الموضوع الجديد ، ستجد ان الصندوق
تم إدراجه في الموضوع كما تريد
http://i51.tinypic.com/2vcw9rd.gif
.. بعض المعلومات ..
الشرح طريقة متوافق مع المتصفحات الأتيه
Firefox
http://img807.imageshack.us/img807/2515/35348701.jpg
Google Chrome
http://img12.imageshack.us/img12/9793/29817310.jpg
Opera
http://img651.imageshack.us/img651/121/88313144.jpg
وكالعاده غير متوافق مع المتصفح العقيم اللعين
فقط المنحنيات لا تظهر وهناك ضيق شديد بالصندوق
Internet Explorer
http://img833.imageshack.us/img833/3562/25698187.jpg
http://i51.tinypic.com/2vcw9rd.gif
وإلى هنا أحبتي ننتهي بشرح طريقة الموضوع لهذا اليوم المبارك
الْسَّلَام عَلَيْكُم وَرَحِمَه الْلَّه وَبَرَكَاتَة
فِي رِعَايَة الْلَّه
http://i51.tinypic.com/2vcw9rd.gif
Traidnt Forum © 2014
All Rights Reserved for this topic
Special Thanks Go to Salam Elimam & Hussein Saleh
http://i51.tinypic.com/2vcw9rd.gif
هذا الموضوع مشترك في مسابقة :
أجمل طرح بشهر رمضان المبارك
http://i51.tinypic.com/2vcw9rd.gif
http://www.dzbatna.com/images/smilies/bye1.gif
