ط§ظ„ط£ظƒظˆط§ط¯ ط§ظ„ظ…ط®طھطµط±ط© - ShortCodes


بِسْم الْلَّه الْرَّحْمَن الْرَّحِيْم
الْسَّلَام عَلَيْكُم وَرَحِمَه الْلَّه وَبَرَكَاتَة





5 أكواد مختصرة بإنحنائات بسيطه بتقنيه Css3 تستحق الإستخدام



.. نبذة عن شرح طريقةنا اليوم ..

الـ Shortcode أو الأكواد المختصرة هو يعتبر كود code قصير مكون من كلمة أو أثنين فقط
يتم كتابته بين قوسين ، هكذا [ Code ] ، وهذا الكود code يستدعى وسم <div> المدخل مسبقاً
فى (الإستبدال) داخل (أكواد BB Codes المخصصة) الموجود بداخل لوحة تحكم منتداك ، وهذه
الأكواد بمثابة إختصار لمربع يوضع به معلومه أو تحذير أو رابط للتحميل بشكل مميز لزوار واعضاء
منتداك لتلفت نظرهم بهذا الصندوق المميز ، أتمنى أن يكون كلامي واضح ومفهوم لكم



.. المعاينة (صورة) ..



.. المعاينة (مباشر) ..

إضغط هنا لعرض المثال المباشر



.. طريقة التركيب install ..

أدخل لوحة التحكم الخاصة بمنتداك ثم تابع الصور بالترتيب





ثم إنزل أسفل الصفحه لكي تجد
(تعاريف CSS الإضافية/Additional CSS Definitions)
تابع الصور



 رمز PHP:
<code style="white-space:nowrap"> <code> .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> </code>

بعد وضع الكود code ، نذهب أسفل الصفحة ونضغط زر (حفظ)
بعد ضغط حفظ ، تابع الصور



الأن فتح معك صفحه بداخلها خانات كثيره
سنعبئ الأن بعض الخانات ونضغط حفظ ، وسنكرر العمليه
في كل صندوق سنركبه ، وهم 5 صناديق كما قلنا
الان تابع معي

.. صندوق (Note) ..

في خانه (العنوان) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Note
</code> </code>

في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Note
</code> </code>

في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="note"><p>{param}</p></div>
</code> </code>

