404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
  • العودة الى الصفحة الرئيسية
  • اضافة شريط متحرك لاخر اخبار المدونة بالوان احترافية

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

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

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


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



    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:#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://ara1tech.blogspot.com/', // رابط بلوق على سبيل المثال http://ara1tech.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://ara1tech.blogspot.com/ برابط مدونتك 
    ستجد الرابط في السطر التاسع من الكود السابق باللون الازرق 
    • وبالاخير قم بحفظ القالب و مبروووك عليك الاضافة!!

    بدر الدين وجيه, 16 سنة اعشق الحاسوب لدي درائية عامة بـ التقنية أنشأت مدونة عرب تيش حتى اساهم في تطوير المحتوى العربي في الانترنيت و افيد الناس بمعرفتي المتواضعة...

    الكاتب : وجيه بدر الدين

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

    إرسال تعليق


    المدونة

    • مدونة عرب تيش انشات سنة 2015 و غرضها الوحيد هو تطوير المحتوى العربي في الانترنيت تقدم دروس وشروحات تقنية وفي المعلوميات بالاضافة الى اضافات وقوالب بلوجر مميزة قد تتسائل ما معنى "تيش", تيش اتت بعفوية من لسان المؤسس ولدلك تم تسمية المدونة باسم عرب تيش

    احصائيات اليكسا

    تصميم : عرب تيش
    Notification Bell