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

نقدم لكم شريط أخر المواضيع بشكل احترافي وحديث حيث أن الشريط يعمل بإطار news ticker وهو إطار جميل في عرض أخر الإخبار, تم استخدام هذه الإطار ودمجه مع سكربت بلوجر لجلب أخر مواضيع احد الأقسام أو اخر مواضيع المدونة.

نرجوا عمل نسخة احتياطية حذراً من وقوع مشكلة : الاحتفاظ بنسخة احتياطية من قالب المدونة بشكل كامل مع أدوات التخطيط حصري

هذه الإضافة جميله ومميزه حيث تعمل على جذب الانتباه مما تجعل الزائر يتصفح العديد من المواضيع ,أيضا إطار news ticker يعمل بشكل جميل حيث انه يعمل حركتها مثل كتابة شيء ما, يمكنك معاينة الشريط ومعرفة مميزاته بنفسك.

معاينة

تركيب الشريط

الشريط يعمل في أي مكان في المدونة لذالك لك الحرية في وضعه في أي مكان لكن نحن سنضع لك طريقة لوضعه في مكان مناسب

نبد في التركيب, نتوجه الى لوحة تحكم المدونة تم المظهر تم تحرير HTML
1- أولى يجب عليك تركيب الخط وخط الإيقونات في حال كانتا موجودتين في مدونتك فلا تقم بتركيبهما
كود الايقونات والخط, لتركيب نبحث عن </head> تم اضفها فوقه / اعلاء

2- نقوم بتركيب إطار عمل news-ticker و الجي كويري, في الغالب رابط الجي كويري وؤابط الايقونات يكون مضمن في المدونة أد كان موجود في مدونتك لا تقم بتركيبه قم بتركيب فقط إطار news-ticker نبحث عن </head> تم اضفها فوقه / اعلاء:

3- تركيب تنسيق التصميم: أبحث عن ]]></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 وقم بتغيره الى كود ألون المطلوب

4- كود وسكربت الشريط هده الكود في المكان الذي تضعه سيعمل لذالك لو لديك خلفية في التعامل مع البلوجر يمكنك تركيبة في المكان الذي تحب في المدونة, أد لم تكن لديك خلفية في البلوجر ابحث عن احد الاكواد التالية:
<div id='content-wrapper'>
<div id='main-wrapper'>
<div class='main-outer'>
والصق الكود التالي تحته

//<![CDATA[

//----------------------------Defaults

var ListBlogLink = "https://abduallah0.blogspot.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>

/*##########Breaking News Ticker Settings########*/

$(function () {

$('#js-news').ticker({

direction : 'rtl',

speed: 0.20,

controls: true,

titleText: 'اخر المواضيع',

displayType: 'reveal',

pauseOnItems: 2000,

});

//]]>

</script>

قم بتغيير الرابط https://abduallah0.blogspot.com الى رابط مدونتك
وقم بتغيير التسمية الموجودة في ListLabel الى احد تسميات مدونتك لجلب منها المواضيع
في حالت كنت تريد عرض اخر مواضيع المدونة وليس اخر مواضيع قسم ابحث عن
/-/"+ListLabel+"
واحذفها
تم حفظ

تعديلات أخرى:

ListCount : لتعديل عدد عناوين المواضيع
TitleCount : لزيادة او أنقاص عدد حروف العنوان المعروض في الشريط
Speed : قم برفع او إنقاص (0.20) الخاص في سرعة الحركه
Controls : اجعل القيمة false لحذف إيقونات إيقاف وتشغيل والتالي او السابق
titleText : لتغيير اسم الشريط
displayType: لتغيير نوع الحركة استبدلها من reveal الى fade

وهنا متابعين مدونتي نكون قد انتهينا من الاضافة نتمنى منك التعليق ومتابعة المدونة,في حالت لم تعمل معك الاضافة او لم تستطيع وضعها في المكان المناسب ضع تعليق مزود برابط المدونة.