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

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

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

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

اولا قم بالتوجه الي لوحه التحكم في المدونه
ثم قالب ثم تحرير 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://www.walmatari.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://www.walmatari.blogspot.com/ برابط مدونتك او موقعك

وبالاخير قم بحفظ القالب والف مبروووك عليك الاضافه
المصدر: مدونة جلال البعداني

WM

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

الخميس، 5 نوفمبر 2015

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

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

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

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