my-blog

A new edition of my jQuery plugin

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="infox" style="background-color: #f0f0f0; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; border-top-left-radius: 1px; border-top-right-radius: 1px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; float: right; font-family: Verdana, Geneva, sans-serif; font-size: 9px; padding: 2px 5px; position: absolute; right: 5px; top: 5px;">
<div class="post-author vcard" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-f5jSOVRPsR-0Ad4pBMaIX7OcLKaw7jIHv75u0-ZJ9JG1wSo5UeNFc9YhJUB2nEqWDTXSVi3uFfGA5nQixVhWuK3ik8lJw_T3II4zhf06SvPAVZuWhpgpHSCYZoCfrBeDPDQxrBv3vs/s12/13.png); background-position: 0px 50%; background-repeat: no-repeat no-repeat; box-sizing: border-box; display: inline-block; margin-right: 10px; padding: 2px 0px 2px 17px;">
<span class="fn" style="box-sizing: border-box;"><a href="https://plus.google.com/103576897175240804409" itemprop="author" rel="author" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #9e6262; text-decoration: none; transition: all 0.4s ease-in-out;" title="author profile">Mohamm</a></span></div>
</div>
<h1 class="post-title entry-title" style="box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 19px; font-weight: normal; margin: 0px 0px 5px; padding: 0px;">
A new edition of my jQuery plugin</h1>
<div class="infox" style="background-color: #f0f0f0; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; border-top-left-radius: 1px; border-top-right-radius: 1px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; float: right; font-family: Verdana, Geneva, sans-serif; font-size: 9px; padding: 2px 5px; position: absolute; right: 5px; top: 5px;">
<div class="post-author vcard" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-f5jSOVRPsR-0Ad4pBMaIX7OcLKaw7jIHv75u0-ZJ9JG1wSo5UeNFc9YhJUB2nEqWDTXSVi3uFfGA5nQixVhWuK3ik8lJw_T3II4zhf06SvPAVZuWhpgpHSCYZoCfrBeDPDQxrBv3vs/s12/13.png); background-position: 0px 50%; background-repeat: no-repeat no-repeat; box-sizing: border-box; display: inline-block; margin-right: 10px; padding: 2px 0px 2px 17px;">
<span class="fn" style="box-sizing: border-box;"><a href="https://plus.google.com/103576897175240804409" itemprop="author" rel="author" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #9e6262; text-decoration: none; transition: all 0.4s ease-in-out;" title="author profile">ed Hassan</a></span></div>
 <div class="d-header" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6gGK00LGID8p-q9R4_rP3TxxoanTEI4SyFAiWMJNagjl1dTSgU-Zp3XUn96fh5vZ6glR6cENT9J084krvIL9YgwllY6Y7kJIJE6mTONpvXIrAXIKVOGVqew4zbw_VpXsqHzCtVUq7f9M/s12/70.png); background-position: 0px 50%; background-repeat: no-repeat no-repeat; box-sizing: border-box; display: inline-block; padding: 2px 0px 2px 17px;">
