اضافة شريط متحرك يضم اخر اخبار المدونه بالوان احترافيه
بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاته
اقدم لكم اليوم اضافة حصرية وجميلة للبلوجر
اضافة
اخر الاخبار نصى متوفرة بأكثر من لون تصلح لكافة المدونات والقوالب فقط
عليك بـ إختيار اللون الذى يناسب قالبك وشرح التركيب خطو بخطوة فقط إتبع
الشرح الآتى
1- من لوحة التحكم --قالب --تحرير html
2-البحث عن الكود التالى
واضافة هذا الكود قبله
كود اللون الازرق
#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;}
كود اللون الاخضر
كود اللون الاحمر
الان بعد ان ضفت احد الاكواد السابقة تبقت لنا خطوة واحدة وهى اضافة الاضافة تحت الهيدر
ملاحظة - ان كود الهيدر يختلف من قالب لاخر ولكن انا ساعطيك الكود الشهير
سنقوم بالبحث عن الكود التالى
ونلصق قبله تماما هذا الكود
أحدث الأخبارLoading...
//
$(document).ready(function () {
var url_blog = 'http://aboellil22.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 = "
- ";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 += '
}
skeleton += ' ';
$('#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('No result!');
} }, error: function() {
$('#recentpostbreaking').html('Error Loading Feed!');
} }); });
//]]>
0 التعليقات:
Post a Comment