اضافة شريط اخر الاخبار بتقنية news ticker للمدونة بلوجر
نقدم لكم شريط أخر المواضيع بشكل احترافي وحديث حيث أن الشريط يعمل بإطار news ticker وهو إطار جميل في عرض أخر الإخبار, تم استخدام هذه الإطار ودمجه مع سكربت بلوجر لجلب أخر مواضيع احد الأقسام أو اخر مواضيع المدونة.
هذه الإضافة جميله ومميزه حيث تعمل على جذب الانتباه مما تجعل الزائر يتصفح العديد من المواضيع ,أيضا إطار news ticker يعمل بشكل جميل حيث انه يعمل حركتها مثل كتابة شيء ما, يمكنك معاينة الشريط ومعرفة مميزاته بنفسك.
تركيب الشريط
الشريط يعمل في أي مكان في المدونة لذالك لك الحرية في وضعه في أي مكان لكن نحن سنضع لك طريقة لوضعه في مكان مناسب
نبد في التركيب, نتوجه الى لوحة تحكم المدونة تم المظهر تم تحرير HTML
1- أولى يجب عليك تركيب الخط وخط الإيقونات في حال كانتا موجودتين في مدونتك فلا تقم بتركيبهما
<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>
2- نقوم بتركيب إطار عمل news-ticker و الجي كويري, عدتا رابط الجي كويري يكون مضمن في المدونة أد كان موجود في مدونتك لا تقم بتركيبه قم بتركيب فقط إطار news-ticker
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script><script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>
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’>
والصق الكود التالي تحته
<script type="text/javascript">
//<![CDATA[
//----------------------------Defaults
var ListBlogLink = "https://tech-weba.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>قم بتغيير الرابط https://tech-weba.com/ الى رابط مدونتك
وقم بتغيير التسمية الموجودة في ListLabel الى احد تسميات مدونتك لجلب منها المواضيع
في حالت كنت تريد عرض اخر مواضيع المدونة وليس اخر مواضيع قسم ابحث عن
/-/”+ListLabel+”
واحذفها
تم حفظ
تعديلات أخرى ابحث عن
ListCount : لتعديل عدد عناوين المواضيع
TitleCount : لزيادة او أنقاص عدد حروف العنوان المعروض في الشريط
Speed : قم برفع او إنقاص (0.20) الخاص في سرعة الحركه
Controls : اجعل القيمة false لحذف إيقونات إيقاف وتشغيل والتالي او السابق
titleText : لتغيير اسم الشريط
displayType: لتغيير نوع الحركة استبدلها من reveal الى fade
