How To Add J-Query Latest Post Widget For Blogger?
This Widget Is Originally Provided By www.stylifyyourblog.com Use this widget because it remain engaged your visitor in your blog to read more hottest post,When visitor enter your blog on old post then they see latest post through widget an animation keep his mind relax then he open every new of your article of increase your views.So just add this widget on your blog now…
Features:
1.) It Will Remain In Motion From Bottom To Top Or Top To Bottom.
2.) Stylish And Awesome Design.
3.) Easily Embed With Blogger Template.
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.
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript'>
//<![CDATA[
(function($){$.fn.vTicker=function(e){var f={speed:700,pause:2000,showItems:3,animation:'',mousePause:true,isPaused:false};var e=$.extend(f,e);moveUp=function(a,b,c){if(c)return;var d=a.children('ul');first=d.children('li:first').clone(true);d.animate({top:'-='+b+'px'},e.speed,function(){$(this).children('li:first').remove();$(this).css('top','0px')});if(e.animation=='fade'){d.children('li:first').fadeOut(e.speed);d.children('li:last').hide().fadeIn(e.speed)}first.appendTo(d)};return this.each(function(){var a=$(this);var b=0;var c=e.isPaused;a.css({overflow:'hidden',position:'relative'}).children('ul').css({position:'absolute',margin:0,padding:0}).children('li').css({margin:0,padding:0});a.children('ul').children('li').each(function(){if($(this).height()>b){b=$(this).height()}});a.children('ul').children('li').each(function(){$(this).height(b)});a.height(b*e.showItems);var d=setInterval(function(){moveUp(a,b,c)},e.pause);if(e.mousePause){a.bind("mouseenter",function(){c=true}).bind("mouseleave",function(){c=false})}})}})(jQuery);
//]]>
</script>
<script style='text/javascript' src='https://tavristasos.googlecode.com/svn-history/r100/trunk/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 5,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'down'
});});
</script>
<div id="sai">
<script src='https://www.YOURBLOGURL.BLOGSPOT.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></div>
Customization:
1.) Change Blue URL With Your Blog URL.
2.) If You Are Professional You Can Edit All RED Text Easily According To Your Desire.
3.) If You Are Niche And Still Want More Customization Feel Free To Ask.
it does not seem to be working for me, you simply just copy the URL into a gadget, switch the URL to your respective website, and save it correct?
Dude, All Widget Available Here Are 100% Working On 99.99% Of Blogs But I Think That You Are Unique.
Have the same problem ;-(
Code Is Now Up-Dated, Sorry For Inconvenience…
how can i put out the images?
Change shoepostthumbnail to false…
How can i use it with feedburner feed?
You Can’t… 🙁
99.99% ….i really like your confidence but please check it again because its not working for me too. Also changed the blue color line with my blog url and placed it well but nothing happen. No error, Nothing. What i do???
After The Bugs In Google Codes, There Are Many Widget Down But We Are UpDating Them, If You Found More Then Feel Free To Comment.
This Widget Is Now UpDated…
Sorry…..Dude, now its working. May be i have misplaced something, my bad. Hats off to your Confidence. I have also given you the credit beside your website link. And every one should give you credit along with putting your website link. Every one is intelligent here and understanding what i mean. I really respect your work. Thanks again. Going to check more widgets of yours.
Thanks For This And You Are Welcome To Visiting Us…
After The Bugs In Google Codes, There Are Many Widget Down But We Are UpDating Them, If You Found More Then Feel Free To Comment.
This Widget Is Now UpDated…
yeah Dude, there are really something is happening with google code. getting Some pop up asking username and password and this error is related to this line: “http://stylifyyourblog1.googlecode.com/svn/trunk/recentpostticker.js”. This error is only showing in Internet Explorer and in the Firefox, Not in chrome. In chrome everything looks fine but in other browser it pop up a litten box asking username and password. Don’t know what the hell is going on.
Yes, Now It’s Ok, Safe To Use…
Thanks For Visiting Us…
1. thanks for updating the code. But Dude what if we change the
“” showItems: 26, “” to 26 or 27 or more then check the bottom, it leaving empty space at the very bottom of about one post(if 26) and of about 2 post(if 27) and so on. Please check it.
2. how i can stop it myself by rotating it automatically. For Some period i want it rotating and for sometime i want it still.
3. If “” var numposts = 25; “” Thats ok working fine showing 25 posts. but if changes it to 26 or 27 or more then still showing 25 posts. How i can customize it along my wish.
4. What should i learn to complete understand this code. i know HTML only. And in the matter of CSS i do Hit and Trial. So should i learn CSS and JavaScript also. Is this code using Ajax also??? Please provide me some e-book to learn all this.
My mail is: kapoorsweta85@gmail.com
If you can send some e-book or any study material. Please dont tell me read it from internet Or Find it yourself on internet. Every time i am not enough lucky to find a good site like yours.
thanks again.
First You Have To Increase “var numpost = 10;” To Your Desire And Keep The Count Greater Then “showitem:5,” Then Increase The Count “showitem:5,” But Keep It Less Then “var numpost = 10;”
You Can Only Stop Or Allow It To Rotate, Can’t Do Both With Time Interval…
This Code Only Contain HTML-CSS-JavaScript…
In My View, The Best Book To Learn HTML-CSS Is
Learn HTML and CSS with w3schools
And The Best Book To Learn JavaScript-Ajax Is
Learn JavaScript and Ajax with w3schools
Thanks for the books. Do you have your own website related to books where i can see some other staff. I have checked your website
http://pdf-exeideas.blogspot.com but its down. the blog is removed.
Do you have any other website like your this one website.
Thanks again for your all help. You are great. Thanks.
Sorry For That, That Blog Is Moved To “E-Textspot.Blogspot“
Now Use This URL, We Will Add Some More To This, If You Want Anyother Book, Just Contact Us, We Will Try Our Best To Share That With You…
not in motion in my blog…
It start working,,Thanks..
Can I See Your Blog URL…???
You Are Welcome…
thanks bhai for sharing this blogger J-Query code.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.
how to add blogger recent post with jquery?
It is with JQuery…