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

[linnou]

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



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

~ عدنا لكم من جديد و دائما بالجديد ~ أتمنى أني ما أكون ثقلت عليكم

~ مشروع اليوم عبارة عن قائمة للمواقع الاجتماعية تكون ثابثة مع مميزات جوكيري رائعة

♥ كالعادة أترككم مع المثال المصور :

http://www.dzbatna.com/attachments/629679d1329345791-dev-vBulletin 3.png

♥ يليه المثال الحي من هنا (http://zebarh.com) |~ على منتديات زيباره التطويرية


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

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

رمز PHP:

<code style="white-space:nowrap"> <code> <!-- main stylesheets -->




<!-- Screen CSS -->
<link rel="stylesheet" href="social/reset000.css" type="text/css" media="screen">

<link rel="stylesheet" href="social/style000.css" type="text/css" media="screen">

<!-- Framework CSS -->
<link rel="stylesheet" href="social/dpSocial.css">

<!-- import jQuery -->
<script type="text/javascript" src="social/jquery-1.js"></script>
<script type="text/javascript" src="social/jquery00.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$.dpSocialBar({
items: {
twitter: { url: 'http://twitter.com/', text: 'تابعنا على <strong>twitter</strong>' },
facebook: { url: 'http://facebook.com/', text: 'تابعنا عالـفيس بوك' },
flickr: { url: 'http://www.flickr.com', text: 'صفحتنا على الفلكر' },
skype: { url: 'http://www.skype.com', text: 'أضفنا على السكايبي' },
rss: { url: 'http://www.rss.com', text: 'RSS Feed' },
google: { url: 'http://www.google.com', text: 'صفحتنا على قوقل google +' },
contact: { url: 'mailto:mailhttp://www.dzbatna.com/images/mail.gifmail.com', text: 'راسل الادارة' },
youtube: { url: 'http://www.youtube.com', text: 'قناتنا على اليوتيوب' },
digg: { url: 'http://www.digg.com', text: 'Profile on digg' },
delicious: { url: 'http://www.delicious.com', text: 'Profile on delicious' },
tumblr: { url: 'http://www.tumblr.com', text: 'Profile on tumblr' },
picasa: { url: 'http://www.picasa.com', text: 'Profile on picasa' },
vimeo: { url: 'http://www.vimeo.com', text: 'Profile on vimeo' },
reddit: { url: 'http://www.reddit.com', text: 'Profile on reddit' },
technorati: { url: 'http://www.technorati.com', text: 'Profile on technorati' },
},
show: 5,
position: "bottom",
skin: "clear"
});

});
</script>
</code> </code>

[3] - نأتي الان لطريقة التحكم في استايل style و مكان القائمة ~ :

- كما نلاحظ في آخر الكود code يوجد :

رمز PHP:

<code style="white-space:nowrap"> <code> position: "bottom",
</code> </code>

يمكنك تغيير كلمة &quot; buttom &quot; والتي تعني الأسفل الى ~

Right : اليمين
left : اليسار
top : الأعلى

- و أيضا نلاحظ وجود :

رمز PHP:

<code style="white-space:nowrap"> <code> skin: "clear"
</code> </code>

يمكنك تغيير كلمة &quot; clear &quot; و التي تعني الثيم الابيض الفاتح الى ~

dark : الثيم الاسود


اتنهى الشرح طريقة


♥ و لاتنسى تغيير الروابط الـى روابط متلائمة مع موقعك ~ تقبلو تحياتي







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

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif social.zip (http://www.traidnt.net/vb/attachments/629680d1329345787-social.zip) (90.8 كيلوبايت, عدد مرات المشاهدة 478 مرة)


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