إضافة "تابعني" على المواقع الإجتماعية لكل المدونات و المواقع

بسم الله و الحمد لله و الصلاة و السلام على نبينا و حبيبنا محمد الأمين. السلام عليكم و رحمة الله. أقدم لكم اليوم إضافة سريعة، جميلة و سهلة التركيب، من خلالها ستعرض على زوارك متابعة جديدك على المواقع الاجتماعية كتويتر أو يوتيوب أو عبر الخلاصات و المفضلات... كما و يمكنكم تخصيصها لتوافق مبتغاكم. تركيبها يسير، فقط ازرع كود css في ملف القالب style ثم ضع كود html في أي مكان بين وسمي body. يمكنكم معاينة الإضافة على جانب مدونتي الأيمن أو من خلال الصورة المرفقة.

كود css

.follow-box {
  border:0 none;
  clear:both;
  margin:0;
  padding:0;
  position: fixed;
  top:199px;
  right:0;
  z-index:95;
}

كود html

<div class="follow-box" >
 <img usemap="#follow-box" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7e0MJXoRtrr_FxzonU8NzB3fzt5134t1Z5S3NT0WYd-SMA_E6KPjYNuaS0yvcM1U3wTlHE6Wrn-i679gGD0wA1z9LmU2aPEvph751ZCJEmMmj03mJNSwKrucL5PNia8skqh6zY1aftk/" border="0" />
 <map name="follow-box">
  <area shape="rect" target="_blank" coords="5, 68, 29, 92" href="http://delicious.com/med2taza" alt="delicious" title="delicious" />
  <area shape="rect" target="_blank" coords="5, 98, 29, 122" href="http://twitter.com/doaibblog" alt="twitter" title="twitter" />
  <area shape="rect" target="_blank" coords="5, 129, 29, 153" href="http://www.youtube.com/doaib" alt="youtube" title="youtube" />
  <area shape="rect" target="_blank" coords="5, 159, 29, 183" href="http://feeds.feedburner.com/doaib2" alt="الخلاصات RSS" title="الخلاصات RSS" />
 </map>
</div>

هام : لا تنس أن تستبدل روابطي بروابطك الخاصة في الكود و أقصد رابط مفضلتي على delicious و قناتي على يوتيوب و تويتر و كذلك رابط الخلاصات.
ملحوظة لمدوني بلوجر: يوضع كود css في القالب من صفحة تحرير html مباشرة قبل ]]></b:skin>  ثم كود html يوضع في أداة javascript/html بدون عنوان من صفحة عناصر الصفحة.

لتعديل الإضافة يستحسن فتح صورة الخلفية بأي برنامج رسم  ووضع أيقونات لخدمات أخرى بدل الأولى ثم استبدال الروابط في كود html .
الأيقونات مقدمة من Icon Dock يمكن تحميلها من هذا الرابط.
لأي استفسار أنا على أتم استعداد على أن لا يكون خارج الموضوع.
نسألكم الدعاء!

Unknown

1:20:00 م

اقرأ المزيد

اجعل موضيع مدونتك بين اصدقائك علي الفيس بوك

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

الفيدو اضغط هنا

تقبلو تحياتي

Unknown

1:19:00 م

اقرأ المزيد

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

تصفح مدونتك و موقعك  بسرعه فعاله مع إضافة jQuery Lazy Load

بسم الله و الحمد لله و الصلاة و السلام على محمد الأمين و على صحبه و آله الطيبين الطاهرين. السلام عليكم و رحمة الله، في هذا الموضوع سنتعرف و إياكم على إضافة ممتازة لتسريع تصفح المدونة أو أي موقع على حد سواء، مبدأ الإضافة يتلخص في تحميل ما يراه المتصفح أولا ثم تحميل بقية الصور و المحتويات عند الطلب فمثلا عند تصفح صفحة ما ستلاحظ و أنت تنزل إلى أسفل الصفحة أن الصور و المحتويات تظهر تباعا بطريقة سلسة. باختصار الإضافة تتيح تحميل ما يظهر على الشاشة و ليس صفحة الموقع كلها الشيء الذي يزيد في سرعة تحميل و تصفح موقعك.و لمشاهدة مثال حي على الإضافة زر هذه الصفحة ثم تصفحها نزولا و ستلاحظ تأثير الإضافة بشكل أدق. طريقة تركيب الإضافة بسيطة و سهلة ، و تكون بإضافة الكود الآتي فوق (قبل) وسم </body> المغلق:
هذا الكود لتطبيق الإضافة على كافة صور الموقع

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPMH_OnbHvkwdAyBYnvy8_yk5qIfrBmvJ4NkUiAEborm-ma9652SZgkp6yde9X_WlOOdfqO3Kp0NEhDhsu0uuHSH-A4Jjg5WHAJHkAdhvtZMDvf5aDyeeVXOvPmUtraapjT2A0XLX0HA/&quot;
});
});
</script>

إذا كنت تستعمل مسبقا مكتبة جي كويري في موقعك أو مدونتك فلا داعي لوضع السطر المشار إليه باللون الأزرق و اكتف بوضع بقية الكود فقط.

تخصيص الإضافة

تحديث : لتطبيق الإضافة فقط على جسم الموضوع أو التدوينة فقط أضف الكلاس أو ال id المراد التطبيق عليه فقط إلى يسار ما لون بالأحمر كما توضحه الأمثلة الآتية.

• فمثلا في بلوجر نطبق الإضافة على .post نستعمل الكود كما يلي:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.post img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPMH_OnbHvkwdAyBYnvy8_yk5qIfrBmvJ4NkUiAEborm-ma9652SZgkp6yde9X_WlOOdfqO3Kp0NEhDhsu0uuHSH-A4Jjg5WHAJHkAdhvtZMDvf5aDyeeVXOvPmUtraapjT2A0XLX0HA/&quot;
});
});
</script>

• و في ووردبريس نطبق الإضافة على #post-blog كما في الكود الآتي:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('#post-blog img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPMH_OnbHvkwdAyBYnvy8_yk5qIfrBmvJ4NkUiAEborm-ma9652SZgkp6yde9X_WlOOdfqO3Kp0NEhDhsu0uuHSH-A4Jjg5WHAJHkAdhvtZMDvf5aDyeeVXOvPmUtraapjT2A0XLX0HA/&quot;
});
});
</script>

• و في المنتديات على .tborder يصبح الكود كالآتي:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.tborder img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPMH_OnbHvkwdAyBYnvy8_yk5qIfrBmvJ4NkUiAEborm-ma9652SZgkp6yde9X_WlOOdfqO3Kp0NEhDhsu0uuHSH-A4Jjg5WHAJHkAdhvtZMDvf5aDyeeVXOvPmUtraapjT2A0XLX0HA/&quot;
});
});
</script>

Unknown

1:11:00 م

اقرأ المزيد