كود شريط آخر الأخبار متحرك احترافي لمدونة بلوجر

سوْف نقوم بِشرْح طريقة تَرْكِيبِ كود شريط آخر الأخبار متحرك احترافي لمدونة بلوجر وهو أحد الخصائص الرَّائعة الَّتي لََا تتوفَّر غالبًا إِلى فِي القوالب المدْفوعة , لِذلك قُمْنَا بِهذَا المقَال بِتوْفِير أكْواده لِتتمَكَّن مِن إِضافة شريط آخر الأخبار فِي مُدوَّنة بُلوجر , تابع معنَا المقَال على موْقع المتميزون لِتتمَكَّن مِن تَرْكِيبِ هذه الإضافة بِشكْل صحيح.

ما هو شريط آخر الأخبار لمدونات بلوجر

أداة شريط الأخبار news ticker for blogger هُو شريط تتمُّ إِضافَته داخل المدوَّنات الَّتي تعْمل على مِنصَّة بُلوجر لِتعْطي لِلْمدوَّنة مظْهر أكْثر اِحْترافيَّة وله العدِيد مِن الفوائد الَّتي قد تعود على صاحب المدوَّنة بِفوائد عديدة ومن أهمِّهَا هُو لَفتَ اِنْتِبَاهُ الزَّائر لَه والنَّقْر على أحد المقالات الأخْرى الَّتي سوْف يشْملهَا هذَا الشَّرِيط , وتتمَّ إِضافة شريط الأخْبار فِي مكان مُخصَّصٍ بيْن أَكْوَادِ القالب.

أودُّ مِنْك أن تقوم بِتطْبِيق شرْح طريقة تَرْكِيبِ إِضافة أداة شريط الأخْبار فِي مُدوَّنة بُلوجر بِشكْل صحيح وأن تقوم بِعمل نُسْخة اِحْتياطيَّة مِن قالب الحاليِّ لِتفادي أيِّ خطأ قد تقوم بِه بِدون قصْد.

فائدة إضافة آخر الأخبار أو الشريط العاجل

لِهذه الإضافة المميَّزة العدِيد مِن الخصائص الرَّائعة الَّتي قد تُؤثِّر بِشكْل إِيجابيٍّ على المدوَّنة مِن ناحية المظْهر مُو وقْتُ بقاء الزَّائر فِي مُدوَّنة بُلوجر وهذَا مَا تُحِبُّهُ جُوجل , عِنْد دُخول الزَّائر لِلْمدوَّنة ومشاهدة الشَّرِيط المتحرِّك فِي هذَا الأمْر سوْف يلْفتُ اِنْتِبَاه على أنَّه أمْر مُهمٌّ يجب الاطِّلاع عليْه وربَّمَا ينْقر على أحد العناوين الموْجودة بِداخِله.

فأنَا أنْصح بِوضْع هذَا الشَّرِيط فِي مُدوَّنَتك وخاصَّة إِذَا كُنْتُ قد فعلتْ إِعْلانات أَدْسَنُسْ عليْهَا فإذَا تَنَقَّلَ الزَّائر فِي المدوَّنة بِشكْل صحيح وبطريقة سهْلة سوْف يزيد هذَا الأمْر مِن أَرْبَاحِ مُدوَّنَتك شكْل جيِّد.

ملاحظة: قُم بِعمل نُسْخة اِحْتياطيَّة لِتجنُّب الأخْطاء.

كيفية تركيب إضافة شريط آخر الأخبار في قوالب بلوجر

لِترْكِيب كُود شريط الأخبار العاجلة الممَيَّز سوْف نقوم بِإرْشادك بِبعْض الخطوات الَّتي سوْف تقوم بِإتْباعهَا خُطْوة بِخطْوة ولَّاكنَّ إِذَا كانتْ مُدوَّنَتك لََا تحْتوي على مقالَات فلن يُظْهر بِداخِله أيُّ شيْء .

أولاً: تركيب الخط وخط الأيقونات

