نــقــدم لــكــم شــريــط أخــر الـمــواضــيــع بــشــكــل احــتــرافــي وحــديــث حــيــث أن الــشــريــط يــعــمــل بــإطــار news ticker وهــو إطــار جــمــيــل فــي عــرض أخــر الإخــبــار, تــم اســتــخــدام هــذه الإطــار ودمــجــه مــع ســكــربــت بــلــوجــر لــجــلــب أخــر مــواضــيــع احــد الأقــســام أو آخــر مــواضــيــع الــمــدونــة.
هــذه الإضـافــة جــمـيـلــه ومـمـيــزه حـيــث تـعـمــل عـلــى جــذب الانـتـبــاه مـمــا تـجـعــل الــزائر يــتـصـفــح الـعـديــد مــن الــمـواضـيــع, أيـضــا إطــار news ticker يـعـمــل بـشـكــل جـمـيــل حـيــث انــه يـعـمــل حــركـتـهــا مـثــل كـتـابــة شــيء مــا, يــمـكـنــك مــعـايـنــة الـشـريــط ومـعـرفــة مــمـيـزاتــه بــنـفـســك.
تركيب الشريط
الـشـريــط يـعـمــل فــي أي مـكــان فــي الـمـدونــة لـذالــك لــك الـحـريــة فــي وضـعــه فــي أي مـكــان لـكــن نـحــن سـنـضــع لــك طـريـقــة لـوضـعــه فــي مـكــان مـنـاســب
مراحل تركيب الشريط- ادخل إلى لوحة تحكم المدونة في بلوجر.
- اختر قالب المدونة التي تود تطبيق الشرح فيها.
- اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
- أولى يجب عليك تركيب الخط وخط الإيقونات في حال كانتا موجودتين في مدونتك فلا تقم بتركيبهما
- نقوم بتركيب إطار عمل news-ticker و الجي كويري, عدتا رابط الجي كويري يكون مضمن في المدونة أد كان موجود في مدونتك لا تقم بتركيبه قم بتركيب فقط إطار news-ticker
- ابحث عن الوسم ]]></b:skin> و اضف الكود التالي قبله مباشرة
- ضع هدا الكود في المكان الذي تريده أن يضهر لديك، لو لديك خلفية في التعامل مع البلوجر يمكنك تركيبة في المكان الذي تحب في المدونة, أد لم تكن لديك خلفية في البلوجر ابحث عن احد الاكواد التالية:
<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>
<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>
/*########Default Newsticker Styles#########*/لتعديل الألوان ابحث عن #71db00 وقم بتغيره الى كود ألون المطلوب
.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}
<div id='content-wrapper'>
<div id='main-wrapper'>
<div class='main-outer'>
وألـصــق الـكــود الـتـالــي تـحـتــه : <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
ليست هناك تعليقات:
إرسال تعليق