في خانه (المثال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;note&#93;&#91;/note&#93;
</code> </code>

في خانه (الوصف) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> لإضافة ملحوظة معينة تريد إظهارها لزوار وأعضاء موقعك داخل الموضوع
</code> </code>

بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي

.. صندوق (Info) ..

في خانه (العنوان) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Info
</code> </code>

في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Info
</code> </code>

في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="info"><p>{param}</p></div>
</code> </code>

في خانه (المثال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;info&#93;&#91;/info&#93;
</code> </code>

في خانه (الوصف) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> لإضافة معلومة معينة تريد تمييزها لزوار وأعضاء موقعك داخل الموضوع
</code> </code>

بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي مره اخرى

.. صندوق (Warning) ..

في خانه (العنوان) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Warning
</code> </code>

في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Warning
</code> </code>

في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="warning"><p>{param}</p></div>
</code> </code>

في خانه (المثال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;warning&#93;&#91;/warning&#93;
</code> </code>

في خانه (الوصف) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> لإضافة تحذير او تنبيه لزوار وأعضاء موقعك داخل الموضوع
</code> </code>

بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي مره اخرى

.. صندوق (Download) ..

في خانه (العنوان) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Download
</code> </code>

في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> Download
</code> </code>

في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="download"><p>{param}</p></div>
</code> </code>

في خانه (المثال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;download&#93;&#91;/download&#93;
</code> </code>

في خانه (الوصف) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> لإضافة روايط التحميل داخل صندوق مميز لزوار وأعضاء موقعك داخل الموضوع
</code> </code>

بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (حفظ)
بعد الضغط على زر حفظ سيذهبنا إلى صفحه معينه
يظهر بها ان الكود code تم إضافته ، ستجد تحت زر بإسم
(إضافة كود code BB Code جديد)
سنضغط عليه وتابع معي مره اخرى

.. صندوق (New) ..

في خانه (العنوان) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> New
</code> </code>

في خانه (BB Code اسم البطاقة) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> New
</code> </code>

في خانه (الاستبدال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="new"><p>{param}</p></div>
</code> </code>

في خانه (المثال) سنضع هذا الكود code
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;new&#93;&#91;/new&#93;
</code> </code>

في خانه (الوصف) سنكتب
رمز PHP:
<code style="white-space:nowrap"> <code> لإضافة شئ جديد تريد تمييزه لزوار وأعضاء موقعك داخل الموضوع
</code> </code>

بعد ذلك سنترك باقي الخيارات كما هي
ونضغط (حفظ)
وهكذا إنتهينا من اضافة أكواد الخمس صناديق
بقي لدينا شيء واحد فقط ، تابع معي

.. رفع مجلد الصور ..
أولا حمل المجلد المتواجد بالمرفقات في هذا الموضوع
بعد تحميل المجلد لا تفك الضغط من عليه ، اتركه كما هو
ثم توجه إلى السي بانل CPANEL الخاص بموقعك أو برنامج الإف تي بي
ثم إرفع المجلد داخل مجلد Images الموجود داخل مجلد vb الخاص بك
وليس Images المتواجد داخل إستايل style معين لك لا ، بل داخل مجلد الـvb
بحيث يصبح المسار هكذا (vb/images/box-icons)
بعد رفع المجلد المرفع داخل مجلد images قم بفك الضغط عنه
ستجد مجلد غير مضغوط بإسم (box-icons)
هكذا تم رفع مجلد الصور بنجاح



.. طريقه إستعمال الأكواد داخل الموضوع وإختصاراتها ..

أولا : إختصارات الأكواد

صندوق الملاحظات
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;note&#93;أكتب هنا ما تريد&#91;/note&#93;
</code> </code>

صندوق المعلومات
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;info&#93;أكتب هنا ما تريد&#91;/info&#93;
</code> </code>

صندوق التحذيرات
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;warning&#93;أكتب هنا ما تريد&#91;/warning&#93;
</code> </code>

صندوق التحميل
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;download&#93;أكتب هنا ما تريد&#91;/download&#93;
</code> </code>

صندوق شيء جديد
رمز PHP:
<code style="white-space:nowrap"> <code> &#91;new&#93;أكتب هنا ما تريد&#91;/new&#93;
</code> </code>

ثانيا : طريقة الإستعمال

ستفتح موضوع جديد وتأخذ أي إختصار من الذي تم وضهم في إختصارات الأكواد
ثم تضعه داخل المحرر وتغير كلمه (أكتب ما تريد) إلى أي شيء تريده
وبعد ذلك ستضغط اعتمد الموضوع الجديد ، ستجد ان الصندوق
تم إدراجه في الموضوع كما تريد



.. بعض المعلومات ..

الشرح طريقة متوافق مع المتصفحات الأتيه

Firefox



Google Chrome



Opera



وكالعاده غير متوافق مع المتصفح العقيم اللعين
فقط المنحنيات لا تظهر وهناك ضيق شديد بالصندوق
Internet Explorer





وإلى هنا أحبتي ننتهي بشرح طريقة الموضوع لهذا اليوم المبارك
الْسَّلَام عَلَيْكُم وَرَحِمَه الْلَّه وَبَرَكَاتَة
فِي رِعَايَة الْلَّه


Traidnt Forum © 2014
All Rights Reserved for this topic
Special Thanks Go to Salam Elimam & Hussein Saleh


هذا الموضوع مشترك في مسابقة : أجمل طرح بشهر رمضان المبارك












الملفات المرفقة [TR]
box-icons.zip (16.5 كيلوبايت, عدد مرات المشاهدة 214 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©