حصري .. من يمن الواقع .. اضافة قائمه منزلقه جانبيه لعرض المح

مشاركة # 1 | 23:41 22.10.2013

حصري .. من يمن الواقع .. اضافة قائمه منزلقه جانبيه لعرض المحتوى .. قائمة موقعك الرئيسيه ، وصف للموقع ، وكل ماتريد اضافته من فيديو .. الخ
الاضافه تعمل بأكواد الجافاسكريبت .
في موضوعنا هذا سوف نشرح طريقة التركيب الخاصه بمواقع 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>

قم بتعديل المحتوى الموجود بمحتوى موقعك واحفظ العمل

بالتوفيق

مشاركة # 3 | 02:25 26.10.2013

اهلاً أبتو :
يمكنك تغيير اتجاه القائمه من اليسار الى اليمين ، اما للاعلى او الاسفل فهذا يحتاج الى تغيير التصميم كله ، فقط يمكنك تغيير القائمه الى اليمين باتباع الشرح التالي :
اولاً :
قم بتحرير رابط ملف الاستايل التالي :
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

آخر تحديثات uCoz

آخر المواضيع