blogfreakz.com » Tooltips

TinyTips jQuery Plugin

Marvin@Blogfreakz — Fri, 03 Feb 2012 06:14:01 +0000

Web designer Mike Merritt designed a jQuery plugin that will give more definition on your web site by adding tooltips to any element on a page. You can check out his work in this DEMO.

Download the development version and production version zip files.

HTML

tinyTips 1.0

Testing tinyTips

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean ut nunc metus, gravida tincidunt libero.

Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus.

Maecenas vestibulum nibh non nibh viverra posuere. Sed tristique eleifend elit sit amet varius.

jQuery/Javascript

Place the following at the head of your page as you include the TinyTips and jQuery.

To add tooltips, use the following:

Do provide a tooltip style and content attribute.

Add the following to the stylesheet. You can create your own style by naming the class .yournameTip and use your name as the tip style. By using the dev version, you can also modify the markup for tooltips.

.lightTip { width: 342px; }

.lightTip .content { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }

.lightTip .bottom { height: 14px; background: url(../images/notch-white.png) top center no-repeat; }

.yellowTip { width: 342px; }

.yellowTip .content { width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }

.yellowTip .bottom { height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }

.orangeTip { width: 342px; }

.orangeTip .content { width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }

.orangeTip .bottom { height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }

.redTip { width: 342px; }

.redTip .content { width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }

.redTip .bottom { height: 14px; background: url(../images/notch-red.png) top center no-repeat; }

.greenTip { width: 342px; }

.greenTip .content { width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }

.greenTip .bottom { height: 14px; background: url(../images/notch-green.png) top center no-repeat; }

.blueTip { width: 342px; }

.blueTip .content { width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }

.blueTip .bottom { height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }

.purpleTip { width: 342px; }

.purpleTip .content { width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }

.purpleTip .bottom { height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }

.darkTip { width: 342px; }

.darkTip .content { width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }

.darkTip .bottom { height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }

Incoming search terms for the article:

Top Ten Web Designing Software

Nancy — Fri, 18 Nov 2011 23:48:10 +0000

So piggying back after the awesome new Photoshop tutorials from our Blogfreakz readers, I have highlighted some more fantastic web designing programs worth investigating too!

Web design is the first and foremost element that captures the attention of a visitor. Of course the other contents that retain visitors and make them perform an action in the website are important too, however, it is imperative that no stone should be left unturned to get all the attention of visitors. Today creating websites have become as easy as pie, thanks to the website builders and web design software. With so many web design software available in the market, it makes it difficult to choose and this list of top ten web designing software can guide you to choose the one best suitable for your needs. Enjoy!

Photoshop is undoubtedly must be the 1st in the list of web design software. When it comes to manipulating images or creating graphics for websites, Photoshop is the go to software. This has been the number once choice of web designers and web design companies to create that picture perfect web design. The innumerable tools available in the software make it very easy, even for the novice designer, to create amazingly attractive web designs. Apart from its several benevolent features that help in creating web pages, the software comes with excellent support in the form of help files, tutorials, and online support.

Dreamweaver, one of the most preferred software in the web design industry. Several features of the software such as syntax highlighting, code hinting project and workflow management ensures easy way of creating flawless web templates. One other feature is its in built FTP client which allows the users to have a glance at end product as well as the source code.

If you are on the lookout for a convenient tool for slicing and dicing a design mockup into HTML/CSS, Fireworks is the perfect software.

Kuler can help you create, alter, blend, and match colors as you wish. When it comes to creating color swatches or using RGB and HEX codes, this could be the best one in the market.

Pixlr is one other image editor that is note worthy. In fact you can perform most of the tasks you would do with your Photoshop editor. Although not up to the caliber of Photoshop, it is surprising that you can download this software free of cost.

Photoscape is yet another free software where you can create and manipulate images and designs similar to that of Photoshop.

Pingdom is a favorite tool of web developers when it comes to testing the performance of the designed pages. It points out any flaws in web page and thus helps designers to create perfect design.

