شرح اضافة روابط التواصل الاجتماعي توتير ويوتيوب وجوجل وفلكر مثل ترايدنت شرح بالتفصيل الممل
نبدأ على بركة الله
[الخطوة الأولى]
اتبع المسار التالي >> لوحة تحكم المنتدى >> حقول الملف الشخصي >> إضافة حقل جديد في الملف >> أضف حقل من نوع "صندوق نص بحقل وحيد"
قم بتعبة الحقول كما هو بالصورة التالية:
الآن نقوم بتكرار الخطوة نفسها لباقي الروابط الاجتماعية وهي (يوتيوب، تويتر، جوجل بلس، فليكر)
ليصبح الناتج لدينا كالتالي:
[الخطوة الثانية]
نفتح قالب 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
وبهيك مبروك عليك الأيقونات الاجتماعية
للي ما ظبط معاه الكود أنا متابع معاكم في الموضوع أول بأول بإذن الله تعالى
تحياتي لكم جميعا
منقـــــــول
مواقع النشر (المفضلة)