غالبًا مَا تحْتوي أغْلب قوالب بُلوجر على خطِّ الأيْقونات لِذلك إِذَا كان القالب الَّذي تسْتخْدمه يحْتوي على هذَا أخطُّ فلَا تقم بِإضافة الكود الآتي إِلى مُدوَّنَتك أمَّا إِذَا لَم تكن تحْتوِيه فقم بِإضافته إِلى مُدوَّنَتك.

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"></link>           
<link href="//fonts.googleapis.com/earlyaccess/droidarabickufi.css" rel="stylesheet"></link> 

ثانياً: تركيب إطار عمل news-ticker و الجي كويري

وهذَا الكود فِي الغالب يكون مُضمَّن فِي أغْلب قوالب بُلوجر لِذلك تَأَكَّدَ أوَّلا مِن وُجوده وإذَا كان مُدرَّج فِي قالبك فلَا تقم بِإضافته , أُمًّا إِذَا كان غيْر موْجود فقم بِالْبَحْث عن الوسْم </head> مِن خِلال النَّقْر بِالْماوس على أيِّ سطْر مِن الأسْطر البرْمجيَّة ومن ثمَّ اِضْغط على ctrl+f وسوْف يظْهر لَك مُربَّع بحْث فِي الأعْلى قُم بِوضْع الوسْم بِداخِله وانْقر على Enter وقم بِترْكِيب الكود التَّالي فوْق </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>

<script src="https://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>  

ثالثاَ: تنسيق تصميم شريط آخر الأخبار

