إضـافــة شـريــط آخــر الاخـبــار بــتــقـنـيــة news ticker لــلـمـدونــة بـلـوجــر

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

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

المعــاينة

تركيب الشريط

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

مراحل تركيب الشريط

1. ادخل إلى لوحة تحكم المدونة في بلوجر.
2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
3. اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
4. أولى يجب عليك تركيب الخط وخط الإيقونات في حال كانتا موجودتين في مدونتك فلا تقم بتركيبهما

<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> 

5. نقوم بتركيب إطار عمل 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>  

6. ابحث عن الوسم ]]></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}

/*########Teqniweb Newsticker#########*/          
.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 وقم بتغيره الى كود ألون المطلوب


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

<script type="text/javascript">    
//<![CDATA[       
var ListBlogLink = "http://www.teqniweb.com"; 
var ListCount = 5; 
var TitleCount = 70; 
var ListLabel = "اضافات بلوجر";

function mbtlist(json) { 
document.write('<ul id="js-news" class="js-hidden">'); 
for (var i = 0; i < ListCount; i++) {
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 =  ""; 
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 + "'"; 
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;
 
ListMonth= ["يناير", "فبراير", "مارس", "أبريل", "ماي", "يونيو", "يوليوز", "غشت", "شتنبر", "أكتوبر", "نونبر", "دجنبر"];
        
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)];  

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>");
    $(function () { $('#js-news').ticker({  direction : 'rtl', speed: 0.20, controls: true, titleText: 'اخر المواضيع', displayType: 'reveal', pauseOnItems: 2000, }); 
});    
//]]>       
</script>


قم بتغيير الرابط http://www.teqniweb.com إلى رابط مدونتك.
وقــم بــتــغـيــيــر الــتــسـمــيــة الـمــوجــودة فــي ListLabel إلــى احــد تــسـمـيــات مـدونـتــك لـجـلــب مـنـهــا الــمـواضـيــع
فــي حــالــت كــنــت تــريــد عــرض آخــر مــواضــيــع الــمــدونــة ولــيــس آخــر مــواضــيــع قــســم ابــحــث عن : /-/"+ListLabel+"واحذفها تم حفظ.

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

- ابحث عن:

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

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!