Panic Coda which is similar to Pingdom is for Mac OS X operating system. It enables the designer to identify flaws and allows a design team to work in unison to eliminate flaws.

Yuuguu is a multi-platform screen sharing tool, which again comes handy when several techies are involved in the design project.

BEEdit is an HTML and text editor for Mac, which includes features for editing, searching, and manipulation of text. It comprises required HTML tools for creating a perfect coding.

This list is by no means exhaustive, and if you guys want me to expand on any of those not yet listed, please do let me know in the comments!

Incoming search terms for the article:

Photo Manipulation Tutorials: 50 Wickedly Creative Tips

Ahmad Hania — Wed, 16 Nov 2011 19:31:57 +0000

Wicked Tips and Tricks – lets see what some of you Blogfreakz out there can do!

Since our last Photoshop tutorial titled: Adobe Photoshop Tutorials: Collection of Amazing Tips And Tricks , we got so much positive feedback that we decided to put together another collection of tutorials concentrating on photo manipulation. In this post, you’ll find everything from How to Create Cityscape Concept Art to Making a Devastating Tidal Wave in Photoshop. Now the hard part will be deciding which of these amazing tutorials you will use in your next creations. Hope you enjoy!

Incoming search terms for the article:

A Simple Edit WordPress Theme to Support Sidebar Widgets

Nancy — Mon, 14 Nov 2011 21:24:32 +0000

What do you do, when after an exhaustive search for the perfect WordPress theme that you love, all of a sudden you run into an error message saying that your new theme doesn’t support your sidebar widgets?

Try these steps to edit the sidebar widgets to fix it!

1. Backup your theme files and folders.

2. Edit the functions.php file, and paste these lines of code to the top of the file — and Save It.

if ( function_exists(’register_sidebar’) )
register_sidebar();
?>

3. Edit the sidebar.php file, and paste these lines of code right below of the first
tag of the file.

|| !dynamic_sidebar() ) : ?>

4. Still inside the sidebar.php file, paste these line of code right above of the last
tag of the file and save it.

Now try to edit your sidebar widgets, it should be working now.

Incoming search terms for the article:

edit php files

incoming search terms wordpress

light simple theme wordpress 2011 november

simple wordpress theme

wordpress theme frameworks html5

wordpress themes simple

Rebranding Rules that You cannot Override

ContentLabz — Fri, 04 Nov 2011 00:29:07 +0000

Rebranding is certainly not a common practice among marketers. It raises my hackles whenever I am asked to take part in a re-branding exercise because there are so many examples of great failures that I think twice before committing myself to action. It is not just about money, other things are involved intrinsically and a minor mistake could be snowballed into massive marketing disaster. And so like any other sane marketing professionals, I do not like the idea of being branded as failed marketer. Such appreciation might not be that much helpful for landing a job. So, here are some must follow rules that every marketer should follow before rebranding your blog’s name:

Make Sure Rebranding is A Necessity: You should to take to rebranding only if the practice is unavoidable and not just to rub off the rust. If your blog has been around for quite a while, you may need to change the logo or the slogan time to time just to make your company look relevant with the change of time. Google has done the same thing and Microsoft has done it too. But make sure there is a solid reason behind this otherwise, backlash is waiting for you at the end.

Rebranding for Good: You need to make it a point that the rebranding exercise is doing good to your online reputation, and not the other way around. It does not make any sense to make changes in the name or in the logo just for the sake of doing something good. There are some glaring examples when the old one looks and sounds better than the new one. Make sure that you are not going to add another example to this vast list.

Test it: It is good practice to have a test run of the rebranding marketing mix on a small group of people and get their feedback. If the feedback is positive and impressive, you can go ahead with the plan and have a blast. But if the result is less than positive, you should stop and try to figure out what went wrong with it. After fixing it rerun the same marketing plan and see if thing is taking a favorable turn or not.

Do Not negate Existing reputation: This is where most marketers go wrong. They give little attention or no attention to existing brand reputation. You need to get into the mindset of the people before digging into something new. Your rebranding exercise should not play with the emotion of existing customers. The rebranding exercise should be a welcome move and not an aggressive move.

Stick To history: Unless the purpose is to make a dramatic move from previous stance, rebranding exercise should be linked with the history of the blog. You are free to expand, revitalize and reenergize brand image of your blog but make sure that people can still relate it to you. A complete deviation is certainly not a welcome move by any standard.

Put On Your Thinking cap: Yes before you make a single move in the direction of refreshing the public image of your organization, you need to have a clear idea how your targeted audience are going react. Just make sure that you are planning to make them happy and you are good.

This is a the first guest post of Michael Evans. I hope all you blogfreakz out there, find this new article informative and refreshing.

Author Bio
Michael Evans is a passionate writer and he has been writing for Site2You which is the best online website builder. He has written different article on web design, online marketing and SEO. He is equally enthusiastic about latest gadgets.

Incoming search terms for the article:

rebranding

re-branding

rebranding rules

rebranding examples in 2011

rebranding images

rebranding nesessity

rebranding logo why not to test it

rebranding rules colour

rebranding exercise

rebranding examples 2011

Automatically Tweet Your Blog Posts to Twitter With FeedBurner

Nancy — Sat, 29 Oct 2011 01:01:12 +0000

Looking for a simple way to automatically update twitter with your latest blog posts, so your blog readers can find the latest news and updates? Here it is…

Now, there are many websites and plugins that offer to automatically tweet your blog post when you update your blog, but today we’ll focus on Google Feedburner. Google Feedburner is very easy to use.

Here are the steps to configure Google Feedburner :

Sign in into your Google account with this through http://feedburner.google.com
Login with your account and then click on your website feed. (domain.feed)
Click “Publicize” tab like picture below :

Then select “Socialize” like picture below:

Select “Add a Twitter Account”, and modify the Post Content drop down menu and choose “Title and Body”
Uncheck “ Leave room for retweets”

And of course don’t forget to Click “ Activate” button

See the picture below :

Everything is done! Now you are ready to add, update and tweet your post in your blog automatically to your twitter whenever you update your blog with a post .

Note :
FeedBurner will shortening your URL something like example this : http://goo.gl/

Incoming search terms for the article:

feedburner not working socialize

feedburner twitter not working

google feedburner twitter

socialize twitter feedburner

tweet your blog posts automatically

How To Set WordPress Permalink (rewrite rules) on Nginx

Nancy — Fri, 19 Aug 2011 01:09:03 +0000

These rules are already in the .htaccess on apache, but if you want to be cutting edge, and get the best performance out of your WordPress blog, you can redo them in Nginx!

Why would you want to do this anyways? Simple. In terms of serving static file requests, Nginx will take up lesser memory, use few resources and is just clearly faster.

The permalink rules need to be placed in your nginx site configuration (the vhost file) under your sites name. You could also put them for all sites if you really want.

Here is a basic example:

That is one correct way, but there are better ways to do this too. Say you know all your static files in the wp- folders are of: jpg, css, php, or js formats, then you should try this:

By doing that you can be more efficient, which if you’re moving to nginx is the whole idea. You’ll notice I didn’t parenthesis encapsulate everything like the prior statement and that’s because the parenthesis captures the item… we don’t need to capture… so I just used the parenthesis to OR the values.

I find the most useful link for Nginx stuff is: http://wiki.nginx.org/

This particular information can be found here: http://wiki.nginx.org/HttpRewriteModule

Keep mind, this is wiki, so to be honest one should always run a live test on your application and see for yourself.

Also – the rewrite rules for much of the Nginx config options are in regexp… so you may need some foundation knowledge first and may have to look up how to modify it. So if you see this, leave me a comment. Let me know what you like to see.

Incoming search terms for the article:

nginx wordpress permalinks

nginx wordpress permalinks css

wordpress permalinks rules nginx

nginx wordpress rewrite js scripts

nginx WordPress Permalink day and name

wordpress permalink rewrite rules

wordpress nginx rewrite rules

WordPress nginx rewrite author

wordpress nginx rewrite

permalink nginx wordpress

How to add a Facebook “Like” button to your WordPress Blogs

Nancy — Thu, 18 Aug 2011 18:24:45 +0000

Now, it is easier than ever to add the Facebook famous “Like”/”Recommend” to your posts and increase your blog popularity. The “Like” button allows users to share their ‘like’ of your WordPress Blog with their friends on Facebook.

Every time a user clicks on the “Like” button on your blog, it creates a status update on the user’s Facebook News Feed with a link back to your WordPress Blog.

Here is how you do it:

1.       Login as administrator to the WordPress admin panel.

2.       Go to Appearance -> Editor.

3.       Place the following code wherever you want the like button to appear:

ID)); ?>&layout=standard&show_faces=false&width=350&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:350px; height:25px”>

4.       Save the changes, and the final result should look like this:

Incoming search terms for the article:

like button

facebook style

facebook like

add news facebook code

status likes for facebook codes

wordpress admin panel

facebook like button

ajax iframe facebook

facebook like button wordpress

add facebook like button to wordpress

Customizing your WordPress Dashboard Display

Nancy — Wed, 17 Aug 2011 09:07:22 +0000

What is WordPress Dashboard?

Wordpress dashboard is the first page that you encounter when you log into your blog administration area. The “default page” allows you to see everything that is happening with your blog, from the main posts, stats, recent comments, wordpress news, and any plugins/widgets or updates you might be interested in. You, as the blog administrator can use Dashboard to do just about anything on your blog.

However, sometimes there is so much information on the Dashboard that it can actually get in the way of what you are actually trying to do. Customizing your WordPress Dashboard Display can improve user navigation, and can help streamline your publishing process.

Here’s what we are talking about from a default wordpress dashboard:

So why customize it?

The custom control over appearance and functions of your WordPress Dashboard can really make your publishing process MUCH MUCH easier. you can clear the clutter , and place relevant controls and information to you on it!

Suggestion: You can tailor your experience with a few easy steps

Here is how to set the wordpress dashboard display:

Log into your wordpress admin.

Select the “Screen Options” tab to open the settings options. Upper –right corner- this opens up your Dashboard configuration options.

Here you can choose your Dashboard preferences. Choose as many widgets you want to show, and how many columns for your screen layout.

Click again to close the Options Screen settings option.

Done.

Incoming search terms for the article:

43 tutorial wordpress

wordpress user dashboard

wordpress dashboard layout

[\core\][\yoast_db_widget\]);#

wordpress dashboard

wordpress dashboard appearance

wordpress dashboard columns-prefs

wordpress dashboard customise

wordpress dashboard customize

wordpress dashboard improve

Jquery Toastmessage – Android-like Notification

Mufti Ali — Sun, 30 Jan 2011 17:00:00 +0000

jquery-toastmessage-plugin is a JQuery plugin which provides android-like notification messages. It’s a quite nice way to report info or error to the user. jquery-toastmessage was founded by akquinet A.G.

Features

Informations are introduced as toastmessages to the user in a seamless and natural way

Toastmessages may or may not disrupt the user and they are still informative

4 different predefined types of toasts: notice, success, warning and error

Fully customizable

Easy to use API

The Source code, demo page and wiki page available on github. Jquery-toastmessage-plugin is licensed under the Apache License 2.0.

Requirements: jQuery Library
Demo: http://akquinet.github.com/jquery-toastmessage-plugin/demo/demo.html
License: Apache License

Incoming search terms for the article:

jquery notification

jquery mobile notification

notification jquery

jquery notification like facebook

jquery notify

jquery toastmessage

jquery android notification

toastmessage

jquery toast

jquery Mobile toast