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

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

اولا يجب عليك مشاهده الاضافه 

اضغط هنا لمشاهده الاضافه

صوره من الاضافه

نأتي الان لطريقه اضافه الشريط الي المدونه

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

اولا قم بالبحث عن الرمز 

</head>

باستخدام ctrl+f
في لوحه المفاتيح

ثم قم بلصق كود احد الالوان فوقه تماما 

اللون الاحمر 

ضع الماوس علي الصوره من اجل مشاهدتها بالجوده الكالمله

الكود 

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

الان بعد ان قمت باختيار اللون المفضل الخاص بك

قم بالبحث مره اخري عن 

<div class='main-outer'>

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

<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://ayanatech.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 newsfunction 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>خطأ في تحميل المواضيع!</strong>');       } }); }); //]]></script></b:if></b:if>

مع تغير الرابط المحدد باللون الاحمر http://ayanatech.blogspot.com برابط مدونتك او موقعك

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

للمعلوميه الموضوع منقول ولكنني قمت بتطوير وتعريب الاضافه
وتغير بعض الخصائص الخاصه بها وتختلف ايضا طريقه سرد وشرح الاضافه عن المصدر الحقيقي وهو jalal alb33dani

Mohamed Abouayana

Add Comment

اضافات البلوجر, اضافات بلوجر, دروس بلوجر, دوره البلوجر

معلومات التدوينه !

عنوان التدوينة: اضافة شريط متحرك يضم اخر مواضيع المدونه بثلاثة الوان
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Mohamed Abouayana
التسميات : اضافات البلوجر ، اضافات بلوجر ، دروس بلوجر ، دوره البلوجر
توقيت النشر : 4:25 ص

عدد التعليقات : 0

عدد المشاهدات :