اضافة شريط متحرك لآخر أخبار على بلوجر بشكل احترافي

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

الآن نمر لتطبيق الإضافة:

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

• كود اللون أزرق
• كود اللون أحمر
• كود اللون أخضر

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

<div class='main-outer'>

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

<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'>جاري التحميل  ...</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://hukmat.blogspot.com', // alamat blogmu contoh
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://hukmat.blogspot.com برابط مدونتك .
مبروك عليك إضافة ، لا تنسى مشاركة عبر وضعك لإعجابات أو تعاليق . نلتقي في موضوع جديد .

مقالات ذات صلة