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

الاثنين، 28 مارس، 2016


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




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


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

1- قم بالبحث عن  ]]></b:skin> ثم تقوم بوضع الكود التالى فوقه مباشرتاُ ( قبله )

#top-nav12 .LinkList {float: left;}
#top-nav12 .LinkList li {float: left;margin-right: 450px;margin-left: -448px;}
#top-nav12 .LinkList li a {color: #000;display: block;padding: 0 10px;line-height: 40px;}
#top-nav12 .LinkList li a:hover {background: #E83E3B;}
#top-nav12 .LinkList:only-child {float: none;text-align: center;margin-top: -40px;}
#top-nav12 .LinkList .widget-content {display: inline-block;}
div#top-nav12 {margin-top: -22px;}
.ticker {overflow: hidden;}
.ticker .title {float: right; width: 120px; height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; background: #f2f2f2;border-left: 1px solid #ccc;}
.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: #E83E3B;}
.ticker .ticker-icon {float: right;margin-right: 10px;color: rgb(0, 0, 0);}
.ticker .ticker-icon i {margin-left: 6px;display: inline-block;font-size: 16px;line-height: 8px;}
.ticker .title h6 {float: right;padding-right: 0;padding-left: 17px;border-right: 0;font-size: 16px;color: #000;font-family: ge_ss_tvbold !important;}
.ticker .tickercontainer {width: 70%;margin: 0;overflow: hidden;float: right;height: 59px;margin-top: -19px;border-left: 1px solid #ccc;}
.ticker .tickercontainer .mask {position: relative;top: 0px;overflow: hidden;height: 62px;}
.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: #000000;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;font-family: ge_ss_tvbold !important;}
a.post-tag {line-height: 21px;}
.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: #ffffff;box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;margin-top: 10px;}
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
.ticker ul.newsticker a:hover {color: #E83E3B;text-decoration: none;}

2- قم بالبحث عن  </body> ثم تقوم بوضع الكود التالى فوقه مباشرتاُ ( قبله )

<script src='https://cdn.rawgit.com/cnblogger/cn3u/master/Ticker.js'/>
<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>

3- اخر كود من الإضافه الكود التالى يضاف فى المكان الذى تريده وتراه مناسب فى مدونتك .

<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'> <i class='fa fa-newspaper-o icon'/> </div>
<h6>أخبار حصرية</h6>
</div>
<div class='jari'>recent</div>
</div></div></div></div>
<div style='clear: both;'/>
&#160; <b:section class='container clearfix' id='top-nav12' maxwidgets='2' showaddelement='yes'>
<b:widget id='LinkList2' locked='false' title='' type='LinkList' visible='true'>
  <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
<div style='clear: both;'/>

4- يوجد بهذا الكود قسمين القسم الأول المحدد اللون الأحمر هو الكود الخاص بأظهار شريط الأخبار ، القسم الثانى من الكود وهو المحدد باللون الأزرق هو خاص بالشبكات الأجتماعية وهذا القسم من الكود يعمل من التخطيط وليس من داخل القالب عند إضافة الأكواد الخاصة بشريط اخر الأخبار من داخل القالب وتنتهى من إضافتها سوف تتوجة الى التخطيط وسوف تجد قد تم إضافة إضافة جديدة بأسم top-nav12 بهذه الأداة إضافة قائمة الروابط سوف تقوم وبوضع بها كود شكل موقع التواصل الذى تريدة من موقع font awesome  وسوف تقوم بأختيار كود موقع التواصل الذى تريده مثل موقع الفيسبوك سوف يكون هكذا  <i class="fa fa-facebook"></i> وسوف تقوم بوضع مثل الصور التالية .


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


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

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

  1. ممتاز عالم المدون

    ردحذف
  2. اضافة ولا اروعة اخي انت الافضل دائما

    ردحذف
  3. السلام عليكم اخي مشكور منك بس محتاج الشريط الي بهذه القالب اذا ممكن
    http://wdbloog.blogspot.com/2016/04/mega-mag.html

    ردحذف
  4. لقد اتممت المراحل وتم وضع الاكواد حسب ما امليت لكن الشريط لايطهر به شي يا اخي الرجاء المشاعدة في حل المشكل

    ردحذف
    الردود
    1. جرب استخدام هذا https://wdbloog.blogspot.com/2016/05/blog-post_5.html

      حذف
  5. أخي انا لدي اضافة مثلها نوعا ما في الاصل أتت مع القالب ولكن لا يتحرك كلام بها أو أي شئ
    رابط المدونة للمعاينة alshabh4download.blogspot.com
    اردت أن احذفها واضف هذه الاضافة الرائعة من جديد
    مع العلم اني بحثت عن الاضافة الخاصة بالقالب لدي علي الانترنت لاركبها من جديد ولكن لا جدوي فهل من حل أرجو الرد وشكرا

    ردحذف
  6. أسف علي الرابط الخارجي يمكنك حذف التعليق لكن أرجو منك الرد

    ردحذف
    الردود
    1. تم الرد عليك اخى فى موضوع (شريط أخر الأخبار المتحرك الأصدار التانى)

      حذف

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

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