HOW TO: Create Mind Map Inside Google Chrome

If you are blogger then you might be knowing what’s mind mapping. According to Wikipedia, a Mind Map is:

mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged around a central key word or idea. Especially in British English, the terms spidergram and spidergraph are more common, but they can cause confusion with the term spider diagram used in mathematics and logic. Mind maps are used to generate, visualize, structure, and classify ideas, and as an aid tostudying and organizing information, solving problems, making decisions, and writing.

You can use mind-mapping for thinking about the next blog post, create To Dos in form of a map and more. I got to know about MindMapr when I was searching for a mind mapping application for Ubuntu, but was not able to find a good one. Then I skipped to Google Chrome App Store and on the ‘New Apps’ Section, I found ‘MindMapr’. The name of the app says it all. It’s a Mind Mapping Tool which works inside your browser letting you save your maps locally or saving it as a file. You can also save your maps as images so that you can share it with others easily. Here is a screenshot of MindMapr in action:

MindMapr Screenshot
MindMapr Screenshot

There are two ways in which you can save your map: Locally / As a File On Your Computer. Here is a screenshot:

Saving a Map In MindMapr
Saving a Map In MindMapr

There are many other options to save the created map. If you’re going to edit the map later, then save it locally or as a file. Maps are saved as a file when you’re going to edit the map on another computer ( still you need to install the chrome app on that computer ). If you want to share the created map with others, you can save it as an image and then upload it it to a Image Hosting Service.

The Navigator and Inspector Windows helps you to navigate through the map ( the map can as large as possible) and Change Text Style, Weight, Color and more. You can also change Branch Colors.

Overall, this is a complete Mind Mapping Application which you can run inside your browser and can even work on it when you’re offline. The first Screenshot shows the ToDos and Blog Posts Nodes, in a similar way, you can also create a mind map and start brainstorming on your next project or on your blog. MindMapr App’s Minimalism makes it look good and the interface is distraction free.

You can Install this Google Chrome App From Here.

HOW TO: Create Your Own Google Chrome Extension

Since the launch of Google Chrome, it’s been chaos in and around the web. Why Chrome is so popular? It’s simplicity and easy to use and users experience is so easy and no wonder to mention, millions of extensions. So, do you want to create one for your blog for free? Well as a developer its not available. But if can show case it to your friends and publicize about the same. To publish your chrome extension you will need a developer license which will cost $5 per extension. But always you can promote it for free with the help of Dropbox. Only thing is it won’t be published.

Google Chrome Extension

So lets get started: In this tutorial I will teach you the most easiest way to create Google Chrome Extension using JSON script.

Step1: Make a folder with you blog name as the folder name in Documents directory or any other suitable location. In this tutorial I’ll teach you how I created for my blog, you will need to make suitable changes as per your blog.

Step2: Open Notepad, save as “manifest.json” and type the following code in it,

{
“name”: “SmartFatBlogger”,
“version”: “1.0”,
“description”: “Smart Fat Blogger is now on Chrome where you can access the dynamic ability of our full site!”,

“browser_action”:
{
“default_icon”: “icon.png”,
“popup”:”popup.html”
},

“permissions”: [ “http://www.smartfatblogger.in/” ]

}

 Step3: Create another file using Notepad or Dreamweaver as “popup.html” This is file that will go into extension and act as the service that you want to provide for the user.

Step4a: Customize your popup.html, Here in this HTML I’ve posted some links so as to make this tutorial easy, this is what I created using Dreamweaver.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dynamic Smart Fat Blogger</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=”application/javascript”>
$(“div.contentToChange p.firstparagraph:hidden”).slideDown(“slow”);
$(“div.contentToChange p.firstparagraph:visible”).slideUp(“slow”);
</script>
<style type=”text/css”>
<!–
.style1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-style: italic;
font-size: 9px;
color: #666666;
}
–>
</style>
</head>

<body>
<div>
<p><a href=”http://www.smartfatblogger.in/” target=”_blank”><img src=”sfb.png” alt=”flipcard” width=”250″ height=”65″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/flipcard” target=”_blank”><img src=”flipcard.png” alt=”flipcard” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/mosaic” target=”_blank”><img src=”mosaic.png” alt=”mosaic” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/sidebar” target=”_blank”><img src=”sidebar.png” alt=”sidebar” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/snapshot” target=”_blank”><img src=”snapshot.png” alt=”snapshot” width=”108″ height=”38″ /></a></p>
<p><a href=”http://www.smartfatblogger.in/view/timeslide” target=”_blank”><img src=”timeslide.png” alt=”timeslide” width=”108″ height=”38″ /></a></p>
<div align=”left”><span>Developed by SurajKV</span></div>
</div>
</body>
</html>

You can create anything custom, depending on your choice, this HTML file basically represents what you want to do the most as a extension, you can also add RSS feed URL or Subscription box.

Step4b: Have a icon.png file also in that folder for your icon on chrome for display.

Step5: Open Chrome, click “Customize and Control Google Chrome” Option (spanner symbol)> Tools>Extensions.

Step6: Click Load Unpacked Version, Choose the location of the folder that we created initially. You may observe that the extension is loaded. And a small icon to right of address bar you can see your extension.

Click that and Voila! You just created your first Google Chrome Extension for your blog. You can also simply publish, this on Chrome Web store as a developer, follow here! The publish will cost you $5.

From The Author : The quotes used in the code is different from the quotes you use by your keyboard. If this is not working I kindly recommend you to replace all the quotes with your keyboard quotes key.

Did you enjoy this article?

This article is written by Suraj KV. He writes about hot deals and coupon site that offers coupons and discounts for technology and other products including Havahart Wireless fence and Oakley Designs.

How to Search Google Plus Posts?

Google Plus Search

Since the release of Google Plus, one of the most common questions users have been asking is, “How can I search just Google Plus Posts?

Currently, Google doesn't support for searching Google Plus posts directly, you must add site:plus.google.com to the end of the query string in Google search box.

In order to solove this problem, there is a little web app called Google Plus Search. This search engine is based on a public API which is Google Custom Search. It's basically just a search box where you input keywords and the results will come from stuff inside Google+. After you search you can also filter the results to only “Profiles”, “Posts”, “Google Reader” items and so on.

Google Plus Search

The app is available as a Chrome Extension, Android App and as a Web browser add-on for Firefox, Internet Explorer or Chrome.

10 Best Google Chrome Extensions For Web Designers

With so many Google Chrome extensions in the Google Chrome Web store, it’s evident that you would like to check out some exciting and crisp extensions which will be of very great use. Since Google Chrome is one of the fastest web browser it will not slow down with the use of Chrome extensions which is the best part. So, let’s check out the Google Chrome extensions below –

#1 – Speed TracerHomepage

Speed thrills, but kills. This proverb only applies on the roads but in the road of web traffic higher the speed higher the thrill but no killings here. So, the speed tracer is a tool which helps you to identify and fix the performance issues with the web applications. Along with this plugin visualizes the metrics that are taken from the low level instrumentation points inside the browser and then it analyzes them as the application runs. With the help of graphical representation, you can easily find the java script parsing and the execution, layout, CSS style recalculation and then the selector matching is also done with timer fires.

speed tracer


#2 – Aviary Screen Capture – Homepage

Wanted to take the screenshot of the web page effortlessly, then this is the way to go as with this plugin you will be easily able to save the screenshot on the desktop, edit in other aviary apps, captures instantly  even before you blink your eyes, can crop the picture, resize, rotate and can also flip your capture, smart select of the page portion which you wish to take the screen shot, you can even capture the color information, quick launch the 6 aviary design tools with image editor, mark up editor, also a whole range of editor tool support is provided.


aviary screen capture

#3 – Chrome SEO – Homepage

If you are a blogger or a website owner then you would want to do an SEO for your blog so that you can easily feature your blog in the Google and other search engines. The Google Chrome SEO Extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.

chrome seo


#4 – FireBug Lite – Homepage

With the Firebug lite add on for the Google Chrome you can easily edit debug, and monitor CSS, HTML, and JavaScript live in any web page. This is the simplest tool where you don’t have to much look out for the technical know how as this simplifies all the important data and presents on the screen.

firebug lite


#5 – Resolution TestHomepage

Basically with this add on which is dubbed as the Resolution test, you can easily change the size of the browser window for the developers so that you can preview the websites in different screen resolutions so that you can easily include the list of commonly used resolutions as well as with the help of customized option you can choose the one.

resolution test


#6 – Chrome Sniffer – Homepage

With the use of Chrome Sniffer, you can easily inspect web framework/CMS and java script lib which is running on the current web browser and also an additional small icon will be appearing just next to the address bar which can be then indicate the dedicated framework, so that you can make use of open source to the maximum.

chrome sniffer


#7 – Lorem Ipsum Generator – Homepage

Lorem Ipsum actually is a very great add on for the Google Chrome as this one allows to choose words per paragraph and number of paragraphs as you can see in the above picture.

lorem ipsum generator


#8 – Internet Explorer TabHomepage

If you recently come to using the Google’s Chrome from the earlier version of Internet Explorer then you would want to know whether is there any way that you can get the IE styles tab view, yes you can very well get that, all you will be needing is the IE tab add on for Chrome.

internet explorer tab


#9 – Meta SEO InspectorHomepage

Meta data is not just the usual HTML meta tags, but the XFN tags, various micro formats, the recently introduced canonical attribute, the no-follow links and so on. So, meta SEO inspector too is a great add on for Chrome.

meta seo inspector


#10 – Eye DropperHomepage

Do you love colors and would like to color the way you want to see then Eye dropper allows you to pick the colour from any web page or from the advanced colour picker so that the colour of your choice can be used as per your require.

eye dropper