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

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

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

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

قم بالذهاب الى المظهر
قم باخذ نسخة احتياطية لقالبك
اختر html
قم بالحث عن </head> نلصق الاكواد التالية فوقه مباشرة

كود شريط اخر المواضيع باللون الاحمر

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><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 != "static_page"'><b:if cond='data:blog.pageType != "item"'><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 != "static_page"'><b:if cond='data:blog.pageType != "item"'><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>

بعد ان اختر لون شريط اخر الاخبار لمدونة بلوجر باللون الذى تريد واضفت الاكواد فوق </head> تبقى لنا خطوه واحده وهى اضافة كود اخر الاخبار اسفل القائمة الرئيسية ويجب ان تعلم ان كود القائمة الرئيسية الهيدر يختلف من قالب لاخر ان لم تعلم كود الهيدر اضغط عليه بزر الفارة الايمن واضغط فحص ستظهر لك قائمة بالاكواد انسخ كود الهيدر سوف اعطى لكم كود تقريبى لقائمة الهيدر.

اضافة كود شريط اخر المواضيع اسفل الهيدر

قم بالبحث عن <div class='main-outer'>
ونقوم بلصق الاكواد التالية فوقه مباشرة
قم بتغير رابط مدونتى https://sharqawi-web.blogspot.com/ برابط مدونتك

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><div id='recentpostbreaking'>Loading...</div></div><script type='text/javascript'>//<![CDATA[ $(document).ready(function () { var url_blog = 'https://sharqawi-web.blogspot.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>

لا تنسى تغير رابط مدونة شرقاوى ويب https://sharqawi-web.blogspot.com/ برابط مدونتك

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