إخفاء جزء من الموضوع وإظهاره بالازرار الاجتماعية

كما هو موضح في عنوان التدوينة أو الصورة فأداتنا لها ميزة وإفادة لأصحاب المواقع في شتى المجلات تمكنك من إخفاء محتوى موضوع ويمكن لزائر إما أن يشاركه بأحد أشهر المواقع الإجتماعية "فيسبوك"، "تويتر"، "جوجل بلس"أو ينتظر مدة زمنية يمكنك تحديدها وتخصيصها بكل حرية، الميزة أيضا تتجلى في فرض على الزائر بمشاركت التدوينة والإستفادة كما نعلم معظم العرب لا يهتمون بمشاركة الموضوع حتى وإن أعجبهم وكانت فيه فائدة فلا يدعمونك ولول بضغطة زر ناهيك عن تعليق مشجع .. ملاحظة مني لمن سيستخدم هذه الإضافة فل يستعملها بموضوع مهم وبه فائدة ولا تستعملها بكل المواضيع. الأن ندخل لمثال حي وبعدها الشرح

تدوينة مشابهة

شرح  طريقة التركيب

1 . توجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  </head>

3. ضع الكود التالي قبله [ فوقه ]

<script src='https://ar1web-com.googlecode.com/svn/Hm/sclocker.js' type='text/javascript'/>
<link href='https://ar1web-com.googlecode.com/svn/Hm/sclocker.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function ($) {
$('#ar1web-hide').sociallocker({
theme: "flat",
locker: {close: false,timer: 420 },
buttons: {order: ["facebook-like", "twitter-tweet", "google-plus"]},
text: {
header: "المحتوى مغلق",
message: "عزيزي المشاهد لكي ترى المحتوى، إدعمنا بأحد الأزرار التالية"
},
facebook: { like: {title: "اعجبني"}},
twitter: {tweet: {title: " تغريدة"}},
google: {plus: {title: "+ جوجل"}}
});
});
//]]>
</script> 

* الرقم المحدد باللون الأخضر خاصه بالتوقيت

* الكلمات المحدده باللون الأصفر غيرها بما يناسبك 

* الكلمة المحددة بالأزرق false هي خاصة بإظهار زر إغلاق الإضافة تظهر المحتوى مباشرة لتفعيلها غير الكلمة لـ true

طريقة تفعيل الكود

1. مباشرة توجه إلى المشاركات ثم حرر موضوع

2. ضع الكود التالي فوق أو بداية المحتوى الذي تريد إخفائه

<hidearticle id="ar1web-hide">

3. ضع الكود التالي في نهاية أو قبل نهاية المحتوى, وهو خاص لإغلاق كود بداية إخفاء المحتوى

</hidearticle>

أكواد الخطوط المستعملة

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'/>

<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize' rel='stylesheet' type='text/css'/>

المصدر: عرب ويب

اذا هكذا أكون قد إنتهيت من مهمتي في تقديم التدوينة، وأتمنى أن تستفيدوا منها.