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

حصريات
فوتوشوب
شروحات
إضافات
قوالب

الصفحة غير موجودة ، 404

الصفحة أو الكلمة التى تبحث عنها غير موجوده على المدونة أو تم حذفها

يمكنك التبليغ عن رابط لا يعمل من هذا الصفحة التبليغ عن رابط لا يعمل

ويمكنك طلب ما تريده من هذه الصفحة الدعم الفنى

أو يمكنك العودة للصفحة الرئيسية أو البحث عن الصفحةو من جديد

العودة للرئيسية

الثلاثاء، 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  وسوف تقوم بأختيار كود موقع التواصل الذى تريده مثل موقع الفيسبوك سوف يكون هكذا    وسوف تقوم بوضع مثل الصور التالية .



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


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



شارك الموضوع ليستفيد الجميع

مواضيع قد تهمك ايضا

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

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

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

شريط أحدث الأخبار اخى ليس بحاجة انى ارساله لك

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

اكي اخي شكراا الك على المساعد

شكراا الك على مساعدتك المتواصل الي دائما

ممكن الشكل الخامس الله يخالك

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

Mohon Aktifkan Javascript!Enable JavaScript


إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم
جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر