Blogger offers 2 options to sort your posts: sort by newest and sort by oldest. With Graddit widgets you can sort posts by their popularity. Look at this page: http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html. It displays 5 top articles from this blog. And this one: http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html shows best posts announcements tagged with "blogspot".
These aren't regular posts, these are Bloggers static pages. If you'll open their source code you'll see that there are no actual posts, only some javascript code. To create your own pages like those you'll need:
It should be ready now. Besides that tops got new parameter: labels. Now you can specify which posts (with what tags) should be displayed in tops widgets. So (if you're familiar with JS) on a page you can display top posts filtered by categories. Try it, let me know what you think.
These aren't regular posts, these are Bloggers static pages. If you'll open their source code you'll see that there are no actual posts, only some javascript code. To create your own pages like those you'll need:
- create an account if you still don't have it;
- create a desired top here;
- add graddit-extras.js into <head> section of your template:
<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>
- create static HTML page, switch to HTML edit mode and add jQuery, if you don't have it already in your template:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
- add JS function that will process your posts:
<script type='text/javascript'>
Couple of words about changes you might need to make to this function in order to make it working with your blog:
function gradditLoadTopPosts(id) {
var element = $("#" + id);
if (element.length > 0) {
var wrapperDiv = $("#top5");
if (wrapperDiv.length == 1) {
element.find("a").each(function(i, a) {
var host = a.hostname;
var blogHost = "fruitfulbookmarks-en.blogspot";
if (host.indexOf(blogHost) >= 0) {
var docHost = document.location.host + "";
var level1Doc = docHost.substring(blogHost.length, docHost.length);
var level1Post = host.substring(blogHost.length, host.length);
var link = a.href;
if (level1Doc != level1Post) {
link = link.replace(blogHost + level1Post, blogHost + level1Doc);
}
var containerId = "top_posts_" + i;
wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
var container = $("#" + containerId);
container.load(link);
setTimeout(function() {
var post = container.find("div[class='post hentry']");
if (post.length > 0) {
var newText = "";
if (i > 0) {
newText = "<hr style='width: 100%; clear: both;'/>"
}
newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
var startIdx = newText.indexOf("<h3 class=\"post-title entry-title\">");
var endIdx = newText.indexOf("</h3>");
newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
container.html(newText);
container.show();
}
}, 2000 * (i + 1));
}
});
}
}
}
</script>- #top5 - this is id if the container element, you'll see it below; depending on the template you might need to change the names of the classes;
- in line var blogHost = "fruitfulbookmarks-en.blogspot"; replace blog URL with your own; do not include country domain (.com, .co.uk, etc.)!
- when calling function gradditCutText to cut text of your posts there are few parameters you might want to change: second parameter is max length of text, third one allows you to control how to cut it (0 - do nothing, 1 - cut to word, 2 - expand to word). If you don't want to cut text then pass both parameters equal to 0;
- add HTML elements and tops script call with callback function:
<div id="top5"></div>
Make sure to change top id (33 here) to your own that should be taken from administer page (when you create/manage tops).
<div id="graddit_top_wrapper" style="visibility: hidden; display: none;"></div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/33?id=graddit_top_wrapper&callback=gradditLoadTopPosts"></script>
It should be ready now. Besides that tops got new parameter: labels. Now you can specify which posts (with what tags) should be displayed in tops widgets. So (if you're familiar with JS) on a page you can display top posts filtered by categories. Try it, let me know what you think.
Hi
ReplyDeleteIs this the same as top viewed posts or isit different
Thanks
This is how top viewed posts links can be transformed to posts (actual full posts text). Just look at the sample: http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html. It's an extension to top viewed posts.
DeleteThat link u gave the post is empty shows nothing
DeleteIt's empty initially, but then JS should load the posts. Probably there's an error that I can't see. What browser are you using to open that page?
Deleteim using firefox and chrome
Deletepage is empty on both browsers theres no content
and by the way did u manage to have a look at my blog http://bengalipiffs.blogspot.co.uk/ i was having poblems with the side bar top widget code and my saved top widget in account management no longer there too.
ok, I think I've got what's the problem with the empty page above, it's not browser, it's blogger replacing blogspot.com with blogspot.co.uk for you. I'll fix that later, but this is also why your tops and stats disappear. Actually they don't. Here's what you need to do:
Delete1. in your template insert "domain" parameter into the parameters line when call graddit ratings:
...&domain=bengalipiffs.blogspot.com... and give it some time to update in the database;
2. I see you registered twice: with the domains bengalipiffs.blogspot.co.uk and bengalipiffs.blogspot.com. Don't use co.uk, login only with .com, have all your tops there and also your stats will get back to normal sometime after changes made in (1).
i cannot find domain parameter i have looked on my template
Deleteyes i register twice by mistake because blogger sometimes make me .co.uk or .com and know my tops are messed up, please tell me again what i need to do to log in and get my tops stats back
thank you
You will not be able to find domain paramenter, this is the parameter you'll have to add to the graddit widget code. There's lots of parameters: &id=, &labels=, &stats=, &url=, etc. You'll need to add &domain to force it to be .com, not co.uk. For your tops all that you need to do is to login and work with http://bengalipiffs.blogspot.com only.
Deletehi
Deletei still dont knw how to make a parameter? can u help me? do u have a email address? or anythink i can talk to you because i want to send you my widget code it dosnt let me post html on here so if i send you my widget code you can send me back with the parameters code with it? or send me email OR SEND ME A EMAIL
MY EMAIL IS:
khjhgjhj@gmail.com
THANKS ALOT
You gave me the link to your template on pastebin somewhere, I'll try to check, but can't promise it'll happen very soon. If you made any changes to template since you sent it to pastebin, please update it and send me the link again. I'll check it as soon as I can.
DeleteWHAT I MEAN IS ONLY THE GRADDIT WIDGET CODE ?
DeleteCAN U EMAIL ME WITH THE PARAMETERS ON IT TO THE ADDRESS THANKS
Yellow stars? Here it is: http://pastebin.com/0xvmA9ZG - look at the very end of script paratemeters line where &domain= is.
DeleteTHANKS
Deleteit didnt work first them i added amp; and template saved
ok how long now until i can acces account for tops widget
Tops settings (if missing) will not recreate automatically, you'll have to create them again. The info in tops will update in... well, depending on how many people vote/visit your site; the more people, the faster it will update (from hours to days).
Deletewhich domain should i log in with blogger.com or blooger.co.uk
Deletei logged into .com just know
i have no stats there and 2 tops which i cannot even delete
Log in with com. Normally it should pass some time after you add domain parameter, so that data could update in the DB in order for you to see stats. I've updated it for you manually, so you can try now. If still not displaying, this is caching and there's not much I can do about it, you'll have to wait for couple of hours when it expires. What happens when you're trying to delete top?
Deletethanks alot my tops working know :)
Deletebut im having trouble putting tops and most voted and most views widgets together on my site why this not letting me only works with one tops at a time, something to do with same div tags i dont know is it posible to put all 3 tops on sidebar widget?
It is possible to have more than one top on the same page (this blog has). What you need to do is to make wrapper DIV ids unique (like "graddit_top_wrapper_1", "graddit_top_wrapper_2", etc.) and have these ids passed to the script in id parameter. Again, you can open source code of this blog (http://fruitfulbookmarks-en.blogspot.com, not this particular post) and search it for "showtop" - check how it works with the IDs.
DeleteI havnt tryed it yet but once I do il let UNO I had a question why do tops update take such a long time wats the minimal amount of time to set because I set 2 minutes Dosnt update resets back
DeleteI havnt tryed it yet but once I do il let UNO I had a question why do tops update take such a long time wats the minimal amount of time to set because I set 2 minutes Dosnt update resets back
DeleteI havnt tryed it yet but once I do il let UNO I had a question why do tops update take such a long time wats the minimal amount of time to set because I set 2 minutes Dosnt update resets back
DeleteYou can't set 2 minutes, minimum is 60 minutes. Tops reflect your visitors reaction, it is pointless to have tops that update every 2 minutes, this time is not enough to get number of votes/views that can change list of most viewed pages. Frequent tops update is something you might want to have if you have thousands of visitors that vote every second.
DeleteOk thanks hey fruitful bookmark how do I change store the CSS for the sidebar tops and voting widget stars on my website I want to change CSS for those div tags how do I get the source to put on blogger skins thanks
DeleteI don't think I understood your request, but if you just want to change custom graddit css, take original here: http://static.graddit.com/css/graddit.css, change it and save to some public hosting (like google sites) and use it instead of graddit.css.
DeleteIf I copy this to blogger template will I b able to change with blogger
Deletei done the tops widget on same page
Deleteit works i gave unique div id and i change script
&callback=gradditLoadTopPosts
and it works thanks alot
This comment has been removed by the author.
ReplyDeletehello again fruitfulbookmarks
ReplyDeletei have tried to following this blog page tutorial
How to sort blogger posts by popularity
i got stuck on step 5
after copying that script, when saving blogger gives a error
"Error parsing XML,Open quote is expected for attribute "{1}" associated with an element type "class"."
so it wont save? what do i do?
also your demo pages is not working either
http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html
http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html
both these page content are blank
This error isn't really informative, you'll need to remove the function (possibly line by line) and try save template to figure out what part of it causes problem. Good think to do would be to have all this kind of stuff in a separate file. Regarding blank pages - yes, I guess I know what's the reason, it's blogger replacing .com with .co.uk (or similar) that causes origin JS error. I'll try to fix that.
Deletehey fruits have you updated those site yet because i still cannot see the preview its empty page i am trying to follw this guide but theres a problem with your script blogger dosnt parse it corectly so it wount save template you see
ReplyDeleteOh, now I think I've got it. The issue is that Blogger editor replaces some characters, so the they got lost in JS listing above: a couple of br tags in line 22 of paragraph 5. I've rewritten that line, so it should not cause this error anymore. Please try.
Deletei tryed the new code still dosnt work
DeleteError parsing XML, line 31, column 72:
which is still the br tags
Ok, my instruction wasn't clear that you need to add JS function inside your static page, not template. I've changed paragraph 4 to reflect this. Did you add function to template or to static page? It's prepared to be in static page, not in the template. I've just tried it on my test blog, didn't get that XML error.
Deletehi now i pasted into static page
ReplyDeletei have done everything you said but there is no difference in tops the tops on the static page is exactly the same as my sidebar widget tops, i think somethink must be wrong
Give me the link to that static page.
DeleteI have also update the code in paragraph 5 to work properly with national domains, so it now should be working for all (.com, .co.uk, etc.) - don't forget to take newer code.
Deleteno stil not working heres the code inside my static template
Delete<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
function gradditLoadTopPosts(id) {
var element = $("#" + id);
if (element.length > 0) {
var wrapperDiv = $("#top5");
if (wrapperDiv.length == 1) {
element.find("a").each(function(i, a) {
var host = a.hostname;
var blogHost = "bengalipiffs.blogspot.co.uk";
if (host.indexOf(blogHost) >= 0) {
var docHost = document.location.host + "";
var level1Doc = docHost.substring(blogHost.length, docHost.length);
var level1Post = host.substring(blogHost.length, host.length);
var link = a.href;
if (level1Doc != level1Post) {
link = link.replace(blogHost + level1Post, blogHost + level1Doc);
}
var containerId = "top_posts_" + i;
wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
var container = $("#" + containerId);
container.load(link);
setTimeout(function() {
var post = container.find("div[class='post hentry']");
if (post.length > 0) {
var newText = "";
if (i > 0) {
newText = "<hr style='width: 100%; clear: both;'/>"
}
newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
var startIdx = newText.indexOf("<h3 class="post-title entry-title">");
var endIdx = newText.indexOf("</h3>");
newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
container.html(newText);
container.show();
}
}, 2000 * (i + 1));
}
});
}
}
}
</script>
<div id="top5">
</div>
<div id="graddit_top_wrapper4"></div>
<script src="http://www.graddit.com/showtop/eng/39?id=graddit_top_wrapper4" type="text/javascript"></script>
and here is the static page link
ReplyDeletehttp://bengalipiffs.blogspot.co.uk/p/top-post.html
First of all, remove jQuery include from the static page body, you have it already in you template above, these two includes may be conflicting; let me know when done, I'll check if there's any other issues with the tops.
Deleteok this is how it looks right now
Delete<b>on blogger template underneath the head it looks like this</b>
<head>
<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>
<b>on static page it looks like this</b>
<script type='text/javascript'>
function gradditLoadTopPosts(id) {
var element = $("#" + id);
if (element.length > 0) {
var wrapperDiv = $("#top5");
if (wrapperDiv.length == 1) {
element.find("a").each(function(i, a) {
var host = a.hostname;
var blogHost = "bengalipiffs.blogspot.co.uk";
if (host.indexOf(blogHost) >= 0) {
var docHost = document.location.host + "";
var level1Doc = docHost.substring(blogHost.length, docHost.length);
var level1Post = host.substring(blogHost.length, host.length);
var link = a.href;
if (level1Doc != level1Post) {
link = link.replace(blogHost + level1Post, blogHost + level1Doc);
}
var containerId = "top_posts_" + i;
wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
var container = $("#" + containerId);
container.load(link);
setTimeout(function() {
var post = container.find("div[class='post hentry']");
if (post.length > 0) {
var newText = "";
if (i > 0) {
newText = "<hr style='width: 100%; clear: both;'/>"
}
newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
var startIdx = newText.indexOf("<h3 class="post-title entry-title">");
var endIdx = newText.indexOf("</h3>");
newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
container.html(newText);
container.show();
}
}, 2000 * (i + 1));
}
});
}
}
}
</script>
<div id="top5">
</div>
<div id="graddit_top_wrapper4"></div>
<script src="http://www.graddit.com/showtop/eng/39?id=graddit_top_wrapper4" type="text/javascript"></script>
ignore the brackets <b> </b> sorry i try make this text bold but didn't work
Deleteanyway still does not work fruits still the same mate
check it again and let me know
http://bengalipiffs.blogspot.co.uk/p/top-post.html
Ok, now change this:
Deletevar blogHost = "bengalipiffs.blogspot.co.uk";
to this:
var blogHost = "bengalipiffs.blogspot";
If you'll check my function, it doesn't have country domain in there, it's made on purpose. Lets see if that'll help.
i just done what you said and its still the same fruits this time page loads and its same as the sidebar widget and after 5 seconds the page turns into full screen and the top widget keeps looping all the way down have a look
ReplyDeletehttp://bengalipiffs.blogspot.co.uk/p/top-post.html
this is how statis page looks
<script type='text/javascript'>
function gradditLoadTopPosts(id) {
var element = $("#" + id);
if (element.length > 0) {
var wrapperDiv = $("#top5");
if (wrapperDiv.length == 1) {
element.find("a").each(function(i, a) {
var host = a.hostname;
var blogHost = "bengalipiffs.blogspot";
if (host.indexOf(blogHost) >= 0) {
var docHost = document.location.host + "";
var level1Doc = docHost.substring(blogHost.length, docHost.length);
var level1Post = host.substring(blogHost.length, host.length);
var link = a.href;
if (level1Doc != level1Post) {
link = link.replace(blogHost + level1Post, blogHost + level1Doc);
}
var containerId = "top_posts_" + i;
wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");
var container = $("#" + containerId);
container.load(link);
setTimeout(function() {
var post = container.find("div[class='post hentry']");
if (post.length > 0) {
var newText = "";
if (i > 0) {
newText = "<hr style='width: 100%; clear: both;'/>"
}
newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";
var startIdx = newText.indexOf("<h3 class="post-title entry-title">");
var endIdx = newText.indexOf("</h3>");
newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);
container.html(newText);
container.show();
}
}, 2000 * (i + 1));
}
});
}
}
}
</script>
<div id="top5">
</div>
<div id="graddit_top_wrapper4"></div>
<script src="http://www.graddit.com/showtop/eng/39?id=graddit_top_wrapper4" type="text/javascript"></script>
I think the code is not an issue now. It seems that the problem is that you have the same tops with the same callback on your posts (in the sidebar), so the static pages load the tops and the tops are trying to load posts to display them on static page, the posts have tops too and trying to execute same callback function, so all this falls into recursion and fails badly. You need to re-think structure of your template if you want to use static top pages, you definitely need to remove callback from the tops code on your post pages (callback=gradditLoadTopPosts), why are they there? This callback function should be called only on static pages, not inside posts.
Delete