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