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

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

1- من  لوحة التحكم -> قالب -> تحرير HTML 

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</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>

و لتحميل الكود من هنا 

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

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

<div class='main-outer'>

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

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><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 = 'https://med-oz.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://med-oz.com برابط مدونتك 

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