tag:blogger.com,1999:blog-16227187256651925002024-02-19T04:58:41.172-08:00Fruitful Bookmarks (eng)Useful widgets and bookmarkletsffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.comBlogger33125tag:blogger.com,1999:blog-1622718725665192500.post-81556168825123077672014-06-08T17:32:00.002-07:002014-06-08T17:53:55.704-07:00Get music cheaper: comparing prices for MP3 tracks and albums at major online stores<style>
iframe.top {
padding-top: 20px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0;
}
</style>
<p>So you like music, you buy it often and you want to pay less for your downloads. Checking prices manually is a pain, but here is a service that makes it easy: <a href="http://www.bytespit.com">http://www.bytespit.com</a> — compare prices for digital content (music, movies and apps) at major online stores like Amazon, iTunes, Google Play, 7 digital and Win Store.</p>
<p>But enough talking. Let's see how much you can really save. So I took 25 best selling tracks and albums from iTunes and verified them on bytespit, here is the results:
<div>
<b>Top 25 songs (tracks)</b><br/>
<iframe class="top" src="http://www.bytespit.com/static/eng/compare_tracks.html" width="1100" height="600" style="overflow: hidden; border: 0;"></iframe>
</div>
Best offers among the stores are marked green. As you can see, it is worth checking. If buying at the cheapest price you might save about 20c - 70c per song with total of about $5 of savings for the whole set. Now let's get to more interesting things.<br/><br/>
<div>
<b>Top 25 albums</b><br/>
<iframe class="top" src="http://www.bytespit.com/static/eng/compare_albums.html" width="1100" height="600" style="overflow: hidden; border: 0;"></iframe>
</div>
Prices for albums may be so much different: from 50c to 5$ and even more. Imagine how much you could save over time!
</p>
<p>Enjoy your music and don't forget to check prices before buying on <a href="http://www.bytespit.com">bytespit</a>.</p>ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-1102832163805339862014-04-06T18:44:00.002-07:002014-04-06T18:44:56.717-07:00Compare prices on digital content: iTunes vs Google Play vs Windows Store vs Amazon<div style="text-align: left;">
<a href="http://www.bytespit.com"><img align="left" alt="Compare prices on digital content with bytespit.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLcqeEEspyjaT0OAaKtrqBspbLhf7UY1_2tmaF9GzRNDkmppaBQxUD4AWOpN_mGtvyriXZremHChBUCfYv4nIZJs4lRPfX-S5rja9doXEvbknQtiZkJgeTakAc4_xBZOYz3vipW14oGFE/s320/stores.png" height="150" title="Compare prices" width="150" style="margin-right: 10px;"/></a>
<div style="display: inline;">
Fruitful Bookmarks launches new project called <a href="http://www.bytespit.com">BytesPit</a> — it's a search service built specifically to find digital media content in major online stores and compare prices. Currently it can search mobile applications, music and movies and supports iTunes, Google Play, Windows Store and Amazon. At the moment it is in alpha state, so any feedback, requests and bug reports are highly appreciated, you may leave them in the comments section below. Save your time and money with BitesPit digital content search engine.
</div>
</div>
<div style="display: inline-block; width: 100%;"> </div>ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com3tag:blogger.com,1999:blog-1622718725665192500.post-85412986128059302362014-02-26T18:06:00.000-08:002014-02-26T18:06:47.688-08:00How to prepare images for mobile applications reviews quicker<style>
.paragraph {
display: block;
}
.paragraph p {
text-indent: 1.5em;
}
.image-wrapper {
display: inline-block;
}
.image-wrapper img {
border: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.image-wrapper.centered {
text-align: center;
margin: 0 auto;
width: 100%;
}
.pull-left {
display: inline-block;
text-align: left;
}
</style>
<div class="paragraph">
<div class="image-wrapper centered">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmz5Zt6pFOfGrxCzA_Nw8LyvN1zADJg81XuVpLrXh2ud1eNhzNpfzRRsasSHd8QAv440fbEiQXfGoLZlSZN41ZwGg4DMKP0xzh794GCbz452U3LVfe_8i23FxS2-ZAns2-KHIJNeJgNI/s1600/pictofon-review-apps-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmz5Zt6pFOfGrxCzA_Nw8LyvN1zADJg81XuVpLrXh2ud1eNhzNpfzRRsasSHd8QAv440fbEiQXfGoLZlSZN41ZwGg4DMKP0xzh794GCbz452U3LVfe_8i23FxS2-ZAns2-KHIJNeJgNI/s1600/pictofon-review-apps-1.png" height="548" width="640" /></a>
</div>
<br/>
<p>
This image of an application screenshot wrapped in a mobile mockup was created in less than one minute using <a href="http://www.pictofon.com" target="_blank">Pictofon</a> serivce. With Pictofon you would be able to crate such images easier than ever, just select a mockup, upload your image and define a frame that should appear in mockup.
</p>
</div>
<div class="paragraph">
<div class="image-wrapper pull-left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5koiv_XNIsr24rotF4ROIB-LJoeYVK652hOpj5o2vX3CAsn1gxALuuKVQ7OtcMk5_ABoZc1ZQN47Ktzlg7VL0dcucgx0kmWsPz2ssINNmjS70172gTsIxb8QOTyjfSgvZpsIIi6r4I84/s1600/pictofon-review-apps-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5koiv_XNIsr24rotF4ROIB-LJoeYVK652hOpj5o2vX3CAsn1gxALuuKVQ7OtcMk5_ABoZc1ZQN47Ktzlg7VL0dcucgx0kmWsPz2ssINNmjS70172gTsIxb8QOTyjfSgvZpsIIi6r4I84/s400/pictofon-review-apps-2.png" /></a>
</div>
<div class="image-wrapper pull-left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjMAeg1i4gw9hpMwsLrM5lgt0-nnPdnpGBno-1iZ1W2W-vLDf3aFacjin9PSctx4ahqh-RtQrlRN09c-75_CkzQ1Ndi0zr3bFwx29b5nVNYP0GoQp818CejhFtrNYRqiJ0uEFPerNWY8/s1600/pictofon-review-apps-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjMAeg1i4gw9hpMwsLrM5lgt0-nnPdnpGBno-1iZ1W2W-vLDf3aFacjin9PSctx4ahqh-RtQrlRN09c-75_CkzQ1Ndi0zr3bFwx29b5nVNYP0GoQp818CejhFtrNYRqiJ0uEFPerNWY8/s400/pictofon-review-apps-3.png" /></a>
</div>
<div class="image-wrapper pull-left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z1YDp9Vok4O1NNv_FXhq66-ihcWi8hsDCf97YXN0S6KGeK2Qb4f3REbMqIvjJ4E9nM6XvPNsvGmX6KUunjB6eqFTsG_ndJm5jQ7__QdLUDyiTh3rIRaN11nvaCQfSKV-Z_h4FDYohaI/s1600/pictofon-review-website-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z1YDp9Vok4O1NNv_FXhq66-ihcWi8hsDCf97YXN0S6KGeK2Qb4f3REbMqIvjJ4E9nM6XvPNsvGmX6KUunjB6eqFTsG_ndJm5jQ7__QdLUDyiTh3rIRaN11nvaCQfSKV-Z_h4FDYohaI/s400/pictofon-review-website-1.png" /></a>
</div>
<p>
All in one place:
<ul>
<li>various devices</li>
<li>images effects</li>
<li>websites screenshots</li>
<li>webcam photos</li>
</ul>
</p>
</div>
<div class="paragraph">
<div class="image-wrapper pull-left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UnXUHisygPPAOhHyXNNmC7rUrD_MffNieGVYtn8fT4ceWA-Bt_mWlTV3pDYgGY0qQ7dMbEHt-qRobjr6jgHtpIuH3MUg-QwtIUS4PmhJ7YveBchC473hHesAcKSGIt8GMEEcTPzgVUo/s1600/pictofon-fridge.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UnXUHisygPPAOhHyXNNmC7rUrD_MffNieGVYtn8fT4ceWA-Bt_mWlTV3pDYgGY0qQ7dMbEHt-qRobjr6jgHtpIuH3MUg-QwtIUS4PmhJ7YveBchC473hHesAcKSGIt8GMEEcTPzgVUo/s320/pictofon-fridge.png" /></a>
</div>
<div class="pull-left" style="vertical-align: top; padding-top: 20px;">
<p>
Even some funny pictures with your own mockups.
</p>
<p>
Start using <a href="http://www.pictofon.com">Pictofon</a> now for creating simple mockups for your reviews or just for fun.
</p>
<p>
Questions? Issues? Suggestions? Please leave a comment below.
</p>
</div>
</div>ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-34859146535496989182013-11-19T19:53:00.000-08:002013-11-19T19:54:58.093-08:00Ratings updates on your phone with Graddit Pulse<div class="separator" style="clear: both; text-align: center;">
<a href="http://static.graddit.com/img/site/samsung_airgram_top.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://static.graddit.com/img/site/samsung_airgram_top.png" width="150" /></a></div>
<div style="text-align: left;">
Quick update from Graddit here.<br />
<br />
You now can get updates about votes on your site right on your phone or tablet. The feature is called <b>Graddit Pulse</b>. To enable this feature you'll need to install Airgram app on the phone and subscribe to ratings for your domains. <a href="http://www.graddit.com/eng/pulse">Just follow the steps here</a> and listen to the pulse of your site.<br />
<br />
Available on Android and IPhone.<br />
<br />
<br /></div>
ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-62129452026750756522013-09-22T17:42:00.002-07:002013-09-22T19:53:29.829-07:00SEO Blogger Tool<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvXYxe78rr0V0-AThFYoRlotgFl7n5D8OdU6PwdBLDzqyVNbly0h2AJ5qaQe89zX82DeBSc78PD0KRzYJ1bzpIFB9ube9uqzWct7hIIM04kvSJSHLNrcCV5dMGi1mx5xXNjtvYKDYdl10/s1600/blogger_seo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvXYxe78rr0V0-AThFYoRlotgFl7n5D8OdU6PwdBLDzqyVNbly0h2AJ5qaQe89zX82DeBSc78PD0KRzYJ1bzpIFB9ube9uqzWct7hIIM04kvSJSHLNrcCV5dMGi1mx5xXNjtvYKDYdl10/s1600/blogger_seo.png" alt="blogger seo" style="width: 120px;" /></a></div>
<div>Meet new <b>SEO tool for Blogger</b>. It is enabled in this blog and you can see how it works right now, just <a href="#seo" style="text-decoration: none; border-bottom: 1px dashed;">click here</a>. If you clicked you should see a new panel at the very top of this page. Also, the URL changed: see #seo hash added at the end. What the tool can do for you:<br/><br/>
- Keywords analysis.<br/>
- Links analysis.<br/><br/>
</div>
<br/><br/>
<p>
<h2>Keywords analysis</h2>
Click Keywords link to open keywords panel. Here you can verify multiple parameters. For this post try "SEO" keyword, you will see:
<ul>
<li>Keywrods density. Heard many times it should be 1 - 3%, but do not follow these directions blindly. This just to make sure you didn't put too much. Remember, text is for people, not robots.
<li>Verifies if keywords present in page title (<title>...</title> tag).</li>
<li>Checks if you have it in header tags (H1-H3).</li>
<li>Checks if you have it in bold or strong tag.</li>
<li>Tells you if you have key phrase in at least one image alt attribute.</li>
<li>Tries to define if you have keywords in first and last sentences. Although it's not necessary, sometimes it helps search engines define better snippet for SERP.</li>
<li>Calculates total amount of words.</li>
</ul>
You should know that it's not that easy to define boundaries of post text, sometimes menus, footers, archives and other widgets are taken too. The tool tries to do it's best to separate post text from other elements, but sometime you might want to help it. You can do that by adding id of HTML element where you want the tool to take text from, like this: "keyphrase | element_id". As this tool is made for Blogger it tries to find an element with id="main" (which is common for Blogger templates) and some other elements first. If all attempts failed it takes the whole text information on the page. When that happens you need to give and id explicitly, you can find it in the page source code. For example for this post the key phrase would be "SEO | post-body-6212945202675075652".
</p>
<br/>
<p>
<h2>Links analysis</h2>
This panel gives you some information about the links on the page:
<ul>
<li>Total number of links.</li>
<li>Total number of external links (navigating to other sites).</li>
<li>How many external links are not closed with "nofollow" attribute.</li>
</ul>
Tried that? Don't be scared by the numbers. Remember that by default it takes all links: menus, comments, widgets, even those links generated dynamically and not visible by the search engine bots. To get more precise results give it an id of HTML element where the tools should be searching links, just like for keywords.<br/>
Here's one more exremely useful thing comes with links analysis, look at "show" link near each line. Click it and you will get a list of the links. Click each link to highlight it on the page and scroll to it. It makes it easy to track suspicious links on you blog.
</p>
<br/>
<p><h2>How to install the tool into your blog</h2>
Easy: open Blogger admin interface, navigate to Layout panel, add HTML/JS widget. Add the following code to it:
<pre>
<script type="text/javascript">gradditSEOToolsLanguage = "eng";</script>
<script type="text/javascript" src="http://static.graddit.com/js/seotools/blogger/all.js"/></script>
</pre>
First line set the language (to English). Second line call the script and enables the tool. Now open any page of your blog and add #seo to it's URL - the tools should show. You also can add a link into widget to add #seo hash, like this:
<pre>
<a href="#seo" style="text-decoration: none; border-bottom: 1px dashed;">SEO</a>
</pre>
</p>
That is all. More tools will follow, new panels will be added automatically. Let me know what additional functions you would like to see in this tool.ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-90026425336944445342013-08-18T17:27:00.000-07:002013-08-18T17:27:04.452-07:00Graddit Guard: protect content with password<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center; clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_qSJ-EA6HJ4qF03vX_-EW_5qD92B0WBsAd2oQOFQhzeo8F7RaRFufwsevizDHHhReJG1j6VZt1GLN-aC3Yi_zQNMNnHBVZ-uLplXlPS_tT26GPePrqh7muoEy5jW_g-Qo40oEblgtMpya/s320/lock.png" /></div>
<p>
Suppose, you need to protect content from being viewed, but you don't want to make the whole blog private. You just want content that can be accessed by visitors that have a password. Simple problem if your blog is on Wordpress or Drupal. Blogger blogs owners can not achieve this eassily. New Graddit widget "Guard" is made for this purpose. Look at the text below:<br/>
<iframe id='graddit_guard_is0z89lh6' src='http://www.graddit.com/guard/eng/is0z89lh6' style='width: 100%; border: 0;'></iframe>
If you do not have password you will not see the hidden text. Now enter "123" and press "Open". Hidden text will be shown and you will not need to re-enter the password next time you visit the same page.
</p>
<p>
Text below will be shown after you tweet this page:<br/><br/>
<a href='https://twitter.com/share' class='twitter-share-button' data-via='' data-lang='en' data-count='none'>Tweet</a> to unlock content.<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><iframe id='graddit_guard_dgb4nrq8' src='http://www.graddit.com/guard/eng/dgb4nrq8' style='width: 100%; border: 0;'></iframe><script>$.getScript('http://platform.twitter.com/widgets.js', function(){function handleTweetEvent(event){if (event) {$('#graddit_guard_dgb4nrq8').attr('src', $('#graddit_guard_dgb4nrq8').attr('src') + '?action=tweeted');}}twttr.events.bind('tweet', handleTweetEvent);});</script>
</p>
<p>
Want to protect content in your blog?<br/>
<ol>
<li><a href="http://www.graddit.com/eng/guard-widget">Open widget page.</a></li>
<li>Enter password and text to protect. Press "Save" while typing your text to check how it will look on your page. If you press "Save and Lock" you will not be able to change password or text anymore.</li>
<li>Insert given code into your blog page or post. You will see the protected page because widget remembered you created it. All other visitors will see the prompt to enter password. To make sure it's working open your page in a different browser, or in incognito window, or clear the cookies.</li>
</ol>
</p>
<p>That is all. Leave a comment to this post if you have questions.</p>
<br /></div>ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com3tag:blogger.com,1999:blog-1622718725665192500.post-19592588834975905612013-04-28T14:57:00.000-07:002015-04-25T09:59:12.394-07:00Star ratings rich snippet on Google SERP with Graddit (for Blogger)<center>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7rhCXdkJGTxmAo67978AD89aWpg7lOq9zkugbsZP4iMGE1u-o9AV7buCnMzSMJ7LJd5p-hAE4Nx13g5lwFxQxbZ3Wmj1MIEowS2QFcyEmMLN9KWOpMUD1A1lUHW1rj2UjBMWf1QSRkck/s1600/google_serp_ratings.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7rhCXdkJGTxmAo67978AD89aWpg7lOq9zkugbsZP4iMGE1u-o9AV7buCnMzSMJ7LJd5p-hAE4Nx13g5lwFxQxbZ3Wmj1MIEowS2QFcyEmMLN9KWOpMUD1A1lUHW1rj2UjBMWf1QSRkck/s1600/google_serp_ratings.png" /></a></center>
— this is how your blog can look like on Google search engine results page (SERP). It is an experimental feature from Graddit that allows you to create rating rich snippets based on real ratings information and add them to your posts, <b>for Blogger only</b>. Currently in order to update your posts with snippets you will need to:<br />
<br />
<ol>
<li>Invite user "graddit@gmail.com" to be an author of your blog (Blogger Settings → Basic → Permissions → Blog Authors → + Add authors);</li>
<li>What for confirmation (leave a comment to this post to speed up the process);</li>
<li>Make graddit@gmail.com an admin of your blog. This is required to update posts by your request. Later adding graddit@gmail.com will not be necessary, but this is how it works right now. You can also revoke admin permissions once you are done with snippets and give it back only when you need it;</li>
<li><a href="http://www.graddit.com/eng/prices">Subscribe</a>. You can also leave your blog address in a comment to this post and I will give you 2 weeks of trial;</li>
<li>Login to <a href="https://manage.graddit.com/account/eng">admin</a>, create an account if you don't have it yet (click "Generate secret key" for insctructions);</li>
<li>Go to Statistics tab, locate a post you would like to update (you may want to save your post first, just to be safe) and click star icon: <div>
<center>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIkgP_a12Y_BdfZwdi9ChHJ-0J_SI4CVVl6ccbT9m7vd9yQRG3Zbr48F2ZshOg-5Mdj4xYw3MyigDFrxSXLEcPJiN1lL4yF5dDnEeT32_ZA3swmC9XBrRA-Us1M8Uhc2w5alR2NwhtPAg/s1600/google_serp_update.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIkgP_a12Y_BdfZwdi9ChHJ-0J_SI4CVVl6ccbT9m7vd9yQRG3Zbr48F2ZshOg-5Mdj4xYw3MyigDFrxSXLEcPJiN1lL4yF5dDnEeT32_ZA3swmC9XBrRA-Us1M8Uhc2w5alR2NwhtPAg/s320/google_serp_update.png" /></a></center>
</div>
<br />It will try to retrieve Blog ID and Rating ID and will show a confirmation window: <div>
<center>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMluCIaj8Jcd0QRlsWBukudzH1e8QySj8SnTS-YZHZOza36YHABF50X2B7MFiyhfzmpJCdHwZNnjYCwsTXCx-AbrCaF_ANqMEabIR0_CjJtoji6kzn1jQ4YNA2MtT_uOdVg0kUbpfq0a8/s1600/google_serp_confirm_update.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMluCIaj8Jcd0QRlsWBukudzH1e8QySj8SnTS-YZHZOza36YHABF50X2B7MFiyhfzmpJCdHwZNnjYCwsTXCx-AbrCaF_ANqMEabIR0_CjJtoji6kzn1jQ4YNA2MtT_uOdVg0kUbpfq0a8/s320/google_serp_confirm_update.png" /></a></center>
</div>
Click Ok. If system shows status "Ok", your post was successfully updated with ratings snippet. It can pass few days or even weeks before stars appear on SERP, but you can check if snippet is formed properly by checking URL of your post in <a href="http://www.google.com/webmasters/tools/richsnippets">this Google tool.</a></li>
</ol>
<br />
<b>Disclaimer, recommendations and known issues</b><br />This will access your blog upon your request and will update post adding snippet to the end of it. It potentially can damage post content, for example, it will remove any newlines (not the <br/> tags that will remain, but \n - newlines that will be deleted), because this is how the posts content is presented by Blogger API and I could not find a workaround for it, so <i>this method is not good if you have text in <pre> tags and want to keep newlines</i>. In other cases removing newlines will not affect post layout. I strongly recommend to test it first on a test blog or test post. Also, do not update each and every post, Google might not like it, instead pick content that deserves to have snippet in SERP. Google does not guarantee snippets on SERP even if there is no errors in snippet code, that is stated in their documentation. <br />
Try it and let me know here if you have any issues.<!--gradditautorelated--><br />
<div id="" style="font-size: 14px; max-width: 450px; padding-top: 10px; text-align: left;">
<fieldset id="">
<legend id="">More interesting articles</legend><br />
<ul id="">
<li id="" style="display: block; font-size: 12px; margin-left: -20px; text-align: left; word-wrap: break-word;"><a href="http://fruitfulbookmarks-en.blogspot.com/2013/03/subscriptions.html" id=""><span id="">subscriptions</span></a></li>
<li id="" style="display: block; font-size: 12px; margin-left: -20px; text-align: left; word-wrap: break-word;"><a href="http://fruitfulbookmarks-en.blogspot.com/2012/12/how-to-delete-old-posts-from-ratings.html" id=""><span id="">how to delete old posts from ratings</span></a></li>
<li id="" style="display: block; font-size: 12px; margin-left: -20px; text-align: left; word-wrap: break-word;"><a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html" id=""><span id="">rating widgets for websites, blogs and comments</span></a></li>
</ul>
</fieldset>
</div>
<!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com37tag:blogger.com,1999:blog-1622718725665192500.post-43152727824242791342013-03-30T17:35:00.002-07:002013-05-17T07:14:49.917-07:00Subscriptions<p>Graddit is launching paid subscriptions for ratings widget: <a href="http://www.graddit.com/eng/prices">http://www.graddit.com/eng/prices</a>.</p><b>What are the plans and what is the difference</b><p><ul><li>Free. Fully functional widget, ratings popup can display ads. Ratings popup looks like this:<br/><img src="http://static.graddit.com/img/blog/eng/ratings_widget.png"/>; </li><li>Basic. 5 000 displays without ads daily; after that ads will be enabled; price is $3 per month;</li><li>Pro. 50 000 displays without ads daily; after that ads will be enabled; price is $10 per month;</li><li>Ultimate. 500 000 displays without ads daily; after that ads will be enabled; price is $25 per month;</li></ul></p><p>There also will be functionality enabled for subscribers only.</p><p>Currently subscriptions can only be paid with Paypal. If you would like pay some other way or need higher limits please send your offers to <a href="mailto:sales@graddit.com">sales@graddit.com</a>. </p><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html" id=""><span style="" id="">star ratings rich snippet on google serp with graddit (for blogger)</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-templates-mlnpics.html" id=""><span style="" id="">blogspot template with graddit widgets: mlnpics</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-26331724536930347512013-03-30T07:16:00.000-07:002013-05-17T07:21:01.165-07:00"I like" widget for blogs<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwao-K2-MUuZYDS0e4EtVjbBwpMDxj0gY5ponXBn0jOGpmxG5vBNGI0qpAdF9QrEoahEL-JeW-vDj2BJg9XVf-WsuIiY-jorqzCr2xEOEAbyj9iR3-rP1qnCO8HfLcCqzhwwxhvRBAo9JE/s1600/star-heart.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwao-K2-MUuZYDS0e4EtVjbBwpMDxj0gY5ponXBn0jOGpmxG5vBNGI0qpAdF9QrEoahEL-JeW-vDj2BJg9XVf-WsuIiY-jorqzCr2xEOEAbyj9iR3-rP1qnCO8HfLcCqzhwwxhvRBAo9JE/s320/star-heart.png" align="top" style="float: left; margin-right: 10px;"/></a> Now you can get heart "I like" widget for your blog? Open <a href="http://www.graddit.com/eng/ratings-widget">Graddit widgets</a>, select Like widget on the left hand side and Platform on the right. "Generic" code would be good for single post, for example: I like <div id='rate_59mfxog764' class='ffbs_rate' style='display: inline-block;'><!--{[['<span style="color: rgb(108, 181, 216);">❤</span>']]}--></div><div id='stats_59mfxog764' class='ffbs_stats'></div><div id='src_59mfxog764'><dummy src='http://www.graddit.com/rate/rus/1/59mfxog764?id=rate_59mfxog764&stats=stats_59mfxog764&info=info&info_delay=1&votes=yes'></dummy></div><script type='text/javascript'>$(document).ready(function(){var post_id='59mfxog764';var src=document.getElementById('src_'+post_id).innerHTML;var re=/src=['"](.+)['"]/;var match=re.exec(src);if(match!=null){src=match[1];$.getScript(src);}});</script> or: <div id='rate_59mfxog764_2' class='ffbs_rate' style='display: inline-block;'><!--{[['<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd8H9z-Y184vFN8Dyn7jilVUk0I1TL1i6oylTxCFG6BKP_uC3nWsJ7LUnyCPCWvJvPHsdXZLuYlWp7bbetqCyCV3DG_nBrRb6Sy6ELxPIisNsCaLrG79i4Aj4Lm3iLVv0GZeX5zIGLCMWV/s320/like.png" style="width: 30px;"/>']]}--></div><div id='stats_59mfxog764_2' class='ffbs_stats'></div><div id='src_59mfxog764_2'><dummy src='http://www.graddit.com/rate/rus/1/59mfxog764?id=rate_59mfxog764_2&stats=stats_59mfxog764_2&info=info&info_delay=1&votes=yes'></dummy></div><script type='text/javascript'>$(document).ready(function(){var post_id='59mfxog764_2';var src=document.getElementById('src_'+post_id).innerHTML;var re=/src=['"](.+)['"]/;var match=re.exec(src);if(match!=null){src=match[1];$.getScript(src);}});</script> Actually, you can use any symbols and images with this widget.<br/> If you want it to show on each post automatically you need to select Blogger platform and follow instructions <a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html">here</a>. Instructions for Tumblr can be found <a href="http://fruitfulbookmarks-en.blogspot.com/2012/10/ratings-widget-for-tumblr.html">here</a>.<!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html" id=""><span style="" id="">rating widgets for websites, blogs and comments</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com5tag:blogger.com,1999:blog-1622718725665192500.post-12583697521286489522013-03-02T07:01:00.000-08:002013-05-17T07:12:26.723-07:00Non-blocking ratings widget load<div dir="ltr" style="text-align: left; vertical-align: top;" trbidi="on"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWeB8k-QqwteykOf00FpfvWbShAXJgFOAHFAGucLle71fHCHMKsnOrIWNDE98xQnzsewdDiEW-CSsr1-CpYHMMeYW0IyffMqhn11c7FsHH3BpSF66VXSvnfs5wjXv3YLHHs_REZvyOnZeq/s1600/fast_star.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWeB8k-QqwteykOf00FpfvWbShAXJgFOAHFAGucLle71fHCHMKsnOrIWNDE98xQnzsewdDiEW-CSsr1-CpYHMMeYW0IyffMqhn11c7FsHH3BpSF66VXSvnfs5wjXv3YLHHs_REZvyOnZeq/s320/fast_star.png" align="left" style="margin-right: 10px;"/></a> Sometimes ratings widget can take significant time to load, up to several seconds depending on connection speed and performance of the servers handling request. That leads to bad user experience, site looks stuck. And while battle over Graddit servers performce is not over you can still help your blog yourself. You can load widgets without blocking the whole page, in order to do that go to <a href="http://www.graddit.com/ratings-widget">http://www.graddit.com/ratings-widget</a>, tick "Non-blocking" checkbox and replace your old code with a new one. As stated in the hint there don't forget that it relies on jQuery, so this library should be included (preferably in <head> section of your template). <br /></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html" id=""><span style="" id="">star ratings rich snippet on google serp with graddit (for blogger)</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html" id=""><span style="" id="">rating widgets for websites, blogs and comments</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/03/i-like-widget.html" id=""><span style="" id="">"i like" widget for blogs</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com70tag:blogger.com,1999:blog-1622718725665192500.post-46210856662001567772013-01-27T10:51:00.001-08:002013-05-17T06:56:03.925-07:00Graddit Aggregator: related posts from multiple blogs<div dir="ltr" style="text-align: left;" trbidi="on">Graddit presents new widget called <a href="http://www.graddit.com/aggregator/eng">Aggregator</a>. It allows you to display related posts grabbed from multiple blogs. Demonstration is avaliable <a href="http://fruitfulbookmarks-en.blogspot.com/p/aggregator.html">here</a> - it shows 20 posts labeled "graddit,blogger,widget,seo" from 3 blogs. Aggregator will be useful if you want to cross-link your own similar blogs. Besides, it can be used commercially to show links from sponsoring blogs.<br/><br/>How to setup widget: <ul> <li>open <a hreh="www.graddit.com/aggregator/rus">aggregator</a> page;</li> <li>read rules and limitations. There's paid and free versions. In short, free allows you to use 2 blogs and display widget not more than 500 times a day. First 1000 displays will work as in paid versions, so that you could experiment;</li> <li>on the top press <i>Get code</i> link to open widget parameters tab;</li> <li>provide blogs URLs;</li> <li>configure other parameters. What can be configured: <ul> <li>what to display: related posts or random posts;</li> <li>number of links;</li> <li>links target attribute;</li> <li> style. There are 4 predefined styles or you can choose <i>none</i> and make your own layout; styles samples: <table width="100%"> <tr> <td>Light</td> <td>Gray</td> </tr> <tr> <td><img src="http://static.graddit.com/img/aggregator_light_eng.png" alt="Graddit aggregator, light style" title="Graddit aggregator, light style"></td> <td><img src="http://static.graddit.com/img/aggregator_gray_eng.png" alt="Graddit aggregator, gray style" title="Graddit aggregator, gray style"></td> </tr> <tr> <td>Blue</td> <td>Dark</td> </tr> <tr> <td><img src="http://static.graddit.com/img/aggregator_blue_eng.png" alt="Graddit aggregator, blue style" title="Graddit aggregator, blue style"></td> <td><img src="http://static.graddit.com/img/aggregator_dark_eng.png" alt="Graddit aggregator, dark style" title="Graddit aggregator, dark style"></td> </tr> </table> </li> <li>whether or not use inline styles. Choose <i>no</i> if you're making your own styles;</li> <li>display thumbnails or just text;</li> <li>default thumbnail.</li> </ul> </li> <li>on the right hand side select a platform to get properly generated code;</li> <li>copy code and paste it to a desired place in your template.</li></ul>Currently only Blogspot platform support is implemented. There's also experimantal support of Atom feeds. If you'd like to try atom you'll have to change few lines in generated code manually: add atom feed and set atom platform like this: (shown code aggregates posts from both blogger and atom feed):<br/><pre class="jscript" name="code012713">var sites = {<br /> 'http://fruitfulbookmarks-en.blogspot.com' : 'blogger',<br /> 'http://ruletka.omg-linux.ru/atom.xml' : 'atom',<br />};<br /></pre><br />Other platforms and feed types will be added later.<br/><br/>Few words about paid version. You can automatically subscribe to paid version using Paypal. On the <a href="www.graddit.com/aggregator/eng">aggregator page</a> you need to specify your blog address and set number of related blogs, then press <i>Subscribe with Paypal</i>. Aggregator will check your current subscription and if everything is fine you'll be able to move to payment page. Subscription can be cancelled at any time. Limitations of the paid version: up to 100,000 displays daily, up to 10 linked sites. If you think for your needs it's not enougth please email to <a href="mailto:sales@graddit.com">sales@graddit.com</a>.</div><script type="text/javascript">dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code012713'); </script><!--gradditautomicro--><div><span class="hreview-aggregate"><span class="item"><span class="fn">Graddit Aggregator: related posts from multiple blogs</span></span>, <span class="rating"><span class="average">4.04</span> out of <span class="best">5</span> based on <span class="votes">23</span> ratings <span class="summary"></span></span></span></div><!--//gradditautomicro--><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html" id=""><span style="" id="">star ratings rich snippet on google serp with graddit (for blogger)</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com.es/2012/09/graddit-polls-widgets.html" id=""><span style="" id="">graddit polls widgets</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.ru/2012/04/how-to-duplicate-rating-information.html" id=""><span style="" id="">how to duplicate rating information using javascript</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/03/i-like-widget.html" id=""><span style="" id="">"i like" widget for blogs</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/p/aggregator.html?m=1" id=""><span style="" id="">fruitful bookmarks (eng): aggregator</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-34795075830303720282013-01-25T10:38:00.000-08:002013-05-17T07:14:31.968-07:00Blogspot template with Graddit widgets: mlnpics<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://pastebin.com/ZPmrhzUz">Download template</a><br/><br/>From time to time I'm going to modify and publish free Blogspot templates witn Graddit widgets included. First example mlnpics is based on <a href="http://www.dzignine.com/2011/12/queen/">Queen</a> template from <a href="http://www.dzignine.com/">DZignine</a>. <center>Main page:</center><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6cz3tUL9B62rDycO7svccll8Cd09mDObWsYKRMKjd9chlY7HKi1YRomY1YcPP7gA_NOnAMmgtbQGsX97Odktt8kAlK3mITCwblTbeTXFbATfAZp_xK6nx9gWcMmQ_b5jy1gKqtjBxYW3P/s1600/mlnpics_main.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img style="border: 1px solid #a0a0a0;" height="352" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6cz3tUL9B62rDycO7svccll8Cd09mDObWsYKRMKjd9chlY7HKi1YRomY1YcPP7gA_NOnAMmgtbQGsX97Odktt8kAlK3mITCwblTbeTXFbATfAZp_xK6nx9gWcMmQ_b5jy1gKqtjBxYW3P/s400/mlnpics_main.png" /></a></div><br/><center>Post:</center><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtrgErnQ4rDcVoZyROLPWajnHa63pP1J4TDo3iOlbvikkhEPxePuVqbFD6OGrnpNZCGSztqtSiwlfJMBM8k5eUpxV0nKLgjz-wZinVtmMrH9_ZOJc_8dDO08f-gspkzJQ6MXfaxnVWmUg/s1600/mlnpics_item.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img style="border: 1px solid #a0a0a0;" height="371" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtrgErnQ4rDcVoZyROLPWajnHa63pP1J4TDo3iOlbvikkhEPxePuVqbFD6OGrnpNZCGSztqtSiwlfJMBM8k5eUpxV0nKLgjz-wZinVtmMrH9_ZOJc_8dDO08f-gspkzJQ6MXfaxnVWmUg/s400/mlnpics_item.png" /></a></div><br/>Key features: <ul><li>used widgets: <a href="http://www.graddit.com/ratings-widget">ratings</a>, <a href="http://www.graddit.com/most-popular-widget">tops</a>, <a href="http://www.graddit.com/aggregator/rus">aggregator</a>;</li><li>default "Prev" and "Next" links are replaced with posts titles;</li><li>menu contains links to static pages, those pages display top posts (each page has it's own category). Order of the posts is controlled by graddit widgets and based on average rating. This kind of things are not provided by Blogspot platform by default — something that your visitors may find interesting;</li><li>users can navigate using Ctrl + left and Ctrl + right arrows, easier navigation = better user experience.</li></ul><br />Live demo: <a href="http://mlnpics.blogspot.com">http://mlnpics.blogspot.com</a>.<br/>Template source code is not yet published, please write your comments here if you think something should/might be changed. Download links will appear here later. <br/><br/><i>Important:</i> template does not contain Graddit copyright, but it contains a copyright of the authors of the original template, that should stay untouched, you can not remove it.<br/><br/><a href="http://pastebin.com/ZPmrhzUz">Download template</a></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/03/i-like-widget.html" id=""><span style="" id="">"i like" widget for blogs</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/10/ratings-widget-for-tumblr.html" id=""><span style="" id="">ratings widget for tumblr</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html" id=""><span style="" id="">rating widgets for websites, blogs and comments</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com12tag:blogger.com,1999:blog-1622718725665192500.post-29003488354199707912012-12-04T14:34:00.001-08:002013-05-17T07:21:37.906-07:00How to delete old posts from ratings<p>Sometimes it happens that you need to delete a post from your blog. If you're using graddit best posts widget then your deleted post (if it was popular) will keep showing in tops for some time. As post is no longer existing its title, thumbnail and link itself will be broken. To speed up the process of removal of such posts from tops in <i>Statistics</i> tab of the <a href="https://manage.graddit.com/account/eng">graddit administer panel</a> you now have new options: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFuP09B0nLe-OWmV_5cFFO2Crs03pDyh1JFbDOfQyAqkkZbY_uNsuEgCSODXwmARLcvheaqoohBsOJKyZ0hi3l0lrrQ_C8UbiscHbeERt6z4HEm5wxbJYF10TRv4UREFPlA_w9jDkU54/s1600/rating_actions_eng.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="175" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFuP09B0nLe-OWmV_5cFFO2Crs03pDyh1JFbDOfQyAqkkZbY_uNsuEgCSODXwmARLcvheaqoohBsOJKyZ0hi3l0lrrQ_C8UbiscHbeERt6z4HEm5wxbJYF10TRv4UREFPlA_w9jDkU54/s400/rating_actions_eng.png" /></a></div></p><p><ul><li>X - remove rating history without rating total removal. This allows you to remove post from tops widget, but keep ratings stats (views, votes, etc.);</li><li>☠ - remove rating completely.</li></ul>After rating removal corresponding row in statistics will be marked pink. If a rating was removed completely it will be eliminated from the grid after you refresh the stats page. <p><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/09/graddit-ratings-statistics.html" id=""><span style="" id="">graddit ratings statistics</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html" id=""><span style="" id="">star ratings rich snippet on google serp with graddit (for blogger)</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com6tag:blogger.com,1999:blog-1622718725665192500.post-60886660823923586102012-11-04T16:32:00.001-08:002013-05-17T07:16:10.166-07:00How to sort blogger posts by popularity<div dir="ltr" style="text-align: left;" trbidi="on">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: <a href="http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html">http://fruitfulbookmarks-en.blogspot.com/p/top-posts.html</a>. It displays 5 top articles from this blog. And this one: <a href="http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html">http://fruitfulbookmarks-en.blogspot.com/p/top-posts-about-blogspot.html</a> shows best posts announcements tagged with "blogspot".<br />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: <br /><ol><li><a href="https://manage.graddit.com/account/eng">create an account</a> if you still don't have it;</li><li>create a desired top <a href="https://manage.graddit.com/account/tops">here</a>;</li><li>add graddit-extras.js into <head> section of your template:<br /><pre class="jscript" name="code041112"><script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/></pre></li><li>create static HTML page, switch to HTML edit mode and add jQuery, if you don't have it already in your template:<br /><pre class="jscript" name="code041112"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></pre></li><li>add JS function that will process your posts:<br /><pre class="jscript" name="code041112"><script type='text/javascript'><br />function gradditLoadTopPosts(id) {<br /> var element = $("#" + id);<br /> if (element.length > 0) {<br /> var wrapperDiv = $("#top5");<br /> if (wrapperDiv.length == 1) {<br /> element.find("a").each(function(i, a) {<br /> var host = a.hostname;<br /> var blogHost = "fruitfulbookmarks-en.blogspot";<br /> if (host.indexOf(blogHost) >= 0) {<br /> var docHost = document.location.host + "";<br /> var level1Doc = docHost.substring(blogHost.length, docHost.length);<br /> var level1Post = host.substring(blogHost.length, host.length);<br /> var link = a.href;<br /> if (level1Doc != level1Post) {<br /> link = link.replace(blogHost + level1Post, blogHost + level1Doc);<br /> }<br /> var containerId = "top_posts_" + i;<br /> wrapperDiv.append("<div id='" + containerId + "' style='display: none;'></div>");<br /> var container = $("#" + containerId);<br /> container.load(link);<br /> setTimeout(function() {<br /> var post = container.find("div[class='post hentry']");<br /> if (post.length > 0) {<br /> var newText = "";<br /> if (i > 0) {<br /> newText = "<hr style='width: 100%; clear: both;'/>"<br /> }<br /> newText += gradditCutText(post.html(), 900, 2) + "<" + "br /><" + "br/>";<br /> var startIdx = newText.indexOf("<h3 class=\"post-title entry-title\">");<br /> var endIdx = newText.indexOf("</h3>");<br /> newText = newText.substr(0, startIdx) + "<a href='" + link + "'>" + newText.substr(startIdx, endIdx - startIdx + 5) + "</a>" + newText.substr(endIdx, newText.length);<br /> container.html(newText);<br /> container.show();<br /> }<br /> }, 2000 * (i + 1));<br /> }<br /> });<br /> } <br /> }<br />}<br /></script><br /></pre>Couple of words about changes you might need to make to this function in order to make it working with your blog: <ul><li>#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;</li><li>in line var blogHost = "fruitfulbookmarks-en.blogspot"; replace blog URL with your own; <b>do not include country domain (.com, .co.uk, etc.)!</b></li><li>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;</li></ul></li><li>add HTML elements and tops script call with callback function:<br /><pre class="jscript" name="code041112"><div id="top5"></div><br /><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><br /></pre>Make sure to change top id (33 here) to your own that should be taken from administer page (when you create/manage tops). </li></ol><br />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.<br /><br /></div><script type="text/javascript">dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code041112'); </script><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html" id=""><span style="" id="">ratings from graddit: related posts and tops</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/07/styling-best-posts-and-related-posts.html" id=""><span style="" id="">styling best posts and related posts widgets</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/12/how-to-delete-old-posts-from-ratings.html" id=""><span style="" id="">how to delete old posts from ratings</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com44tag:blogger.com,1999:blog-1622718725665192500.post-91308586419653768892012-10-20T07:44:00.001-07:002013-05-17T07:19:58.922-07:00Ratings widget for Tumblr<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-zV1_ynHAX1nZRFK2t5b3_IoS31ts_y7Y_Dc1T_x_5no1eFjJjNtFjbZDZwn9IRwgwCVUvt_hRsrA1icF0y7CsjzweVBUAMGz4AfFoCgPp2ivk4OrGrXro421c23bZJRTFGF_4EEffk7O/s1600/tumblr.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="120" width="397" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-zV1_ynHAX1nZRFK2t5b3_IoS31ts_y7Y_Dc1T_x_5no1eFjJjNtFjbZDZwn9IRwgwCVUvt_hRsrA1icF0y7CsjzweVBUAMGz4AfFoCgPp2ivk4OrGrXro421c23bZJRTFGF_4EEffk7O/s400/tumblr.png" style="border: 0; box-shadow: none;" /></a></div> Graddit now supports Tumbl microblogging platform. <a href="http://fruitful-bookmarks.tumblr.com">Examples here</a>. To insert a single rating you'll need to copy code <a href="http://www.graddit.com/ratings-widget">from ratings page</a> <i>Generic</i> tab and paste it into desired place while composing new post. To be able to use javascript inside posts you'll have to make some configuration changes:<br/><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggs3rjisVHVzCDaKHQ8ILlGadtVpyZTCqqH_eofFSFvSwD6L1dLVp1NwVLI8a0tiRpDB5RSf_k0GolcahUo2SskDKd-9nsCh5M8K8RNyJ9qfMN1qLORplu0i3yd9lOLK6pm1Gn9T32baI6/s1600/tumblr_settings.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="316" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggs3rjisVHVzCDaKHQ8ILlGadtVpyZTCqqH_eofFSFvSwD6L1dLVp1NwVLI8a0tiRpDB5RSf_k0GolcahUo2SskDKd-9nsCh5M8K8RNyJ9qfMN1qLORplu0i3yd9lOLK6pm1Gn9T32baI6/s400/tumblr_settings.png" /></a></div>To edit settings login to tumblr and press <i>preferences</i> icon (1). Set <i>Edit post using</i> to <i>plain text/HTML</i> (2).<br/><br/>You'll also need to add graddit.css styles in theme settings. <a href="http://www.tumblr.com/customize?">Go to theme customization</a>, press <i>Edit HTML</i> button <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkU64cM-GORgf_6jGTmGYsZmBpNj6RfEPQD8_zc5B4MmyP2__C3mR1Z8CFXgkMgRgohj13bLb05Pku7ydbEIBNPFl_Lecx5Ou1-EqimiTUXHKRdp5FmtOVJW5i2TL1u7uyPkRleLhDzXsU/s1600/tumblr_edit_html.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="156" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkU64cM-GORgf_6jGTmGYsZmBpNj6RfEPQD8_zc5B4MmyP2__C3mR1Z8CFXgkMgRgohj13bLb05Pku7ydbEIBNPFl_Lecx5Ou1-EqimiTUXHKRdp5FmtOVJW5i2TL1u7uyPkRleLhDzXsU/s400/tumblr_edit_html.png" /></a></div>Add styles<br/><center><link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/></center><br/>to <head> section <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxvG8q5oeaaxhKE9aMtStrtYQ_7NGHQlw5uw20Vi04SqEBdVTI-juS242vhPmdctPFNFj7eiKlUh7qqHu61v4HWo29PdXRsJH31XtFdSBDjklwADALIP67kcuoqeS0QEB5x4GUarRbEOHY/s1600/tumblr_styles.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="162" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxvG8q5oeaaxhKE9aMtStrtYQ_7NGHQlw5uw20Vi04SqEBdVTI-juS242vhPmdctPFNFj7eiKlUh7qqHu61v4HWo29PdXRsJH31XtFdSBDjklwADALIP67kcuoqeS0QEB5x4GUarRbEOHY/s400/tumblr_styles.png" /></a></div>Press <i>Update Preview</i>, then <i>Save</i> (if the button appeared). Everything is ready now to use single ratings.<br/><br/>If you'd like ratings to appear on each post automatically you'll need to make some more modifications to your theme template. First decide where you want ratings to appear: what kind of material, what part of post, should it be visible on the main page or only on internal pages, etc. Then try to find corresponding place in the template. Not with all the templates it will be easy to do; experiment with some harmless piece of text first (maybe even with comments). For example, for ratings to be displayed on the top of text posts below the titles on the main page and on internal pages, code needs to be added into {block:Posts} inside {block:Text} block right after closing {/block:Title} <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7oySQ9M9zTPDeFuOFOW0H7pm0pg0HDi4WtU1yXaM8ba6Wd6cXf0hoYczJQ9Auj56oDAdzmb6TU5SBRxrUbLHgGGD85KC60U6skE-CIYyNB96nf4ALF_0p0DGWc_AjtGhPUN8JBvJB1AB/s1600/tumblr_update_template.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="271" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7oySQ9M9zTPDeFuOFOW0H7pm0pg0HDi4WtU1yXaM8ba6Wd6cXf0hoYczJQ9Auj56oDAdzmb6TU5SBRxrUbLHgGGD85KC60U6skE-CIYyNB96nf4ALF_0p0DGWc_AjtGhPUN8JBvJB1AB/s400/tumblr_update_template.png" /></a></div>Don't forget to save the template. Widgets code should be taken from the <a href="http://www.graddit.com/ratings-widget">ratings page</a> <i>Tumblr</i> tab.<br/><br/>Ask questions here if you have any issues with widgets in Tumblr.<!--gradditautomicro--><div><span class="hreview-aggregate"><span class="item"><span class="fn">Ratings widget for Tumblr</span></span>, <span class="rating"><span class="average">4.62</span> out of <span class="best">5</span> based on <span class="votes">8</span> ratings <span class="summary"></span></span></span></div><!--//gradditautomicro--><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html" id=""><span style="" id="">star ratings rich snippet on google serp with graddit (for blogger)</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-templates-mlnpics.html" id=""><span style="" id="">blogspot template with graddit widgets: mlnpics</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com2tag:blogger.com,1999:blog-1622718725665192500.post-3267710947889599142012-10-15T20:23:00.001-07:002013-05-17T07:14:19.958-07:00External related posts<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBx_ON1coKvouBvE3as6M652D31B7hTCBaM1YJKTaGMBrqixbeqGKxxovmtQyWF1siaxk-titoxHz51JB3XcpmSHmhZk4pCAhfatBbXvn5kKA3WoOfB5xK9aBwESI-uK5k3GqNiAtqTVd/s1600/related.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" width="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBx_ON1coKvouBvE3as6M652D31B7hTCBaM1YJKTaGMBrqixbeqGKxxovmtQyWF1siaxk-titoxHz51JB3XcpmSHmhZk4pCAhfatBbXvn5kKA3WoOfB5xK9aBwESI-uK5k3GqNiAtqTVd/s400/related.png" /></a></div><a href="http://fruitfulbookmarks-en.blogspot.com/2012/06/related-posts-widget-update.html">Related posts widget</a> got better. Now you can link to external pages with one click right on recommendations tab in administrator interface.<br/>Screenshot: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1E1rjPfSiKzz0PrE1tFSDEBQtfVVyxXl6pUyPTUx_m3bJZ10wxpdgkF50ME4uVDKCSjLaIwgIsMjPGOcH_XdbIqRtzuOhN49WB333fnSe3Es4qajgkLclswmf5PhgliKOWQsHnpLqvPs/s1600/related_external.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1E1rjPfSiKzz0PrE1tFSDEBQtfVVyxXl6pUyPTUx_m3bJZ10wxpdgkF50ME4uVDKCSjLaIwgIsMjPGOcH_XdbIqRtzuOhN49WB333fnSe3Es4qajgkLclswmf5PhgliKOWQsHnpLqvPs/s1600/related_external.png" /></a></div>How it works: <ol><li>In "switch to" field (1) you enter URL of a page from site you want to link to (that site should have ratings widget installed and a key should be <a href="https://manage.graddit.com/account/eng">generated</a>). Press Enter and wait until it's loaded.</li><li>Chose a parent page on the left panel. Click link (2) to connect recommended page.</li><li>If you setup widget to display thumbnails, for external pages they should be specified manually. For Blogspot users it's easy, just click on (3).</li></ol>Don't forget to save changes. Every time you switch to a new site it's address will be displayed below as a link for quick switching. To switch to pages of the site that you're currently managing click on "Self" link. Links display up to 3 recently used sites. <br /><br/><i>Important:</i> to be able to switch to site this site's "Allow other users to see my ratings" option should be turned on.<br/><br/>Reminding what is what on recommendations page. On the left panel there're the parent pages that you're creating recommendations for. Parent page you're working on right now is expanded and marked green. On the right panel there're the pages of your site. To create new parent page click on "←"; to connect page with parent click on "✓". Lightgray boxes mark pages already connected to selected parent, lightgreen boxes mark pages picked automatically based on labels (but not yet connected).<br/><br/>Coming soon: automatic feed detection (to avoid manual thumbnails setup) and automatic detection of similar pages from external sites. </div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-templates-mlnpics.html" id=""><span style="" id="">blogspot template with graddit widgets: mlnpics</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html" id=""><span style="" id="">rating widgets for websites, blogs and comments</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-71085371650347147262012-09-21T20:32:00.000-07:002013-05-17T07:17:57.961-07:00Hacking Blogger Dynamic Views to support custom widgets<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwRrqpSKGAmCSOrfrpw70YJBds4mBrbgshyphenhyphen0duyks77S7PQNN2BHEP3cb2DO_7suOBJb4B4qrgQymIj4NCoMxXIo7WZjGLN9hdF9_n1zcNSXeF9upwkRNLRqbqd9ju_Gmo_Hya1uQFH8/s1600/blogger_dynamic_views_hacked.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="199" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwRrqpSKGAmCSOrfrpw70YJBds4mBrbgshyphenhyphen0duyks77S7PQNN2BHEP3cb2DO_7suOBJb4B4qrgQymIj4NCoMxXIo7WZjGLN9hdF9_n1zcNSXeF9upwkRNLRqbqd9ju_Gmo_Hya1uQFH8/s320/blogger_dynamic_views_hacked.png" /></a></div>Blogger Dynamic Views are cool, but they support only few official widgets. Today we're hacking dynamic views to support any custom widgets (using Graddit widget as an example, of course).<br/><br/><b>Disclaimer.</b> This is dirty hacking, it can stop working at any time and can even negatively affect behaviour of your blog. You were warned.<br/><br/>So, the goal is to make widgets appear when user expands a post in any view (Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot and Timeline).<br/><br/>First, open Blogger dashboard and go to Template tab; click Edit HTML and then Proceed button.<br/><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRQ8C2B0QlWT8f-gFWZQ2-wg_6XbmuJpG9uBJDOU97DHHRio4KKuL8nlzmH8cg4_EepxTsXZGa8VE1XSvJck50P4JgJaiI5HAYXiiZXovHh3vVDLpWmQlC5BCdWMTsny3DRkURQHO3qg/s1600/blogger_edit_template.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="140" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRQ8C2B0QlWT8f-gFWZQ2-wg_6XbmuJpG9uBJDOU97DHHRio4KKuL8nlzmH8cg4_EepxTsXZGa8VE1XSvJck50P4JgJaiI5HAYXiiZXovHh3vVDLpWmQlC5BCdWMTsny3DRkURQHO3qg/s320/blogger_edit_template.png" /></a></div>For dynamic views we can't change a part of the template that displays posts - it will not work. But we still can change head section. Add the following lines to <head>...</head>:<br/><br/><link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/><br/><script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/><br/><br/>These are styles and some cool scripts. Actually, we will need only one function called <i>gradditBloggerDynamicViewsRatingsHack</i>. Now go to the very bottom of the template and add this call just before closing </body> tag:<br/><br/><script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack();},1000);</script><br/><br/>Or this if you want also to display related posts (You Might Like widget):<br/><br/><script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack(true);},1000);</script><br/><br/>Now save template and close editor. Click Customize button to add some styles (without them stars will not show properly). Select Advanced and then click Add CSS. Add this:<br/><br/><pre>.article .article-content .ffbs_rate img {<br /> padding: 0;<br /> border: 0;<br /> border-image: none;<br /> -webkit-border-image: none;<br /> vertical-align: middle;<br />}<br /><br />.article .article-content .ffbs_stats {<br /> font-size: 10px;<br />}<br /><br />.article .article-content a {<br /> border: 0;<br />}<br /></pre><br/>Click Apply to Blog. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg2s52ViOg3eO5iYQHx1448g8J9BM2B-nr0_3Sd2xiDC-T9bFD3am2vVUCzZ1H6x-UOqYHzON6KV9QC790BPWvC6oaZjHTRodktnMJGJspaQrf9IUDw4lc6zdfPkT7nTiUnxftKU2kjEQ/s1600/blogger_add_styles.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="80" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg2s52ViOg3eO5iYQHx1448g8J9BM2B-nr0_3Sd2xiDC-T9bFD3am2vVUCzZ1H6x-UOqYHzON6KV9QC790BPWvC6oaZjHTRodktnMJGJspaQrf9IUDw4lc6zdfPkT7nTiUnxftKU2kjEQ/s400/blogger_add_styles.png" /></a></div><br/>Now it should be working, open your blog and try! Here's live demo: <a href="http://ffbs-widgets.blogspot.com/">http://ffbs-widgets.blogspot.com/</a>.<br/>Did it work for you? <br /></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/10/ratings-widget-for-tumblr.html" id=""><span style="" id="">ratings widget for tumblr</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com.br/2012/05/best-posts-widget-with-thumbnails.html" id=""><span style="" id="">best posts widget (with thumbnails)</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html" id=""><span style="" id="">star ratings rich snippet on google serp with graddit (for blogger)</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com12tag:blogger.com,1999:blog-1622718725665192500.post-86401621894866066212012-09-16T16:43:00.002-07:002013-05-17T07:01:08.976-07:00Graddit polls widgets<div dir="ltr" style="text-align: left;" trbidi="on">Graddit presents new widgets for polls that you can build into your blogs and sites. Here's a simple poll example:<br /><br /><center><div id='rate20120916_1' class='ffbs_rate'>{[['Bad',' | '],['Average',' | '],['Awesome']]}</div></center><script type='text/javascript' src='http://graddit.com/rate/eng/3/73y9qd8?id=rate20120916_1&class_star=ffbs_star_dark_underlined&class_star_set=ffbs_star_dark_underlined&class_star_vote=ffbs_star_vote_underlined&type=simplepoll&votes=no'></script><br/>Number of options and text can be changed. Take code from <a href='http://www.graddit.com'>graddit page</a>, options are set like this:<br/><br/>{[['Bad','&nbsp;&nbsp;|&nbsp;&nbsp;'],['Average','&nbsp;&nbsp;|&nbsp;&nbsp;'],['Awesome']]}, where '&nbsp;&nbsp;|&nbsp;&nbsp;' are the separators between options; number of options should match the number that is passed to the script as a parameter (3 in this example).<br/><br/>I can be not just text, but any HTML valid element. For example, images:<br/><br/><center>Who rocks?<br/><div id='rate20120916_2' class='ffbs_rate'>{[['<img style="height: 60px;" src="http://static.graddit.com/img/cat.png"/>',' '], ['<img style="height: 60px;" src="http://static.graddit.com/img/dog.png"/>',' '], ['<img style="height: 60px;" src="http://static.graddit.com/img/catdog.png"/>']]}</div><div id='stats20120916_2' class='ffbs_stats'></div></center><script type='text/javascript' src='http://www.graddit.com/rate/eng/3/73y9qd8_2?id=rate20120916_2&stats=stats20120916_2&class_star=ffbs_star&class_star_set=ffbs_star&class_star_vote=ffbs_star&info=info&info_delay=2&type=simplepoll&votes=no'></script><br/><br/>And of course general polls. How do you like the new widgets?<br/><center><div style='width: 300px;'><div id='rate20120916_3' class='ffbs_rate'>{[['So so'],['Okay'],['Perfect']]}</div><div id='stats20120916_3' class='ffbs_stats'></div></div></center><script type='text/javascript' src='http://graddit.com/rate/eng/3/73y9qd8_3?id=rate20120916_3&stats=stats20120916_3&class_star=ffbs_poll&class_star_set=ffbs_poll_set&class_star_vote=ffbs_poll_vote&type=poll'></script></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2011/06/new-feature-quotation.html" id=""><span style="" id="">new feature: quotation.</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/06/managing-widgets-behavior-with-callback.html" id=""><span style="" id="">managing widgets behavior with the callback functions</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/04/how-to-duplicate-rating-information.html" id=""><span style="" id="">how to duplicate rating information using javascript</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/best-posts-widget-with-thumbnails.html" id=""><span style="" id="">best posts widget (with thumbnails)</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/06/how-to-translate-graddit-rating-widget.html" id=""><span style="" id="">how to translate graddit rating widget to any language</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com27tag:blogger.com,1999:blog-1622718725665192500.post-15665207193355859192012-09-03T17:04:00.002-07:002013-05-17T07:12:54.402-07:00Graddit ratings statistics<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJgs-72S3a07Q8JDbJAhawp5vCkjuJzHxk5Eim2NUsE77E6AptHy1MKs4M63u1nowZQTJXN_Fy08AD8VQv-axpmnn1iMS-RlbR6-eqXKOXg7Dhb8VjvI-2KSAySvbBTOH7Hx7_QLxdUA/s1600/graddit_stats_thumb.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJgs-72S3a07Q8JDbJAhawp5vCkjuJzHxk5Eim2NUsE77E6AptHy1MKs4M63u1nowZQTJXN_Fy08AD8VQv-axpmnn1iMS-RlbR6-eqXKOXg7Dhb8VjvI-2KSAySvbBTOH7Hx7_QLxdUA/s200/graddit_stats_thumb.png" width="80" /></a></div><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">There's a new tab in </span><a href="https://manage.graddit.com/account/eng" style="background-color: white; color: #aa4411; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" target="_blank">admin panel</a><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> called "Statistics" that allows you to see detailed data about ratings, views, votes and feedbacks numbers. Also you could get some interesting details such as Google Pagerank, Alexa Rank, Facebook and Twitter mentions (later this will be extended). Here's the tab screenshot:</span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwR3GXxUT0XdPxo3oYtbKM7C_IAcR3sx1Ct8SICBYdY1_oCMQdfUy-Mmw33rwuIxP-eCj9UINn_4D_7e6PSvnFqK_3Nv5kWmuPB0PCmECGN2fvB8fNizn5R6JToxK7t37a2Uj9gCUHGw/s1600/graddit_statistics_en.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwR3GXxUT0XdPxo3oYtbKM7C_IAcR3sx1Ct8SICBYdY1_oCMQdfUy-Mmw33rwuIxP-eCj9UINn_4D_7e6PSvnFqK_3Nv5kWmuPB0PCmECGN2fvB8fNizn5R6JToxK7t37a2Uj9gCUHGw/s400/graddit_statistics_en.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;"><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">It's sortable. To get information about a page click corresponding ⟳ link. Leave your suggestions here in comments.</span></div><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/09/graddit-polls-widgets.html" id=""><span style="" id="">graddit polls widgets</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html" id=""><span style="" id="">ratings from graddit: related posts and tops</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com30tag:blogger.com,1999:blog-1622718725665192500.post-69120443822563500102012-07-06T15:50:00.000-07:002013-05-17T07:22:41.168-07:00Styling best posts and related posts widgets<div dir="ltr" style="text-align: left;" trbidi="on">Play a bit with the styles of <a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/best-posts-widget-with-thumbnails.html" target="_blank">top posts</a> or <a href="http://fruitfulbookmarks-en.blogspot.com/2012/06/related-posts-widget-update.html" target="_blank">related posts</a> in the <a href="https://manage.graddit.com/account/eng" target="_blank">administer interface</a> and you could get cool looking widgets like this:<br /><center><div id="graddit_top_wrapper_styled" style="visibility: hidden;">Top Posts</div></center><script src="http://www.graddit.com/showtop/eng/16?id=graddit_top_wrapper_styled" type="text/javascript"></script><br />Cool looking widget styles and settings: <br /><br /><table border="0" style="width: 100%px;"><tbody><tr><td align="right" width="20%">Image style:</td><td align="left" width="80%"><input style="width: 550px;" type="text" value="background: none; border: 0; padding: 0; width: 100px; height: 100px; box-shadow: 5px 5px 5px #808080;" /></td></tr><tr><td align="right">Title style:</td><td align="left"><input style="width: 550px;" type="text" value="width: 90px; height: 30px; position: absolute; bottom: 10px; font-size: 11px; display: block; background: #a0ffff; opacity: 0.8; padding: 2px 5px 2px 5px; color: #0066cc;" /></td></tr><tr><td align="right">li style:</td><td align="left"><input style="width: 550px;" type="text" value="display: inline-block; word-wrap: break-word; text-align: left; width: 110px; height: 110px; vertical-align: top; margin: 0 3px 0 3px; font-size: 12px; color: grey; position: relative;" /></td></tr><tr><td align="right">Container style:</td><td align="left"><input style="width: 550px;" type="text" value="max-width: 500px; text-align: center; padding-top: 10px; color: #3d9cfa;" /></td></tr><tr><td></td><td>Cut text after 20 characters and then "cut to word";</td></tr></tbody></table></div><div><br /></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-templates-mlnpics.html" id=""><span style="" id="">blogspot template with graddit widgets: mlnpics</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com3tag:blogger.com,1999:blog-1622718725665192500.post-79713214793429306032012-06-24T12:34:00.000-07:002012-07-05T21:19:27.613-07:00Managing widgets behavior with the callback functions<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRWVkGBAmat5PLaAiFPzDUTbfFsnAabzVpos888TLWrI3vydrmW2xZ1LJ60j1jYKDiznF8fqZZSriaDVGVgvXA9joU8PSVRBhrg856MSjnLwC98ZXVX84L_uruXO_GpDOTDQwmXrq4Sr4/s1600/callback.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="155" width="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRWVkGBAmat5PLaAiFPzDUTbfFsnAabzVpos888TLWrI3vydrmW2xZ1LJ60j1jYKDiznF8fqZZSriaDVGVgvXA9joU8PSVRBhrg856MSjnLwC98ZXVX84L_uruXO_GpDOTDQwmXrq4Sr4/s400/callback.png" /></a></div>
By default widgets are displayed on the pages at the place where you set them initially. How to make widget to be shown only when a user riches bottom of the page and be hidden when user scrolls up? To make a solution easier widgets support <i>callback</i> parameter. Using this parameter you can pass control to your function after widget call has completed. More than that, file http://www.graddit.com/js/graddit-extras.js already contains working callback function. Let's see how it works using <a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html">top posts widget</a> as an example.<br />
<br />
Here's the widget call code (it's being called right from this place):<br />
<div id='callback_example' style='visibility: hidden; display: none; position: fixed; right: 10px; bottom: 10px;'>Read our best!</div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/4?id=callback_example&callback=gradditDisplayWidgetCallback"></script><br />
<div id="callback_example" style="bottom: 10px; display: none; position: fixed; right: 10px; visibility: hidden;">
Read our best!</div>
<script src="http://www.graddit.com/showtop/eng/4?id=callback_example&callback=gradditDisplayWidgetCallback" type="text/javascript">
</script>
<br />
The call is here, but you can't see the widget; it's behavior has been changed by gradditDisplayWidgetCallback function. From now on it will be displayed on the right bottom corner of the page when you scroll it all the way down. And disappear when you scroll back up.
<br /><br/>
If you'd like to use javascript function from the example above you'll need to include the js file in your template:<br />
<br />
<script type="text/javascript" src="http://www.graddit.com/js/graddit-extras.js"></script><br />
<br />
That's it! Remeber: you need to include graddit-extras.js and set callback function in the widget call code. From time to time I'll be adding some useful functions into graddit-extras.js (check for updates).<br/><br/>
Reminder: widgets layout can be easily changed from the <a href="https://manage.graddit.com/account/eng">admin panel</a>.
<br /></div>ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-31613575309910375442012-06-24T09:12:00.000-07:002012-06-24T09:12:54.722-07:00How to translate Graddit rating widget to any language<div dir="ltr" style="text-align: left;" trbidi="on">
Graddit rating widget supports two languages: english and russian. That is defined by sending "eng" or "rus" parameter to server (<a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html">read more</a>). Of course, it doesn't look very good when your website is on any different language. Let's see how we can solve this issue using the most popular widget (yellow stars) code as an example. Here's the initial code:<br />
<br />
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><br />
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><br/>
<b:if cond='data:post.labels'><br/>
<b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop><br/>
</b:if><br/>
</div> Rate this posting: <br/>
<b><div expr:id='data:post.id' style='padding-left: 3px; padding-right: 3px; display: inline; visibility: hidden;'>{[[&#39;&lt;img src=&quot;http://img.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div></b><br/>
<script expr:src='&quot;http://graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?stats=&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;id=&quot; + data:post.id + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&quot;' type='text/javascript'/><br />
</b:if>
<br /><br/>
Bold text is the div element we are going to change. In addition to what you see there now it can contain the following data attributes:<br />
<ul style="text-align: left;">
<li>data-label-votes - text for "votes";</li>
<li>data-label-views - text for "views";</li>
<li>data-label-rating - text for "rating"'</li>
<li>data-label-info-rating - text for ratings in popup with detailed votes information.</li>
</ul>
<div>
Check this example to understand it better. The following code (with average=yes parameter added to display rating number):</div><br/>
<div><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br />
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><br/>
<b:if cond='data:post.labels'><br/>
<b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop><br/>
</b:if><br/>
</div> Rate this posting: <br/>
<div <b>data-label-votes='voted: ' data-label-views='viewed: ' data-label-rating='rated at: ' data-label-info-rating='Details'</b> expr:id='data:post.id' style='padding-left: 3px; padding-right: 3px; display: inline; visibility: hidden;'>{[[&#39;&lt;img src=&quot;http://img.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><br/>
<script expr:src='&quot;http://graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?stats=&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;average=yes&amp;id=&quot; + data:post.id + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&quot;' type='text/javascript'/><br />
</b:if>
<br /><br />
Will display rating with custom labels:<br/><br/><div id='rate' class='ffbs_rate' data-label-votes='voted: ' data-label-views='viewed: ' data-label-rating='rated at: ' data-label-info-rating='Details'>{[['<img src="http://img.graddit.com/img/star.png"/>']]}</div>
<div id='stats' class='ffbs_stats'></div>
<script type='text/javascript' src='http://graddit.com/rate/eng/5/uto049e5?id=rate&stats=stats&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&info=info&info_delay=2&average=yes'></script>
</div><br/><br/>
See how it differs from the default one below.
</div>ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com5tag:blogger.com,1999:blog-1622718725665192500.post-31629114426449329062012-06-05T19:32:00.000-07:002013-05-17T07:13:56.875-07:00Related posts widget update<div dir="ltr" style="text-align: left;" trbidi="on"><p><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html">Related posts widget</a> has become much better. What's new: <ul><li>styles to control the layout;</li><li>thumbnails;</li><li>automatic recommendations (based on labels);</li><li>improver user interface (see below).</li></ul><br/></p><b>Interface</b><br/><p>If you haven't got access to the management panel yet, <a href="https://manage.graddit.com/account/eng">do now</a>.<br/>Recommendations tab now has settings: <div class="separator" style="clear: both; text-align: center;"><a href="http://img.graddit.com/img/blog/eng/recommendations.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" width="750" src="http://img.graddit.com/img/blog/eng/recommendations.png" /></a></div><br/>You can: <ul><li> specify what widget should do in case no related posts were set for a page: <ul> <li>pick automatically (based on labels);</li> <li>show nothing;</li> <li>show static HTML. Nothing stops you from adding javascript though;</li> </ul></li><li>show thumbnails (you should set feed URL);</li><li>set number of links to be displayed. If number of related (or automatically found) pages exceeds that number, then specified number of randomly picked links will be shown;</li><li>set max length of displayed titles (or links if it's set to not show the titles);</li><li>change widget layout;</li></ul><br/>Manual related posts creation interface has also changed and became more efficient: <div class="separator" style="clear: both; text-align: center;"><a href="http://img.graddit.com/img/blog/eng/recommendations_manual.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" width="750" src="http://img.graddit.com/img/blog/eng/recommendations_manual.png" /></a></div><br/><b>←</b> link still creates recommendation containers and <b>✓</b> still creates relations, but now when you select a container on the right panel links get highlighted:<br/><ul><li>darkgray — main page (container URL);</li><li>lightgray — related posts (recommendations);</li><li>lightgreen — automatically found related pages that you might want to use;</li></ul><br/>Widget code (for Blogger) you need to take from <a href="https://manage.graddit.com/account/recommendations">the same page</a> , see above the recommendations list. </p><b>Possible issues</b><p><ol><li><i>Not all the pages present on the right panel.</i> That could happen if users from different countries read your blog, in this case pages can be saved into the database with their local domains: your-blog.blogspot.com.nl or your-blog.blogspot.co.uk. To resolve this issue you need to send domain parameter in the widget code. For example (for Blogger):<br/><br/><script expr:src='"http://graddit.com/rate/eng/...url=&quot; + data:post.url + &quot;&amp;domain=your-blog.blogspot.com&amp;labels=...</script><br/><br/>and wait a bit until database gets refreshed data. </li><li><i>No labels are shown.</i> You need to update widget code, just take it from the <a href="http://www.graddit.com/eng">main page</a>. Again, you need to wait a bit before changes will be reflected.</ol></li></p><br /></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html" id=""><span style="" id="">rating widgets for websites, blogs and comments</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html" id=""><span style="" id="">ratings from graddit: related posts and tops</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/best-posts-widget-with-thumbnails.html" id=""><span style="" id="">best posts widget (with thumbnails)</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-83551062151090612172012-05-12T12:36:00.000-07:002013-05-17T07:18:27.315-07:00Best posts widget (with thumbnails)<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html">Graddit tops widget</a> can now show thumbnails. Like this:<br/><br/><div id="graddit_top_wrapper_1" style="visibility: hidden;"></div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/9?id=graddit_top_wrapper_1"></script><br/><br/>Or like this:<br/><br/><div id="graddit_top_wrapper_2" style="visibility: hidden;">best posts of the week:</div><script type="text/javascript" src="http://www.graddit.com/showtop/eng/4?id=graddit_top_wrapper_2"></script><br/><br/>To control this widget there're few new paramters on the tops management panel:<br/><br/><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz01wBwLUBvkMtuxp2Ii0V131dNPzMi0qpGmzUDgK3aUVlVuE8yg70tIxSb7l8kVvUfryXknS_6ox9rE_nBccz5h7649ZLDlvf2KXSXb5F3yO2CQsxDw0-oNEi2nvRkNc5HciimMLpBkQ/s1600/tops_thumbs.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="178" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz01wBwLUBvkMtuxp2Ii0V131dNPzMi0qpGmzUDgK3aUVlVuE8yg70tIxSb7l8kVvUfryXknS_6ox9rE_nBccz5h7649ZLDlvf2KXSXb5F3yO2CQsxDw0-oNEi2nvRkNc5HciimMLpBkQ/s400/tops_thumbs.png" /></a></div><br/><i>Feed URL</i> — your RSS feed URL, (in json-in-script format). This field will be populated automatically when you create a new top.<br/><i>Default image</i> — picture to be shown if no pictures found.<br/><i>Image style, li style and Container style</i> — style of the corresponding html elements, allow you to change the layout of the widget. For your convenience there're 2 presets: for vertical display and for horizontal display.<br/><br/>Enjoy. Feel free to comment and ask questions. <br /></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html" id=""><span style="" id="">ratings from graddit: related posts and tops</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-templates-mlnpics.html" id=""><span style="" id="">blogspot template with graddit widgets: mlnpics</span></a></li><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2013/01/graddit-aggregator-related-posts-from-multiple-blogs.html" id=""><span style="" id="">graddit aggregator: related posts from multiple blogs</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com0tag:blogger.com,1999:blog-1622718725665192500.post-9973147199487601902012-05-06T19:37:00.000-07:002013-05-17T07:19:11.113-07:00Graddit rating widget code update<div dir="ltr" style="text-align: left;" trbidi="on">If you're using Graddit rating widget in Blogger you need to update your widget code; just take new code from Graddit <a href="http://graddit.com/eng">main page</a>. The changes are not critical, but add labels support (for future automatic <a href="http://fruitfulbookmarks-en.blogspot.com/2012/05/ratings-from-graddit-related-posts-and.html">recommendations</a>) and solve issue with incomplete URLs in admin panel. <br /></div><!--gradditautorelated--><div style="max-width: 450px; font-size: 14px; text-align: left; padding-top: 10px;" id=""><fieldset id=""><legend id="">More interesting articles</legend><ul id=""><li style="display: block; word-wrap: break-word; text-align: left; font-size: 12px; margin-left: -20px;" id=""><a href="http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html" id=""><span style="" id="">rating widgets for websites, blogs and comments</span></a></li></ul></fieldset></div><!--//gradditautorelated-->ffbshttp://www.blogger.com/profile/17456754845646147816noreply@blogger.com4