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

مشاهدة النسخة كاملة : شكل جديد لمواقع النشر للمواضيع بإستخدام JQuery & Css

العراقي راقي
02-01-2012, 08:35 AM
<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p> (<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>)




[ السلام عليكم ورحمه الله وبركاته ]



شكل جديدلاستخدام الموقع الاجتماعيه داخل المواضيع

قبل الضغط على الايقونه

<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p> (<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>)


عند الضغط على الايقونه


<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p> (<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>)

الفكره واضحة جداً

وكذاالك عند مرور الماوس عليها


الان الى الشرح

ملاحظات قبل البدء

1- من الافضل التطبيق على نسخه السرفير الشخصى اولاً قبل التطبيق على المنتدى .

2- اخد نسخه احتباطيه من القالب قبل تعديله .


نبتدى على بركه الله

هنحطها بداخل المواضع كلها والموضوع دا سهل جدا


فى الاول دا الكود بتاعنا كامل

<!-- Share By M.D -->
<br><br><br><br><br>
<html>
<head>
<script src="js/mobilyblocks.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<div class="socials">
<ul class="reset">
<li><a href="#"><img src="block/img/facebook.png" alt="أنشر على FaceBook" /></a></li>
<li><a href="<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>{URL}&amp;title={TITLE}"><img src="block/img/digg.png" alt="أنشر على Digg" /></a></li>
<li><a href="<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>{URL}&t itle={TITLE}"><img src="block/img/google.png" alt="أنشر على Google" /></a></li>
<li><a href="<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>{URL}&amp;title={TITLE}"><img src="block/img/stumbleupon.png" alt="أنشر على Stumbleupon" /></a></li>
<li><a href="<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>{URL}&amp;title={TITLE}"><img src="block/img/technorati.png" alt="أنشر على Technorati" /></a></li>
<li><a href="<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>{URL}"><img src="block/img/twitter.png" alt="أنشر على Twitter" /></a></li>
</ul>


</div>
</div>

</body>
</html>

<!-- /Share By M.D -->


هتفتح لوحه تحكم منتداك وتعمل التالى


هتخش على

[ الاستايلات والقوالب ]

هتختار منها

[ البحث فى القوالب ]

هتبحث عن

[ PostBit ]

او

[ PostBit_Legacy ]

حسب طريقه العرض للاستايل الموجود

هتبحث جوه القالب على

[ <!-- / message --> ]

هتضيف تحتها مباشره الكود اللى فوق بالكامل

وتحفظ وبعديت تخش على

[ الاستايلات والقوالب ]

تانى وبعدين تختار منها

[ التحكم بالاستيالات ]

وبعدين تختار الاستايل اللى انت هتعدل عليه

وتروح على

[ تعاريف CSS الإضافية ]


وتحط الكود التالى فى


.socials{ display:block; width:32px; height:32px; background:url(block/img/share.png) no-repeat; cursor:pointer; position:relative; } .socials{ margin:0 auto; } .socials { margin-bottom:50px; } ul.reset, ul.reset li { display:block; list-style:none; padding:0; margin:0; } ul.reset li { position:absolute; } ul.reset li a { outline:none; } #c{ margin:100px auto 0; width:560px; } a { color:#fff; } a img { border:none; }

وتحفظ وبعدين تحمل الملف دا فيه كل حاجه
الصور وملفات JQuery

[ حمل من هنا (<p><a href="register.php"><img border="0" src="images/nolink.gif"></a></p>)]

وتحطه مباشره فى مجلد Vb

ملحوظه / جوه الفولدر اللى موجود ملفين جى كويرى

واحد عند الضغط على ايقونه الشير تظهر محتوياتها وهو بإسم init
والاخر عند مرور الماوس عليها تظهر محتوياتها وهو بإسم init2

[ كل ما عليك هو تعديل الاسم الى init إذا اردت الاستبدال بينهم ]

تم بحمد الله