اضافة شريط اخر الاخبار مع ايقونات التواصل

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

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

<style type='text/css'>
#news {
  background:#fff;
  box-shadow: 0 0 1px #777;
  display: block;
  float: right;
  height: 30px;
  overflow: hidden;
  width: 100%;
}

.titlenews {
  background: #d1000e;
  color: #fff;
  display: block;
  float: right;
  font: bold 14px/2em Tahoma;
  height: 100%;
  text-align: center;
  width: 100px;
}

#cnmunsup {
  float: right;
  line-height: 1.7em;
  margin-right: 20px;
}

#cnmunsup ul, #cnmunsup li {
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

#cnmunsup li a {
  color: #001dff ;
  font: bold 14px/2em Tahoma;
  text-decoration: none;
}
#cnmunsup li a:hover {color:#000;}
.sosiuln {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.sosiuln li {float: left;}
.sosiuln {
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.sosiuln li {float: left;}
.sosiuln li a {
  background-color: #d1000e;
  background-image: url("https://lh4.googleusercontent.com/-I88QzSxT_Ro/VK0sbXS5VnI/AAAAAAAAFVk/UuNvaBc0wAQ/s456/socia-white.png");
  background-repeat: no-repeat;
  display: block;
  height: 30px;
  transition: all 0.8s ease 0s;
  width: 30px;
}
.sosiuln li a:hover {background-color: #777 !important;}
.neface a {
  background-color: #39599f !important;
  background-position: 3px 3px !important;
}
.netwetter a {
  background-color: #44b0e3 !important;
  background-position: 3px -50px !important;
}
.negplus a {
  background-color: #393939 !important;
  background-position: 4px -103px !important;
}
.neyoutube a {
  background-color: #da4038 !important;
  background-position: 3px -158px !important;
}
.neinstgram a {
  background-color: #614b3d !important;
  background-position: 3px -213px !important;
}
.neblogger a {
  background-color: #eb6302 !important;
  background-position: 3px -267px !important;
}
.nemail a {
  background-color: #017e22 !important;
  background-position: 3px -320px !important;
}
.nefeedb a {
  background-color: #ee3a43 !important;
  background-position: 3px -375px !important;
}
.nerss a {
  background-color: #e0a504 !important;
  background-position: 4px -428px !important;
}
 </style>
<div id='news'>
<span class="socialicne">
<ul class="sosiuln">
<li class="neface"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="netwetter"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="negplus"><a href="#" rel="nofollow" target="_blank"></a></li>
<li class="neyoutube"><a href="#" rel="nofollow" target="_blank"></a></li>



<li class="nerss"><a href="http://bloggerarabic1.blogspot.com/feeds/posts/default" rel="nofollow" target="_blank"></a></li>
</ul>
</span>
<span class='titlenews'>آخر الأخبار</span>
<div id='cnmunsup'>جاري التحميل ...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://bloggerarabic1.blogspot.com',
numpostx     = 20; 
$.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>';
            $('#cnmunsup').html(skeleton);
            function tick(){
            $('#cnmunsup li:first').slideUp( function () { $(this).appendTo($('#cnmunsup ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#cnmunsup').html('<span>لا توجد نتائج !</span>');
        }
    },
    error: function() {
            $('#cnmunsup').html('<strong>خطأ في تحميل الخلاصات !</strong>');
       }
});
});
//]]>
</script>

ان لم يكن عندك في القالب كود مكتبة الجي كويري اضف هذا الكود قبل او بعد الكود السابق واذا كان موجود بالقالب مسبقآ لاحاجة لااضافته

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

اولآ يمكنك اضافة ايقونات اخرى اذا اردت انسخ احد الروابط وكرره على حسب الايقونات التي تريدها مع تغيير كل رابط بااسم الموقع الذي اضفته
ثانيآ نغير رابط موقعي http://bloggerarabic1.blogspot.com/ برابط موقعك تجده مكرر مرتين
ومكان هذه العلامة( #  )استبدلها  بالرابط حسب التسمية الموجوده يعني يوتيوب وفيس بوك وغيره

 اي استفسار بخصوص الاضافة اترك تعليقك سبب المشكلة التي تواجها وسوف نتواصل معك في اقرب وقت

المصدر: كن مدون