Create Automatic Tabs Menu From Labels Widget

automatic tabs menuYes you heard it right! Thankfully now you can create a tabs menu using blogger's official labels widget. Tab links will be automatically updated and added to your menu whenever you create a new tag/category. This widget is really helpful for those of our readers who wanted an automatic method rather the traditional techy way of drop down menus. I have tried my best to make it worth looking and worth trying. This is again a first time shared post by MBT on automatic Tabs Menu for blogger blogs. Lets see a demo first,

More

Should you Enable Blogger Dynamic Views?

Dynamic views

Blogger has now officially introduced Dynamic views for all blogs by default. Now you can change the layout of your custom template into different shapes. A dynamic view is an automated code that rearranges your div areas and automatically changes the default style sheet settings into different flavours and colours. In short it provides your readers with better readability. This new feature helps you to arrange your posts, comment body and sidebar in different orientation. It arranges them into either a stream of thumbnail images or table containing columns of your latest posts. However this new feature has some advantages as well as some drawbacks which I have shared below.

More

Enable Facebook Timeline For your Profile Now!

facebook timeline

Facebook new and amazing development just to arrive and this amazing Profile layout change method is called "Timeline" This new feature displays a hierarchy of all your experiences  date-wise like post updates, comments, photo and video uploads.  Timeline is your collection of photos, posts and apps that tell your story. You can see what you did in last year or last month. All Facebook status updates that you made or the fun you had so far can be reviewed by rolling back to the old days using this brilliant new feature. At present this feature can be enabled only through the developers page and will be visible to only those people who have enabled Facebook developers App. However very soon Facebook will publically enable the Profile Timeline for all. So why wait when you can try it now!

More

Create a Simple "Tree Menu" in Blogger

Tree MenuEver wondered to create an expandable Tree menu in a simple one step method? There we have it today! A Tree Menu is different from other navigation menus that we have released so far. It has has branches and sub-branches. You can add links to it or even simple text and hang it on your blog sidebar. It helps to organize data in a hierarchal method. Most often we use tree menus for displaying blog archives. It contains a Expand and Contract Link that collapses and shrinks the tree branches. So lets add this beautiful menu to blogger blogs in easiest possible way.

 

Live Demo

 

More

Open Multiple Webpages Using a single Link

linking multiple sitesI have been using a simple JavaScript call function to open multiple sites on a single click. This function declares several URL’s in its body and once the function is called either through a hyperlink or an image, the click triggers the function and all URLs declared open up in new browser tab window. I have been using this simple trick on my EntreCard traffic service and you can surely check out that page as a demo. Lets learn how to create such a link.

More

jQuery Gooey Tab Menu For Blogger

Gooey menus are simple jquery menus that uses lava lamp effect to create CSS menus. Whenever you move your mouse cursor on a menu item, the gooey moves dynamically as you move right and left. Unlike our previously published drop down menus and tabs menus, this menu has some eye-catching effects which makes them stand out. You can easily customize them and add them with a click of a mouse to your blogspot blogs. I have kept the installation again limited to the use of a single widget so lets get to work then!

image

More

Disable Lightbox View The Correct way

Update: Lightbox Effect is Offcially Disabled by Blogger. No Worries now.
Yesterday I shared a short code that somehow helped to deactivate and remove the lightbox view for images appearing on blogger blogs. However some of the technical problems linked with it was that you were asked to paste the code just below the closing body tag and technically speaking that is against W3C standards. This was one reason why some widgets and Adsense ads got effected and did not display correctly. I have found a much better way of dealing with this problem brought by blogger team and it is really easy to implement. So kindly delete the previous code that I earlier shared and follow this new one.
More

How To Disable Lightbox View For Blogger Images?

Update: Lightbox Effect is Offcially Disabled by Blogger. No Worries now. Try a more correct way

lightbox view in bloggerBlogger just announced today that they have now automatically added Lightbox view effect to all blogs by default. Now when you click on your images or photos, a wide black I frame window opens that fades the page in the background and shows you the image in foreground without leaving the page. Lightbox is also called as Greybox or thickbox. It is a cool image effect that you have seen widely used everywhere especially on Facebook and Google+. But for some people like me this effect has turned into a headache. Even the read more buttons on my blog when clicked popped in a new window instead of taking the user to the full post page. So of course there must be a way to disable it completely in your blogs and if you wish to apply it with complete control then you may add this effect manually by reading any tutorial found online on Lightbox view.

More

What Exactly are Blog Labels or Categories?

what are blog labelsDiscussing this topic has now become really important since I have observed people confusing labels with keywords spam. Blogger blogs or Wordpress blogs, no matter which platform you may be using, provides you with an option of tagging your posts that you publish. Tag, Label or Category they all mean the same and their purpose is to provide easy navigation to a blog reader. You may be writing several posts per week and if you don't organize them by putting them in relevant categories then you are turning your blog into an unorganized site and this makes  the job for your readers more difficult to navigate from one page to another and this badly effects your PageViews. Lets first discuss a general layman definition for this Label term.

More

1000+ Background Patterns For Blogger Comment Box!

backgrounds and patternsWhether you like flowers, Christmas, EID, Greenery or Dark and light backgrounds then thankfully now you give any color and look to your blogger comment forms. The code that we previously released can be used to give any background pattern to your comment box you like. Some patterns were created by us and the rest have been taken from other sources. To add a different background pattern of your choice you can then search for it at BackgroundLabs which is an excellent resource for free backgrounds and patterns. You can choose from thousands of different flavours of background categories. The steps of adding them is extremely easy. Lets get to work then!
More

How To add Social Media Links To Blog Feed?

feedflareAdding social media links to Feedburner feeds is really important in order to increase the chances of getting more and more social votes. Whether it may be a stumble, Facebook like, a Digg , Save to Delicious or +1, each link has its own importance. Feedburner Feedflare option even lets you add a "Email The author" Link to your Feed posts. Your readers can easily email you after reading your post either on their Feed Reader or Inbox. This interacts a reader more with the author and helps readership grow. Most of my readers often contact me via the same Author link that appears below blog post that I share.  The steps are extremely simple. Kindly do this,

More

Stick Hand Written Signature Below every Blogger Post

hand written signatureTechnology has developed enough that you can now convert your hand written signature into a digital one with simple online tools. Mylivesignature is a great tool that lets you create a digital signature for your self. You can change its font size and font color along with font type and signature slope. You can try using the wizard or their free hand tool to sketch your signature in natural way. However I would prefer the wizard tool which helps you by providing several editing options like font color and background color. Click here to create one now!

More

Blogger Comment Box Black Background Theme

blogger comment boxI will be publishing several pattern themes for Blogger Comment form this month. Everything looks good when you present it in a way that may seem appealing. I would accept that BlogSpot blog does not have a good commenting system but you can use the same Comment box and turn it into something creative and far beautiful than the comment forms of WordPress blogs. Customized Blogger Comment boxes was amongst MBT's many innovative shares and today we will take a step further by releasing different color themes by using different patterns of images. Modern CSS3 properties like box shadow and rounded corners will also be applied to the comment body to make it stand out. So lets try our first theme of the month which is named "Black Theme"
More

How To Shift Sidebar Column To Left or right?

SHIFT SIDEBARSThis is just a short but extremely useful trick for all those who wish to change the position of their Post body and Sidebar wrapper. Normally most professional layouts have sidebar arranged to the left but E-commerce blogs or other business blogs look good with left sidebar column. In order to keep your blog layout according to standard rules then you may like changing the position of vertical dv segments in your template. If you want to shift your sidebar to left or right or swap sidebar and post body position then you can easily do this using the simple setup guide below.

More

How To Find Sponsors For Your Blog?

find advertisersTo answer this question first and foremost ask yourselves why should an advertiser choose your blog? why Should he spend money by advertising his product on your site? What benefits or to be more precise what value does your blog provides to the sponsor? How can you guarantee that his product wont get neglected if he chooses to buy an Ad Spot on your blog? Too many questions but a simple logical answer to all of them and that is provide him with Quality. Read on to understand this logic.

More

7+ Ways To Make a Subscription Box For a Blog


subscription boxesA subscription box usually contains a link to your RSS feeds and a Email Form where visitors can submit their Email ID to receive updates from your blog. Blog without a subscription form makes no sense. Subscribers are the backbone of any successful blog. The more readership you have the stronger you get. People subscribe to your Feeds only when you publish quality content. Therefore it is very important that you may try every possible means of increasing the number of subscribers to your blog whether you are a Wordpress user or Blogger user. One basic and most important thing to do is to add a subscription box widget to your blog and position it near the top area of your blog just below header. Always keep subscription box to the top right or left position of your sidebars to attract as many people as possible. A good subscription form with nice icons and Email Text box does always attract people to subscribe. Therefore to help you with your readership we will mention all MBT tutorials publish so far on this topic so that new readers may find it easy to choose the best RSS forms for themselves.
More

Remove Blogger Sitemap Errors In Google Webmaster

Remove sitemap errors

Most tutorial do tell how to submit a blogger sitemap to Google but unfortunately they often fail to mention the correct way. You are still seeing feed proxy errors on your webmaster tool account because Google spiders are getting confused by the sitemap that you submitted. BlogSpot blogs come with Atom Feeds and RSS feeds by default. But since these feed technologies are of low quality therefore we often switch to Feedburner. In blogger Feed settings page we often redirect our default atom feeds to this latest well developed feedburner feeds.

More

Official Blogger app for iOS 3.2+ Released

iphone bogging appBlogger team has just released a blogging app for Apple IPhone. Just a month ago they released the Android App for Blogger and now they have developed a new blogging app for iOS which is compatible with versions 3.2 and above. This app can be download for free from App Store. This apps lets you write new posts using your mobile phone. You can write, edit, publish and even save a post as draft. The user interface is in English but all languages are supported. Just like your Blogger editor you can use this app to upload photos from your folder or you can even add instant photos to your posts taken from your iPhone set. You can can add labels and tag locations. However the  HTML mode is not supported. You can only edit the posts using the compose mode.

More

Change Color of "Follow By email" Gadget in Blogger

follow by emailYes you can surely change background colour of the Submit button, Text input box, font size and colour of the Submit button of Follow by Email gadget. Blogger recently announced a Follow by email subscription box that helps your readers to subscribe to your daily blog updates. Luckily after offering my fajr prayers an idea clicked my mind as why not personalize this RSS email widget and hence I came up with this post. Today's tutorial makes use of completely overriding Blogger's official stylesheet for the widget and will force-apply styles of our choice. The steps for this widget are extremely easy. Kindly first see a demo,

More

Notification Bar For BlogSpot With Facebook Like Button

notification barMost of you liked the new sticky notification bar which is an important way of seizing visitor attention towards an important headline, news or any update or announcement you may wish to share. Today we will take a step further by adding Facebook like button to the sticky bar. This is a great way of increasing your fans on FB. All visitors will be able to see the bar at the top of your blogger header and it will stay fixed their and would scroll as the user scrolls down. It will always be attracting your visitors to like your blog. Lets first see a demo.

More

Make HTML Table with Background Colors in BlogSpot

html table background colorsSo far we learnt how to create HTML tables then we learnt on how to style border colour and border size of tables in blogger, and now we will do the last thing and that is adding background colors to HTML Tables to make it stand out. The steps are extremely simply if you have already read the previous two tutorials. Lets start playing with some more CSS.

More

Change border Color and Size of HTML Tables

change border size and color in html tablesAfter 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,

More

Make Sticky Bar For BlogSpot



sticky barYou 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.
More

Make Colorful Tables in BlogSpot

blogspot tablesBlogSpot 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

More

Make a Button Badge For BlogSpot and Wordpress

blogspot button makerYou 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.

More

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

TECHcrunch teamI 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

More

Tell Google What Links To Display In Sitelinks

manage sitelinks display

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.

More

How To Link Like button To Facebook Like Page

linking like button to facebook like pageThis 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,

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:

More

Add Tic-Tac-Toe To a Webpage

tic tac toeLet 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

More

Smooth Scrolling "Back To Top" Button for Blogger

scrolling back to top buttonFinally 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.

More

Identify Font Type and Font Color on a Website

find font typeWhatfont 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.

More

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

find image dimensionsThere 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.
More

Add Rotating Slides Of Popular Posts Widget To Blogger

popular posts sliderMy 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.

More

How To Give Admin rights In Blogger?

blogger-admin-rightsBlogger 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. 

More

Divide Blogger Header In Two Parts or Sections

divide-headerA 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:

More