4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الثلاثاء، 22 مارس، 2016


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

ولكن اليوم معنا شريط لأحدث الأخبار على مدونتك أو موقعك بشكل احترافى منزلق مع أزرار الشبكات الأجتماعية بشكل أحترافى وسوف نقوم بتفوير 5 الوان  لشريط الأخبار ، ويمكن معاينة من الرابط التالى .


شرح كيفية تركيب شريط أحدث الأخبار على مدونتك تابع :


اولا قم بأخذ نسخة احتياطية من قالب مدونتك لنجنب حدوث اى مشكلة فى تركيب شريط الأخبار.

1- لكل شكل من شريط أحدث الأخبار  يوجد ثلاث أكواد وأول كود هو الكود التالى وهذا الكود يضاف فى المكان الذى تريده وتراه مناسب فى مدونتك ويوجد بهذا الكود قسمين القسم الأول المحدد اللون الأحمر الذى يوجد به  رابط مدونة عالم المدون  http://wdbloog.blogspot.com هذا سوف تقوم بتغييره برابط مدونتك .
القسم الثانى من الكود وهو المحدد باللون الأزرق هو خاص بالشبكات الأجتماعية وهذا القسم من الكود يعمل من التخطيط وليس من داخل القالب عند إضافة الأكواد الخاصة بشريط أحدث الأخبار من داخل القالب وتنتهى من إضافتها سوف تتوجه الى التخطيط وتقوم بوضع أزرار الشبكات الأجتماعية كما سوف نقوم بشرحها فى اخر الموضوع.

<div class='newspic'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://wdbloog.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //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 != &quot;&quot;'><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>

3- ناتى الأن لمرحلة الشكل الذى تريده

اختار الشكل الذى تريده ثم قم بأخذ الكود الذى يخصة وضع فوق الوسم ]]></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://2.bp.blogspot.com/-9nPaAzhjH_M/Vu_6qr1PGzI/AAAAAAAARKM/A8axOvSAX6oJVl9dYjrziW2uVXcss49Ug/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://2.bp.blogspot.com/-MtHjUR-Np04/VvA3gYVK-ZI/AAAAAAAARK8/3Hfs7AHm1xEJcIiMiJr8V1eOrYbq-yFyg/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://2.bp.blogspot.com/-YXIXHygr1aY/VvAzNXNMupI/AAAAAAAARKg/srjuJjKJU-0aLWQHvFLavrg8IpU1UHvvQ/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://1.bp.blogspot.com/-3e6IQmeUHk0/VvA0EphvhMI/AAAAAAAARKo/HZHbCeIsL7c5FCERzQW-yZNmNSD8zRWzQ/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://4.bp.blogspot.com/-ubkCf0d6S8k/VvA2mJWB3UI/AAAAAAAARK0/RkBYFri4eng4KWq8zj4sO8R16FzmRaAKQ/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  وسوف تقوم بأختيار كود موقع التواصل الذى تريده مثل موقع الفيسبوك سوف يكون هكذا    وسوف تقوم بوضع مثل الصور التالية .



وسوف تقوم بحفظ الأداة ومبروك عليك شريط أحدث الأخبار مع أزرار الشبكات الأجتماعية مقدم من مدون عالم المدون .


والى هنا ينتهى الشرح اذا واجهتك اى مشكلة فى تركيب شريط الأخبار او تريد التعديل على اى شئ فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك التدوينه
تنبية هام

هناك 17 تعليقًا :

  1. اضافة جميل اخي ممكن ترسلها لي على الخاص

    ردحذف
    الردود
    1. اخى يمكنك اضافتها كما فى الشرح دون الحاجة الى أنه ترسال اليك

      حذف
    2. ما المشكلة التى تواجهك

      حذف
  2. الردود
    1. شريط أحدث الأخبار اخى ليس بحاجة انى ارساله لك

      حذف
    2. ان لم تسطتع اضافتها فقد اطلب ذلك وانا سوف اقوم بإضافتها لك اخى

      حذف
    3. اكي اخي شكراا الك على المساعد

      حذف
    4. فى خدمتك دائما اخى

      حذف
    5. شكراا الك على مساعدتك المتواصل الي دائما

      حذف
  3. ممكن الشكل الخامس الله يخالك

    ردحذف
  4. اطلب مساعدة لقد أتممت تركيب الاكواد المذكورة و اعددت روابط صفحاتي على المواقع الاجتماعية لكن عند المعاينة يظهر الشريط فارغ من كل شي ؟؟

    ردحذف

شارك بتعليق على

مواقع صديقة سوف تفيدك
brief useful MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG