Archive for January, 2013

Jquery Photo Zoom Plugin

Posted: January 12, 2013 in Jquery, Must Watch

Introducing a new jQuery PhotoZoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector, take a look this live demo.
Jquery Photo Zoom Plugin



Download Script
     Live Demo

Author

Arun Kumar Sekar
Arun Kumar Sekar

Engineer, Plugin Expert
Chennai, INDIA

 

The Basic Setup

Include the jQuery and PhotoZoom plugin libraries into your document using script tag.

<script src=”jquery.js”></script>
<script  src=”photoZoom.min.js”> </script>
<script>
$(document).ready(function()
{
$(‘body’).photoZoom();
});
</script>
//HTML Code
<body>
<img src=’one.jpg’/>
<img src=’two.jpg’/>
……
……
</body>

You can customize container design by modifying CSS elements.

$(“body”).photoZoom(
{
zoomStyle : {
“border”:”1px solid #ccc”,
“background-color”:”#fff”,
“box-shadow”:”0 0 5px #888″
}
});

Here you can reuse onMouseOver and onMouseOut events.
$(“body”).photoZoom(
{
onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});

Courtesy:http://www.9lessons.info/2012/12/jquery-photo-zoom-plugin.html

Advertisements

Custom Google Search

Posted: January 8, 2013 in HTML 5, Must Watch
Tags: ,

Google Custom Search is one of those tools whose list of Plus points is nearly endless. From providing super relevant search results  to options for On-Demand Indexing. GCS is a boon for all Blog and Website Owners.But the one thing that doesn’t fit in place is its exceedingly over simple Search Form ,that again with Google Watermark. In this post I will be telling you how to change the Look of your GC Search Box with a CSS3 search Box.

I am assuming that you have already setup your Google Search Custom search engine if you haven’t then check this tutorial. There are many variations GCS but normally the code contains a <script> tag , and it looks something like this:

01 <div id="cse" style="width: 100%;">Loading</div>
02 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
03 <script type="text/javascript">
04   google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
05   google.setOnLoadCallback(function() {
06     var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
07     customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
08     customSearchControl.draw('cse');
09   }, true);
10 </script>

Here you can’t really see where to apply the styling. Now the following code also works the same way as the above Code, only thing is that it is easy to Customize :

1 <form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown">
2   <input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/>
3   <input value="FORID:11" name="cof" type="hidden"/>
4   <input id="q" style="width:150px;" name="q" size="70" type="text" />
5   <input value="Search" name="sa" type="submit"/>
6 </form>

In the id “searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” , XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY is your “Search engine unique ID” which you can find on the Control panel of your search engine.

If you are using the Adsense linked GCS then your search Box should look something like this:

01 <form action="URL of the page where the Result open id="cse-search-box">
02   <div>
03     <input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />
04     <input type="hidden" name="cof" value="FORID:10" />
05     <input type="hidden" name="ie" value="ISO-8859-1" />
06     <input type="text" name="q" size="21"  />
07     <input type="submit" name="sa" value="Search"  />
08   </div>
09 </form>
10 <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

(If you want to remove the default styling then exclude the script tag above and also remove id=”cse-search-box” from the 1st Line)

 

Courtesy:-Prayag Verma http://www.stylifyyourblog.com/2011/07/customize-google-custom-search-box.html


As a blogger, the URL field in the WordPress comments form is a constant pain – either spammers are using it to drop shady links, or readers feel compelled to fill it with garbage just to fill in the field. Either way, it’s a nuisance. But how do you get rid of it?

Well, I spent a long time searching for the solution to this problem last night, and I’ve written up a solution for removing the URL field that takes into account a number of different scenarios you might encounter!

Obligatory warning! Never apply these types of changes to a production site – I keep a copy of my website themes on a testing server and make changes there. I suggest you do the same!

Before we begin

Most of the changes we’ll be making will be in your WordPress theme. In my experience, there are a few different scenarios that we need to be aware of:

1. Your WordPress theme doesn’t have a comments.php file

If your WordPress theme is missing the comments.php file, WordPress will use the default template, located in /wp-includes/theme-compat/comments.php. This is all well and fine, but the fix detailed below requires the comments.php file to exist in the theme directory.

To overcome this, copy the comments.php file from the folder above into your theme folder. Once you’ve done this, follow the next step:

2. Your WordPress theme has the comment fields inserted manually

Most modern themes will use the <?php comment_form(); ?> code snippet at the bottom of the comments.php file. If this isn’t present in your comments.php file, then you should look for a line of HTML/PHP code that refers to a ‘URL’ field. Simply delete that line and your WordPress comments form should now be missing the website field!

In this scenario, you don’t need to progress to the more advanced solution detailed below – you’re all done!

3. Your theme’s comments.php calls comment_form()

OK – so your comments.php file contains:

<?php comment_form(); ?>

And comments.php is located inside your theme directory? You’ve come to the right place! Step this way…

Remove the Website URL field

OK, open up your theme’s functions.php file and add the following code to the end of the file:


add_filter('comment_form_default_fields', 'url_filtered');
function url_filtered($fields)
{
if(isset($fields['url']))
unset($fields['url']);
return $fields;
}

This code snippet is from TechHacking. However, they talk about implementing it as a plugin. It’s easier if you just add the code to functions.php in your theme.

Now, refresh your blog pages and the URL field should be missing from the comment form. (Aside: if the changes don’t appear right away, make sure you’re not running a caching plugin, and if you are, be sure to flush the cache!)

Best WordPress Plugins 2012

Posted: January 2, 2013 in Wordpress

New year 2013 has arrived. I am wishing you happy new year. Today I decided to share 20  Best WordPress Plugins That I Used In 2012.

Here I am providing you the list of all the WordPress Plugins that I personally used in 2012 both free and paid, these plugins are best for SEO and Design and are MUST HAVE plugins.

Premium Best WordPress Plugins

1. CommentLuv Premium

Adds CommentLuv links to comments, protects you from spam, encourages twitter followers, adds keywords to names and increases traffic and community!

2. MaxBlogPress Ninja Affiliate

This plugin Automatically convert keywords on your blog into money making affiliate links. Also manage, track, cloak and shorten unlimited number of affiliate links from one central location of Maxblogpress Ninja Affiliate. This plugin helped me alot in saving my time and managing all affiliate links. Ninja plugin is a must have plugin for serious affiliate marketers.

3. Freebie Subscribe To Download For WordPress

Tap into your sites traffic and turn it into a newsletter / email list super builder! I’ve used this plugin to send iThesis template to those who signup to my email list.

Free Best WordPress Plugins

4. Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

5. Disable Directory Listings

Prevent virtual directory listing services from listing the contents of directories, and/or show a page in place of a directory’s listing. This plugin is one of the Must Have WordPress Plugins to protect directories.

6. Google XML Sitemap for Images

This plugin will generate a XML Image Sitemap for your WordPress blog. Just After installing this plugin Open the settings page to create your image sitemap.

7. Jetpack by WordPress.com

Excellent plugin with lot of features.  Jetpack enables you to connect your blog to a WordPress.com account to use the powerful features normally only available to WordPress.com users.

8. nrelate Related Content

Easily display related content on your website. Very easy to configure and install.

9. Author hReview
A perfect plugin to boost affiliate sales and to write a great review. Add support for hReview and AggregateRating based on schema.org.

10. Simple Google Sitemap XML

Generates a valid Google XML sitemap with a very simple admin interface

11. Thumbnail For Excerpts

Thumbnail For Excerpts allow easily, without any further work, to add thumbnails wherever you show excerpts (archive page, feed…).

12. WordPress SEO

The first true all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and much more.

13. Facebook Page Promoter Lightbox

All your visitors should know about your facebook page and tell their friends. With this plugin you can display a preconfigured Facebook Page-Like Box inside a lightbox. This plugin is still helping me to get more likes on my ABT Fan page.

14Comment Reply Notification

When a reply is made to a comment the user has left on the blog, an e-mail shall be sent to the user to notify him of the reply. This will allow the users to follow up the comment and expand the conversation if desired.

15. W3 Total Cache

Improve site performance and user experience via caching: browser, page, object, database, minify and content delivery network support.

16. Limit Login Attempts

Must have WordPress Plugin to protect blog from hackers and limit the login attempts. It Limit rate of login attempts, including by way of cookies, for each IP.

17. RDFa Breadcrumb

RDFa Breadcrumb outputs fully customizable breadcrumb path. This plugin has inbuild RDFa markup, so google rich snippet will show breadcrumbs in search results. After activating, It started showing breadcrumbs in search result within 12-24 hours for this blog.

18. Smart Archives Reloaded

An elegant and easy way to present your posts, grouped by year and month. You can see live demo here.

19WangGuard

Best plugin to stop spam registration.  WangGuard protects each web site in a personalized way using information provided by Administrators who report sploggers world-wide, that’s why it’s very important that you report your sploggers to WangGuard. The longer you use WangGuard, the more effective it will become.

20. WP Smush.it

It Reduces image file sizes and improve performance using the Smush.it API within WordPress.

So these were 20 Best WordPress Plugins That I Used In 2012. Don’t forget to share this post on social networks. I’m sure your followers will find it helpful!

Courtesy:-http://allbloggingtips.com/2013/01/01/20-best-wordpress-plugins-that-i-used/