الرئيسية / blogger / شرح كيفية إضافة آخر المواضيع على الblogger مع مصغرات الصور بشكل متحرك رائع – بتقنية jQuery

شرح كيفية إضافة آخر المواضيع على الblogger مع مصغرات الصور بشكل متحرك رائع – بتقنية jQuery

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

شرح كيفية إضافة آخر المواضيع على الblogger مع مصغرات الصور بشكل متحرك رائع – بتقنية jQuery
شرح كيفية إضافة آخر المواضيع على الblogger مع مصغرات الصور بشكل متحرك رائع – بتقنية jQuery


 

لنشرع الانفي تركيب هذه الإضافة على مدونة البلوجر

1- قم بالدخول على تصميم القالب ثم اضغط على إضافة أداة واختر HTML/JavaScript

2- 
ثم قم بنسخ الكود التالي ولصقه بالمكان المخصص بكود HTML/JavaScript

 

 

 

 

<script type=’text/javascript’>
jQuery.noConflict();
</script>

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script  type=”text/javascript”  src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>


<script style=’text/javascript’ src=”http://glitter-text.googlecode.com/files/recentpostticker.js” ></script>
<script style=’text/javascript’ src=’http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js’></script>
<script style=’text/javascript’>
var numposts = 15;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
jQuery(document).ready(function($) {$(‘#sai’).vTicker({
speed: 500,
pause: 3000,
showItems: 7,
animation: ‘fade’,
mousePause: false,
height: 0,
direction: ‘down’
});});
</script>
<div id=”sai”>
<script src=’http://xxxxxx.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs’></script>
</div>
<a href=”http://xxxxxx.blogspot.com/2012/12/animated-last-posts-jQuery-on-Blogger.html”> Get it here </a>
 

3- قبل حفظ الإضافة سنقوم ببعض التعديلات على الكود


+ قم بتغيير مايلي : http://xxxxxx.blogspot.com برابط موقعك أو مدونتك.
+ var numposts = 15 : من هنا يمكنكم التحكم بعدد المواضيع بالتغيير من قيمتها. 
+ showItems: 7 : من هنا يمكنك تعديل عدد المواضيع المعروضة بالتغيير من قيمتها.+ للتحكم فى سرعة حركة المواضيع بما يناسبك قم بالتغيير في القيم التالية :

speed: 500,
pause: 3000,

ملاحظة :

* يستحسن وضع صورة على الأقل في كل موضوع للحصول على مظهرجيد للإضافة.* تتميزهذه الإضافة بعدم تعارضها مع أي إضافات أخرى على مدونتك.

*** لمن لم تعد تشتغل معهم الأداة يرجى زيارة الموضوع التالي : شرح طريقة إضافة أداة أحدث أو آخر المواضيع متحركة ومنزلقة بشكل جديد وجذاب مع مصغرات الصور على مدونات الblogger (آخر إصدار).

شاهد أيضاً

قالب White لمدونات بلوجر متعدد الاستخدامات

قالب White لمدونات بلوجر متعدد الاستخدامات قوالب بلوجر

قالب White لمدونات بلوجر متعدد الاستخدامات قالب White لمدونات بلوجر متعدد الاستخدامات مرحبا بكم عشاق …

قالب روتكس لمدونات بلوجر

قوالب blogger- تحميل قالب روتكس بلوجر اخر اصدار

قالب روتكس لمدونات بلوجر قوالب blogger– تحميل قالب روتكس بلوجر اخر اصدار السلام عليكم ورحمة …

تحميل قالب Levon لمدونات بلوجر متعدد الاستخدامات

قوالب بلوجر- تحميل قالب Levon بلوجر متعدد الاستخدامات

تحميل قالب Levon لمدونات بلوجر متعدد الاستخدامات قوالب بلوجر– تحميل قالب Levon بلوجر متعدد الاستخدامات …

قوالب بلوجر. قالب sendigo بلوجر للمجلات والمدونات التقنية

قوالب بلوجر. قالب sendigo بلوجر للمجلات والمدونات التقنية

قوالب بلوجر. قالب sendigo بلوجر للمجلات والمدونات التقنية السلام عليكم و رحمة الله، قوالب بلوجر. …

3 تعليقات

  1. TYVM you’ve solved all my prbmelos

  2. I am totally wowed and preerapd to take the next step now.

  3. Zithromax Swollen Gums Aacifemine Clomid Buy Viagra India Comment Durer Plus Longtemps Au Lit Propecia Aumento Massa

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *