درسنا اليوم هو بخصوص كيفية إضافة آخر المواضيع على البلوجر مع مصغرات الصور بشكل متحرك – بتقنية 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>
Table of Contents
3- قبل حفظ الإضافة سنقوم ببعض التعديلات على الكود
+ قم بتغيير مايلي : http://xxxxxx.blogspot.com برابط موقعك أو مدونتك. + var numposts = 15 : من هنا يمكنكم التحكم بعدد المواضيع بالتغيير من قيمتها. + showItems: 7 : من هنا يمكنك تعديل عدد المواضيع المعروضة بالتغيير من قيمتها.+ للتحكم فى سرعة حركة المواضيع بما يناسبك قم بالتغيير في القيم التالية :
