أسعد الله أوقاتكم بكل خير يا رب

واليوم الجمعة جامعة، والملائكة فيها سامعة >> أكثروا من الدعاء

حبيت أشرح لكم طريقة إضافة أيقونات الشبكات الاجتماعية مثل الموجودة في ترايدنت


نبدأ على بركة الله

[الخطوة الأولى]

اتبع المسار التالي >> لوحة تحكم المنتدى >> حقول الملف الشخصي >> إضافة حقل جديد في الملف >> أضف حقل من نوع "صندوق نص بحقل وحيد"



[الخطوة الثانية]
نفتح قالب postbit_legacy ونبحث فيه عن:

$ad_location[ad_showthread_firstpost_start]

<if condition="$post[field5] || $post[field6] || $post[field7] || $post[field8] || $post[field9]">
            <ul id="hal_social">
                <if condition="$post[field5]">
                    <li class="facebook"><a href="$post[field5]" title="تواصل على فيس بوك"></a></li>
                </if>
                <if condition="$post[field6]">
                    <li class="youtube"><a href="$post[field6]" title="متابعتي على يوتيوب"></a></li>
                </if>
                <if condition="$post[field7]">
                    <li class="google"><a href="$post[field7]" title="جوجل بلس"></a></li>
                </if>
                <if condition="$post[field8]">
                    <li class="twitter"><a href="$post[field8]" title="تابعني على تويتر"></a></li>
                </if>
                <if condition="$post[field9]">
                    <li class="flickr"><a href="$post[field9]" title="تابعني على فليكر"></a></li>
                </if>
            </ul>
        </if>

مع مراعاة التعديل على أرقام الحقول حسب كل حقل



الآن نتبع المسار التالي >> لوحة تحكم المنتدى >> الاستايلات والقوالب >> التحكم بالاستايلات >> خيارات جميع الاستايلات (الاستايل المراد التعديل عليه) >> تعاريف css الإضافية

وألصق فيه الكود التالي:

/* hal_social */
ul#hal_social{
    width: 186px;
    height: 32px;
    float: left;
    padding: 0 20px 0 14px;
    margin-top: 10px;
    list-style:none;
}
ul#hal_social li{
    float: right;
    margin-left: 5px;
}
ul#hal_social li a{
    display: block;
    width: 32px;
    height: 32px;
    opacity: 0.6;
    filter:alpha(opacity=60);
    background: url("images/hal_social-icons.png") 0 0 no-repeat;
    -moz-transition:all linear 0.2s;
    -webkit-transition:all linear 0.2s;
            transition:all linear 0.2s;
}
ul#hal_social li a:hover{
    opacity: 1;
    filter:alpha(opacity=100);
}
ul#hal_social li.facebook a{
    background-position: -36px 0;
}
ul#hal_social li.twitter a{
    background-position: 0 0;
}
ul#hal_social li.youtube a{
    background-position: -71px 0;
}
ul#hal_social li.flickr a{
    background-position: -106px 0;
}
ul#hal_social li.google a{
    background-position: -141px 0;
}

الآن في صورة مرفقة اسمها hal_social-icons.png قم برفعها داخل مجلد الـ images الموجود في مجلد المنتدى الرئيسية vb ، لتصبح في المسار التالي:

vb/images/hal_social-icons.png