اليوم على مدونة ANIS TETCHE اقدم إضافة جديدة من إضافات بلوجر وهى شريط لأحدث الأخبار على موقعك بشكل منزلق وأنيق ومع أزرار مواقع التواصل الأجتماعية الذى تريده يمكنك إضافة أى زر من أزرار التواصل الأجتماعية الذى تريده ، ومعنى شريط أحدث الأخبار المنزلق وهو أن شريط الأخبار يعرض كل موضوع به بمفرده بشكل أفضل ويمكنك الحصول عليك بشكلك المفضل ولكن الكثير يفضلون شريط الأخبار المتحرك ، ولكن ايضا يوجد الكثير من المدونبن من يفضلو هذا النوع من الإضافات ، ولكن قريبا سوف تقوم بتوفير شريط الأخبار بشكله المتحرك .
ولكن اليوم معنا شريط لأحدث الأخبار على مدونتك أو موقعك بشكل احترافى منزلق مع أزرار الشبكات الأجتماعية بشكل أحترافى وسوف نقوم بتفوير 5 الوان لشريط الأخبار ، ويمكن معاينة من الرابط التالى .
شرح كيفية تركيب شريط أحدث الأخبار على مدونتك تابع :
اولا قم بأخذ نسخة احتياطية من قالب مدونتك لنجنب حدوث اى مشكلة فى تركيب شريط الأخبار.
1- لكل شكل من شريط أحدث الأخبار يوجد ثلاث أكواد وأول كود هو الكود التالى وهذا الكود يضاف فى المكان الذى تريده وتراه مناسب فى مدونتك ويوجد بهذا الكود قسمين القسم الأول المحدد اللون الأحمر الذى يوجد به رابط مدونة عالم المدون http://wdbloog.blogspot.com هذا سوف تقوم بتغييره برابط مدونتك .
القسم الثانى من الكود وهو المحدد باللون الأزرق هو خاص بالشبكات الأجتماعية وهذا القسم من الكود يعمل من التخطيط وليس من داخل القالب عند إضافة الأكواد الخاصة بشريط أحدث الأخبار من داخل القالب وتنتهى من إضافتها سوف تتوجه الى التخطيط وتقوم بوضع أزرار الشبكات الأجتماعية كما سوف نقوم بشرحها فى اخر الموضوع.
<div class='newspic'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://wdbloog.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
<b:section class='container clearfix' id='top-nav' maxwidgets='2' showaddelement='yes'>
<b:widget id='LinkList2' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul id='main-menu' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<b:loop values='data:links' var='link'>
<li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
</b:loop>
</ul></div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear:both;'/>2- سوف تقوم بالبحث عن </head> ثم تقوم بوضع الكود التالى فوقه مباشرتاُ وهذا الكود لن تعدل به اى شئ نهائى
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;display: none;}
#example1{ /*Demo 1 main container*/
width: 540px;height: 32px;border: 0px solid #aaa;
padding: 0px;font-size:17px;text-transform:none;
text-align:right;background-color:transparent;
margin-right: 120px;margin-top: 5px;}
</style>اختار الشكل الذى تريده ثم قم بأخذ الكود الذى يخصة وضع فوق الوسم ]]></b:skin>
الشكل الأول
#top-nav .LinkList {float: left;}
#top-nav .LinkList li {float: left;margin-right: 450px;margin-left: -448px;}
#top-nav .LinkList li a {color: #fff;display: block;padding: 0 10px;line-height: 40px;}
#top-nav .LinkList li a:hover {background: #E83636;}
#top-nav .LinkList:only-child {float: none;text-align: center;margin-top: -20px;}
#top-nav .LinkList .widget-content {display: inline-block;}
div#top-nav {margin-top: -18px;}
.newspic {background:#202020 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRAGg8OSrfBUTEr_eIBBT99qdaYN4JnsR8zA2Mutyx6Ec3Y2poBti_bF0GWIw3P_rTv1EwZCg8rUC6zXhr405OALLk7lNUjFTc22gxe4wfi2BO29ighC5gVTXlJP5eXbxwmEnmsPyif4-s/s1600/12.png) no-repeat top right;width: 980px;margin:0 auto;padding:0 auto;height:42px;color:#fff; margin-left: 0px;margin-bottom: 15px;border-bottom: 2px solid #E83636;border-top: 2px solid #E83636;border-left: 2px solid #E83636;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:right;font-size:17px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#E83636;text-decoration:none;}
الشكل الثانى
#top-nav .LinkList {float: left;}
#top-nav .LinkList li {float: left;margin-right: 450px;margin-left: -448px;}
#top-nav .LinkList li a {color: #fff;display: block;padding: 0 10px;line-height: 40px;}
#top-nav .LinkList li a:hover {background: #04A06B;}
#top-nav .LinkList:only-child {float: none;text-align: center;margin-top: -20px;}
#top-nav .LinkList .widget-content {display: inline-block;}
div#top-nav {margin-top: -18px;}
.newspic {background:#202020 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkbiwJukgnHuM1_pCg43X0L-sIPxT7K_bEmwkxQJgzNPi7tnxRFaOWvkhRAhgwZ9EQcuGcPkmgRWfkBPMqXU41MSW3fMBd502C6ttVdtv6gB6k_ds5zekh1pvnxmcYnrx-T6nbep0qkrY/s1600/12.png) no-repeat top right;width: 980px;margin:0 auto;padding:0 auto;height:42px;color:#fff; margin-left: 0px;margin-bottom: 15px;border-bottom: 2px solid #04A06B;border-top: 2px solid #04A06B;border-left: 2px solid #04A06B;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:right;font-size:17px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#04A06B;text-decoration:none;}
الشكل الثالث
#top-nav .LinkList {float: left;}
#top-nav .LinkList li {float: left;margin-right: 450px;margin-left: -448px;}
#top-nav .LinkList li a {color: #fff;display: block;padding: 0 10px;line-height: 40px;}
#top-nav .LinkList li a:hover {background: #456B8E;}
#top-nav .LinkList:only-child {float: none;text-align: center;margin-top: -20px;}
#top-nav .LinkList .widget-content {display: inline-block;}
div#top-nav {margin-top: -18px;}
.newspic {background:#202020 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIdBam1DlFqbid15P2UpUOEuXs3H8b-7WaotX_Uj7pxfDrVVArV3MDDRBUvRuM1pIChocUrWgpHNpfIexHBWqQY2TDlVQtzEzTmTmWXoqx5GuqyD3cJe2wqr-sgiUn26CJ3Ilxz52LVqIB/s1600/12.png) no-repeat top right;width: 980px;margin:0 auto;padding:0 auto;height:42px;color:#fff; margin-left: 0px;margin-bottom: 15px;border-bottom: 2px solid #456B8E;border-top: 2px solid #456B8E;border-left: 2px solid #456B8E;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:right;font-size:17px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#456B8E;text-decoration:none;}
الشكل الرابع
#top-nav .LinkList {float: left;}
#top-nav .LinkList li {float: left;margin-right: 450px;margin-left: -448px;}
#top-nav .LinkList li a {color: #fff;display: block;padding: 0 10px;line-height: 40px;}
#top-nav .LinkList li a:hover {background: #F39C12;}
#top-nav .LinkList:only-child {float: none;text-align: center;margin-top: -20px;}
#top-nav .LinkList .widget-content {display: inline-block;}
div#top-nav {margin-top: -18px;}
.newspic {background:#202020 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUUZhWGaSvlpnNMCF4dQ9GSIDD4-mAeXYBzfEw7K_e8MKDeuvb_WjJ0ugK-mFi9Leos-p7U4Bjo72kIsxSSTT9VHnUMrZF_j-K-g1Dng3c6zrejY6je74tA8b5o76tugYJlcyL6zCm2nO/s1600/12.png) no-repeat top right;width: 980px;margin:0 auto;padding:0 auto;height:42px;color:#fff; margin-left: 0px;margin-bottom: 15px;border-bottom: 2px solid #F39C12;border-top: 2px solid #F39C12;border-left: 2px solid #F39C12;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:right;font-size:17px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#F39C12;text-decoration:none;}
الشكل الخامس
#top-nav .LinkList {float: left;}
#top-nav .LinkList li {float: left;margin-right: 450px;margin-left: -448px;}
#top-nav .LinkList li a {color: #fff;display: block;padding: 0 10px;line-height: 40px;}
#top-nav .LinkList li a:hover {background: #B2396C;}
#top-nav .LinkList:only-child {float: none;text-align: center;margin-top: -20px;}
#top-nav .LinkList .widget-content {display: inline-block;}
div#top-nav {margin-top: -18px;}
.newspic {background:#202020 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRGWKihssKNCH7ns_-lXo96atE0yqK5uzybzEvVA_pNeEq9Am9zMRPivErH2SJGS5GaDmkxs2P4l1RNXCd3SHUYZVcMhW0EoAqzeirjsPmIJRZcOaghrD8o33-lClLPyeFTRGu7I9n9pv/s1600/12.png) no-repeat top right;width: 980px;margin:0 auto;padding:0 auto;height:42px;color:#fff; margin-left: 0px;margin-bottom: 15px;border-bottom: 2px solid #B2396C;border-top: 2px solid #B2396C;border-left: 2px solid #B2396C;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:right;font-size:17px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#B2396C;text-decoration:none;}
4- بعد اختيار الشكل الذى تريده وإضافة جميع الأكواد الخاصه به داخل القالب سوف تقوم بحفظ القالب ومبروك عليك الإضافة.
انتظر لم ينتهى الشرح بعد
يتبقى فقط إضافة أزرار الشبكات الأجتماعية كما قلنا لكم فى أول الموضوع أن إضافة أول كود من الأكواد القسم الثانى من الكود الأول هو الخاص بأزرار مواقع التواصل الأجتماعى بعد الأنتهى من إضافة الأكواد داخل القالب سوف تتوجة الى التخطيط وسوف تجد قد تم إضافة إضافة جديدة بأسمtop-nav سقوم بأضافة أداة قائمة الروابط بها وضع بها كود شكل موقع التواصل الذى تريدة من موقع font awesome وسوف تقوم بأختيار كود موقع التواصل الذى تريده مثل موقع الفيسبوك سوف يكون هكذا وسوف تقوم بوضع مثل الصور التالية .
وسوف تقوم بحفظ الأداة ومبروك عليك شريط أحدث الأخبار مع أزرار الشبكات الأجتماعية مقدم من مدون ANIS TETCHE
والى هنا ينتهى الشرح اذا واجهتك اى مشكلة فى تركيب شريط الأخبار او تريد التعديل على اى شئ فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)