اضافة شريط متحرك يضم اخر اخبار المدونه بثلاثة الوان احترافيه

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

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

1- من  لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
</head>


وقبله تماما قم بلصق احد اكواد الالوان التاليه حسب رغبتك



كوداللون الازرق
شريط متحرك يقوم بعرض اخ اخبار المدونه
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>


كوداللون الاحمر
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>


كوداللون الاخضر
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;
line-height:37px;;overflow:hidden; margin-bottom: 20px; 
max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>


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

<div class='main-outer'>

ونلصق الكود التالي قبله تماما / فوقه

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://alb33dani.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }              
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       } }); }); 
//]]>
</script>
</b:if></b:if>


الان قم باستبدل الرابط التالي http://alb33dani.com برابط مدونتك 
ستجد الرابط في السطر التاسع من الكود السابق باللون الازرق

وبالاخير قم بحفظ القالب والف مبروووك عليك الاضافه

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

  1. غير معرف21/11/13 17:36

    مشكور على هذة الاداة الرائعة وانا متابع اول بأول لتدوينانتك الرائعة الى الامام أخي جلال

    ردحذف
    الردود
    1. الله يحييك اخي ,, شكرا لحسن متابعتك وطيب كلامك

      حذف
    2. اخي جلال تم الاضافه الحمد لله ولاكن لا تظهر الاخبار او المواضيع الجديده؟؟
      ما السبب

      حذف
    3. السلام عليكم اخي الكريم
      كيف استطيعانشاء الاضافات على جانبي المدونة( الايمن والايسر) وليس على جانب واحد

      حذف
    4. مش موجود <div class='main-outer'

      حذف
  2. راااااااااااااااااااااااااااااااااااااااااااااااااااااااائع اخى البعدانى جيد انى ثانى معلق على هذة التدوينة المباركة الرائعة ساضيف الزرقاء حتى تتماشى مع مدونتى

    ردحذف
    الردود
    1. اشكرك اخي على حسن متابعتك ,, مرورك دائما يسعدني ,,, اتمنى لك التوفيق

      حذف
  3. غير معرف21/11/13 18:09

    أخي جلال عملت كل اشي وبعطيني اخر اشي كلمة loading .... وما بتتغير ما هي المشكلة ؟

    ردحذف
    الردود
    1. اخي تاكد من انك اضفت الكود الثاني بطريقه سليمه ,, لان الاضافه تعمل بكفائه ومجربه على اكثر من قالب

      حذف
    2. يجب عليك تغيير رابط الموقع http://alb33dani.com الى موقعك
      في الكود الاول

      حذف
  4. بحثت في القالب عن هذه الأداة لكني لم أجدها main-outer

    ردحذف
    الردود
    1. لقد ظهرت شكرا على الإضافة
      http://www.tout-maroc.tk/

      حذف
  5. شكرا على كلامك الطيب اخى

    ردحذف
  6. السلام عليكم اخي جلال اريد إستفسارك في دومين .ml مجاني لفترة محدودة في احد المواقع هل الدومينات المجانية جيدة اقصد الارشفة و SEO

    ردحذف
    الردود
    1. أخي في مدونتنا قمنا بتركيب هذا النطاق وانا اعتقدت انه ليس جيد لانه يمنع اعلانات جوجل ادسنس فا نصيحة لأخ لك لا تركبه فنحن اعدنا نطاق blogspot

      حذف
  7. السلام عليكم اخي شرح رائع لكن هناك عندي مشكلة لم اجد الكود الاخير كود الهيدر

    ردحذف
    الردود
    1. اخي اذا كنت تستخدم قالب المحترف فهذا الكود موجود فيه
      <div class='main-outer'>

      لذا قم بالتاكد من البحث او اذا كنت تستخدم قالب اخر فقم بوضع رابط مدونتك للمعاينه

      حذف
    2. لا لا استخدم قالب المحترف
      مدونتي http://goo.gl/qmBLDE

      حذف
    3. حسنا اخي قم بالبحث عن الكود التالي
      <div id='container'>

      والصق كود الاضافه قبله تماما / فوقه

      حذف
  8. شكراااا لكم إخوتي لكن المشكلة في ظهور كلمة loading تابع المثال من هنا :


    http://th3proacademy.blogspot.com/


    ارجوو الحل

    ردحذف
  9. اخى الكود التانى مش موجود فى القالب

    ردحذف
    الردود
    1. قم بالبحث عن الكود

      <div id='main'>

      والصق كود الاضافه قبله تماما (فوقه)

      حذف
  10. اخي تاكدت من تطبيق الخطوات وتضهر لي لودينغ!

    ردحذف
  11. السلام عليكم ورحمه الله وبركاته .. أشكرك جزيل الشكر أخى جلال على هذه الاضافه المميزة للغايه .. ولكن لدى مشكلة بسيطه وهى عدم توافر هذا الكود div class='main-outer'> داخل القالب المستخدم وللعلم القالب المستخدم هو قالب "ليوماجازين" الذى تفضلت بعرضه مجانآ لنا ونشكرك كثير على ذلك (h) .... أنتظر ردك اخى . دمتم بود :)

    ردحذف
    الردود
    1. وعليك السلام ورحمة الله وبركاته اشكرك اخي
      بالنسبه للكود قم بالبحث عن الكود التالي
      <div class='loadSmooth' id='content'>

      والصق كود الاضافه قبله تماما

      حذف
  12. اخي جلا ل لم تجبني في امر الدومين .ml الجاني اللي قلت لك (b)

    ردحذف
    الردود
    1. اخي والله لا اجد لك جواب شافي لاني لم اجربه

      حذف
  13. السلام عليكم اخ جلال ممكن توضح كيف اضافة التعليق كـ مجهول للمدونة :) ارجو الرد ..

    ردحذف
    الردود
    1. إدهب الى لوحة التحكم ثم الإعدادات ثم مشاركات وتعليقات ثم حدد العلامة على أي شخص ء بما في ذلك المستخدمون المجهولون ثم حفظ الإعدادات هذا كل شيء :>)

      حذف
    2. شكرا لك اخي محمد

      حذف
  14. شكرا اخي جلال المهم والله محتاج دومين ارجو ان تعمل دروس حول هدا الموضوع

    ردحذف
    الردود
    1. ادخل على هذه الموقع وعمل دومن مجاني ml
      http://www.point.ml/en/index.html?lang=en
      :)

      حذف
  15. يا اخي انا اعرف الموقع المشكل في ان الدومينات المجانية لا تعترف بها غوغليا اخي انا اعرف الموقع المشكل في ان الدومينات المجانية لا تعترف بها غوغل

    ردحذف
    الردود
    1. صح :>) والدومين المجاني ضد سياسة غوغل ادسينس

      حذف
  16. السلام عليكم اهلا بك اخى جلال
    لم استطيع الوصول الى الكود الثانى فى القالب
    وهذه هى المدونه
    conquerarab.blogspot.com

    ردحذف
    الردود
    1. قم بالبحث عن الكود التالي
      <div id='content-wrapper'>
      والصق كود الاضافه قبله تماما / فوقه

      حذف
  17. السلام عليكم أخي جلال انا محتااااااااااجك ضرووووووررري و في الحال

    لقد تم قبولي في قوقل ادسنس و تبقى اكمال الإجراءات

    فممكن تشرح لي الخطوة الأولى ( الوحدات الإعلانية ) فما المقاسات المناسبة و ماذا يقصد بالقنوات المخصصة ؟؟

    بالله عليك ان تسرع

    وهذه هي مدونتي

    http://world-k.blogspot.com/

    ردحذف
  18. انت فين تبقى لي شفرة الإعلان اين اضعها بلضبط

    ردحذف
    الردود
    1. اخي الكريم قم بنسخ شفرة الاعلان وضعها اينما شئت في المدونه حسب رغبتك

      حذف
  19. شكرا أخي = ممكن مساعدة أخرى

    عند اضافة من اكواد HTML/JavaScript مثلا لترقيم الصفحات و سهم الذهاب لأعلى - فتتم بصورة جيدة

    ولكن المشكلة في بيكون عندها ايقونة لا استطيع إخفائها

    ولفهم المشكلة جيدة ادخل مدوني و انظر إلى الجانب الأيسر

    ستجد كثير من الأكواد الفارقة وهي أصلا تبع كود ترقيم الصفات و سهم الزهاب لأعلى

    كيف أخفيها ؟؟؟؟؟؟

    المدونة http://world-k.blogspot.com/

    ردحذف
  20. ممكن تصمملي منتدى vb اخي البعداني ارجوك حاولت بس ما عرف وتركبلي فيه استاي ترادنيت v2

    ردحذف
  21. عندما اريد ان اضيف كود css يقول لي خطا


    شكراُ علىّ كل حال

    ردحذف
  22. بعد وضع الكود يقول لى لودنج مع العلم وضعت الكود صحيح

    ردحذف
    الردود
    1. ما شاء الله عليك تم بالفعل
      http://conquerarab.blogspot.com/

      حذف
    2. شكرا لك اخي في شي اخير قم بالبحث عن الكود التالي
      #beakingnews{width:980
      وغير قيمته من 980 الى 950 ليتناسق مع عرض القالب

      حذف
    3. تم حل المشكلة من هذا التعليق شكراً لكم x-) hihi

      حذف
  23. إخوتي لدي المشكلة في ظهور كلمة loading في شريط أحدث آخبار تابع المثال من هنا :

    http://basmat-android.blogspot.com/

    أرجواالحل

    ردحذف
  24. اخي جلال ,

    هل يوجد تعديل ليصبح الشريط متحرك ؟

    ردحذف
  25. شــكراً عـلـى الأضـافـة .. لـكن أخـي تـظـهـر فـقط Loading... دون تغير .. ومـتأكــد 100% أنـ الـتـركيــب صــحيح . ممـكن حــل ؟.

    ردحذف
  26. شــكراً شــكراً .. أخــر طـلـب .. أخـي .. أريــد عـرض كـل الـتـسمـيات فـي السلايدشو لــيس فـقط تـسـمـية واحــدة بـل عـدة تــسـمـيات ؟.

    ردحذف
    الردود
    1. للاسف اخي هذا السلايد شو يعتمد على عرض مواضيع قسم واحد من اقسام المدونه

      حذف
  27. السلام عليكم اخي جلال تم تركيب بشكل سليم لكن الكتابة غير كاملة تظهر فقط أحدث و الكتابة الثانية الأخبار لا تظهر http://star-elibdaa.blogspot.com

    ردحذف
    الردود
    1. قم بالبحث عن الكود التالي
      </head>

      والصق الكود التالي قبله تماما

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1' type='text/javascript'></script>

      حذف
  28. السلام عليكم و رحمة الله وبركاته

    جميل أخي شكرا جزيلا لك

    تفضل بزيارة مدونتي :)'!

    http://th-informatics.blogspot.com/

    ردحذف
    الردود
    1. وعليك السلام اخي شكرا لمرورك

      حذف
  29. مرحبا أخوي .. اضفت الشريط بعد معاناة بس يطلعلي "لودينغ" ومافي اخبار ؟!!

    ردحذف
  30. أخوي jalal ما نفع الكود .. ممكن كود آخر

    ردحذف
    الردود
    1. الاضافه تعمل بكفائه ولكنك لم تقم باستبدال http://www.alb33dani.com رابط مدونتك

      حذف
  31. كيف استبدل رابط مدونتي برابط مدونتك .. بحثت عن الكود ولم اجده [-(

    ردحذف
    الردود
    1. خلاص أخوي عرفت استبدله .. مشكوووور يا فناان .. لكن هل استطيع تكبير حجم الخط في هذا الشريط ام هو اساسي لايتغير؟؟

      حذف
  32. أخي جلال ويش صار بالنسبة للقالبي وشكرا :-?

    ردحذف
    الردود

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

      حذف
  33. أخي جلال ,
    انا طبقت كل الشرح بس سويت معاينة من "قالب" و لم تظهر المواضيع , فقط "loading"
    ما المشكلة :-?

    مع اجمل تحياتي.

    ردحذف
  34. و لقد طبقت الرسالة التي ارسلتها انت في الاعلى




    و لم يتغير شيء ;(

    ردحذف
  35. يمكن ان تراسلني على Gmail

    alm3shi07@gmail.com

    ردحذف
  36. لقد تم حل المشكلة
    (في الحقيقة لم احلها لكن غيّرت قالب مدونتي)
    لأنني مللت من شكل القالب القديم مع احترامي :-s

    ,, عندي طلب بسيط يا جلال

    هل تقبل ان آخذ قليلا من تدويناتك و أضعها في مونتي مع ذكر مصدر التدوينة ,,, هكذا


    المصدر : مدونة جلال البعداني



    ؟؟؟

    ردحذف
  37. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  38. ظهر عندى ولكن المواضيع لم تظهر
    مدونتى
    http://cool-bas-mastol.blogspot.com/

    ردحذف
    الردود
    1. قم بالبحث عن الكود التالي
      </head>

      والصق الكود التالي قبله تماما

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1' type='text/javascript'></script>
      حذف

      حذف
  39. اخي كيف اغير اللون الى اللون البرتقالي

    ردحذف
    الردود
    1. اخي قم باستخدام الكود الاول وقم بالبحث عن الكود التالي
      #21b8ff
      واستبدله هذا الكود #FFA221

      هذا كل شي اخي

      حذف
  40. شكرا اخي على هذا الشرح المميز

    ردحذف
    الردود
    1. العفو اخي ( شكرا لمرورك العطر)

      حذف
  41. كيف تظيف الأخبار أخي

    ردحذف
  42. شكراً اخي جلال

    ردحذف
  43. أخي لقد قمت بكل تعليمات و مع ذلك لم تعمل
    http://monenetwork.blogspot.com/

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

    ردحذف
    الردود
    1. وعليك السلام ورحمة الله وبركاته
      اخي الكريم الاضافه الذي تريدها ستحتاج الى تنسيق
      عموما اذا اردت اضافتها قم بالبحث عن الكود التالي
      </div><!-- tag penutup tempat Breaking News--

      والصق كود الايقونات قبله تماما
      ولكن يجب عليك ان تجعل محاذاة الايقونات الى اليسار

      حذف
  45. شكرا لك :p تم الأمر بنجاح

    ردحذف
  46. http://bestvio.blogspot.com

    ردحذف
  47. href="http://bestvio.blogspot.com/" target="_blank">BEST VIDEO

    ردحذف
  48. مرحبا بك مجددا ...
    هناك مشكلة صغيرة في الاضافة اتمنى يكون عندك الحل :-d
    الاضافة تظهر في الصفحة الرئيسية فقط ولا يظهر داخل لموضوع
    حاولت تجريب الاضافة على قالب اخر ولكني وجدت نفس المشكلة .. ;-(

    ردحذف
  49. *أفضل مدونة البعداني*

    ردحذف
    الردود
    1. شكرا لطيب كلامك اخي ,,,, نورت

      حذف
  50. مرحبا اخي اريد ان اجعل عرض شريط الاخبار اصغر كيف

    ردحذف
  51. الرجاء اجابتي

    ردحذف
    الردود
    1. ارجو المعذره اخي
      قم بالبحث ن الكود التالي beakingnews{width:980px وغير قيمته حسب رغبتك

      حذف
    2. شكرا على ردك اخي :)

      لكن انظر يظهر في الوسط http://tunisia-hacks.blogspot.com

      حذف
    3. قم بالبحث عن الكود التالي
      #beakingnews{width:680px;margin:0 auto;

      واسبدله بهذا
      #beakingnews{width:680px;

      حذف
  52. السلام عليكم ورحمة الله وبركاته ..
    أريد أن تصبح صفحة التدوينات عندي بملئ الشاشة ..
    ولا أريد الطريقة لأني أعرفها ولكني أريد الكود جاهز .. والمكان المراد وضع الكود فيه ..
    تفضل راب معينة القالب الذي أريد عمل الطريقة عليه
    http://test3-a7mad-ragab.blogspot.com/
    أنا أعلم انشغالك ولكني أريد الكود بأسرع وقت ممكن
    حياك الله

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      اخي الكريم سوف اعطيك كود يغنيك عن كل الجهد الذي سوف تبذله
      قم بالبحث عن الكود التالي

      </head>

      والصق الكود التالي قبله تمام

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      .main-inner .column-left-outer {display: none;}
      .h-post {width:1030px;}
      .post-outer {width: 1000px;}</b:if>


      الان قم بالحفظ والمعاينه

      حذف
    2. جربت الكود ومنفعش .. ممكن تحاول تاني :-?

      حذف
  53. أزال المؤلف هذا التعليق.

    ردحذف
  54. اسف اخي على الازعاج لكن لكن خليته 640 بيكسل الشريط توقف عن العمل

    http://www.gulfup.com/?6Y78y7

    ردحذف
    الردود
    1. اخي قم بزيادة العرض لان الحد الادنى له 700

      حذف
  55. :>) شكرا أخي منذ وقت طويل و أنا ابحث عنها بصراح جميلة جدا

    ردحذف
    الردود
    1. العفو اخي ,,,, شكرا لمرورك العطر

      حذف
  56. السلام عليكم يا أخي رابط تحميل قالب مدونتي http://www.fileswap.com/dl/OcsgltDx6/template-1748902639171608010_(1).xml.html
    المرجو منك اضافة هدا الشريط
    وايضا أريد منك تعديل أقسام وروابط القائمة العلوية اسفل الهايدر
    و كل ما ليس في محله

    ردحذف
  57. لم تشتغل صديقي :)
    حتى اذا غيرت رابط برابطي
    يجيني Loading... يعني لم يتغير ولم ينجح

    ردحذف
    الردود
    1. قم بالبحث عن الكود التالي
      </head>

      والصق الكود التالي قبله تماما

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1' type='text/javascript'></script>

      حذف
  58. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  59. صدقيه تم خرج شريط الاخبر لكن كيف اكتب الاخبره ;(( ;-(

    ردحذف
    الردود
    1. اخي شريط الاخبار هذا تلقائي ,,, بمعنى انه سيقوم بعرض اخر اخبار المدونه تلقائيا دون الحاجه الى ادراجها يدويا

      حذف
  60. تسلم اخي
    ممكن طريقة وضع نفس الاضافة لكن المحتوى تكون كتابة اضعها انا ( يعني بدل ما تظهر اخر المواضيع ) تظهر كتابة معينة اضعها انا )

    ردحذف
    الردود
    1. الله يسلمك ,,,استخدم هذا الكود بدلا من الكود الثاني
      <div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
      <div id='recentpostbreaking'><marquee direction='right' height='27px' scrolldelay='100' width='670px'>
      <font color='#857D59' style='font-size: 15px; font-family: GESSTwoLight;'>اكتب هنا النص الذي تريده</font>
      </marquee>
      </div>
      </div>

      حذف
    2. بس اريد اضافة اكثر من نص تظهر واحدة بعد الاخرى و تتغير بنفس التأثير الموجود بموضوعك

      حذف
    3. في انتظارك اخي
      ممكن طريقة اضافة اكثر من نص,تتغير من نص الى اخر باتثير جميل

      حذف
    4. اخي ارجو المعذره لاني لا اجد لك جوابا شافي

      حذف
  61. اخي عندي مشكلة ف القالب بتاعي بعد ما يحمل مش بيستني لحظة ويجي محولني ع رابط مدونتك انت اللي هو ده http://www.alb33dani.com/ :/ ايه الحل كده اخي ؟

    ردحذف
    الردود
    1. اخي هذا لانك قمت بحذف حقوق التطوير ,,, لذا يرجى اعادة تركيب القالب مع عدم حذف الحقوق

      حذف
  62. جزاك الله خيرا على عملك لكن هناك مشكلة عدم ظهر العناوين بدل العناوين تظهر error feed ممكن حل بسرعة اخي الله يرحم والديك

    ردحذف
  63. أخي قمت بتطبيق الشرح لكن عند المعاينة وجدت كلمة أحدث الأخبار وبجانبها loading...

    ردحذف
  64. اخي بخصوص البحث عن الكود الثاني لم اجد اي كود قد طرحته والقالب الذي استخدمة هذا: http://centershafei.blogspot.com/
    ممكن جواب سريع لانه لم اجد الى هذا الشريط الاحترافي مع فائق الشكر والثناء

    ردحذف
  65. غير معرف16/4/14 18:51

    شكرا يا اخ جلال

    ردحذف
  66. غير معرف17/5/14 00:59

    الشريط ظهر بس مفيش أى أخبار مع إنى ناشر مواضيع فى المدونة وظاهر فى الشريط Loading...

    ردحذف
  67. شكراااااااااااااااا للشرح
    انا متابعه لمدونتك ومن اشد المعجبين بيدى اضيف هذه الاداة بس تانى كود مش لاقيه ومش عارفه نوع القالب بتعى http://dakorati.blogspot.com/

    ردحذف
  68. شكرا على الاداة ولكن هي ظهرت لكن الاخبار تظهر هكذا loding... في حل ؟

    ردحذف
  69. ازاى اغير الكلام الى فى الشريط؟؟

    ردحذف
  70. السلام عليكم اخي انا طبقت هدا الشرح لكن الشريط يظهر الا في الصفحة الرئيسية كيف اجعله يظهر في كل الصفحات والتدونات
    وجزاك الله خيرا

    ردحذف
  71. شكرا لك اخي على هته الاضافة :d

    ردحذف
  72. حبي ليش من ابح عن هذا ميطلعلي

    ردحذف
    الردود
    1. الوووووووووووووووووووو

      حذف
  73. مشكور لكن لا اجد الكود الثانيmain-outer
    هل من حل المرجوا الرد

    ردحذف
    الردود
    1. اذا لم تجده قم بالبحث عن الكود التالي <div id='main-wrapper'> والصق كود الاضافه فوقه تماما

      حذف
  74. اخي لمادا لم ترد على سؤالي هل هناك خطب ما

    ردحذف
    الردود
    1. اخي الكريم ارجو المعذره لاني لم انتبه لتعليقك
      عموما اذا اردت ان يظهر الشريط في كل صفحات المدونه قم بحذف السطرين التاليين (ستجدهما في اول سطرين من اكواد الاضافه ) من بداية اكواد الاضافه
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>

      وايضا قم بحذف الاقفال التالي الذي ستجدهم اخر الكود
      </b:if></b:if>

      هذا كل شي

      حذف
  75. السلام عليكم اخي الكريم جزاك الله خيرا
    شكرا لك اخي
    المعذره

    ردحذف
  76. شكرآآ على شرحك الرائع ((جلال البعداني)) ^___^

    ردحذف
  77. انا لم افهم لحد الان معنى قبله تماما

    ردحذف
    الردود
    1. =)) =)) =)) =)) =)) =))
      تفضل اخي قبله تماما يعني
      قبل/فوقه الكود الي نبحث عنه

      حذف
  78. شكرا أخي على الاداة
    و هذا رابط مدونتي التقنية
    lbataltech.blogspot.com

    ردحذف
  79. غير معرف28/6/14 02:44

    (f)

    ردحذف
  80. غير معرف28/6/14 02:45

    (h)

    ردحذف
  81. أخى الكود الأخير بحثت عنه ولم أره

    ردحذف
    الردود
    1. ابحث عن الكود التالي والصق كود الاضافه قبلها <div class='slidshow'>

      حذف
  82. أخى نجحت الإضافة ولكن يقول لى Loading... ولم تظهر الأخبار ماذا أفعل؟

    ردحذف
    الردود
    1. قم بالبحث عن الكود التالي
      </head>

      والصق الكود التالي قبله تماما

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'type='text/javascript'></script>

      حذف
  83. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. أزال المؤلف هذا التعليق.

      حذف
  84. أخى يقول لى خطأ أثناء تحليل XML .. لقد تعبت .. ماذا أفعل أيضاً ؟؟!!!

    ردحذف
  85. يا جلال البعداني
    سؤال انا وضغت الشريط لكن المشكله لا يضهر شيء فقط كلمه Loading...
    ما الحل رابط المدونه @ -)
    Nserbasra.blogspot.com
    اتمنى الرد

    ردحذف
    الردود
    1. (o) (o) (o) (o) (o) (o) (o)
      واااااااااااااااااااااااااااااااو عملت الاضافه انت عالم يا بعداني عـــــــــــــالم
      شوووووفوا الاضافه 8-) 8-) 8-) 8-) 8-) 8-) 8-)
      Nserbasra.blogspot.com

      حذف
  86. اخي الكـود الثاني عندمـا ابحث عنـة لا يوجـد :3

    ردحذف
    الردود
    1. ابحث عن رسائل المدونه الالكترونيه و سوف تجد الكود فوقه تماما

      ملاحضة : يوجد لكل مجموعه من القوالب كود خاص (o)

      حذف
  87. غير معرف26/7/14 16:47

    سلام عليكم اخواني اني جديد علة مدونة خليت الشريط بس ماعرف كيف انزل بي الخبر ارجو ان تعلموني شكري خاص الي صاحب هذة المدونة ارجو الرد

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      اخي الكريم هذه الاضافه تلقائيه بمعنى انها ستقوم بعرض اخر اخبار مدونتك بشكل اوتوماتيكي دون الحاحه الى ادارجها يدويا ,,, كل ماعليك هو اضافة الاكواد كما في الشرح اعلاه وفي الكود الاخير ستجد رابط مدونتي http://alb33dani.com فقط قم باستبداله برابط مدونتك وقم بحفظ القالب وسترى انها يقوم بعرض مواضيع مدونتك تلقائيا

      حذف

  88. السلام عليكم..
    شكرا على هذا المقال التعليمي..لدي سؤالين اثنين:
    1- هل من رابط ديمو يعرض النتيجة التي سيتم الحصول عليها.
    2- ما نوع الأخبار التي سيتم عرضها عبر الشريط..هل عناوين مقالات المدونة..أم يمكن إدخال عناوين مشخصة
    شكرا..وعيدكم مبارك سعيد
    مدونة أونزيم

    ردحذف
    الردود
    1. وعليكم السلا م ورحمة الله
      1- http://liomagazine-5color-by-albaadani.blogspot.com/
      2- يتم عرض عناوين مواضيع المدونه تلقائيا بدون الحاجه الى ادخالها يدويا

      حذف
  89. هناك مشكلة في الخطوة الثانية يرجى الحل

    http://plivesport.blogspot.com/

    ردحذف
    الردود
    1. اخي يرجى ايضاح ماهي المشكله بالظبط

      حذف
  90. أخي الاداة رائعة جدااااااااااااااا ولكن لها مشكلة لماذا يوجد فارق ببنها وبين المدونة ارجو الدخول علي الصورة للفهم أكثر http://im87.gulfup.com/mjyYsA.png وارجو ان توضح لي كيف احل تلك المشكلة وشكراا

    ردحذف
  91. اخى انها اضافة رائعة لكنها تظهر ولا ياتى اى موضوع

    ردحذف
  92. لا تضهر عندي head

    ردحذف
  93. ارجو الرد لا يظهر اى موضوع عندما اضفها @-)

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

    ردحذف
  95. الاضافة تظهر فى الصفحة الرئيسية فقط ؟ ما الحل للظهور فى كل الصفحات

    ردحذف
  96. انا مش عارف افعل الشريط لاخر الاخبار بالون الازرق
    بيظهر كلمة loding
    اعمل ايه ؟
    ده رابط مدونتي
    http://skytecheg.blogspot.com/

    ردحذف
  97. جزاك الله خيرا ممكن تكبير الخط عرض المواضيع

    ردحذف
  98. بسم الله ماشاء الله ربنا معاك والله شغل 100% حلو :))

    ردحذف
  99. جزاك الله خيرا اخي الاضافة رائعة لكن المشكلة صغر حجم خط الشريط كيف يتم تغيره ؟لقد تعبنا في البحث من اجل كيفية تغير حجم الخط المرجوا الرد
    بارك الله فيك وهدا رابطنا http://www.aimhmaroc.blogspot.com/

    ردحذف
  100. جلال عندما يشتغل الشريط شغال يوقف السلاي شو الحل واذا حذفت الكود الخاص بالشريط يتوقف الشريط والسلايد يشتغل

    ردحذف
  101. شكرا اخي بس الكود الثاني مايظهر عندي div class='main-outer؟؟؟؟؟؟؟؟؟؟؟؟؟

    ردحذف
  102. السلام عليكم اخى انا ركبت الكود فى القالب و كتبت رابط مدونتى بدل رابط مدونتك وحفظت الكود لكن ما بيظهرلى اخبار المدونه
    ولكن بيظهر كلمه Loading...
    ارجوا الحل

    ردحذف
  103. غير معرف4/5/15 01:24

    اخي جلال انا مركب على مدونتي احد قوالبك اي تصميمك
    واريد اضافة هذه الاضافة لكن لم اجد


    ممكن الشرح والحل

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

    ردحذف
  105. شكرا اخي والشريط شغال 100% (o)

    ردحذف
  106. مشكور أخي جربته روعة

    ردحذف
  107. اخي مساعده
    كيف احذف هذا الشريط
    http://store1.up-00.com/2015-11/1446828228931.jpg

    ردحذف
  108. شكرا لك رائع
    كيف أغير نوع الخط للشريط؟
    جزاك الله خيرا

    ردحذف
  109. اخي لم اجد الكود الثاني

    ردحذف
  110. الوسمة الثانية او الاخيرة لم اجدها اخي

    ردحذف
  111. أخي جلال السلام عليكم
    في الحقيقة لقد جربت الإضافة وهي تشتغل بكفاءة مع جهاز الحاسوب ولكنها لا تظهر على أجهزة الجوال
    أريد فقط أن أقوم بإخفائها من على الأجهزة المحمولة
    تقبل تحياتي

    ردحذف
  112. كيف اسوي أخر الأخبار من قسم فرعي

    ردحذف