شريط متحرك بألوان مختلفة يضم آخر أخبآر المدونة.



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

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

 صورة الأضافة

 شريط اخر اخبار المدونه

كيفة اضافة هاذه الاداة الى مدونات بلوجر

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

</head>

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

كود اللون الازرق

  1. <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

  2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  3. <style type='text/css'>
  4. #beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
  5. background: #fff;
  6. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  7. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  8. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  9. background-clip: padding-box;border-left: none;max-height: 37px;}
  10. #beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
  11. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  12. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  13. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  14. color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
  15. line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
  16. text-transform: uppercase;}
  17. #recentpostbreaking{float:right;padding-right: 15px;}
  18. #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
  19. #recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
  20. </style></b:if></b:if>

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


  1. <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

  2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  3. <style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
  4. background: #fff;
  5. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  6. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  7. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  8. background-clip: padding-box;
  9. border-left: none;
  10. max-height: 37px;}
  11. #beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
  12. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  13. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  14. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  15. color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
  16. font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
  17. #recentpostbreaking{float:right;padding-right: 15px;}
  18. #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
  19. #recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
  20. </style></b:if></b:if>

كوداللون الاخضر



  1. <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  3. <style type='text/css'>#beakingnews{width:980px;margin:0 auto;
  4. line-height:37px;;overflow:hidden; margin-bottom: 20px;
  5. max-height: 37px; overflow: hidden;
  6. background: #fff;
  7. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  8. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  9. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  10. background-clip: padding-box;
  11. border-left: none;
  12. max-height: 37px;}
  13. #beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
  14. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  15. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  16. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  17. color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
  18. line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
  19. text-transform: uppercase;}
  20. #recentpostbreaking{float:right;padding-right: 15px;}
  21. #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
  22. #recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
  23. </style></b:if></b:if>


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

<div class='main-outer'>

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

  1. <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 = 'a7trafe-net.blogspot.co.il', // 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>

الان قم باستبدال الرابط التالي a7trafe-net.blogspot.co.il برابط مدونتك.

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

التدوينة التالية ›

تدوينات ذات صلة

ليست هناك تعليقات:

إظهار التعليقات

إرسال تعليق