لِترْكِيب التَّصْميم الخاص بـ شريط آخر الأخبار سوْف تقوم بِالْبَحْث عن الوسْم [[></b:skin> بِداخل أَكْوَادِ قالبك وسوْف تُلْصق هذَا الكود فوْقه مُباشَرة.

/*########Default Newsticker Styles#########*/

.ticker-content{direction: rtl;}        
.ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}          
.ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}           
.ticker-title{padding-top:6px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}           
.ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}
.ticker-content a{text-decoration:none;color:#1F527B}           
.ticker-content a:hover{text-decoration:underline;color:#0D3059}           
.ticker-swipe{position: absolute;padding-top:9px;top:0;background-color:#f8f0db;display:block;width:800px;height:23px;direction: rtl;}           
.ticker-swipe span{margin-right:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}           
.ticker-controls{padding:8px 0 0;list-style-type:none;float:right}           
.ticker-controls li{padding:0;margin-left:5px;float:right;cursor:pointer;height:16px;width:16px;display:block}           
.ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}           
.ticker-controls li.jnt-play-pause.over{background-position:32px 32px}           
.ticker-controls li.jnt-play-pause.down{background-position:32px 0}           
.ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}           
.ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}           
.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}           
.ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}           
.ticker-controls li.jnt-prev.over{background-position:0 32px}           
.ticker-controls li.jnt-prev.down{background-position:0 0}           
.ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}           
.ticker-controls li.jnt-next.over{background-position:16px 32px}           
.ticker-controls li.jnt-next.down{background-position:16px 0}           
.js-hidden{display:none}           
.no-js-news{padding:10px 0 0 45px;color:#F8F0DB}           
.left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}           
.left .ticker-controls{padding-left:6px}           
.right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}           
.right .ticker-controls{padding-right:6px}

        
/*########Blogger Newsticker by MBT#########*/          
.ticker-wrapper.has-js{margin:0;padding:0;width:98%;height:42px;display:block;border-radius:0;background-color:#fff;border:1px solid #eee;font-size:12px}           
.ticker{width:80%;height:42px;display:block;position:relative;overflow:hidden;background-color:#fff}           
.ticker-title{background:#71db00;padding:6px;color:#FFF;font-size:16px;font-family:Droid Arabic Kufi;text-transform:uppercase;text-shadow:1px 1px 6px #666}           
.ticker-title:after{right:100px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-right:0;margin-top:1px;border-right:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}           
.ticker-content{background-color:#fff;margin-right:15px;color:#444;margin-top:1px}           
.ticker-swipe{background-color:#fff;top:5px;right:100px!important}           
.ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}           
.ticker-controls{padding:0!important;margin:13px 0 0 10px !important;list-style-type:none;position:relative;right:0px;float: left !important;}           
.ticker-controls li{padding:0;margin-left:5px;float:right;cursor:pointer;height:16px;width:16px;display:block}           
.ticker-controls li a{border:0!important;padding:0!important}           
.ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}           
.ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}           
.ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}           
.ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}           
.ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}           
.ticker .iauthor:before,.ticker .icomments:before,.ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}           
.ticker .iauthorpic{width:16px!important;height:16px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}           
.ticker span{padding-right:5px;font-family:Droid Arabic Kufi;font-weight:400}           
.ticker .icomments a{color:#71db00;font-size:11px}           
.ticker .icomments a:hover{text-decoration:underline}           
.ticker .icomments:before{content:'\f086';padding:0 3px 0 0;color:#777;position:relative;top:-1px}           
.ticker .idate{font-size:11px;padding-right:7px}           
.ticker .idate:before{content:'\f073';padding:0 5px;color:#777;position:relative;top:-1px}           
.ticker .mbttitle{font-family:Droid Arabic Kufi;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none}           
.ticker .mbttitle:hover{text-decoration:underline}

إِذَا كُنْتُ ترْغب فِي تَغْيِيرِ لَوْن شريط آخر الأخبار فقم بِالْبَحْث عن هذَا الرَّمْز #71db00 وبعْد ذلك ألْصق رمْز اللَّوْن الَّذي تُريده وللْحصول على رُموز الألْوان اِنْتَقَلَ إِلى colorhexa.

وهذه بعْض الألْوان لَاتي رُبَّمَا تُريد الاخْتيار مِن بيْنهَا:

• الأحمر: #ff0000
• الأزرق: #0035ff
• الأخضر: #24bc00
• الكحلي: #0d0851
• الأصفر: #fff400
• الأسود: #000000

رابعاً: كود وسكربت الشريط

عِنْد أخْذ هذَا المود ولصْقه فِي المدوَّنة سوْف يعْمل فِي المكَان الَّذي قُمْتُ بِوضْعه فِيه وإذَا كان لَديْك الخبْرة فِي العامل مع أَكْوَادِ قوالب بُلوجر فسوْف تَأْخُذُهُ وتضعه فِي المكَان الَّذي تراه مُناسب لِمدوَّنتك ومظْهرهَا , أمَّا إِذَا لَم يكن لَديْك خِبْرة فِي التَّعامل معه فسوْف أقوم بِشرْح الخطْوة البسيطة لَك.

سوْف تقوم بِالدُّخول إِلى مظْهر بُلوجر وتعْدِيل html وتبْحث عن أحد الرُّموز الَّتي فِي الأسْفل مِن خِلال ctrl+f وتنْسخ الكود التَّالي وتضعه تحْته مُباشَرة.

أبْحث عن أحد الوسوم التَّالية :

• <div id='content-wrapper'>
• <div id='main-wrapper'>
• <div class='main-outer'>

<script type="text/javascript">    
//<![CDATA[       
//----------------------------Defaults           
var ListBlogLink = "https://almotmezon.com";
var ListCount = 5;           
var TitleCount = 70;           
var ListLabel = "بلوجر";

        
//----------------------------Function Start          
function mbtlist(json) {           
document.write('<ul id="js-news" class="js-hidden">');           
for (var i = 0; i < ListCount; i++)           
{

        
//-----------------------------Variables Declared          
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";           
//----------------------------- Title URL           
for (var j = 0; j < json.feed.entry[i].link.length; j++) {           
if (json.feed.entry[i].link[j].rel == 'alternate') {           
break;           
}           
}           
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";           
//----------------------------------- Title Stirng           
if (json.feed.entry[i].title!= null)           
{           
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);           
}

        
if (json.feed.entry[i].thr$total)          
{           
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";           
}           
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");           
ListAuthor=ListAuthor.slice(0, 1).join(" ");           
AuthorPic = json.feed.entry[i].author[0].gd$image.src;

        
//################### Date Format

        
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        
ListDate= json.feed.entry[i].published.$t.substring(0,10);

        
                         Y = ListDate.substring(0, 4);          
                        m = ListDate.substring(5, 7);           
                         D = ListDate.substring(8, 10);           
                         M = ListMonth[parseInt(m - 1)];  
//----------------------------------- Printing List           
var listing = "
<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"           
+ListAuthor+ "</span> <span class='icomments'>"           
+ListComments + "</span>  <span class='idate'>"           
+ D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle' href="           
+ListUrl+           
"target='_blank'>"           
+ListTitle+           
"</a></li>
";           
document.write(listing);           
}           
}           
document.write("</ul>
<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");

        
/*##########Breaking News Ticker Settings########*/          
    $(function () {           
        $('#js-news').ticker({  
        direction : 'rtl',          
        speed: 0.20,           
        controls: true,   
        titleText: 'اخر المواضيع',           
        displayType: 'reveal',           
        pauseOnItems: 2000,    
});           
});    
//]]>       
</script>        

بعْد أن قُمْتُ بِلصْقة قُم بِتغْيِير رابط موْقعِنَا بِرابط موْقعك أو أبْحث عن رابط موْقعِنَا مِن خِلال ctrl + f وقم بِتغْيِير اِسْم التَّصْنيف مِن خِلال البحْث عن ListLabel وسوْف تجد فِيهَا كلمة بُلوجر قُم بِتغْيِير هذَا الاسْم لِأحد تسْميَات مُدوَّنَتك , وأمر آخر يجب على ذِكْره وهو أنَّه إِذَا كُنْتُ تُريد إِظْهَار أخَّر المواضيع فقط وليْس مواضِيع التَّسْميات الَّتي فِي مُدوَّنَتك فقم بِالْبَحْث عن /-/"+ListLabel+" ومن ثمَّ حذْفهَا وأعْمل حِفْظ.

شاهد أيضاً: أزرار المشاركة الأجتماعية لمدونات بلوجر

تعديلات إضافية على الشريط:

• ListCount  : لِتغْيِير عدد المواضيع المعْروضة فِي شريط أَخْبَارِ بُلوجر.
• TitleCount  : التَّحَكُّم فِي عدد حُروف العنْوان الَّذي فِي شريط آخر الأخبار.
• Speed : التَّحَكُّم بِسرْعة الشَّرِيط ( 0.20 ) ويفضِّل أن تكون السُّرْعة مُتوسِّطه.
• Controls : اِسْتبْدل القيمة true بِالْقيمة false لِحذْف أيْقونات وإيقَاف وتشْغِيل التَّالي والسَّابق.
• titleText : تَغْيِيرُ اِسْم الشَّرِيط إِلى عاجل أو آخر الأخْبار أو حصْريًّا أو غيْرهم مِن المسمَّيات.
• displayType: لِتغْيِير نوْع حركة الشَّرِيط اِسْتبْدلهَا مِن reveal إِلى fade.

الخاتمة

إِلى هُنَا نكون قد اِنْتهيْنَا مِن شرْح كيفية تركيب كود شريط آخر الأخبار متحرك احترافي لمدونة بلوجر وهو شريط مُميَّز وقد تعرَّفْنَا على كيْفيَّة تَخْصِيصِ وتغْيِير بعْض الأوامر الَّتي بِداخِله بِحسب رغْبة المسْتخْدم أو منْشأ المدوَّنة أو مُديرِهَا , وأودُّ أن أدْعوك فِي خاتمة المقَال إِلى مُشاهَدة قِسْم بُلوجر الَّذي يحْتوي على العدِيد مِن الإضافات الرَّائعة الَّتي قد تجْعل مِن مُدوَّنَتك مُدوَّنة اِحْترافيَّة وذو مظْهر جميل كان معكم المتميزون في شريط آخر الأخبار وإلى اللقاء.

المصدر : مواقع إلكترونية