How To Kick Blogger

Notebook Blogger Template

2013-12-16T02:50:00.001-08:00

Back again with a unique and fresh blogger template. It looks like notebook and can be used as your personal diary. Notebook blogger template is great for personal blogs in which you love to share your experiences and thoughts.

Notebook Template Features

Notebook Like Text Body
Your text will be served in a more awesome way than the typical white backgrounds. Your reader will get attracted to read it because it looks like a personal diary.

Polaroid Images With Beautiful Light Box View

On a neat and clean notebook like template background, polaroid images looks awesome. Any image you upload on your blog will be converted to polaroid form automatically. These images when clicked will show up in a lightbox gallery in full size with the list of all other images on that particular post.

Customized Comment

It's not only the text area that looks nice, the template too has been customized to fit in the notebook theme.

ReadyMade Header
Most of the bloggers know nothing about designing. For this, like our Prevogue Template, we have created the header that fits for every blog. Notebook template will automatically add the blog title with a beautiful google font (combo) on the header background.

Other features Include
Compatible with all browsers.
Social Media ready.
SEO Friendly.
Horizontal top Navigation Menu.
Unique and Fresh theme.

Demo

Notebook Template Customization

Header Menu

Click on Template in your blog's Dasboard. And then click on Edit HTML. A box will appear with codes in it. Press (Ctrl and F) in your keyboard. A search box will appear on the box. Write Books in the search box and press enter.
You will find this code.

Code

 
<div class="menu">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Download</a></li>

<li><a href="#">Books</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

<br style="clear:left" />

</div>

Replace yellow color with the text of your menu items and # with respective links.
<li><a href="#">Your Text</a></li> is the basic structure for your menu text and links. If you wish to add more items to your menu. Just keep adding this line above </ul> line and change text and links with your own. Like that you can also delete any menu item.

Social Media Buttons

Click on Template in your blog's Dasboard. And then click on Edit HTML. A box will appear with codes in it. Press (Ctrl and F) in your keyboard. A search box will appear on the box. Write <div class='kicksocial'> in the search box and press enter.
You will find this code.

Code

 
<div class='kicksocial'>

<span> <a href='http://feeds.feedburner.com/howtokickblogger' target='_blank' title='Subscribe'><img src='http://i1180.photobucket.com/albums/x402/imskf/rss_zpsbb60abdd.png'/> </a></span>

  <span> <a href='https://www.facebook.com/pages/How-to-kick-blogger/418226311564841' target='_blank' title='Follow On Facebook'><img src='http://i1180.photobucket.com/albums/x402/imskf/facebook_zps43e6c616.png'/></a></span>

  <span> <a href='https://twitter.com/kickblogger' target='_blank' title='Follow On Twitter'><img src='http://i1180.photobucket.com/albums/x402/imskf/twitter_zpseb1aa95b.png'/></a></span>

</div>

Now change my rss, twitter and facebook links with yours.
Change green color links with your own profile links.

That's all you have to do to personalize this cool blogger template. If you have any problem, feel free to ask in comments.

Popular Blogger Templates Collection

2013-11-30T09:04:00.001-08:00

Blogger Templates are the most essential part of a blog. It not only gives a good look to your blogger hosted blog but also provide layout for you to efficiently manage your widgets and blog posts. Though blogger provide many templates in its dashboard, different blogs have different requirements. Good blogger templates makes your visitors more engaged in your blog. Instead of editing your default blogger templates, it is better to search for the blogger templates that fits in your blog niche. That helps you focus more on your posts than searching and wasting your time on customizing your template. There are themes available for every kind of niche.

Blogger Templates

I recently designed two blogger templates, Prevogue and Artcase. So, I thought to showcase a collection of the best themes that are ever made for blogger. We are here with some of the most popular and most productive blogger templates that will help you in your blogging journey.

Keilir

Demo Download

Really nice blogger template with a cool background image. Best for personal blogs to share your great moments and stories. One of my favorite.

ScrapBlog

Demo Download

Beautiful theme that can be used as a personal diary. Quite a popular blogger template in creative template category.

Keep It Simple

Demo Download

As the name suggest, it is quite simple and sober. Neat and clean look.

Firebug

Demo Download

One of the best blogger template in dark category. Firebug has one right sidebar and a header for adding widgets and labels.

Aspire

Demo Download

The designer did a lot of hard work on this template. Aspire has all the features required for a complete blogger template.

MetroMinimalist

Demo Download

Metrominimalist has been a hit since it has been released. One of the most used theme for new blogs. It has a nice looking design pattern with social media buttons and a drop down menu at the top.

Grey Press

Demo Download

Grey press is all about reading and writing. Nothing more, nothing less.

Kontify

Demo Download

A complete blogger template with every thing you will need. Good for professional blogging.

Butterfly

Demo Download

Good looking template for personal blogs. Looks quite attractive.

Welcome Autumn

Demo Download

One of the best brown colored blogger template.

The Style

Demo Download

Nice for fashion and photography related blogs.

Galauness

Demo Download

One of the most popular blogger template. Great for photography and image related blogs. Have fun with it.

If you liked our collection, please share it.

Get More Likes And Exposure For Facebook Page

2013-10-05T11:17:00.000-07:00

Facebook being the most popular social networking site has a lot of potential when it comes to marketing and promoting your content. Although spamming is killing facebook communities but with some good moves you can acquire a lot of limelight. We will here discuss three ways of gaining more likes on your facebook page. Of course there is adding facebook like box to your blog way of gaining more likes.

Using @ On Facebook

Facebook @tag feature is quite old but not many people use it. @ is used on facebook wall or comments to invoke any facebook page or profile. You can use it not only to tag your facebook friends but also tag any facebook page. Facebook has a nice feature which automatically suggest you while you type in the words.

After you select what you have to tag, @pagename will be replaced with full page name and linked to that page automatically.

You can make use of it and tag your facebook page of your blog anywhere you like - on your wall, friends wall or on comments in groups or communities. Your facebook page will gain exposure and in turn likes.

Easy Way To Explore Groups On Facebook

Groups are easiest way to promote your content on facebook. But becoming part of a lot of groups is not the only thing you should care. Groups user numbers and quality is the as much important. So, instead of facebook.com we will use m.facebook.com to find groups. It is the site for mobile users but using it instead of facebook.com for finding groups has great advantages. Facebook mobile site is very fast compared to facebook main site. Just log in on m.facebook.com and click on search button on the top. Enter your keyword and hit enter.

Then click on the groups tab to refine to search to include only facebook groups. Keep on clicking more results at the bottom and more results will keep appearing in blink of you eye. Join groups with good amount of members.

Trick To Invite All Friends

Inviting friends is the first thing anyone does when he creates a new page. What if you have a lot of friends? Inviting thousand friends can be very hectic for you and might skip it. But you don't need to skip that page next time you create a facebook page. Follow this cool trick to invite all your friends to like your facebook page in one click. The only limitation is that you have to use Firefox Browser for this. Go to your page to invite your friends. Then select all friends and scroll to the bottom till all your friends are loaded. Then simply Press Ctrl+Shift+K to open a dialog box. Paste this code in the that box and press enter.

javascript:elms=document.getElementsByName(“checkableitems[]“);for (i=0;i < el
ms.length;i++){if (elms[i].type=”checkbox” )elms[i].click()};

This is it. All your friends are now selected for invitation.

These methods will help you gain more exposure for your facebook like page. Best of luck with it.

Show Or Remove Date From Google Search Result

2013-09-27T10:31:00.001-07:00

Google receives more than 3 billion search queries each day which makes it more popular search engine than all the others combined. With time google have developed a lot not only in terms of it's search algorithm but also in showing the search results. Meta description, Date, Google authorship and Ratings are features that help visitors choose the best among the search results displayed on google. Among them showing publishing date on search result page is most helpful for blogger especially new bloggers. People searching for news on any topic usually go for articles with more recent publishing date shown on google search result.

Although date tags are present in official blogger templates, customized third party template might have these tags removed or might have replaced it with any other date scripts that are not google friendly. If your blog is one of those that don not show dates on google search result or you find it more appropriate to remove it from the search snippet, we have solution for both.

Code

 
<span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

<a class='timestamp-link' expr:href='data:post.url' itemprop='url' 

rel='bookmark' title='permanent link'><abbr class='published' 

expr:title='data:post.timestampISO8601' itemprop='datePublished'>

<data:post.timestamp/></abbr></a>

</b:if>

</b:if>

</span>

This uses ISO 8601 which is the International Standard for presenting dates. It allows many date formats which are included in blogger CMS and can be changed under Timestamp in blogger settings. This system is language independent which makes it easy to read for all.

To show dates on google search result you have to include the above code in your blogger template where you like the dates to appear on your blog. To add it below your post title, find <div class='post-header-line-1'> in your blogger template and just below this line paste the above mentioned code. To remove the dates from search result, simply find and remove the above code.

All your new content will show proper date in search snippet, older contents will show dates when google updates your search results which is usually within a day. To find if it working on your blog, go to google rich snippet tool, enter any of your blog post and click Preview.

You will see the publishing date listed. If it shows up in rich snippet tool, it will show up in google results in some time.

10 Points Checklist To Decrease Bounce Rate For Blogger Users

2013-09-17T05:01:00.002-07:00

