|
مجتمع uCoz العربي للدعم والمساعدة اصحاب المواقع والويب ماسترز اكواد وحلول HTML حصري .. من يمن الواقع .. اضافة قائمه منزلقه جانبيه لعرض المح (اضافة قائمة موقعك الرئيسيه ، وصف للموقع ، وكل ماتريد اضافته) |
حصري .. من يمن الواقع .. اضافة قائمه منزلقه جانبيه لعرض المح |
حصري .. من يمن الواقع .. اضافة قائمه منزلقه جانبيه لعرض المحتوى .. قائمة موقعك الرئيسيه ، وصف للموقع ، وكل ماتريد اضافته من فيديو .. الخ
الاضافه تعمل بأكواد الجافاسكريبت . في موضوعنا هذا سوف نشرح طريقة التركيب الخاصه بمواقع ucoz ، واذا كنت تملك موقع آخر يمكنك اضافة ذلك بحسب نظام الموقع وغالباً لافرق هناك في موضع الاكواد حيث نضع اكواد الجافا وملفات الستايل المرفوعه فوق علامة الاغلاق للقسم العلوي /head ، واكواد html تكون في القسم body . لمشاهدة الاضافه مباشره Demo http://test-web.ucoz.com/pull-Out-Content.html مشاهدة الاضافه بالموقع http://test-web.ucoz.com/index/home/0-5 شرح تركيب الاضافه لمواقع ucoz كاتالي : سجل الدخول الى الموقع واذهب الى لوحة التحكم وقم بتحرير صفحات الموقع ، والصق الاكواد التاليه فوق العلامه /head <link rel="stylesheet" href="http://test-web.ucoz.com/pulloutpanel/pulloutpanel.css" type="text/css"/> <link href="http://test-web.ucoz.com/pulloutpanel/scrollbars.css" rel="stylesheet" type="text/css"/> <script src='http://test-web.ucoz.com/pulloutpanel/jquery.js'></script> <script src='http://test-web.ucoz.com/pulloutpanel/pulloutpanel.js'></script> <script> $(document).ready(function($){ $('#pocp1').pullOutContentPanel( ); }); </script> ========================================= ثم انزل الى الاسفل الى القسم body ، والصق الاكواد التاليه فوق علامة الاغلاق /body ، او اسفل الكود الخاص بالهيدر <div id="pocp1" class="pocp_left"> <div class="pocp"> <div class="pocp_content"> <h2>Sliding Menu</h2> <p>تستخدم هذه القائمة تأثير مختلف عند تفعيلها. يمكنك اختيار وضع وسلوك هذه اللوحة.</p> <ul class="pocp_icons"> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 1</a></li> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 2</a></li> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 3</a></li> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 4</a></li> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 5</a></li> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 6</a></li> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 7</a></li> <li><a href="http://yemen-fact.ucoz.com//"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"/></i>رابط الصفحه 8</a></li> </ul> <p>في هذه اللوحة يمكنك إضافة عناصر متداخلة تبديل لإظهار أو إخفاء المعلومات الثانوية.</p> <ul class="pocp_toggle"> <li> <span class="pocp_toggle_title"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"style="margin-left:5px;"/></i>عنوان الموضوع 1</span> <div class="pocp_panel"> <p>ضع النص هنا</p> </div> </li> <li> <span class="pocp_toggle_title"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"style="margin-left:5px;"/></i>عنوان الموضوع 2</span> <div class="pocp_panel"> <p>ضع النص هنا</p> </div> </li> <li> <span class="pocp_toggle_title"><i> <img src="http://test-web.ucoz.com/pulloutpanel/icon.jpg"style="margin-left:5px;"/></i>عنوان الموضوع 3</span> <div class="pocp_panel"> <p>ضع النص هنا</p> </div> </li> </ul> <h2>Styled Elements</h2> <p>يشمل هذا البند العديد من العناصر على غرار مثل رؤوس الصفحات، الفقرات، والقوائم، الخ</p> <p class="dark">هذا هو النص الوارد في الحاوية الداكنه مع الحدود</p> <p class="brown">هذا هو النص الوارد في الحاوية البنيه مع الحدود</p> <p class="yellow">هذا هو النص الوارد في الحاوية الصفراء مع الحدود</p> <p class="red">هذا هو النص الوارد في الحاوية الحمراء مع الحدود</p> <p class="blue">هذا هو النص الوارد في الحاوية الزرقاء مع الحدود</p> <p class="green">هذا هو النص الوارد في الحاوية الخضراء مع الحدود</p> <h2>Video</h2> <p>شلالات جبل بعدان في إب باليمن</p> <div class="video_container"> <iframe src="http://youtube.com/embed/360cm_VzG_I" frameborder="0" allowfullscreen></iframe> </div> <p>اضافات اخرى</p> <p>اضافات اخرى</p> </div> </div> </div> قم بتعديل المحتوى الموجود بمحتوى موقعك واحفظ العمل بالتوفيق |
اهلاً أبتو :
يمكنك تغيير اتجاه القائمه من اليسار الى اليمين ، اما للاعلى او الاسفل فهذا يحتاج الى تغيير التصميم كله ، فقط يمكنك تغيير القائمه الى اليمين باتباع الشرح التالي : اولاً : قم بتحرير رابط ملف الاستايل التالي : http://test-web.ucoz.com/pulloutpanel/pulloutpanel.css ثم انسخ جميع الاكواد والصقها في المفكره "النوت باد" للقيام بتغيير الاكواد من اليسار الى اليمين . ثانياً : ابحث عن الاكواد التاليه : .pocp_left { left:-240px; } .pocp_left.pocp_show { left:0; } .pocp_button i { font-size: 18px; line-height: 32px; padding-top: 1px; float: left; } .pocp_button_left { left: 20px; } .pocp_button_left.btn_active { left: 260px; background: url(http://test-web.ucoz.com/pulloutpanel/button-close.jpg) no-repeat; height:31px; width:37px; } ===================== ثالثاً : استبدلها جميعاً بالاكواد التاليه : .pocp_left { right:-240px; } .pocp_left.pocp_show { right:0; } .pocp_button i { font-size: 18px; line-height: 32px; padding-top: 1px; float: left; } .pocp_button_left { left: 20px; } .pocp_button_left.btn_active { right: 260px; background: url(http://test-web.ucoz.com/pulloutpanel/button-close.jpg) no-repeat; height:31px; width:37px; } ثم احفظ الملف في الكمبيوتر وارفعه الى موقعك ، هذا اذا لم تكن قد رفعته سابقاً ، واذا انت قد رفعته لموقعك يمكنك التغيير من الموقع مباشره دون استخدام المفكره ارجوا الشرح واضح تحياتي مشاركة حٌررت بواسطة almegtrb - السبت, 26.10.2013, 02:27
|
| |||
| |||