Latest/Recent Posts Pure JavaScript Scrolling Bar Widget For Blogger

Features:

1.) Stylish And Awesome Design.

2.) Pure JavaScript, No Jquery.

3.) Based On HTML, CSS And JavaScript.

4.) MARQUEE Tag Used For Scrolling Effect.

5.) Latest/Recent Post Title Will Scroll.

6.) Links To The Post Title Also Added.

7.) All Link Will Open In New Tab.

8.) Close/Hide Button Also Added For User Desire.

9.) Fully Customizable.

10.) Easy CSS And JavaScript To Read And Edit.

11.) SEO Friendly.

12.) Increase Your PageViews.

How To Add In Blogspot?

1.) Go To Your www.blogger.com

2.) Open Your Desire “Blog“.

3.) Go To “Layout“.

4.) Click “Add A Gadget” Where You Want To Add It.

5.) Now Scroll To “HTML-JAVASCRIPT“

6.) Click “+” Icon To Add It.

7.) Now Copy The Below Code And Paste It To There.

8.) Leave The Title Empty.

9.) Click “Save“, Now You Are Done.

كيفية الاضافة للمدونة

1- اذهب الى التخطيط 

2- اضافة أداة جافا سكريبت جديدة في اي مكان

3- انسخ الكود أسفله  - بعد أن تضع التعديلات الخاصة بك - و ضفه في الأداة

4- اعمل حفظ للأداة ...ومبروك

<!-- Latest/Recent Posts Scrolling Bar  -->

<style type="text/css">

#exe_latespost_scrolling_bar {background: #000000;width: auto;margin: 0 auto;text-align: center;color: #F40045;border-bottom: 2px solid #000;-webkit-box-shadow: #666666 0px 1px 3px;-moz-box-shadow: #666666 0px 1px 3px;box-shadow: #666666 0px 1px 3px;z-index: 999999;line-height: 1.85em;letter-spacing: 1px;}

#exe_latespost_scrolling_bar li {display:inline;}

#exe_latespost_scrolling_bar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;}

#exe_latespost_scrolling_bar a:hover{text-decoration:underline;}

#exe_latespost_scrolling_bar_close{float:right;cursor:hand;cursor:pointer;margin: 8px 15px 0 0;}

</style>

<div id='exe_latespost_scrolling_bar'> 

<script type="text/javascript"> 

function latestpostlistbyexeideas(json) { 

document.write('<marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" width="95%" scrolldelay="100" direction="left" >'); 

for (var i = 0; i < json.feed.entry.length; i++) 

{ 

for (var j = 0; j < json.feed.entry[i].link.length; j++) { 

if (json.feed.entry[i].link[j].rel == 'alternate') { 

break; 

} 

} 

var EXEentryUrl = "'" + json.feed.entry[i].link[j].href + "'"; 

var EXEentryTitle = json.feed.entry[i].title.$t; 

var item = ">> <li>" + "<a href=" + EXEentryUrl + ' target="_blank">' + EXEentryTitle + "</a> </li>"; 

document.write(item); 

} 

document.write('</marquee>'); 

} 

</script> 

<script src="

http://webs-tools.blogspot.com/

feeds/posts/summary?max-results=10&amp;alt=json-in-script&amp;callback=latestpostlistbyexeideas"></script> 

<noscript>Allow Your JavaScript To View This Awesome Widget. {<a href="http://www.exeideas.com">+ Grab this Widget</a>}</noscript> 

<a href="#" id="exe_latespost_scrolling_bar_close" onmouseup="document.getElementById('exe_latespost_scrolling_bar').style.display = 'none'; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlBbj_HMgsoXPqWxaEWz5whJEhAVxAAEGB534cRdwzXOZhrrOyQHkXFX_KkaIRb1R5EZUgZolM_nigYp6lWSxOKUUwf5juzsdpZJymrOXD0l7GL74B07tsPXDagyxBGmTs5sixERwUcg/s400/cancel.png"/></a> 

</div>

<!-- Latest/Recent Posts Scrolling Bar  -->

ملاحظة  هامة 

جرب الاضافة من   هنا   قبل  استعمالها

Customization:

1.) Change 100 To Your Desired Value To Change The Scrolling Speed.

2.) Change  webs-tools.blogspot.com  With Your Blog URL.

3.) Change 10 With Your Desired Latest Post Count.

4.) Add The Below CSS To Make This Bar Stick At Your Visitor’s Top.

#exe_latespost_scrolling_bar {position:fixed;left:0px;top:0px;}

5.) Save And Done.

Filed Under: اضافات البلوجر on الجمعة، 7 نوفمبر 2014