Change border Color and Size of HTML Tables

After having learnt the basics of creating HTML tables in blogspot blogs, its now time to learn how to customize the table cells border colors with more appealing look. We discussed in detail how to create columns and rows in HTML tables, but the problem with those defaults is that their original look comes with dull grey borders and it looks really odd. So we would use CSS to style the borders and cell edges of the table giving it a clean and neat look. If you want to see a demo again then click the link below,

Read more »

Make Sticky Bar For BlogSpot

You can add sticky notification bar in blogger blogs by showing the bar either at the top of header or just below the footer. A sticky bar can is now used widely by all blogs and sites(mashable for instance) for notifying visitors of important updates, offers, coupons and latest news. You can even add your RSS link there and ask you visitors to subscribe to your blog. In this tutorial I will try to keep things simply and will share how to create such a sticky bar widget with simple text and image. I have added drop shadow effects to it using CSS3. The widget is compatible with all browsers. View the demo below and on the demo page scroll to the top to see the bar.

• Add Facebook and Google+ buttons to StickyBar
  
  


• Add a StickyBar at Bottom of your page
  
  


• Add a Close Button To Stickybar
  
  

Read more »

Make Colorful Tables in BlogSpot

BlogSpot blogs are rich with options that gives you freedom to design and create whatever you want using CSS and HTML. Blogger post editor doesn't has the option of creating HTML tables but no worries we can make tables with rows and columns ourselves and not just dull grey tables, fully customized tables with background colors and smooth and neat edges and borders. This tutorial will be divided in two parts for simplicity. The first part will give you basics of understanding the structure of tables and the second part will let you customize the tables. After reading both parts you will be able to create MS Excel type style sheets and much more.

UPDATE: Part 2 has been publish: Change Border colour and Border size of HTML Tables

Read more »

Make a Button Badge For BlogSpot and Wordpress

You have seen many blogs and directories using a small button for their promotion. You can see one for mbt too. This micro button comes in 80X15 pixels in size. I would create such buttons using Photoshop but amazingly thanks to dynamic drive you can now create a button online easily. The button maker tool provides you with multiple options of making a good looking button or badge for your blogger blogs or wordpress blogs. You can choose border style, background colors, font type and text. This tool is extremely easy to use and no expert tech skills are required to design a button. However I will be sharing some tips which could be helpful for most of you.

Read more »

TechCrunch's End: See How angry Could Bloggers Go!

I just arrived home from my hectic university and was shocked to read the biggest blogosphere news ever popping in my Alexa toolbar. It said "TechCrunch as we know may be over" It is the last post published at TechCrunch just 4 hours ago. TechCrunch as we all know is a network of technology based blogs and other web properties. It was founded in the year 2005 by Michael Arrington and now has around million readers with 15-20 posts published each day by well established bloggers and journalists from across the globe. Its shared news often become Magazine Headlines and we can share a lot more about this blogging giant which is ranked second in Technorati's list of world Top100 blogs.

Read more »

Tell Google What Links To Display In Sitelinks

Sitelinks can now easily be controlled and managed via the webmaster dashboard. Sitelinks are links to other pages on your blog or site which appears under the search result for your site. It help users easily navigate deeper into your site. They are generated and ranked algorithmically based on the link structure of your site, and unfortunately not all sites have sitelinks. The number of links appearing below your main homepage link were increased from 8 to 12 but just today I observed that this number has been brought down to six now. I have not heard of any new update though from webmasters blog.

Read more »

How To Link Like button To Facebook Like Page

This tutorial may sound nothing new for those who know the correct way of linking a Facebook like page to your like button but for those who are still thinking how this is done then kindly carry on reading. You may have seen almost every well established blog with a Facebook like button on the homepage but this button doesn't just shares the blog URL on user profile but it automatically likes the Facebook page of the author thereby increasing the number of his Facebook followers. This helps greatly in increasing your social media following and of course traffic to your site. Lets do it,

Read more »

Google Plus Posts are now crawled by Google Robots!

I had heard that Google will soon crawl data shared on their newly born Google+ social network in order to bring a new change in their search pattern. Amazingly just today I searched for one of my posts and I was shocked to see that even my Google+ status post appeared in the search results page. This shows how significant role will G+ plus play in days to come. I will highly suggest that you +1'd all your posts and add a Google Plus badge to increase the number of your followers because this new sharing +1 button has a lot to disclose for Search engine Optimization experts and before its too late you must start making good use of it. I had expected this to come after the introduction of +snippets. Please see the screenshots of the SERPs that I observed:

Read more »

Add Tic-Tac-Toe To a Webpage

Let your visitors play Tic-Tac-Toe game on your Blogspot/blogger blogs! We created and played with tons of widgets and plugins now its time to add some spice to your normal work. Engaging readers in an interactive activity like a game will help decreasing down your page bounce rate and will also provide fun to your regular readers or blog visitors. I cam across a simple javascript that uses array to program a simple tictactoe game where a visitor can play with computer bot. The consists of a total four levels with increasing difficulty level. The game uses artificial intelligence to guess important moves to knock a player down. The scores are saved for each level and the total number of wins and draws are recorded for both the computer player and your visitor. I guess this would surely be welcomed by all your visitors. :p

Read more »

Smooth Scrolling "Back To Top" Button for Blogger

Finally yet another exciting trick to create a smooth scroll to top button for BlogSpot blogs. We designed and released many buttons and tutorials on back to top/bottom buttons but they were all static and had no fade out effects and smooth scroll effects. Luckily we just discovered a cool jquery script that does all the work. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. Please see this button in action towards the bottom right corner of this blog.

Read more »

Identify Font Type and Font Color on a Website

Whatfont a great chrome extension that lets you easily identify the font family, font size and font color of the text being used on any webpage. It gives you complete details about the type of being used and what other alternative font types are in use of the website. Most often when you visit different sites or blogs, the first thing that attracts you the most if the clarity and neatness of text display. Since people visiting your web blog will be of different age so you must make sure to choose a standard font color, font family that must be compatible with all browsers and of course a good font size. We get inspirations from sites which have brand the internet and therefore to identify what font styles and colors they are using you must try out this great Chrome extension.

Read more »

How To Find width and height of Images on a Webpage?

There is an excellent browser add-on that I am using since years while designing templates. Its called measureit. It lets you measure the dimensions of images and other webpage elements by telling you the exact width and height attributes in pixels. I often use it to to find width and height ratio of elements on a web page. I just need to draw a ruler across an image, picture or any div section of a webpage to find out its size dimensions. You no more need to take screenshots and then use photoshop to calculate the dimensions. Simply install this cool app on your browsers and start measuring exact dimensions of webpage elements.

Read more »

Add Rotating Slides Of Popular Posts Widget To Blogger

My brother Abu-farhan has created an amazing script that transforms the popular posts widget provided by blogger into a a vertical content slider that updates automatically. His script really impressed me and I thought of sharing this great slideshow widget with all of you. It is extremely easy to install this widget on blogger. You only need to paste the code inside a HTML/Javascript widget. This new script works on all major browsers and can easily be customized. I have further edited the code to give it a little better color theme. No thumbnail images will appear if you have not added any image in your posts. Posts which are viewed most will be picked by blogger stats widget and displayed through this new gadget.

Read more »

How To Give Admin rights In Blogger?

Blogger gives you the option to choose up to 100 blog Authors or contributors and 100 blog readers. Most often while designing blogger templates I need to access my client's Edit HTML section and the only way to have such privileges is to request Admin rights from my client. After receiving Admin rights I get complete control over his posts, widgets, template and entire blog control panel. Administrator rights should be granted only when you full trust over the contributor or your partner else it is equivalent to your blog's post mortem.

Read more »

Divide Blogger Header In Two Parts or Sections

A blogger header consists of every single section that appears at the top of your blog. It is a container which contains two important sections which are Logo portion where you add title, logo and description of blog and the second portion includes Navigation Menu where you add site links. Now this tutorial needs a little bit of your careful attention as we will need to edit your template's coding. Since most templates are designed by different sources so the coding will differ a little bit but the format would be same. See the Picture below to know what exactly is header splitting:

Read more »