اضافة شريط الأخبـــار لقوالب البلوجر الشكل الثالث

الشكل الثالــث

إضافة مميزة جدا يمكن تركيبها بداخل اكواد قوالب البلوجر

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

فوائد تركيب الشريط الاخباري

• عرض المحتوى الحيوي :
• يعرض آخر المقالات أو الأخبار بشكل ديناميكي يجذب انتباه الزوار
• يزيد من معدلات التفاعل مع المحتوى الجديد
• يسهل على الزوار متابعة آخر التحديثات دون تصفح الموقع
• يوفر مساحة إضافية لعرض عناوين مهمة دون إرباك التصميم
• زيادة فهرسة المحتوى الجديد من قبل محركات البحث
• تحسين معدلات الزيارات الصفحية (Page Views)
• إمكانية التحكم في سرعة الحركة
• تخصيص الألوان لتتناسب مع تصميم مدونتك
• توافق مع جميع قوالب بلوجر
• لا يؤثر على سرعة تحميل الموقع

شرح طريقة التركيب

نذهب الى المظهر و نضغط CTRL +F
و نبحث عن الوسم التالي /head
و نضيف الكود التالي فوقه تماما

 

<style type='text/css'>/* Breaking News */#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:right;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:right;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:left;    color: #929292;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:1px 10px 0px 3px}@media screen and (max-width:768px) {#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}</style>

نذهب الى المظهر و نضغط CTRL +F
و نبحث عن الوسم التالي</body>
و نضيف الكود التالي فوقه تماما

 

<script type='text/javascript'>//<![CDATA[// Breaking News$(document).ready(function(){var e=".",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});//]]></script>

الأن نضع هذا الكود في المكان اللذي تراه مناسب

أنا ساضيفه فوق رسائل المدونة الألكترونية

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>أخـر الأخبــار<span class='breakhidden'/></span>
      <div id='recentbreaking'>Loading...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

و شكرا

تحرير المقال