<span class="timestamp-link" style="box-sizing: border-box;">5:28 AM</span></div>
</div>
<div class="labelatas" style="bottom: 5px; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; position: absolute; right: 5px;">
</div>
<div class="post-body entry-content" id="post-body-6234536985691833812" style="box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 1.6em; margin: 0px 0px 35px;">
<div dir="ltr" style="box-sizing: border-box;" trbidi="on">
<br style="box-sizing: border-box;" /><h3 style="background-color: white; border: 0px; box-sizing: border-box; color: #443b3b; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 18px; font-style: inherit; font-weight: normal; line-height: 20px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div align="center" style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.moretechtips.net/2010/09/smarter-related-posts-widget-for-google.html" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;"><img alt="Smarter Related Posts Widget for Blogger" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArI4Ow8U43dwTzmplwvX_8lxGLqEKuzHIG2ex264k3D43EldWeRSviyH7Hu1x2VXhWGcWORmQfJN7pFQZfhS0Q6LYRq0D5NuMZYre13pGWWEvJZQMAHfTBq7xsH85N_vWNQRIsiLicn8w/s800/related-posts-widget.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid silver; box-shadow: rgba(0, 0, 0, 0.498039) 1px 1px 5px; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; opacity: 1; padding: 5px; transition: all 0.4s ease-in-out; width: auto;" title="Smarter Related Posts Widget for Blogger" width="560" /></a></div>
<span style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A new edition of my jQuery plugin -</span><a href="http://www.moretechtips.net/2009/04/jquery-gdata-api-smarter-related-posts.html" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-size: 13px; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">Related Posts widget for Google Blogger</a><span style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">- that is loaded with pretty new features like posts thumbnails and transition effects..</span><br style="box-sizing: border-box; font-size: 13px;" /><br style="box-sizing: border-box; font-size: 13px;" /><span style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!</span><br style="box-sizing: border-box; font-size: 13px;" /><br style="box-sizing: border-box; font-size: 13px;" /><a href="http://www.blogger.com/blogger.g?blogID=2468881831815835197" name="more" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-size: 13px; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;"></a><span style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span><div dir="ltr" style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Check out this <a href="http://blogger-related-posts.googlecode.com/svn/v2/setup.htm" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">easy setup wizard</a> for demos and code generation. Also, to have code copied to your Blogger blog!</div>
<br style="box-sizing: border-box; font-size: 13px;" /><div align="center" style="border: 0px; box-sizing: border-box; font-size: 17px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<b style="box-sizing: border-box;"><a href="http://blogger-related-posts.googlecode.com/svn/v2/setup.htm#demo4" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">Demo 4</a> | <a href="http://blogger-related-posts.googlecode.com/svn/v2/setup.htm#demo3" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">Demo 3</a> | <a href="http://blogger-related-posts.googlecode.com/svn/v2/setup.htm#demo2" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">Demo 2</a> | <a href="http://blogger-related-posts.googlecode.com/svn/v2/setup.htm#demo1" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; font-weight: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">Demo 1</a></b></div>
<br style="box-sizing: border-box; font-size: 13px;" /><div align="center" style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://blogger-related-posts.googlecode.com/svn/v2/setup.htm" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;"><img alt="Easy Setup Wizard!" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RTc2LQT8fQ2Kc-IYXIXmUoDOx-e6ZN9_HK9eh_BZYck4IXyvh00eTxJ0DgwiOnRm5OtTMdXy2tmZUKk7PRii_NhYoVUe4F9Dhdvz3i3UScFavhwshUhaZCAC0u193hzfNftUx_Zcw-gz/s800/related-posts-widget-setup.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 0px; box-shadow: rgba(0, 0, 0, 0.498039) 1px 1px 5px; box-sizing: border-box; height: auto; margin: 0px; max-width: 100%; opacity: 1; padding: 5px; transition: all 0.4s ease-in-out; width: auto;" /></a></div>
</h3>
<h3 align="left" style="background-color: white; border: 0px; box-sizing: border-box; color: #443b3b; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 18px; font-style: inherit; font-weight: normal; line-height: 20px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Few <b style="box-sizing: border-box;">Notes</b></h3>
<h3 style="background-color: white; border: 0px; box-sizing: border-box; color: #443b3b; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 18px; font-style: inherit; font-weight: normal; line-height: 20px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ul style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; line-height: 19px; list-style: none; margin: 0.4em 0px 1em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: disc; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Code consists of 2 important parts<ol style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: none; margin: 0.4em 0px 1em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: disc; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Including CSS and Javascript files (jQuery library & widget in that order). Each file only needs to exists one time on a page regardless of how many widgets you have on that page. You can include the Javascript files at <head> section or by the end of the page.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: disc; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Placing the container DIV where you want widget to appear, setting class attribute as "<b style="box-sizing: border-box;">related-posts-widget</b>" to have widget automatically loaded! And setting widget options either in an inner HTML <b style="box-sizing: border-box;">comment</b> or in a HTML5 attribute '<b style="box-sizing: border-box;">data-options</b>'.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: disc; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box;">Although previous parts are all you need</b>, You can still call widget at document-ready on a HTML element identified by some selector and pass options in the method call.</li>
</ol>
</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: disc; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Plugin was also tested to work with jQuery v1.3.2 and v1.2.6, Just replace jQuery Javascript source to "<i style="box-sizing: border-box;"><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</a></i>"<br style="box-sizing: border-box;" />Or "<i style="box-sizing: border-box;"><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js</a></i>"</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: disc; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Post thumbnail is usually the first image you insert in the post and it is automatically extracted by Google Blogger and that image must be uploaded to <a href="http://picasaweb.google.com/" style="-webkit-transition: all 0.4s ease-in-out; border: 0px; box-sizing: border-box; color: #bb3300; font-style: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.4s ease-in-out; vertical-align: baseline;">PicsaWeb</a> - directly or through Blogger post editor.</li>
</ul>
</h3>
<h3 style="background-color: white; border: 0px; box-sizing: border-box; color: #443b3b; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 18px; font-style: inherit; font-weight: normal; line-height: 20px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
New Features</h3>
<h3 style="background-color: white; border: 0px; box-sizing: border-box; color: #443b3b; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 18px; font-style: inherit; font-weight: normal; line-height: 20px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<ol style="border: 0px; box-sizing: border-box; font-size: 13px; font-style: inherit; line-height: 19px; list-style: none; margin: 0.4em 0px 1em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Display related posts with/without thumbnails.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Since, images added to Blogger posts are uploaded to PicasaWeb, you can use many custom thumbnail sizes.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">You can use one of 2 CSS styles to help you get started quickly.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Display posts with transition effects or as a fixed list.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Many transition options are available like opacity, width, height, font-size.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Optional timeout technique is used to finish widget loading when one or more feed requests were not completed successfully, instead of waiting indefinitely.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Thumbnails loading is delayed until widget has finished aggregating related posts to avoid loading extra images</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">You can customize it by placing optional parameters -like custom animation- in a HTML comment or HTML5 data attribute.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">You can disable widget if current page is not a post page.</li>
<li style="border: 0px; box-sizing: border-box; font-style: inherit; list-style: decimal; margin: 0px 0px 0px 1.6em; outline: 0px; padding: 0px; vertical-align: baseline;">Widget was rewritten as a jQuery plugin, use a typical jQuery call to load it or auto-load any number of div elements with "related-posts-widget" class in the same page.</li>
</ol>
</h3>
</div>
</div>
</div>