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

!!~JusT~!!

!!~JusT~!!

Member
a2c7vw3yar3u.png





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



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

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

uoixha9uizft.png



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


a8tb9l9u5rl9.png


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

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


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

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

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

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

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

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


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


PHP: 
<!-- 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="http://digg.com/submit?phase=2&amp;url={URL}&amp;title={TITLE}"><img src="block/img/digg.png" alt="أنشر على Digg" /></a></li>
                <li><a href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk={URL}&t itle={TITLE}"><img src="block/img/google.png" alt="أنشر على Google" /></a></li>
                <li><a href="http://www.stumbleupon.com/submit?url={URL}&amp;title={TITLE}"><img src="block/img/stumbleupon.png" alt="أنشر على Stumbleupon" /></a></li>
                <li><a href="http://www.technorati.com/submit?url={URL}&amp;title={TITLE}"><img src="block/img/technorati.png" alt="أنشر على Technorati" /></a></li>
                <li><a href="http://twitter.com/home?status={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

[ حمل من هنا ]

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

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

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

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

تم بحمد الله


​
 


سلمت يداك يا مبدع ..

لم الحظ موضوعك الا قبل دقائق , لا حرمت الاجر عزيزي ~

موضوع في القمة ويستحق كل التقدير ..

إشتقنا لمواضيعك المميزة ..

5 / 5

//
​
 


delegnt قال:
سلمت يداك يا مبدع ..

لم الحظ موضوعك الا قبل دقائق , لا حرمت الاجر عزيزي ~

موضوع في القمة ويستحق كل التقدير ..

إشتقنا لمواضيعك المميزة ..

5 / 5

//
​
أنقر للتوسيع...


ولا يهمك عزيزى عبدالرحمن

وان شاء الله راجع للمنتدى قريب

اخلص امتحانات وافك جبس دراعى وهتشوفو ان شاء الله شغل تانى
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى