طريقة إضافة شريط متحرك يضم اخر أخبار المدونة بثلاثة ألوان مختلفة

السلام عليكم ورحمة الله ، مرحبا بكم مجددا في موضوع جديد لمدونة محمد نجيب للمعلوميات ،اليوم باذن الله سنقوم بشرح إضافة اداة جديدة وسهله, وهي عبارة عن شريط متحرك بالوان مختلفة يضم اخر اخبار المدونة بشكل احترافي .
تقوم هذه الاداة بعرض اخر اخبار المدونة على شكل شريط افقي متحرك يتم وضعه اسفل الهيدر بحيث يكسب الصفحة ديناميكية ويسهل للزائر التعرف على المواضيع الحديثة في المدونة .تتميز هذه الاضافه بجماليتها وبخفتها وقد قمت بتوفيرها بعدة الوان لكي تتناسب مع اكثر القوالب شيوعا ,وايضا ارضاءً لجميع الاذواق
الان نمر إلى الشرح:

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

1- من لوحة التحكم -> قالب -> تحرير HTML

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</head>

وقبله تماما قم بلصق احد اكواد الالوان التاليه حسب رغبتك

كوداللون الازرق

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<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>

كوداللون الاحمر

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<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>

كوداللون الاخضر

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<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'>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span>

<div id='recentpostbreaking'>Loading...</div>

</div>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'http://medonajib.blogspot.com/', // alamat blogmu contoh http://medonajib.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 news

function 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>Error Loading Feed!</strong>');

       } }); });

//]]>

</script>

</b:if></b:if>

الان قم باستبدل الرابط التالي /http://medonajib.blogspot.com برابط مدونتك
ستجد الرابط في السطر التاسع من الكود السابق باللون الازرق
ومبروك عليك

مكتبة برامج الحاسوب

طريقة إضافة شريط متحرك يضم اخر أخبار المدونة بثلاثة ألوان مختلفة

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

SITE MANAGER

Default