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

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

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

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

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

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

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

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

الاثنين، 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 تعليقًا:

اضافة ولا اروعة اخي انت الافضل دائما

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

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

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

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

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

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

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

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

Mohon Aktifkan Javascript!Enable JavaScript

إتصل بنا

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