Bounce rate is the percentage of visitors that left your blog after viewing single page. Let's say you have 100 visitors on your blog on some day and out of those only 10 visitors clicked on any other page within your site. Other ninety left your site just after viewing the single landing page. Then your bounce rate is 90% which is actually quite bad. Anything less than 70% bounce rate is good for a blog. The lesser, the better. Bounce rate gives you an idea of how well your blog is received by your visitors. High bounce rates signify that visitors are only interested in the a piece of information and not your site. You need to make your blog more interesting and provide valuable content to gain your visitors trust. But, this is not all.

This check list contains 10 things you must consider to decrease your bounce rate. Read this check list and tick/check on every point you already implemented on your blog and check your score at the end of the post. You like to get 10 out of 10, don't you?

Navigation
Navigation is the most essential part of your blog. Whether it's SEO, Design, User Experience or Bounce Rate, navigation plays a very important role. Well structured category menu helps your visitors instantly pick up their interest on your blog. Be thorough and careful when you categorize your blog topics. Full width menu below blog header, important category/labels at the sidebar and related category/labels below your post are common navigation structures. Make a site architecture that lets your visitor easily navigate through your site.

Design
When someone visits your blog for the first time, you just have the heat of the moment to impress your visitor to go through more content and engage with your site. The first thing that attracts the attention of a new visitor is design. Awesome, well made and clean looking blogs helps in decreasing the bounce rate as it develops a kind of curiosity in the mind of the visitor that this site may have some valuable content. However, if you are not good at design and cannot afford a designer, keeping it simple is the best option.

Open External Links In New Tab
Opening all your external links in the same tab/window will divert all attention of your visitor to other site. To let visitors get back to your blog after they are done with external links you have to open all external links in a new tab/window. You can easily add this option for external links in blogger post editor.

Speed
Speed has a great impact on blogs performance. Faster loading blogs tend to have lesser bounce rates and better user experience. Many a times visitors have to wait a lot before your blogs loads up for them. There are many factors responsible for slow blog loading speed from high quality images to large number of external dependencies. Two common problems that occur on blogger platform are -

Only add widgets that are necessary for your blog. Widgets increases your blog loading time, so avoid widgets useless widgets and concentrate only on what is needed.
Another common thing is showing a lot of posts on home page and label pages. A lot of bloggers show huge number of posts on their home page without enabling Read More option. Read more option adds great value to your blog. It makes your blog more readable and loads only some images that makes your blog load faster. Also make sure that you do not show more than 10 posts on your home page and label pages.

Popular Posts
Let's say you have a blog with good loading speed and great design. Now that you have grabbed the attention of your visitor you have to show him the best of your content. Something that makes sure that your blog provides valuable and helpful content. This not only decreases your blog bounce rate but also push him to become a regular visitor to your blog.

Search Box
Adding a site wide search box to your blog will make sure you have an answer for all the queries of your visitor. When your blog has some useful content, the visitor is intrigued to find what's your opinion on the topics he is interested in. Search box not only is great for usability, it also helps in decreasing your blogs bounce rate.

Related Posts
The main purpose of this widget is to decrease the bounce rate of your blog and increasing the number of pageviews that your blog gets. When a visitor finishes reading one of your post, you present him some other content from your blog that are related to what he is reading. Related Posts widget maintains his flow on your blog.

Avoid Popups
When ever we visit a site and a popup appears to us before the content, we get irritated. Don't we? This applies to your visitors as well. Sometimes they do help you in getting some more subscribers or facebook likes but on the cost of user experience. It is recommended that unless you are a very popular blogger, avoid popups.

Links To Related Posts
This is one the most recommended step that you must take to decrease your bounce rate. Links to related content on your blog post not only adds value to that post but also pushes user to view more content related to it which decreases your bounce rate significantly. This is more effective than the related posts widget.

Valuable Content
Although listed at last, this is most important when it comes to bounce rate. If you have useless scraped content that provides no value then applying all the above nine steps would not be helpful in decreasing your blogs bounce rate. Quality content is the first step to blogging success.

Your Score 0 /10

Hope that you get full 10 on this checklist.

Latest News Widget For Blogger

2013-09-14T06:38:00.000-07:00

People love news and breaking stories especially something that is related to their interest. Blogger is very limited with widgets especially interactive widgets. But we are here to learn to add a breaking news widget to our blogger hosted blogs. We will use JavaScript to recall the news posts and play show and hide with them. We will then add some styles and colors to make it look awesome on your blog.
The best thing about this Breaking News Widget is that whenever you create a news post, the title text of that post automatically start to show up on rotation and you don't need to manually update it. So, you just have to add the codes to your blogger template once and forget it.

How Does Breaking News Widget Work

For this widget to work on your blog, you have to add a specific label to all the posts that are to be included in this news category. All these posts will show up on the news bar with rotation. For example, you add the label 'news' to all the posts that you want to feature on this widget. All the latest posts with the label 'news' will show up on this widget with the help of that label rss feed. You can also add the feed of an external website like BBC or CNN to showcase the breaking news around the world. Just go any site and pick the site feed url or any category feed url. For example, if you want to feature only technology category news on your blog, then you should get the technology rss feed address and update the code with that address.

Codes To Add To Your Blog

Before making any changes to your blogger template, do remember to download it first. The Backup copy will help you if anything goes wrong while applying the widget.

Add below codes just before </head>

Code

 
<script src='http://www.google.com/jsapi'> 

</script> 

<script src='https://googledrive.com/host/0Bw5Ph-OwuTz6Wjh6amVDZE9GaGM'> 

</script> 

<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'/>

Add these codes to the place where you want the widget to show up. This widget is best suited below your navigation menu.

Html

 
<div class='kickbloggernews'>

<div class='stpo'>

<script type='text/javascript'>

var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)

cssfeed.addFeed(&quot;How To Kick Blogger&quot;, &quot;

http://www.howtokickblogger.com/feeds/posts/default&quot;)

cssfeed.setentrycontainer(&quot;div&quot;)

cssfeed.filterfeed(10, &quot;date&quot;)

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

<div style='clear:both;'/>

</div>

Add the below codes just before </b:skin>

CSS

 
.kickbloggernews {

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3w2DVEpdfslRrqJ3TdckuZ11pjaLSw6ZWSWWk8hu3wQgynbD-0YjbQPN_XSD_mqDPvBtj1Hal8DFE93BGQFuqrHWoUhlANeBSpqZrjlkF3XINkyBDMKFoxaHxeHhGVKM3bO9DbJ7Zgs/s1600/news.gif") no-repeat scroll 0 0 transparent;

    color: black !important;

    height: 50px;

    margin-left: 15px;

    width: 970px;

}

.stpo {

    float: left;

    margin-left: 30px;

    margin-top: 4px;

    overflow: hidden;

    padding: 8px 8px 11px 40px;

    position: relative;

    width: 780px;

}

/* Style by howtokickblogger.com */

#example1 {

width: 780px;

height: 14px;

border: 0px solid #aaa;

padding: 0px;

text-transform:none;

text-align:left;

background-color:transparent;

}

.titlefield {

    border-radius: 5px;

    padding: 5px 25px !important;

    background: none repeat scroll 0 0 #CEE1F0;

    color: black !important;

    font-family: josefin slab,trebuchet ms;

font-size: 15px;

letter-spacing: 0.5px;

}

That is all you have to do to show the awesome latest news widget on blogger. Change the text in red color with Site Name and yellow color text with the feed address. Change the number in skyblue color with the number of posts that are to be included in the widget. If you change that number to 5. Latest 5 posts from that label or category will keep rotating on this widget.

Also, if you like to add some border effect to this news widget. Add these codes just before </b:skin>

CSS

 
.titlefield {

border-top: 1px solid #4790C8;

border-bottom: 1px solid #4790C8;

border-left: 4pxsolid #4790C8;

border-right: 4pxsolid #4790C8;

}

Enjoy showing some cool stuff on your blog. Connect with us for more awesome blogger widgets.

Blogging Quotes To Inspire You To Succeed

2013-09-07T22:45:00.000-07:00

Becoming a successful blogger is a Herculean task these days. You need to be consistent. You need to be interesting. And you need to be relevant. You need to avoid writer's block. Need to keep updated about your blogging niche. And to keep focused on your blog. All these needs some kind of motivation. We will here be going through some of the best blogging quotes that might help or motivate you in your blogging journey.

Blogging Quotes About Hard Work

Hard work is the mother of success. This also implies to blogging. Without hard work, you cannot become a successful blogger because all those secrets of success that people tell you will not work for long time. Shortcuts are for short time only. If you want to consistently grow as a bloggers gaining loyal readers and visitors, you need to put hard work in your blog. Work that stands out. There are success stories of bloggers who earned success through very hard work. Let's read some quotes about hard work, some of which might prove to be the motivation behind your blogging success.

There are no secrets to success. It is the result of preparation, hard work, and learning from failure. - Colin Powell

Work hard in silence, let your success be your noise.

Talent is cheaper than table salt. What separates the talented individual from the successful one is a lot of hard work. - Stephen King

Opportunities are usually disguised as hard work, so most people don't recognize them. - Ann Landers

I'm a greater believer in luck, and I find the harder I work the more I have of it. - Thomas Jefferson

There is no substitute for hard work. - Thomas A. Edison

Everything you've ever wanted is right out of your comfort zone.

Hard work without talent is a shame, but talent without hard work is a tragedy. - Robert Half

Work as if there's no one to help you, and learn as if everybody is with you.

We forget that every good that is worth possessing must be paid for in strokes of daily effort. We postpone and postpone, until those smiling possibilities are dead. - William James

Somewhere in the world someone is training when you are not. When you race him, he will win. - Tom Fleming

Plans are only good intentions unless they immediately degenerate into hard work.- Peter Drucker

The only place success comes before work is in the dictionary. - Vincent "Vince" Lombardi

Consistency and hard work equals success. You can't do anything half-assed and expect to do well.

Striving for success without hard work is like trying to harvest where you haven't planted. - David Bly

Blogging Quotes On Patience

Have Patience and don't give up. If you want to become a successful blogger who have to understand that there are two secrets to get success, first is hard work and second is patience. Continue with your hard work because there are no shortcuts to any place worth going and have patience because although it is bitter, it's fruit is sweet. Most people start their blog with a lot of hard work and energy but slow down because they don't get the expected results. This is one of major cause for why so many bloggers fail.

If you give up at the base of the above analytics visitors graph you will never reach at the top of it. Most of the top bloggers have the same graph when they started their blog.

Many of life's failures are people who did not realize how close they were to success when they gave up. - Thomas Edison

Still round the corner there may wait, A new road or a secret gate. - J.R.R. Tolkien

Patience is bitter, but its fruit is sweet. - Aristotle

There is something good in all seeming failures. You are not to see that now. Time will reveal it. Be patient. - Sivananda Saraswati

A man who is a master of patience is master of everything else. - George Savile

Patience is not a virtue. It is an achievement. - Vera Nazarian

Experience is what you get when you don't get what you wanted. - Randy Pausch

You can work harder than everyone else and still fail! - That's Life.

With time and patience the mulberry leaf becomes a silk gown. - Chinese Proverb

Why is patience so important?
Because it makes us pay attention. - Paulo Coelho

Taking The Right Path

It is really important to first make sure you are good for blogging. If you are not sure, you will probably waste a lot of time and hard work. Blogging requires you to stay interesting and relevant all the time. If also requires you to be consistent. From choosing the domain name to selecting the niche for your blog, everything needs to be relevant. If your blogging journey is in the right direction, your chances of success becomes very high.

Though you can love what you do not master, you cannot master what you do not love. - Mokokoma Mokhonoana

You have to learn the rules of the game. And then you have to play better than anyone else. - Albert Einstein

Find what you love and let it kill you. - Bukowski

Just don't give up trying to do what you really want to do. Where there's love and inspiration, I don't think you can go wrong. - Ella Jane Fitzgerald

Be yourself; everyone else is already taken. - Oscar Wilde

Quality is never an accident; it is always the result of intelligent effort. - John Ruskin

If you want to continually grow your blog, you need to learn to blog on a consistent basis. - Neil Patel

Thinking outside the box will make sense only when you know what is inside the box.

The first thing you need to decide when you build your blog is what you want to accomplish with it, and what it can do if successful. - Ron Dawson

The currency of blogging is authenticity and trust. - Jason Calacanis

Stop freaking out and just Choose Again. You can Always just Choose Again. - Rev. Dr. Renee Waun

Blogging Quotes On Inspiration

Inspiration is another companion of your blogging journey. You need to organize yourself to make sure that you don't get trapped in writer's block. Constantly getting new post ideas will make sure you don't lag behind others in your niche when it comes to giving your readers new food of thoughts and useful content. Read these inspiration quotes that will help you stay focused on your dream.

Dreams are not those you see when you are asleep, dreams are those that keep you awake. - Dr. APJ Abdul Kalam

The very first company I started failed with a great bang. The second one failed a little bit less, but still failed. The third one, you know, proper failed, but it was kind of okay. I recovered quickly. Number four almost didn’t fail. It still didn’t really feel great, but it did okay. Number five was PayPal. - Max Levchin

It ain't how hard you hit, it's how hard you can get hit and keep moving.

Today is the first day of the rest of your life. Make the best of it.

If at first you don't succeed; call it version 1.0.

Move fast on your ideas and fail fast ,don't sit and wait for someone to try everything. - Mark Zuckerberg

Every morning in Africa, a Gazelle wakes up. It knows it must run faster than the fastest lion or it will be killed. Every morning a Lion wakes up. It knows it must outrun the slowest Gazelle or it will starve to death. It doesn't matter whether you are a Lion or a Gazelle... when the sun comes up, you'd better be running.

A year from now you may wish you had started today. - Karen Lamb

I hated every minute of training, but I said, 'Don’t quit. Suffer now and live the rest of your life as a champion. - Muhammad Ali

Experience is a hard teacher because she gives the test first, the lesson afterwards. - Mokokoma Mokhonoana

The only thing you really have in your life is Time. If you invest that time on yourself to have great experiences that are going to enrich you, then you can't possibly lose. - Steve Jobs

Man cannot discover new oceans unless he has the courage to lose sight of the shore. - André Gide

I don't wait for moods. You accomplish nothing if you do that. Your mind must know it has got to get down to work. - Pearl S. Buck
That's all we have.

Add Option To Change Text Font Size On Blogger Using jQuery

2013-09-01T06:03:00.002-07:00

Blogger always lacked plugins and tutorials to optimize your blog according to your needs or show some awesomeness to impress your visitors. One such thing is changeable font size of your article's text. We are here to learn a simple way of adding an option to your blog to let your visitors adjust the font size according to their wish. Not only does it adds more dynamicity to your but also lets your visitors read your content comfortably.
First we will add the jQuery library to get started with our codes to implement font resizer on blogger. We then have to wrap our post body into a div with a unique id. Then add the + and - font size buttons where ever you want them to show up on your blog. It is quite simple with your blogger template markup. Let us go through the codes that we have to add on our blogger template.

How To Add Font Resizer To Blogger

Search for </head> and just before it add the below codes.

Code

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"> </script>

Search for "post-body entry-content" without quotes. You will see something like

Line

 
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

You have to do two things. First you have to replace "post-body entry-content" with "post-body entry-content kickblogger". And Second you have to add the below code above that line. This will add the Font Increase and Decrease Buttons just before the post body. However, you can put them where ever you want them to appear.

Code

 
<div class="btnsheet">

<input type="button" id="btnkickplus" value="A +" />

<input type="button" id="btnkickminus" value="A -" />

</div>

After implementing these two things, it will look like

Code

 
<input type="button" id="btnkickplus" value="A +" />

<input type="button" id="btnkickminus" value="A -" />

<div class='post-body entry-content kickblogger' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

The font resizer is ready to be used with your blogger template. Just visit any post page and click on + and - buttons to increase or decrease font size on your blog. Although the font resizer is ready to be used on your blog but you want to style it, don't you? So, we will customize the buttons with CSS to make them more attractive.

Font Size Button Styles

Default (without any style)

Gray Color Font Resize Buttons

Code

 
.btnsheet {

    text-align:left;

    margin-left: 5px;

}

#btnkickplus,#btnkickminus {

    border: none !important;

    background: gainsboro !important;

    padding: 2px;

    font-family: georgia;

    margin-right: 5px;

}

Sky Blue Color

Code

 
.btnsheet {

    text-align:left;

    margin-left: 5px;

}

#btnkickplus,#btnkickminus {

    border: none !important;

    background: skyblue !important;

    padding: 2px;

    font-family: georgia;

    margin-right: 5px;

    font-weight: bold;

    border-radius: 5px;

    color: white;

}

That all we have for you in this tutorial. If you have any questions, feel free to comment.

ColorFlux Text Related Posts Widget For Blogger

2013-08-23T12:06:00.000-07:00

Blogger is becoming better with new options and features. It now provides a lot of cool templates including dynamic view. Added Search Preference options for better control of your blog and posts. Blogger has many widgets to add to your blog but it lacks one of the most important widget i.e the related posts widget. This showcases the posts in your blog that are similar to the current blog post.

While there are many ways of showing it, we will here learn how to add a text related posts widget to blogger. We will use CSS to make it visually appealing so that your visitors will have an itch to click on it. Related Posts Widget is one of the best way of increasing engagement and pageviews of your blog.

Features Of ColorFlux

The Colorflux shows text without any image thumbnail. While thumbnail widget is also quite popular, related posts with text has many benefits. It loads faster than all the others and it can be easily customized with css style sheet.
It is made visually appealing with nice color combinations and google font. Shows different background and different text color on each link. That make them stand out from each other.
It shows posts links in accordance with your labels. So, you need to be careful when adding labels to your articles. Do remember that labels shows up in alphabetical order in your blog post.

Adding The Codes To Your Blog

Add below code just before </head>

Code

 
<style>

#relatedposts ul li:first-child {

    background-color: rgba(255, 0, 0, 0.6);

    width: 565px;

}

#relatedposts ul li:first-child a {

    color: moccasin;

}

#relatedposts ul li:nth-child(2) {

    background-color: rgba(244, 164, 96, 0.6);

    width: 520px;

}

#relatedposts ul li:nth-child(2) a {

    color: sienna;

}

#relatedposts ul li:nth-child(3) {

    background: none repeat scroll 0 0 rgba(255, 215, 0, 0.6);

    width: 470px;

padding-bottom: 10px !important;

}

#relatedposts ul li:nth-child(3) a {

    color: #444444;

}

#relatedposts h2 {

    background: transparent;

    color: salmon;

    text-align: left;

font-size: 22px;

padding-bottom: 10px;

font-family: exo,Trebuchet MS !important;

}

#relatedposts {

    padding-top: 15px;

    text-transform: none;

width: 625px;

font-family: exo, Trebuchet MS;

}

#relatedposts a {

font-size: 16px;

}

#relatedposts ul {

    list-style: none outside none;

    text-align: left;

}

#relatedposts li {

    margin-top: -6px;

    padding: 15px 18px;

}

</style>

<!--Related Posts Style By "How To Kick Blogger"-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

var relatedpoststitle=&quot;Related Posts &#8594;&quot;;

</script>

<script src='http://kickblogger.github.io/blogger/related-text.js'>

</script>

</b:if>

<!--Related Posts End-->

<link href='http://fonts.googleapis.com/css?family=Exo:600' rel='stylesheet' type='text/css'/>

Add it where you want your Widget to appear.

Code

 
<!--Related Post Code-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='relatedposts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'> var maxresults=3; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> </b:if> <!-- Related Posts Code End-->

Optimizing The Related Posts Widget

If colorflux don't fit in your blog width, you can decrease the size by reducing the width marked in blue color. 625 is the total width and 565, 520 and 470 are widths of first, second and third block respectively. You must have to change the total width first for all others to take effect.
If you do not want to show the heading text of your related posts, you can remove it by adding the below code to your css style sheet.

Code
```
 
#relatedposts h2 {

display: none;

} 
```

Go on fill colors to your blog.

Load Your Google Fonts Faster For Better Site Loading Time

2013-08-12T05:07:00.000-07:00

Typography is becoming more and more essential part of web design with time. Google fonts is a free service from google that provides open source fonts to everyone for free. One really great thing about google fonts is that you can easily add them to your blog with just a single line of code. Just go to google fonts, select the font and add the code before </head> tag in our template or follow this tutorial on adding google fonts to your blog.
This is quite sweet and easy but when you start to try multiple google fonts combinations on your blog, you then have to make sure that you try everything possible to send less http request and load less size. Adding multiple fonts or combinations to your site can impact your page loading time significantly. With google algorithms always keeping an eye on your page load time, you have to optimize your site for better response time.
But for every problem there is a solution. And we have a workaround for google fonts too. Just follow these two methods to load google fonts on our site faster.

1. Single HTTP Request For All Google Fonts

First method is add all your fonts to one to reduce http requests. For example to want to add Yesteryear and Kavoon font to your blog. You will go to google fonts, get their codes and add the to your blog like this.

Code

 
<link href='http://fonts.googleapis.com/css?

family=Yesteryear' rel='stylesheet' type='text/css'/>

and

Code

 
<link href='http://fonts.googleapis.com/css?

family=Kavoon' rel='stylesheet' type='text/css'/>

However, you can easily combine multiple google fonts by using | character for avoiding multiple http requests.

Code

 
<link href='http://fonts.googleapis.com/css?

family=Yesteryear|Kavoon' rel='stylesheet' type='text/css'/>

2. Load Only Some Letters

Many a times you use some stylish google fonts just for your blog header, logo or some other short text. In this condition you can use the text parameter to load only some letter of the fonts that you need. This decreases the size of your fonts, sometimes up to 90%. Let's say that i want to use Kavoon google font for my blog header "How To Kick Blogger". Instead of loading the whole Kavoon font, i will load only letters h, o, w, t, k, i, c, b, l, g, e and r.

Code

 
<link href='http://fonts.googleapis.com/css?

family=Kavoon&text=howtkicblger' rel='stylesheet' type='text/css' />

Even when you add all the characters in lower and upper case, your new font file will be much lesser in size than the original one because it excludes a lot of extra characters.

These two workarounds will make your blog load faster. If you have any further suggestion on this please share with us in comment section.

Style Facebook Like Box With SVG Gradient

2013-08-10T04:35:00.000-07:00

Facebook Like Box is very useful widget for showing your visitors the authority and people's love for your blog. Implementing the like box is a piece of cake but the downside is that facebook does not offer any substantial customization of the your like box. So, we will here be using the SVG gradients to style your facebook like box. But before starting with the codes let's us get of glimpse of what actually is SVG?

What Is SVG And Who Uses It

SVG is an two dimensional image format based upon XML. These Scalable Vector Graphics can be created in any text editor with simple codes. These images can be made interactive with effects and animations. One great benefit of SVG is that the images can be stretched to any dimension without any loss in quality and size. Most browser support it's basic features. If you are interested in learning more about SVG Image Format, take a look at mozilla svg guide.
Back in 2010 google started to index SVG content present on the web. In 2011 it started to include SVG images in Image Search Results. Wikipedia shows a lot of it's images in svg format mostly for maps, diagrams and text-images. However, for fallback it uses a different image format such as png or jpg.

Like Box Codes

Let's cut across to the codes and tutorial for creating a beautiful like box. The styles created here can be easily edited and changed with style of your choice. First we will see the full code of facebook like box with SVG and then we will learn how you can style it differently using different color combinations and widths.

Code



<style>

#FBox {

display: block;

position: absolute;

top: 8px;

left: 8px;

}

</style>



<svg width="292px" height="258px" version="1.1"

     xmlns="http://www.w3.org/2000/svg">

  <desc>Facebook Like Box</desc>

  <g>

    <defs>

      <linearGradient id="MyGradient">

        <stop offset="20%" stop-color="pink" />

        <stop offset="40%" stop-color="white" />

  <stop offset="60%" stop-color="mistyrose" />

  <stop offset="80%" stop-color="#f2f2f2" />

  <stop offset="100%" stop-color="dodgerblue" />

      </linearGradient>

    </defs>

    <rect fill="url(#MyGradient)"  

          x="0" y="0" width="292" height="258"/>

  </g>

</svg>



<div id='FBox'>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com

/moz&amp;width=292&amp;height=258&amp;colorscheme=light&amp;

show_faces=true&amp;border_color=%23Ffffff&amp;stream=false&amp;

header=false&amp;" style="border:none; overflow:hidden; width:292px; 

height:258px;" ></iframe>

</div>

Here is your style sheet -

Change skyblue text in code with your facebook like box address.
If you want to resize your facebook like box to fit into your blog, change the height and width. When you change the height and width make sure you change it in all places. For that the height is shown in yellow color at all places and width in green color. Like if you change width to 220, then change 292 to 220 at all places.
Now, comes the svg gradient. For that we have two properties - offset and color. Offset is something that stops a color at the percentage you define. Like we stopped pink color at 20% in the above code. 20% is in respect to the full width of the facebook like box. You can use different stops and colors. Like you can define the first color as yellow and stop it at 33%. Stops and colors are marked in red and blue.

Play around with different color combinations to find what matches best on your blog. If you need any further help, feel free to comment.

Guide To Add Custom Domain To Blogger

2013-08-07T08:10:00.003-07:00

Blogger allows users to create free blogs but within the subdomain of blogspot. If you want to remove blogspot from your url, you have to buy a domain name and setup it up with your blog. With so many resources available on how to setup a custom domain name to blogger, new bloggers still find it quite confusing. So, here we will go through step by step visual guide on adding your own custom domain to blogger. We will here be using godaddy as our domain provider to register www.howtokickblogger.com.

Getting CNAME From Blogger

1. Go to blogger settings, click on "Add a custom domain" below your blog address.

2. An Advanced Setting will open up. Enter your new custom domain name with www after http. Like i entered www.howtokickblogger.com

3. When you hit Save Button you will get an error asking you setup your CNAME under DNS setting. It will show two Host and Destination Codes. Note these two lines. First www and ghs.google.com (same for every blog) and second a small and large security code(different for every blog). We will be using these two to setup your domain name.

Setting Up Custom Domain In GoDaddy

1. Go to godaddy and click on the domain name you want to link to your blogger blog. In my case it is howtokickblogger.com. Click on DNS Zone File Tab and then click the Edit Button. You are now ready to add values to DNS.

Now, scroll down the page to see CNAME (Alias). You will see a lot of entry already added.

2. You have to click on the last line (line containing www as Host) and add these values -
www in Host
ghs.google.com in Points To.
Now click on Quick Add Button. And add those two security code we had at blogger setting. Add -
Small Security code in Host
Large Security code In Points To.

3. Now scroll to the top, you will see A(Host). Delete the entry already present there and click on Quick add. You have to create four new entries. Enter your url without www in Host in all four entries and these four different google IP's in four rows In Points to Section (same for all blogs).
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Now click Save Zone at the bottom. Your task at godaddy is completed.

Redirect non www to www

Again go to blogger setting, add custom domain. Enter your domain name with www and hit save at the bottom. You url is now redirected to your custom domain.

On last thing you have to do is redirect non www to www address. Again, go to Blogger Setting and Click on Edit button on the right side of your blog address. Check the box.

Now, your blog address is www.yourblog.com. All visitors who use your url without www ( like yourblog.com ) will be automatically redirected to www.yourblog.com. Enjoy the experience of your new blog address.

10 Ways To Find New Blogging Ideas And Inspirations

2013-08-04T04:39:00.001-07:00

One of the most irritating problem bloggers face in their blogging career is writer's block, a condition in which you loose the ability and ideas to create new content for some time. Many of the top writers and bloggers suffers from this in some part of their career and many of them quit writing because of this. Getting constantly new blogging ideas and inspirations is the road to success. But you need to organize yourself and your work to achieve that. You also need some inspiration to help you work hard on your blog and to create good content.
With so many bloggers who give up blogging because of lack of ideas for new content, it's no surprise that beating writers block is one of the most discussed topic on the web. Let's discussed some great ways to keep yourself inspired as a blogger.

Use Google Suggest
Google Suggest is one the best source to get new content ideas. Not only content ideas but content that are popular. Go to google and type in your keywords with something like how to and why and google will present you with what people are searching related to your keywords.

Have A Blog Specific Notebook
Having a notebook makes your blogging life easier. Bloggers get a lot of new posts ideas while they are not online. To make those ideas to reality you need to write it somewhere. You can go through your notebook any time you suffer from writer's block and pick up some ideas to write about. When online you could use an awesome online notebook Evernote.

Google Alerts
This one is the most popular tool used to get new ideas and inspirations for your blog. Go to google alert and type in your keywords like "blogger" ,"apple" ... and sign up for alerts through email on this topic. Now, whenever there is a news or discussion around the web on blogger or apple you will get an email notification about it. You will always be updated on everything covering your topics. Writing a post on these topics will then be relatively easy.

Forums
Forums are full of a variety of ideas on a topic. Search for a forum post related to your topic and go through the replies and comments and you will have many ideas for your new content. What more! You can even create a post including some of those valuable comments.

Talk About your Failure
This one is eye catching. Everyone loves to hear people failure as much as success stories. That helps them to exclude those mistakes in their life. Go on and write you story on how you failed and what you learned from it.

Quora
Quora has one of the most reputed community online. It is a question answer website that uses voting system to select most relevant answers. Sign up for Quora and search for your keywords and you will find questions and answers related to them. With hundreds of answers on popular questions, your new post just needs typing.

Take A Blogging Break
Taking a break from blogging is the most recommended thing to do when you are suffering from writer's block and you don't know what to do next. Don't mess things up and take a break. Do anything that is not related to blogging for some days and new fresh ideas will start coming to your mind. That's how it works.

Keep An Eye On Your Competitors
Blogs related to your topic often prove to be a great source of inspiration. Not only you will get new content ideas to publish on your blog, you will also learn a lot from them. Subscribe to top blogs in your niche and start to see the power of it. You can use Alltop, a blog aggregator, that showcase headlines of new blog posts from the top blogs of various categories.

Go Through Your Blog Comments
Many times you don't have to look outside for inspiration. You can get inspired to create a post by simply going through your comments. And you will also know what your visitors like and dislike about your content.

Top Lists
The web seems to be always hungry for lists. Take a time off your posting and create an awesome top 10 list. You can create a list of best bloggers in your niche or a list of best personalities related to your topic. This will also prove to be a refresher for your visitors.

Spinning CSS Social Media Buttons For Blogger

2013-07-28T12:22:00.003-07:00

Social media sites sends most of the referral traffic to blogs and so in order to get more social media love to your blog you need to connect with more people on these sites. You need to impress your visitor to connect to you through social media buttons. Either your visitor connect to your social media account or not depends on many factor like your blog content, uniqueness and quality. But you could also frame your visitor to click on your social following buttons because of it's impressive design. I have published a tutorial on addding a set of social media buttons with changing background color on hover. Here, we will learn to create a very cool spinning social media following buttons for your blogger theme.

The HTML Part

Before learning how to create, first see what we will create. See the demo on jsfiddle. You need to create a list of all social media profiles you want to add and wrap them into a div.

Html


<div class="subscribe">

<ul> <li class="rss"><a href="http://feeds.feedburner.com/howtokickblogger"><span></span>Subscribe</a></li>

<li class="twitter"><a href="http://twitter.com/kickblogger"><span></span>Follow On Twitter</a></li>

<li class="gplus"><a href="https://plus.google.com/112411645676986067719"><span></span>Google Plus</a></li>

<li class="facebook"><a href="http://facebook.com/howtokickblogger"><span></span>Facebook</a></li> </ul>

</div>

The CSS Part of Social Media Buttons

We will use css display block property on li elements to render it in blocks and setting margin right value to 0 makes the block stretch to full on the right.

Code


.subscribe li {

    display: block !important;

    margin-right: 0 !important;

    width: auto !important;

}

We will then target the span element to add social media icons. First we will set the height and width of the div to create space for social media icons. Then use position absolute property to set the icon in it's right place. Css transform rotate property will rotate the icons to 20 degrees which you can change as you wish.

Code


.subscribe li a span {

    display: block;

    height: 32px;

    left: 0;

    position: absolute;

    top: 2px;

    transform: rotate(-20deg);

    -webkit-transform: rotate(-20deg);

    transition-duration: 0.8s;

    transition-property: all;

    width: 32px;

}

We then need to add icon and background color to social media buttons. We will select them one by one and add icons and color to them.

Code


.subscribe .twitter span {

background-color: transparent;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBx3lssYvYrAP9PijIwPGD-Hj_GxY7tvJHduhnp7n6IjhBhRNP6PSVJ1KZ8ZG3sa2MRoF-v6rugGxkIcB8lVRCMjfmICuDiUYO4o6FT5br0lzc8nQvXvYSPnvQ6w0e13TLZ6p6cJMUytU/s1600/twitter_icon.png) no-repeat;

}

.subscribe .twitter a {

    background: #91C661;

}

Last thing is to add a spinning effect to your social media buttons. We will rotate them to 340 degrees so that they come back to our initial 20 degree after one complete rotation. Also note that the hover is on "a" element not on span which means hovering any part of the whole background will initiate the rotation of the icons.

Code


.subscribe li a:hover span

{

    transform:rotate(340deg);

    -webkit-transform:rotate(340deg);    

}

Full CSS code you have to copy paste on your blogger template.

Css


ol, ul {

    list-style: none outside none;

}

.subscribe li {

    display: block !important;

    margin-right: 0 !important;

    width: auto !important;

}

.subscribe li {

    display: inline-block;

    margin: 0 20px 10px 0;

    position: relative;

    width: 200px;

}

.subscribe .rss span {

background-color: transparent;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LpTd6ZmFbRSL67Wpfcvuc1i4DahAWX-V-dZd5ksx3A1qGB9Pe1UMIvu3ErqbYmHI3Xo9Kqb2Y6elgvDtmEJXOZ6Qv7KojJXY7d-Sc7Vq2sepYA3j-k8_pn2SPLO2HwRhka3dzEy3Qv4/s1600/rss-icon.png) no-repeat;

}

.subscribe .rss a {

    background: #F67F00;

}

.subscribe li a {

    color: #FFFFFF;

    display: block;

    font-family: georgia;

    font-size: 1em;

    padding: 10px 10px 10px 40px;

    text-decoration: none;

    font-weight: bold;

}

.subscribe li a span {

    display: block;

    height: 32px;

    left: 0;

    position: absolute;

    top: 2px;

    transform: rotate(-20deg);

    -webkit-transform: rotate(-20deg);

    transition-duration: 0.8s;

    -webkit-transition-duration: 0.8s;

    transition-property: all;

    width: 32px;

}

.subscribe li a:hover span

{

    transform:rotate(340deg);

    -webkit-transform:rotate(340deg);

}  

.subscribe .twitter span {

background-color: transparent;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBx3lssYvYrAP9PijIwPGD-Hj_GxY7tvJHduhnp7n6IjhBhRNP6PSVJ1KZ8ZG3sa2MRoF-v6rugGxkIcB8lVRCMjfmICuDiUYO4o6FT5br0lzc8nQvXvYSPnvQ6w0e13TLZ6p6cJMUytU/s1600/twitter_icon.png) no-repeat;

}

.subscribe .twitter a {

    background: #91C661;

}

.subscribe .gplus span {

background-color: transparent;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRhb-kneuszC-aG6eJ4-6nOzanqublA8a5CIRWwKuonLoWcOROQ9ydJZh2Nf_eblLraRZuDU0D6fWSSdvZFFWJJcL7uiG9GNISrS48tnMUYsL1waOPhTMIA-o1JoEoDy2VkamjspzyUU/s1600/googleplus.png) no-repeat;

}

.subscribe .gplus a {

    background: #D74D2F;

}

.subscribe .facebook span {

background-color: transparent;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjB2WVgRMHlgLKnX9zyccrKLJSW4hTgjhJ0BQwEKpxL9yel3bnry64AU7z685hKHzwt9s3_MMhgcWVrOPQMiFB3_Bi-YCUmv9OXYyS1M4XbkvDecXw9c_htGrdUEA9s8PBbUxz2pGI34/s1600/facebook-icon.png) no-repeat;

}

.subscribe .facebook a {

    background: #3B5998;

}

These social media buttons are best suited below the posts. However, these awesome social media buttons can be further customized. You can align all the buttons into a single line by simply removing the yellow color line in the code. These spinning buttons will then take only the space required for them.

If you don't want the width to stretch to full length below blog posts, you can minimize the width of these social following buttons by removing the green line. They can now be added to your sidebar.

To change the background colors you have to replace the html color codes with your own. Simply google html color codes and match the best color combination for your blog.

How To Host Blogger JavaScript And CSS Files On GitHub

2013-07-17T12:01:00.000-07:00

One thing we always miss at Blogger is its inability to host JavaScript And CSS files that are needed to add functionality to our blogs. Google Code was the best option to host our files for free. But since Google Code has removed the public download option from the website due to constant abusing of the service. We need to look for an alternative. Not just an alternative but something that is reliable and fast. For that we have a very useful service called GitHub.

What is GitHub?

It is a free hosting service for creating and sharing open source projects. GitHub was founded in 2008 by PJ Hyett, Chris Wanstrath and Tom Preston-Werner, since then it gained enormous popularity among web and software developers. In Jan 2013, it announced that it has more than 3 million users and hosting more than 5 million repositories. A repositories is a directory where you host your project files.

Hosting Blogger External Files

But here we will not be discussing the awesome features of Github but we will use it to host blogger files such as JavaScript (.js files) and CSS (.css) files. GitHub allows users to host all the files needed for their project on a separate repository which will be available to public. We will create a repository to host all the external blogger files on GitHub.

Github Pages

To make the host response faster we will publish our external JavaScript on Github Pages. GitHub pages are actually webpages hosted on github with your username as a subdomain. GitHub pages can be easily created by just clicking on Automatic Page Generator Button. Now let's start with the step by step guide to hosting your first JavaScript file. You can also host the css file by following the same procedure. Just remember to add .js after the file name for JavaScript and .css after the file name of CSS.

Step By Step Guide To Host Your Javascript File

Go to Github and Sign Up.
Now click on New Repository Button.

Fill in the details to create a new repository on GitHub. Better to give a short name to the repository without any spaces.

Now, that you have created a repository, go to settings on the right sidebar and scroll down to find automatic page generator button. Click on it to create a GitHub Page.

Again fill in all the details, load the README.md and click the Continue To Layout Button on the bottom.

Now, simply publish the GitHub page.

You will get a notification that your page has been created but it might take some time to be accessible via the link. Note and remember the link. It will be like - yourusername.github.io/projectname

You will see a 404 page for some time till your page is created. Don't panic.

Now, it's time for adding your blogger files. But first change the branch from master to gh-pages.

Click on the + sign to add new file. Give a name to your file like realtedPosts.js or stylesheet.css.

Then copy and paste your code below that and click on Commit New File.

Your JavaScript file is now hosted on GitHub Pages.

Just Go to your page url http://yourusername.github.io/projectname and add the file name after it. Like http://yourusername.github.io/projectname/relatedposts.js This is the link we will add in our blog.
Now, whenever you need to host any blogger file on GitHub. Login to your account, go to your repository, change master to gh-pages and create a new file. All these files can be accessed by adding them after your GitHub page url.

Bloggers Who Earned Success The Hard Way

2013-07-11T13:12:00.003-07:00

Blogging is always termed as a cool job, less work more money. But once you get started with it, you know there are a lot of barriers in simply publishing a lot of content and making a lot of money. With around 95% of blogs fail to achieve any kind of popularity, it's a Herculean task to become the best blogger of your niche. With everyone trying to find shortcuts to success, there are people who proved that hard work has no substitute.

“Sometimes there's not a better way. Sometimes there's only the hard way.” - Mary E. Pearson

Let's get started with the blogging legends who become the inspirations because they never gave up their commitment and hard work.

Rand Fishkin

This University of Washington dropout has a great success story. Rand Fishkin started as Web expert for advertising firm of his mother. With time he learned a lot of search engines and how you could create websites that rank well in search engines. Then he started blogging on Search Engine Optimization techniques. Then consulting which gave way to developing SEOmoz.com.

But when Rand Fishkin started SEOmoz in 2004, he was around half million $ in debt. He says that the SEOmoz team had to leave the office they were renting because they didn't make enough money to pay the next months bill.
They kept failing from 2008 to 2012, but they never gave up. Rand Fishkin says that he only kept blogging and blogging, participated in communities and created some viral content guides for the first five years of SEOmoz.

With time his hard work began to bear fruits. SEOmoz made it to the list of Inc 500 list for US Fastest Growing Companies and Top 100 software companies. Rand Fishkin was named Business Week's 30 Best Tech Entrepreneurs Under 30.

“There are no shortcuts to any place worth going.” - Beverly Sills

Amit Agarwal

Studied Computer Science from IIT and went on to work for companies like Goldman Sachs and Merrill Lynch. But in 2004 Amit Agarwal quit his high paying jobs and started blogging. He writes on his blog Digital Inspiration that has been featured on Tv channels like BBc, CNN and CNBC. He has also been on the cover page of The Week Magazine.

Amit Agarwal writes articles on common internet topics including blogging, softwares, gadgets and web apps. He also publishes tips to enhance productivity with web apps.
His blog is now among the top 100 technology blogs on internet and he has been quoted in several top publications like The Wall Street Journal, Forbes and Guardian. The Economic Times calls him ''an out of the box thinker''. But this is just one side of his success story.

Amit Agarwal started blogging at labnol around 2004 and kept writing new articles about everything that would be useful for his visitors. He learnt new things with his blogging experience and kept writing better articles everyday. With time his blog got matured and started to get featured in many publications like BBC and Forbes. The most amazing thing about him is that he has written over 7 thousand articles for his blog and he is never out of idea for something new. There are very few people who could write that many articles by themselves. He just kept creating new content and never looked back.

“It's hard to beat a person who never gives up.” - Babe Ruth

Gary Arndt

In March 2007 Gary Arndt sold his house to travel around the globe continuously. When he went for his first trip he created a small website everything-everywhere.com for his office colleagues to keep track of his trip. He posted pictures and his travel experiences on his site but hardly anyone outside his friend circle visited his site.

But then he decided to take the website more seriously and started sharing lots of content. He started posting everyday at least one image without a break. He kept doing it for five years. He has visited all the 7 continents in first 6 months of the year 2012.
He has floated in the Dead Sea.
In Yukon he crossed the arctic circle.
About 150,000 miles of flying in 2010.

Been kicked out of the Kiribati.
Taken around 12,000 pics on his trip to Antarctica.
Visited ongoing war area in Cambodia.

After posting for several years his blog is doing really nice. He has more than 121k followers on twiter. Now, he make all his travel expenses from the money he earns from his blog. In 2010 his blog was named in Time Magazine's Top 25 Blogs in the World in 2010.

When I was young, I observed that nine out of ten things I did were failures. So I did ten times more work. - George Bernard Shaw

Michael Arrington

Being described as the most powerful person on the internet by Forbes. Michael Arrington runs the most popular tech site, TechCruch, which covers internet startups and news.

He was obsessed with silicon valley startups so he started TechCrunch in his backyard as a hobby and started updating the site with 25-30 posts every single day. He updated every small details of everything that's happening in the silicon valley on his blog. He never missed any seminars and made his obsession his passion.

Michael Arrington works morning until night to break new big stories at TechCrunch through working with his contacts. Tech Crunch breaks more big stories than all others in tech combined. That's not something that is handed over to Arrington but he says he judges himself based on that. Although the site has 25 employees but Arrington still spends most of the time writing and contacting. He is said to have gained 50 pounds in five years since starting TechCrunch. This Michael Arrington has been selected as one of the most influential people in the world by TIME Magazine in 2008.

"All the so-called "secrets of success" will not work unless you do." - Someone

If you know any other blogger success story, please comment below.

Show Selected Posts In Blogger Feed Through Feedburner

2013-07-03T06:26:00.000-07:00

Feedburner is the best free feed management service provided by google. It allows your site visitors to subscribe to your feed through feedburner custom url or through email subscription. Setting up feedburner for your blog is quite easy. But sometimes, especially for new bloggers, you want to publish only selected posts to your feedburner feed. You posts a lot of content that are not so worth for your subscriber or you post a lot of content that are off from your blog niche. For this you need a method where you can select which posts to publish in your feed. Let us learn how to do this.

Aggregating Selected Posts In Blogger

Although feedburner has many great features to discuss but we will here be talking just about how to show only selected posts in feed. The idea is to use blogger label for aggregating all the posts that you want to publish in your feed. Say, you started adding "wow" label to all the selected posts. Using lasts of the alphabets will help to avoid any usability problems. This label will show up at last of all the labels you tag to that post.

Setting Up Feedburner Feed

Now, go to feedburner and signup through your google account. You will be asked to enter your blog address to burn the feed. Normally, we simply enter our full blog feed address and press next.

Url

 
http://howtokickblogger.com/feeds/posts/default

But, in this condition we will be burning something different in feedburner. Here, we will burn only label page.

Url

 
http://howtokickblogger.blogspot.com/feeds/
posts/default/-/wow

Change the text in yellow color with your label name. "wow" is the name of your label in blogger that you will add to all the posts that you want published in your feed. You can use any label name but you should use that exact name when you burn your feed.

When a user will open your custom feedburner feed url, only your selected posts will show up. Email subscribers will also receive only those posts. It can be quite helpful to make your subscribers happy by publishing only relevant and useful content in your feed.

Facebook Like Box With Hover Effect

2013-06-26T03:13:00.000-07:00

Facebook like box is a very useful widget for your blog as it let's your visitors like your page which shows how much popular your blog is and how much authority your blog hold. Although the official facebook widgets page allows some customization for your like box but they are not enough. Many times you don't have much space for the like box but you don't want to miss it's benefits. So, what should you do? We have got a solution for that. A fairly simple solution.You can have the facebook like box on your blog without sharing much of your blog space. We will use the css hover effect to show and hide the like box.

The idea is to add an image that ask to like your facebook page and showing up the like box when your mouse is taken over the image ( On Image Hover). We will first display the image and hide the like box with css display: none property. Then when there is hover on the image we will display the facebook like box with display block. Also adding position absolute will make sure the position of the like box is fixed.

Code



<style>

kickblogger {

    margin: 10px;

    width: 1px;

}

aly {

   display: none;

}

kickblogger:hover aly {

   display: block;

position: absolute;

}


</style>

<kickblogger>

<img src="http://www.hial.co.uk/assets/

images/facebook-button.gif">

   <aly>

        

<iframe src="//www.facebook.com/plugins/

likebox.php?href=https://www.facebook.com/moz

&amp;width=282&amp;height=258&amp;

colorscheme=light&amp;show_faces=true&amp;

border_color&amp;stream=false&amp;

header=false" scrolling="no" frameborder="0" 

style="border:none; overflow:hidden; width:235px; 

height:258px; background-color: white; logobar="0"" 

allowtransparency="true"></iframe>


   <aly>

</kickblogger>

The code is very simple and you just need to replace the facebook like box page link with your own for it to work for you. Change the text in green with your facebook page link. You can also replace the image with your own. On Image hover you will see the same facebook box at same position.

Just google and find the like us on facebook image or any other facebook icon image that best suits your blog design. Then replace the image link in yellow with your new image link. You are done. Now only those visitors will see the facebook like box who want to like your page. For others there is just one beautiful image.

Interesting And Useful Websites List Part 2

2013-06-20T06:10:00.000-07:00

Here we are with the second edition of the most interesting and useful websites. Make use of these websites to save time your time and become a pro internet user. Services of all these websites are absolutely free. Many of the web tools mentioned here will save a lot of time for you like bugmenot, zamzar and quozio. Enjoy these websites and comment below to suggest any interesting addition.

PassMyWill - Will For Your Online Assets

With this very interesting website you can pass your online assets to your friends or family. Your login details and other online resources will be shared with the one's you mention after you are dead. With Passmywill.com your online accounts won't be dead after you pass away.

CVmkr.com - Free Professional Resume Maker.

With cvmkr.com you can easily create and maintain your professional looking cv. You can also export them in pdf, txt or html format. Also share your cv in just one click of button. Many languages supported in this user friendly useful website.

Bugmenot - Logins For Access To Sites Without Signup.

A very popular site that saves you a lot of time. You want to enter a site for some info and it won't let you without signup. Bugmenot.com is the first place you should visit. Type in that website name and it will show you some user names and passwords that will let you login.

Khan Academy - Learn Everything For Free

With over 4,000 videos from physics, economics to history and much else, Khanacademy.com lets you learn everything for free and at your convenience. Maintained by Salman Khan (Sal), this not-for-profit organization is among the most used internet education website.

Zamzar - Covert Files to different formats online.

Many a times you need a convert a file to another format and you don't want to download a software for this one file conversion. Zamzar.com is what comes to your rescue. You can upload the file from your computer or type in the url of the file to be converted. With this useful web tool you can convert almost all files to another file type be it an image, audio, video or ebook format.

Pipl - Search People

Want to know more about someone you know only by name. Enter the name of the person and use various filters like country, age and email to get to profiles of that person. Pipl.com users a powerful identity search engine to bring you closest to your desired result.

Lamebook - Funny Facebook Status Updates And Fails

Facebook has the biggest online community. There are a lot of funny Status updates and comments posted everyday. Lamebook.com collect them and features them on it's site. You will find many fails and hilarious updates on this very interesting website.

Quozio - Make Your Text Interactive

Turn your text into more meaning images with this useful website. Quozio.com is a great way to make your text more interactive in a click of button. You don't need any image editing software, just write the text and choose from many available backgrounds. Bookmarklet is also available for easier access to the site services.

Mailinator - Stop Receiving Useless Emails

Internet now days are filled with people asking your email for using their service, downloading something or just for a piece of information. Of course many of them spam your email and fill your inbox with useless promotional rants. Mailinator.com is the most useful website for this, use their disposable email address whenever you have to give your email address but do not want to receive useless emails. Without any signup, make an email address and share it and come back if you like to check the emails it received.

Keepvid - Download Any Video.

Want to download any video you love. Many people search all over the internet to find ways to easily download internet videos. Well, the best and easiest way to do this is keepvid.com. Just enter the video url (youtube, vimeo, dailymotion...) on keepvid and you have the download link ready for you. You can also add it's bookmarklet to your browser for easier download option.

Screenr - Online Screen Recorder.

Screenr.com is a web based screen recorder tool to record screen doings with voices and share it with your friends through facebook and twitter.

Get A Fake Girlfriend

If you don't have a girlfriend but want to show one to your friends. A very interesting website Fakegirlfriend.co is made for you. Buy a number with Twilio. Text your fake girlfriend and receive text messages from her (the response you have already created). Make fool of everyone.

GO To ← PART 1

Art Case Blogger Template

2013-06-12T05:18:00.002-07:00

I am back with another blogger template release. This time it is for bloggers who like showcasing pictures and photographs. It features a big image thumbnail on home page and label page for posts and the picture and blog post can be shared directly from there. Your visitors need not visit the post page every time for sharing your picture or post. This art case template works good when you post at least one image in every post.

Features Of Art Case Blogger Template

Post summaries with thumbnail on blog home page and label pages.
Pinterest Pint It Button on image hover. No need of pin it bookmarklet.
Three column footer for showing widgets, labels and archives.
Customized blog title with blog description.
Social sharing buttons on home page and label pages for each post.
Use of google web fonts for better typography.
Top menu for adding important links for visitors.

Demo >

How To Personalize Art Case

Editing this template is very easy because when you will upload the template xml file, it will sync with your blog with any effort. You only have to edit the top menu. Replace them with your links.
Go on on Edit the template and search(Ctrl + f) for "Love" without quotes. You will get this piece of code.

Code

<ul>

<li><a class='colr' href='#'>Home</a></li>

<li><a href='#'>About Me</a></li>

<li><a href='#'>Love</a></li>

<li><a href='#'>Archive</a></li>

<li><a href='#'>Contact</a></li>

<li><a href='#'>Forums</a></li>

</ul>

Replace all links texts with your text and # with their links. To add more links to the menu, add a new line <li> line before </ul>. To delete a link, simply replace the line from <li> to </li>. That is all you have to do to personalize this blogger template.
If you have any problem in editing this template or adding a new widget to it, feel free to comment below. Will be adding a lot of nice templates to this site.

Storage Size Limit For Blogger Images

2013-06-09T03:01:00.001-07:00

Acquired by Google in 2003, blogger allows to publish blogs at subdomain of blogspot. However you can redirect through the use DNS service to a custom domain address. There is always a confusion about how much storage is their for your blog. When you create a blog on blogger and start posting many pictures daily, what is the first thing that comes to your mind? Will you be allowed to keep posting images till you want to?
The answer is yes and no.

Limited Size For Images

No, because the images that are hosted on google plus account have a limit of 15GB storage. This disk space is shared with Gmail, Google Drive and Google Plus. Although 15GB is a lot of space (if you don't use Google Drive) for your images but it does have a size limit. You can check your google account storage space.

Unlimited Size For Images

Yes, you will be allowed to post a lot of images regularly without any limit because the free storage of 15GB is consumed only above a certain image size. Below that size your images won't be counted for storage. This image size differs on whether you have signed up for google plus account or not.
If you have signed up for google plus account, the image size limit is 2048 x 2048 pixels. It is highly unlikely that you need to post above that size. And so you can say that you have unlimited disk space for your images.
But if are not signed up for plus account, the size limit will be reduced to 800 x 800. So, go on sign up for google plus. Another dirty trick of google to make you sign up for their social networking site.

If you post images above that size and you have consumed all your space. Now, when you will post images after reaching the storage limit your images will be resized to 2048 x 2048 or 800 x 800 pixels according to your account status. You will still be able to upload images but not above the free images limit.

Blockquote Code Or Pre Tag For Blogger Source Codes

2013-06-08T04:09:00.000-07:00

When you write tutorials on how to customize or add a widget or how to customize your blogger template, you need to add source codes with CSS, HTML or Javascript in your posts. When you add the piece of code to your blogger post editor, it will consider it as normal text and will change the < into < so that the code is not executed by the browser. Although we do not want it to execute the code but we do want it to render the text as it is, so that our visitor could easily understand the code. Another reason we want to add an html tag to the source codes is because we want to apply some css style to it so that it does not look like boring computer code.
Most of the blogger users use blockquote tag for showing their codes on their posts. Although it is widely used by blogger users but it's a wrong way of showing your codes. Blockquote html tag is not meant for showing html codes but for quoting something from other websites. Let's first learn what actually is a blockquote html code.

Blockquote Tag

It is used for marking a piece of text that is copied from another website and used as information piece to better explain your article.You could add few lines or many paragraphs under blockquote tag. Blockquote by default are rendered with right and left indentations. For this reason many blogger users started using it for displaying codes as it looked quite different.

So, if we should not use blockquote for codes, then what html attribute to use for displaying codes. The answer is Code and Pre tags. But before learning how to use them, let us first learn their basic properties.

Code HTML Tag

A code tag is used to display a piece of computer code as a phrase. The content under code tag is displayed by default in monospace font. However, with the help of css you can override default font family.
For example -
Blogger <code>Source</code> Code
will render
Blogger Source Code


<html>

<body>

<div class='roll'>

</div>

<div class='met'>

</div>

</body>

</html>

Almost all the top sites on web designing and web tutorials use this format for showing html codes on their website. So start using code and pre tags and if you have any question, feel free to comment.

10 Thin Google Fonts For Your Blog

2013-04-18T11:17:00.003-07:00

Web typography is now giving good competition to images in web designing. You can make nice use of fonts to enhance the look of your blog design. Apart from fast loading in comparison to text images, it also is better for seo as you can add keywords to it.
While there are many great websites that presents you a lot of fonts to copy but one that gives it free is google web fonts. It allows to add any font from it's list to your blog by adding just a line of code. Google fonts collection is a growing list of free fonts that gives you a chance to modify your typography with very less effort. If you like to add more than one fonts to your site, then see these google fonts combinations.
There are basically all kinds of fonts in google web fonts list but here we are presenting the list of best and most popular thin google fonts. If you were searching for free thin fonts, your search ends here. These thin google fonts can be used to give your typography a sleek and creative look.

Best Thin Google Fonts List

Poiret One

Josefin Slab

Nixie One

Raleway

Amatic SC

Advent Pro

Josefin Sans

Wire One

Text Me One

Quicksand

The heading shows the font in large size and the text in normal size. You can get all these fonts from google fonts website. There are many other fonts that have multiple styles including some light ones. Although they are thin but they are quite light and so they are not so good for reading experience. However, all the above fonts are thin in their normal style and could be used as you like.

Social Media Buttons With Hover And Background Color

2013-03-26T11:56:00.000-07:00

Having social media profiles page icons is a must for all the blogs.There are huge numbers of icon sets available on the web. You can easily download them and add them to your blog. But there are three things that need to be improved.

Features Of These Icons Set

First, does the buttons fit on your blog color theme. For this, we have this awesome set of social buttons can be easily personalized. You can change the background color of the social media buttons to whatever color you like. The hover background color can also be changed.
Just go to html color codes and pick and appropriate color code or color name. You can apply the color to these buttons according to your blog color and theme.

Second, do you really need to add all the images of social icons. No, you can create an image sprite that helps you in better loading time because it calls only one http request. These social media buttons size is just 2.5kb using css spirite technique. You just have to add one image containing all social icons and then pick their position with position attribute. The social media icons are white with a transparent background around them. So, when you apply a background color, it shows up from the transparent part of the image.

Third, are they visually appealing when a user hover on those social icons. The buttons provided here does. They change their background color on hover.

So, go on and simply copy paste the below code and change the background color on normal and hover mode.

Css And Html Code

Css

 
.icons ul li a, .icons ul li a:hover{ 

background-color: royalblue; 

background-origin: padding-box; 

background-repeat: no-repeat; 

background-size: auto auto; 

border-radius:3px; 

display: block; 

height: 32px;

overflow-x: hidden;

overflow-y: hidden;

text-indent: -99px;

width: 32px; 

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX2A2b_zEkVVrGsr-tq52v5Km2GT30KbiwS-_6aNhoD6hSBfNqSuR58nIWBDAt1COQdzxtig25DTwZN-PYYHm_ooDk4cRlTjzibtFNxLgkwkJ-uHPkWcWEyEb13K_nQeYZ05wbEhUxqJ8/s1600/new-social-button.png"); 

height: 32px; 

}

.icons ul li.myfacebook a, .icons ul li.myfacebook a:hover { 

background-position: -64px 0;}

.icons ul li.myrss a, .icons ul li.myrss a:hover

{ background-position: -192px 0;}

.icons ul li.mytwitter a, .icons ul li.mytwitter a:hover

{background-position: -256px 0;}

.icons ul li.mygplus a, .icons ul li.mygplus a:hover

{background-position: -96px 0;}

.icons ul li.mypinterest a, .icons ul li.mypinterest a:hover

{background-position: -160px 0;}

.icons ul li a:hover {

background-color:red !important;

}

.icons ul  li {

float:left;

margin-right: 5px; 

list-style:none;

}

Change the color code in yellow with your desired color for background color. And change the color code in green for changing the background color on hover.

Html

 
<div class="icons">

<ul class="alignright"><li class="myfacebook"><a href="#">Facebook</a></li><li class="mytwitter"><a 

href="http://twitter.com/kickblogger">Twitter</a></li><li class="mygplus"><a

href="#">Google+</a></li><li

class="myrss"><a href="http://feeds.feedburner.com/kickblogger">RSS</a>

</li><li class="mypinterest"><a href="#">Pinterest</a>

</li></ul> 

</div>

Simply replace all the social media links with your profile urls. You are ready with your new social media icon set with a nice hover effect.

Let's now see how these social media buttons will look on normal and hover for different color combinations.

Want to know something more, feel free to ask in comments.

Interesting And Useful Websites List

2013-03-16T05:30:00.000-07:00

Many a times you waste a lot of time doing things that can be easily done with some web tools. Here's the list of some of the best and very useful websites that will help you stand out when you surf the web. You can share these cool and interesting websites with your friends.

Splicd - Embedded Video From Some Time To Other

You are watching a video on Youtube and you want to share it with your friend but not the whole long video, just some part of it. Splicd.com web tool will do this for you. Just set the starting and ending time on splicd website and it will create a shorter video from the youtube video which you can share or add to your blog.

Snag.gy - Paste Your Images

Snag.gy is an very useful and handy tool that allows you to save and host your images from the clipboard. You can capture an image using windows print Screen and then simply go to snag.gy website and press Ctrl+V which uploads your image to its servers and lets you easily edit it. Anything in your Clipboard can be pasted here, even from photoshop or paint.

Can You RUN It - Game System Requirements

You want to buy a game but you are worried whether it will play on your pc. Is your pc configuration enough to run this game? Now, you don't need to worry about that, just go to systemrequirementslab.com and enter the name of the game. It will show the system requirements for that game or will scan your computer to see if it will work or not.

Distance Between Places On Map

When you travel to new countries or places you want an idea on how far the places are that you want to visit. With this live map tool by distancefromto.net you could easily measure the distance and directions between various places. Just enter the name of two places or cities and this website will create a shortest distance line on the map with the distance in km and miles. Of course, it's not the exact distance but still very useful.

TinEye - Reverse Image Search

When you upload an image or specify an image url to tineye.com, it starts a search for the image on the web and tells you where it came from and are there any other higher resolution or modified version of this image present on the web.

Rapportive Tool For Gmail

Want to make your gmail interesting. Go to rapportive.com website and Add Rapportive to your gmail account and get information about your contacts and people who send you emails. How they look, where are they located. You can also connect to him through his social media profiles.

Anonymouse - Surf The Web Anonymously

Anonymouse.org is another web service you want in your bookmarks that lets you surf the web anonymously. It allows you to surf internet without revealing your information like which country you belong or which browser you are using. Very useful to open websites that are restricted by your country or region.

Readability - A Free App For Reading Comfortably

Browsing is becoming an awful experience with lots of ads, social buttons, widgets and plugins that many a times distract you from reading the article. Readability.com is dedicated to increasing user experience by presenting a clean reading experience. It also allows you to read something later through its app.

Justpaste - Share Text & Images And Get Url To Share

Sometimes you want to share some text with your friends and you wonder what's the best method to do that. Well, here comes justpaste.it that allows you to enter the any text and save it. It then gives you a link which you can easily share with your friends. You can also add some images to it.

Remember The Milk - Task Management

RememberTheMilk.com is a very popular service to manage your tasks. It lets you create a to-do list very easily. Now you will never forget anything not even your milk. App available on Iphone, Ipad and Andriod.

Ifttt - If This Then That

It put's the internet to work for you. If This Then This or Ifttt.com is an automation service that automatically updates your desired social media account status from another social media status, triggers sms on new emails, update your social media status from your blog feed, get an email if there will be rain tomorrow and lots of more triggers. It support almost all the popular services. A must tool for everyone.

Wordle - Beautiful Word Clouds Images

A very popular website to create great pictures. Just paste all the text that you want to show up on your image on wordle.net and this web tool will mess up all your text to create a beautiful graphics.

Project Gutenberg - Free Ebooks

Gutenberg.org has a library of over 38,000 free ebooks for you to read or download. Anything from shakespeare plays to poetry, history, science, children book and more with 23 categories. Supports Android, Kindle as well as iPhone.

Call the Future

Quite a fun website. At Callthefuture.org website you specify a phone number and text to say after calling it and of course the time when to call. This service automatically calls that number and say the text you specified. But please don't misuse it.

Liked these useful websites. Share and bookmark this page for more updates.

GO TO PART 2 →