[ jquery & Css ] : قائمة جانبية روعة + التنبيهات

[romaissa]

http://www.dzbatna.com/images/icons/idea.gif [ jquery & Css ] : ظ‚ط§ط¦ظ…ط© ط¬ط§ظ†ط¨ظٹط© ط±ظˆط¹ط© + ط§ظ„طھظ†ط¨ظٹظ‡ط§طھ (http://www.dzbatna.com/t2040630/)



♥ السلام عليكم ورحمة الله و بركاته

كما عودناكم دائما مع الجديد و الحصري , فاليوم لدينا قائمة جانبية بالجوكيري روعة مزودة بتنبيهات الرسائل


♥ أترككم مع صورة للقائمة

http://www.dzbatna.com/attachments/629562d1329314551-dev-vb2.png


♥ مثال حي للقائمة من هنا (http://zebarh.com)


♥ نأتي لطريقة التركيب install

[1] ارفع مجلد " side-bar " الموجود داخل الملف المضغوط في المرفقات الى مجلد منتداك الرئيسي
[2] قم باضافة الكود code التالي في نهاية قالب template الـ headinclude :

رمز PHP:

<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" media="screen,projection" href="side-bar/jquery-s.css">
<link href="side-bar/css00000.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="side-bar/jquery-1.js"></script>
<script type="text/javascript" src="side-bar/jquery-s.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example-1').sticklr({
showOn : 'hover',
stickTo : 'right'
});
$('#example-2').sticklr({
animate : false,
showOn : 'click',
stickTo : 'left'
});
});
</script>
</code> </code>

[3] قم باضافة الكود code التالي في نهاية قالب template الـ header :

رمز PHP:

<code style="white-space:nowrap"> <code> <div id="sticky">
<ul id="example-2" class="sticklr">


<li><a href="#" class="icon-tag" title="تابعنا على المواقع اللاجتماعية"></a>
<ul>
<li class="sticklr-title"><a href="#"> تابعنا على مواقع النشر</a></li>
<li><a href="http://www.facebook.com/ZEBARHcom" class="icon-facebook">تـابـعـنـا عالـفـيـس بــوك</a></li>
<li><a href="#" class="icon-twitter">تـابـعـنـا عـلـى الـ twitter</a></li>

</ul>
</li>




<li><a href="#" class="icon-zoom" title="Search"></a>
<ul>



<li>

<table>
<tr><td class="thead">$vbphrase&#91;search_forums&#93;</td></tr>
<tr>
<td class="vbmenu_option" title="nohilite" height="84">
<form action="search.php?do=process" method="post">

<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session&#91;sessionhash&#93;" />
<input type="hidden" name="securitytoken" value="$bbuserinfo&#91;securitytoken&#93;" />
<div>
<p align="center"><input type="text" class="bginput" name="query" size="25" tabindex="1001" /></p>
<p align="center"><input type="submit" class="button" value="$vbphrase&#91;go&#93;" tabindex="1004" /></div>
</form>
</td>
</tr>

</table>




</li>
</ul>
</li>






<li>
<a href="#" class="icon-sitemap" title="مواضيعنا المميزة"></a>
<ul>
<li class="sticklr-title">
<a href="#">مواضيع مميزة</a>
</li>

<li><a href="http://zebarh.com/showthread.php?t=520" class="icon-amazon">&#91; css &#93; : تأطير جداول المنتدى forum بدون صور</a></li>
<li><a href="http://zebarh.com/showthread.php?t=519" class="icon-amazon">&#91;شرح طريقة&#93; : عمل لوحة تسجيل بطريقة رائعة</a></li>
<li><a href="#" class="icon-amazon">قريبا ..</a></li>
<li><a href="#" class="icon-amazon">قريبا ..</a></li>
<li><a href="#" class="icon-amazon">قريبا ..</a></li>

</ul>





<li><a href="http://amatyr4n.com/codecanyon/sticklr/#" class="icon-login" title="Sign-in"></a>
<ul>
<li class="sticklr-title"><a href="http://amatyr4n.com/codecanyon/sticklr/#">تسجيل الدخول</a></li>
<li>
<form action="http://www.google.com/" method="POST">
<input type="text" name="username" value placeholder="username">
<input type="password" name="password" value placeholder="password">
<input type="submit" name="submit" value="Submit">
</form>
</li>
</ul>
</li>






<li>
<a href="#" class="icon-facebook" title="Share on facebook"></a>
<ul>
<li class="sticklr-title"><a href="#">Share</a></li>

<li><a href="http://facebook.com/" class="icon-facebook">Share This Facebook</a></li>
<li><a href="http://twaitter.com/share" class="icon-twitter">Share this on Twitter</a></li>

</ul>
</li>






<li>
<a href="#" class="icon-email" title="الرسائل الخاصة"><span class="notification-count">$notifications_total</span></a>
<ul>
<li class="sticklr-title"><a href="#">الرسائل الخاصة ($notifications_total)</a></li>

<li><a href="private.php" class="icon-user">الرسائل الخاصة ($bbuserinfo&#91;pmunread&#93;)</a></li>
<li><a href="usercp.php" class="icon-user">رسائل الزوار ($bbuserinfo&#91;vmunreadcount&#93;)</a></li>

</ul>
</li>
</ul>
</div>
</code> </code>

♥ لا تنسى تغيير الروابط و المواضيع لما يناسب موقعك ~

♥ وأخيرا و ليس آخرا اتمنى أني اكون وفقت في الشرح طريقة ~ تحياتي







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

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif side-bar.zip (http://www.traidnt.net/vb/attachments/629561d1329314551-side-bar.zip) (78.0 كيلوبايت, عدد مرات المشاهدة 410 مرة)


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