.png)
اضافة شريط آخر الأخبار المتحرك لمدونات بلوجر ، هي اضافة ممتازة أنصح بها كل من يملك موقعا ذو محتوى كثيف و متجدد باستمرار . اذ بمساعدة هذه الاضافة يمكنك بسهولة عرض عناوين آخر المقالات المنشورة على مدونتك في شريط واحد . و أظن أنها طريقة ذكية لجذب انتباه الزوار فحركة عناوين المقالات داخل شريط الاضافة أمر من الصعب تجاهله مما سيزيد اقبال زوار موقعك على النقر و التجول داخل مدونتك .
قبل أن نبدأ في شرح الطريقة الجديدة و الفعالة لتنصيب هذه الاضافة على مدونتك يمكنك معاينة الشريط و تجربته من خلال النقر على زر المعاينة أدناه :
كيف يمكنك بسهولة اضافة اداة آخر المواضيع لمدونتك :
- لا تنسى تحميل نسخة لقالبك و حفظها في مكان آمن تحسبا لأي خطأ في تطبيق الشرح.
- أولا : ان كان قالب مدونتك لا يدعم الـ jQuery قم باضافة الكود التالي بعد <head> مباشرة :
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>
- ثانيا : اذهب الى لوحة التحكم في مدونتك على بلوجر >> اختر قالب >> ثم تحرير HTML
- ثالثا : قم بنسخ و لصق الكود الموالي قبل </head> مباشرة :
<script type='text/javascript'>
//<![CDATA[
(function ( $, window, document, undefined ) { var name = "easyTicker", defaults = { direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: 1, controls: { up: '', down: '', toggle: '', playText: 'Play', stopText: 'Stop' } }; function EasyTicker( el, options ) { var s = this; s.opts = $.extend( {}, defaults, options ); s.elem = $(el); s.targ = $(el).children(':first-child'); s.timer = 0; s.mHover = 0; s.winFocus = 1; init(); start(); $([window, document]).off('focus.jqet').on('focus.jqet', function(){ s.winFocus = 1; }).off('blur.jqet').on('blur.jqet', function(){ s.winFocus = 0; }); if( s.opts.mousePause == 1 ){ s.elem.mouseenter(function(){ s.timerTemp = s.timer; stop(); }).mouseleave(function(){ if( s.timerTemp !== 0 ) start(); }); } $(s.opts.controls.up).on('click', function(e){ e.preventDefault(); moveDir('up'); }); $(s.opts.controls.down).on('click', function(e){ e.preventDefault(); moveDir('down'); }); $(s.opts.controls.toggle).on('click', function(e){ e.preventDefault(); if( s.timer == 0 ) start(); else stop(); }); function init(){ s.elem.children().css('margin', 0).children().css('margin', 8); s.elem.css({ position : 'relative', height: s.opts.height, overflow : 'hidden' }); s.targ.css({ 'float' : 'right', 'margin' : 0, 'text-align' : 'right' }); setInterval( function(){ adjHeight(); }, 100); } function start(){ s.timer = setInterval(function(){ if( s.winFocus == 1 ){ move( s.opts.direction ); } }, s.opts.interval); $(s.opts.controls.toggle).addClass('et-run').html(s.opts.controls.stopText); } function stop(){ clearInterval( s.timer ); s.timer = 0; $(s.opts.controls.toggle).removeClass('et-run').html(s.opts.controls.playText); } function move( dir ){ var sel, eq, appType; if( !s.elem.is(':visible') ) return; if( dir == 'up' ){ sel = ':first-child'; eq = '-='; appType = 'appendTo'; }else{ sel = ':last-child'; eq = '+='; appType = 'prependTo'; } var selChild = s.targ.children(sel); var height = selChild.outerHeight(); s.targ.stop(true, true).animate({ 'top': eq + height + "px" }, s.opts.speed, s.opts.easing, function(){ selChild.hide()[appType]( s.targ ).fadeIn(); s.targ.css('top', 0); adjHeight(); }); } function moveDir( dir ){ stop(); if( dir == 'up' ) move('up'); else move('down'); } function fullHeight(){ var height = 0; var tempDisp = s.elem.css('display'); s.elem.css('display', 'block'); s.targ.children().each(function(){ height += $(this).outerHeight(); }); s.elem.css({ 'display' : tempDisp, 'height' : height }); } function visHeight( anim ){ var wrapHeight = 0; s.targ.children(':lt(' + s.opts.visible + ')').each(function(){ wrapHeight += $(this).outerHeight(); }); if( anim == 1 ){ s.elem.stop(true, true).animate({height: wrapHeight}, s.opts.speed); }else{ s.elem.css( 'height', wrapHeight); } } function adjHeight(){ if( s.opts.height == 'auto' && s.opts.visible != 0 ){ anim = arguments.callee.caller.name == 'init' ? 0 : 1; visHeight( anim ); }else if( s.opts.height == 'auto' ){ fullHeight(); } } return { up: function(){ moveDir('up'); }, down: function(){ moveDir('down'); }, start: start, stop: stop, options: s.opts }; } $.fn[name] = function ( options ) { return this.each(function () { if (!$.data(this, name)) { $.data(this, name, new EasyTicker( this, options )); } }); }; })( jQuery, window, document ); $(function(){$('.news-ticker') .each(function() { var domainname=$(this).attr('data-domain'); var url ='http://www.'+domainname+'/feeds/posts/summary/?max-results=10&alt=json-in-script'; var thisc = $(this); thisc.append('<div class="tickerwrapper"><span class="tickhead">آخر المواضيع</span><div class="ticker2"><ul></ul></div></div><center> <a href="http://betheproblogger.blogspot.com/2015/09/Add-Breaking-News-Widget-for-Blogger-2015.html" target="_blank" style="visibility: hidden">Betheproblogger</a></center>'); $.ajax({ type: 'GET', url: url, async: false, contentType: "application/json", dataType: 'jsonp', success: function(json) { for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { var postUrl = json.feed.entry[i].link[j].href; break; } } var postTitle = json.feed.entry[i].title.$t; var item = '<li><a href="'+postUrl+'">'+postTitle+'</a></li>'; $('.ticker2 ul',thisc).append(item); } $('.ticker2').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: 1, }); } });}); });
//]]></script>
//<![CDATA[
(function ( $, window, document, undefined ) { var name = "easyTicker", defaults = { direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: 1, controls: { up: '', down: '', toggle: '', playText: 'Play', stopText: 'Stop' } }; function EasyTicker( el, options ) { var s = this; s.opts = $.extend( {}, defaults, options ); s.elem = $(el); s.targ = $(el).children(':first-child'); s.timer = 0; s.mHover = 0; s.winFocus = 1; init(); start(); $([window, document]).off('focus.jqet').on('focus.jqet', function(){ s.winFocus = 1; }).off('blur.jqet').on('blur.jqet', function(){ s.winFocus = 0; }); if( s.opts.mousePause == 1 ){ s.elem.mouseenter(function(){ s.timerTemp = s.timer; stop(); }).mouseleave(function(){ if( s.timerTemp !== 0 ) start(); }); } $(s.opts.controls.up).on('click', function(e){ e.preventDefault(); moveDir('up'); }); $(s.opts.controls.down).on('click', function(e){ e.preventDefault(); moveDir('down'); }); $(s.opts.controls.toggle).on('click', function(e){ e.preventDefault(); if( s.timer == 0 ) start(); else stop(); }); function init(){ s.elem.children().css('margin', 0).children().css('margin', 8); s.elem.css({ position : 'relative', height: s.opts.height, overflow : 'hidden' }); s.targ.css({ 'float' : 'right', 'margin' : 0, 'text-align' : 'right' }); setInterval( function(){ adjHeight(); }, 100); } function start(){ s.timer = setInterval(function(){ if( s.winFocus == 1 ){ move( s.opts.direction ); } }, s.opts.interval); $(s.opts.controls.toggle).addClass('et-run').html(s.opts.controls.stopText); } function stop(){ clearInterval( s.timer ); s.timer = 0; $(s.opts.controls.toggle).removeClass('et-run').html(s.opts.controls.playText); } function move( dir ){ var sel, eq, appType; if( !s.elem.is(':visible') ) return; if( dir == 'up' ){ sel = ':first-child'; eq = '-='; appType = 'appendTo'; }else{ sel = ':last-child'; eq = '+='; appType = 'prependTo'; } var selChild = s.targ.children(sel); var height = selChild.outerHeight(); s.targ.stop(true, true).animate({ 'top': eq + height + "px" }, s.opts.speed, s.opts.easing, function(){ selChild.hide()[appType]( s.targ ).fadeIn(); s.targ.css('top', 0); adjHeight(); }); } function moveDir( dir ){ stop(); if( dir == 'up' ) move('up'); else move('down'); } function fullHeight(){ var height = 0; var tempDisp = s.elem.css('display'); s.elem.css('display', 'block'); s.targ.children().each(function(){ height += $(this).outerHeight(); }); s.elem.css({ 'display' : tempDisp, 'height' : height }); } function visHeight( anim ){ var wrapHeight = 0; s.targ.children(':lt(' + s.opts.visible + ')').each(function(){ wrapHeight += $(this).outerHeight(); }); if( anim == 1 ){ s.elem.stop(true, true).animate({height: wrapHeight}, s.opts.speed); }else{ s.elem.css( 'height', wrapHeight); } } function adjHeight(){ if( s.opts.height == 'auto' && s.opts.visible != 0 ){ anim = arguments.callee.caller.name == 'init' ? 0 : 1; visHeight( anim ); }else if( s.opts.height == 'auto' ){ fullHeight(); } } return { up: function(){ moveDir('up'); }, down: function(){ moveDir('down'); }, start: start, stop: stop, options: s.opts }; } $.fn[name] = function ( options ) { return this.each(function () { if (!$.data(this, name)) { $.data(this, name, new EasyTicker( this, options )); } }); }; })( jQuery, window, document ); $(function(){$('.news-ticker') .each(function() { var domainname=$(this).attr('data-domain'); var url ='http://www.'+domainname+'/feeds/posts/summary/?max-results=10&alt=json-in-script'; var thisc = $(this); thisc.append('<div class="tickerwrapper"><span class="tickhead">آخر المواضيع</span><div class="ticker2"><ul></ul></div></div><center> <a href="http://betheproblogger.blogspot.com/2015/09/Add-Breaking-News-Widget-for-Blogger-2015.html" target="_blank" style="visibility: hidden">Betheproblogger</a></center>'); $.ajax({ type: 'GET', url: url, async: false, contentType: "application/json", dataType: 'jsonp', success: function(json) { for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { var postUrl = json.feed.entry[i].link[j].href; break; } } var postTitle = json.feed.entry[i].title.$t; var item = '<li><a href="'+postUrl+'">'+postTitle+'</a></li>'; $('.ticker2 ul',thisc).append(item); } $('.ticker2').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: 1, }); } });}); });
//]]></script>
*يمكنك تعديل الكود وفق رغباتك كما يلي :
_تغيير عنوان الاضافة بتغيير : آخر المواضيع
_تغيير عدد المقالات التي تظهر بتغيير : max-result=10
_تغيير المدة التي يظهر فيها العنوان قبل أن يختفي بتغيير : interval:2000
- رابعا : ابحث عن : ]]</b :skin> ، ثم قم بلصق الكود التالي قبلها مباشرة :
.tickerwrapper{ position:relative; }
.tickhead{
background:#dd4c39 url(https://lh4.googleusercontent.com/S2yrb7GoLLN7s1-NmlkE_nS9Svzr5DQNM3dcCCp2Occ=s50-no) no-repeat;
background-position:125px 10px;
background-size:20px;
float:right;
line-height:28px !important;
height:29px;
width:130px;
padding:6px 11px 0 15px;
text-align:left;
color:#fff;
font:400 22px 'pt sans',sans-serif;
text-transform:uppercase;
z-index:1;
top:0;
left:0;
}
.ticker2{
padding-left:155px;
height:35px !important;
overflow:hidden;
background:#333;
line-height:35px !important;
}
.ticker2 ul{
margin:12px;
list-style:none;
}
.ticker2 ul li a{
color:#fff;
font:400 15px 'pt sans',sans-serif;
text-decoration:none; }
.tickhead{
background:#dd4c39 url(https://lh4.googleusercontent.com/S2yrb7GoLLN7s1-NmlkE_nS9Svzr5DQNM3dcCCp2Occ=s50-no) no-repeat;
background-position:125px 10px;
background-size:20px;
float:right;
line-height:28px !important;
height:29px;
width:130px;
padding:6px 11px 0 15px;
text-align:left;
color:#fff;
font:400 22px 'pt sans',sans-serif;
text-transform:uppercase;
z-index:1;
top:0;
left:0;
}
.ticker2{
padding-left:155px;
height:35px !important;
overflow:hidden;
background:#333;
line-height:35px !important;
}
.ticker2 ul{
margin:12px;
list-style:none;
}
.ticker2 ul li a{
color:#fff;
font:400 15px 'pt sans',sans-serif;
text-decoration:none; }
*يمكنك تعديل الكود ليتوافق مع ألوان مدونتك كما يلي :
_تغيير لون خلفية عنوان الاضافة بتغيير : #dd4c39
_تغيير لون عنوان الاضافة بتغيير : fff#
_تغيير لون خلفية المقالات بتغيير : 333#
_تغيير لون عنوان المقالات بتغيير: fff#
مواضيع ستساعدك لتجد أكواد الألوان المناسبة : مكتبة أكواد الألوان الخاصة بكل مدون محترف
- خامسا : اضغط على حفظ التعديلات
- سادسا : اذهب الى التخطيط >> اختر المكان المناسب ثم اضغط على "اضافة أداة" >> اختر HTML/javascript >> ثم قم بلصق الكود التالي في الخانة المخصصة لذلك ثم اضغط على حفظ التعديلات :
<div class='news-ticker' data-domain='betheproblogger.blogspot.com'> </div>
*لا تنسى تعويض رابط مدونتي برابط مدونتك : و كما تلاحظ رابط مدونتي ليس مسبوقا بأي شيء لذلك قم بحذف كل شيء قبل رابط مدونتك (مثل : http://www. ) كما لا تنسى حذف أي شيء بعد رابط مدونتك (مثل : / ) أو أي شيء من ذلك القبيل .
أتمنى أن تكون أفادتكم تدوينة نهار اليوم ،
ان واجهتك أي مشكلة مع الاضافة لا تتردد في استعمال صندوق التعليقات لطرح مشكلتك و سأجيبك في أقرب الآجال ،
لا تنسى أن تشارك هذه التدوينة مع معارفك من المدونين ان وجدتها مفيدة عن طريق أزرار المشاركة أسفل التدوينة.
لم يبقى لي الا أن أقول لكم بالتوفيق للجميع و تجربة ممتعة ،
مع تحيات أبو معاذ ،
سلام .
أتمنى أن تكون أفادتكم تدوينة نهار اليوم ،
ان واجهتك أي مشكلة مع الاضافة لا تتردد في استعمال صندوق التعليقات لطرح مشكلتك و سأجيبك في أقرب الآجال ،
لا تنسى أن تشارك هذه التدوينة مع معارفك من المدونين ان وجدتها مفيدة عن طريق أزرار المشاركة أسفل التدوينة.
لم يبقى لي الا أن أقول لكم بالتوفيق للجميع و تجربة ممتعة ،
مع تحيات أبو معاذ ،
سلام .
No comments:
Post a Comment