الملاحظات

إضافة شريط آخر الأخبار لقوالب بلوجر

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

 
أدوات الموضوع انواع عرض الموضوع
قديم 29-12-2015   #1
Mohamed Talidi
رابط مشارك
  • التسجيل: December 9
  • المشاركات: 160
  • تقييم المستوى: 6
  • Mohamed Talidi
Mohamed Talidi غير متصل
افتراضي إضافة شريط آخر الأخبار لقوالب بلوجر

إضافة شريط آخر الأخبار لقوالب بلوجر


الأخبار news-ticker-2-style.
الحصول على شريط إخباري لقوالب بلوجر ـ هذه التدوينة تمت بطلباتكم المتكررة عليها وقد تم توفيرها لكم بشكلين مختفلين لذا هي بجودتها احترافية وتفي بالغرض في جلب مستجدات المواضيع بحيث تكسب الصفحة ديناميكية ويسهل للزائر التعرف على المواضيع الحديثة في الموقع، ولمن يريد تركيبها فليتابع الشرح الآتي بعد المعاينتان
شرح طريقة التركيب
1. من القالب ابحث عن ]]></b:skin> وضع كود الشكل المختار فوقه

الشكل الأول

كود PHP:
.ticker {overflowhidden;} .ticker .title {floatrightwidth130pxheight40pxline-height40pxtext-aligncentercolor#FFFFFF; background: #269bd0;} .post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font:13px/1.5em tahoma;background-color: #B565BE;} .ticker .ticker-icon {float: right;margin-right: 10px;} .ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;} .ticker .title h6 {text-align: right; line-height: 40px; font-size: 13px; font-weight: bold; font-family: 'Droid Arabic Naskh',sans-serif; color: #fff;} .ticker .tickercontainer {width: 84%;margin: 0;overflow: hidden;float: right;height: 40px;} .ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;} .ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;} .ticker ul.newsticker li {float: right;padding: 2px;height: 40px;margin-left: 15px;} .ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;} a.post-tag {line-height: 21px;} .newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;} .newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;} .newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;} .newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;} .newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;} .newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;} .newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;} .newsticker li:nth-child(8) a.post-tag{background-color: #479123;} .newsticker .recent-title{display: inline-block;} .ticker ul.newsticker span {margin: 0 0 0 10px;} .ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;} .ticker-section {width: 100%; overflow: hidden; background: #414D58; box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);} .jari { color: #fff; position: relative; right: 5px; }  @media only screen and (max-width:640px){ .ticker .title{display:none} .ticker .tickercontainer {width: 95%;}}  [B]
[/B
الشكل الثاني

كود PHP:
/* CSS Breaking News */ #breakingnews {height: 42px; line-height: 29px; overflow: hidden; background: #FFFFFF; border: 1px solid #E6E4E4; width: 95%; margin: 20px auto;} #breakingnews .breakhead {position:relative;background:none repeat scroll 0 0 #C03032;color:#fff;display:block;float:right;font-size:14px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;    font-family: Droid Arabic Naskh;} #adbreakingnews li a {font:13px/1.5em tahoma;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;} #adbreakingnews li a:hover {color:#00AFAF;} #adbreakingnews {float:right;margin-right:25px;margin-top:6px;} #adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0} i.fa.fa-youtube { color: #EC2423; }i.fa.fa-facebook { color: #4770C5; }i.fa.fa-google-plus { color: #F51518; }i.fa.fa-twitter { color: #269bd0; } li.socright { float: left; padding: 5px 15px; line-height: 33px; margin: 0 0px; background-color:#F7F8F9; font-size: 18px; border-right: 1px solid #EFECEC; }  @media only screen and (max-width:640px){ #breakingnews {margin:20px 0 0 0;margin-right:0;} #breakingnews .breakhead {padding:6.5px 14px;} #adbreakingnews {margin-left:50px;}}  2. ضع الكود التالي فوق </body>

[Bالشكل الأول[/B]

 <
script src='https://googledrive.com/host/0B0LkZloPKBfWSkI0T0R5VkVMQ0U'/> <script>   //<![CDATA[ $(".ticker .jari").each(function () {  var e = $(this).text();  if (e.match("recent")) {   $.ajax({    url: "/feeds/posts/default?alt=json-in-script&max-results=6",    type: "get",    dataType: "jsonp",    success: function (e) {     var t = "";     var n = "<ul>";     for (var r = 0; r < e.feed.entry.length; r++) {      for (var i = 0; i < e.feed.entry[r].link.length; i++) {       if (e.feed.entry[r].link[i].rel == "alternate") {        t = e.feed.entry[r].link[i].href;        break       }      }      var s = e.feed.entry[r].title.$t;      var o = e.feed.entry[r].category[0].term;      n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"     }     n += "</ul>";     $(".ticker .jari").each(function () {      $(this).html(n);      $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');      $(this).removeClass("widget-content").addClass("layout-content");      $(this).find("ul").webTicker();      $("p.trans").each(function () {       var e = $(this).text();       var t = $(this).attr("data-tran");       $("#pages-wrapper *").replaceText(e, t)      })     })    }   })  } else {   $.ajax({    url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",    type: "get",    dataType: "jsonp",    success: function (e) {     var t = "";     var n = "<ul>";     for (var r = 0; r < e.feed.entry.length; r++) {      for (var i = 0; i < e.feed.entry[r].link.length; i++) {       if (e.feed.entry[r].link[i].rel == "alternate") {        t = e.feed.entry[r].link[i].href;        break       }      }      var s = e.feed.entry[r].title.$t;      var o = e.feed.entry[r].category[0].term;      n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"     }     n += "</ul>";     $(".ticker .jari").each(function () {      $(this).html(n);      $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');      $(this).removeClass("widget-content").addClass("layout-content");      $(this).find("ul").webTicker();      $("p.trans").each(function () {       var e = $(this).text();       var t = $(this).attr("data-tran");       $("#pages-wrapper *").replaceText(e, t)      })     })    }   })  } });   //]]> </script> 
الشكل الثاني

كود PHP:
<script type='text/javascript'//<![CDATA[ // Breaking News $(document).ready(function(){var e="http://rissalat-i.blogspot.com/",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>لا نتائج!</span>")},error:function(){$("#adbreakingnews").html("<strong>!خطأ في جلب التغذية</strong>")}})}); //]]> </script>  3. نأتي للمرحلة الأخيرة وهي تخص كود HTML الذي يُظهر الشريط يمكنك وضعه بأي مكان يناسبك تحت الهيدر فوق القائمة إلخ أو يمكنك تجربته بوضعه في أداة Html/Javascript إذا كانت المساحة متواجدة

[Bالشكل الأول[/B]

 <
div class='clear'/> <div class='ticker ticker-section' id='ticker'>    <div>      <div> <div class='content-wrap container-wrapper '>   <div class='title second-color-bg '>         <div class='ticker-icon'> <class='fa fa-globe'/> </div>         <h6>آخر الصيحات</h6>       </div>   <div class='jari'>     recent   </div>        </div> </div>    </div>  </div
الشكل الثاني

كود PHP:
<div id='breakingnews'><span class='breakhead'><class='fa fa-rss'/> آخر الأخبار </span> <div id='adbreakingnews'>... جاري التحميل</div> <ul> <li class='socright'> <a href='#' rel='nofollow' target='_blank'><class='fa fa-facebook'/></a> </li> <li class='socright'> <a href='#' rel='nofollow' target='_blank'><class='fa fa-twitter'/></a> </li> <li class='socright'> <a href='#' rel='nofollow' target='_blank'><class='fa fa-youtube'/></a> </li> <li class='socright'> <a href='#' rel='nofollow' target='_blank'><class='fa fa-google-plus'/></a> </li> </ul> </div
التغييرات الأساسية
* في كود الشكل الثاني بالمرحلة 2 غير http://rissalat-i.blogspot.com/ برابط موقعك
* لتحكم في طول الشريط فالمقاسات محددة بالأخضر في كِلا الكودين بالمرحلة 1
* لتغيير لون مربع العنوان فهو محدد بالأزرق بالمرحلة 1
* إذا لم تظهر لك الأيقونات أضف الكود التالي فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>



Yqhtm avd' Nov hgHofhv gr,hgf fg,[v

 
اقتباس

مواقع النشر (المفضلة)

إضافة شريط آخر الأخبار لقوالب بلوجر



الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع