المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الأكواد المختصرة - ShortCodes



admin
10-30-2013, بتوقيت غرينيتش 09:46 PM
http://www.dzbatna.com/images/icons/icon30.gif ط§ظ„ط£ظƒظˆط§ط¯ ط§ظ„ظ…ط®طھطµط±ط© - ShortCodes (http://www.dzbatna.com/t1916084/)



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

http://i51.tinypic.com/2vcw9rd.gif

http://img43.imageshack.us/img43/849/shortcodespreview.jpg

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

http://i51.tinypic.com/2vcw9rd.gif

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

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

http://i51.tinypic.com/2vcw9rd.gif

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

http://img841.imageshack.us/img841/1127/97246700.jpg

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

إضغط هنا (http://wikoles.com/vb/showthread.php?p=511) لعرض المثال المباشر

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:

<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 ، نذهب أسفل الصفحة ونضغط زر (حفظ)
بعد ضغط حفظ ، تابع الصور

http://img849.imageshack.us/img849/2337/87972637.jpg

الأن فتح معك صفحه بداخلها خانات كثيره
سنعبئ الأن بعض الخانات ونضغط حفظ ، وسنكرر العمليه
في كل صندوق سنركبه ، وهم 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)
هكذا تم رفع مجلد الصور بنجاح

http://i51.tinypic.com/2vcw9rd.gif

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

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

صندوق الملاحظات
رمز 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>

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

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

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 (http://www.dzbatna.net/vb) © 2014
All Rights Reserved for this topic
Special Thanks Go to Salam Elimam & Hussein Saleh
http://i51.tinypic.com/2vcw9rd.gif

هذا الموضوع مشترك في مسابقة : أجمل طرح بشهر رمضان المبارك (http://www.dzbatna.com/t1910998)

http://i51.tinypic.com/2vcw9rd.gif

http://www.dzbatna.com/images/smilies/bye1.gif










ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif box-icons.zip (http://www.traidnt.net/vb/attachments/592025d1312301796-box-icons.zip) (16.5 كيلوبايت, عدد مرات المشاهدة 214 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى