The navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network. You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.
Create Static HTML Design Of your Blogger Template
This is part 2 of our series "XHTML to HTML" . We have already learned how to turn blogspot's layout into blank HTML page but we have no yet shared how to remove the dynamic XML tags alone leaving behind the stylesheet, scripts and html design. In today's tutorial I will try to share the basic way of understanding a websites core structure by identifying the important div sections that make up the structure. I hope you have followed part one of the series and have downloaded your blogspot template. I also assume you have Dreamweaver or Codelobster installed on your desktop computers or laptops.
I already shared how a dynamic XHTML BlogSpot template could be converted into a blank Static HTML Template, but what if you needed to keep the same design of your blog and only remove the Dynamic objects like widgets. This could easily be achieved by carefully converting the XHTML format of code structure to Basic HTML 4.0 File. This will enable you to even embed or add a PHP or ASP.net code inside the Cloned BlogSpot design in HTML format. A live example is our Contact page with a PHP contact Form. It is not possible to add PHP inside blogger templates because no direct access to web hosting ftp account is available so far. When you visit our contact page, you will feel like you are still in BlogSpot template environment but in reality its only a Cloned HTML design of the original template. The steps today are interesting and fun to try. Make sure you have a webhosting to try today's tutorial. We are using hostgator as our blog web host to host all our files and resources.
Increase Page Layout Size by hiding Sidebar in Blogger
Jquery is a beautiful library of JavaScript that has inflated a new life in web technology. Websites today largely use jQuery to create gadgets and designs that were impossible in past. Unlike CSS3 and HTML5, jquery is supported by all major browsers including IE8+. The functionality that we will learn today is called Jquery Slide Toggle effect. It enables you to control the speed elements which respond on mouse hover. If you move your mouse towards the drop down menu (at top) on this blog, you will observe that the column drops smoothly and slowly. It first slides down and then expands to its full width. We will use one simple function to introduce this animation in its simplest form. It is .slideToggle(). This animates the drop down list and produces a beautiful effect.
z-index: Send an HTML element to Back or bring to Front
One of the major problems people facing while designing HTML layouts using CSS is the overlapping issue. CSS positioning lets you position an HTML object anywhere you like. You can locate an object anywhere you like but it involves great care. By using the CSS positioning attributes like absolute, fixed or relative you often come across a problem where on object overlaps another or blocks the view of another section. In order to bring one div section on front or back of another you will need to use z-index property of CSS. Just like in Adobe Photoshop CS5, z-index lets you to send an element to back or bring it to front. In todays' tutorial we will aim at explaining this property briefly and with clarity.
Ever since The World Wide Web Consortium (W3C) introduced CSS3 and HTML5, websites, content management systems and online web tools took a whole new shape. Classic and traditional layouts created using tables no more exists and today we play with well developed style properties to better control the positioning of objects. In our previous post we learnt how to add a drop down menu list to a horizontal menu and in earlier posts you learnt in detail how to create menus but today we will play with the structure we created and will add cool ease-in-out effects. Ease-in-out effect is an interesting property that lets you control the display using a timer. This along with some other attributes made animation in CSS3 possible. With ease-in-out we can add soft mouse hover effect to the navigation menus. Whether you may be a Blogger user or Wordpress, todays' post will give a new look and easing touch to your menu.
Create a Drop Down List For any Horizontal Menu
A website's Header section which includes mainly the logo and navigation menu, is the region that attracts a visitor the most. It's the first section of your entire layout that catches reader attention. Therefore with time designers introduced non-traditional versions of drop down menus using Jquery and CSS3. Most of you probably know how to customize a menu but you often find it difficult to add Jquery effects to an existing menu, add CSS3 transitions for rollover effects and especially to turn a simple horizontal menu into a multi-level drop down menu. In order to understand the core basics of a Menu's HTML and CSS structure we will be publishing series of tutorials on this topic to make it extremely easy for most of you to create and design Menus by your own.
Guest posting saves great time when you are stuck in exams or engaged in some other off-side work. Google Blogs provide the best blogging experience when it comes to ease and comfort. The user interface and over all control options are extremely easy to set and play with. Unlike wordpress where you can display author box using a plugin, in blogger we will have to code things ourselves. Displaying author info at the bottom of the posts can be done in two ways. The first method as you may know is pasting the author info box manually below each post yourself. The problem with this method is of course precious loss of time. Manually adding an author box below each post could turn out to be a headache, therefore an automatic way would be the best. You have seen the above author box displaying introduction of Qasim below all his posts. This box appears automatically below each post published by his shared blogger account. We used conditional tags to make it work and its really just two lines of code, the rest is all design. Lets understand few things before jumping straight at the tutorial
Add Free Speech Recognition To Your Website Using HTML5!

Every website has some sort of a text input field, which the visitors can use either to interact with the author or other visitors, or to perform a search. Users can either input text in search boxes, comment fields, or contact forms. This input, of course, comes from keyboards, i.e. the 'written text' input. But don't you sometimes get the feeling that in this digital era where technology is taking giant leaps, things should be a bit automated? Automated in terms of ease-of-use for the users. Well fortunately, there is another, cooler input method you can employ to provide your blog visitors a better user-experience, and that is speech recognition, all thanks to HTML 5!
Speech recognition is great. And so is HTML 5! It gives your blog a wider range of functionality. Now, instead of typing keywords and phrases in search boxes, all the users need to do is connect their microphones to their computers, and speak the words right into it! Sounds great, huh? Well let's see how you can do that.
Newest 200+ Comments Not Showing In Blogger - Fix Found!
Due to Blogger Threaded comments, most of the comment code structure has been seriously effected. Normally when a post exceeds the limit of 200 comments, latest comments are paginated and only the oldest 200 comments are displayed on post page. You could switch between oldest and newest comments by using the comment pagination links but due to threaded commenting system these links got messed up and would not show up now. I got a custom script from my friend nhamngahanh from simplexdesign which will help you fix this 200+ comments problem so that your visitors could access all your comments. Lets cook some new recipe today!
Read more »
After My Previous Article Make a Popup Subscribe Like aweber, I’m Back here With another Supercool Article About Cool Css3 Navigation In Blogger. Again Thanks To Mohammad Mustafa Sir For Making It Approved. This amazing drop down menu is created by Catalin Rosu and uses no images or scripts at all! We will be sharing a modified version which may work perfectly with Blogger. Its pure power display of CSS3 . It is really Cool and Professional Widget For Your Blog Which will really change the appearance of Your Blog and Make it trendy and attractive. It is very Easily Integrated in your BLOG.
How I use Google Chrome To Design Blogger Templates?
Google Chrome has excellent capability of allowing you to see how your design looks by adjusting the settings live. You can redesign or edit the style sheet of any website your wish using Chrome. While designing a template, one of the things that takes much time is alignment of objects on a div section. The margin and padding property can be a headache if you are not habitual with tools such as Chrome. I normally use MBT HTML Editor to design widgets but just few weeks ago I have started enjoying using chrome for my design projects. I will share some basics here that you can learn in order to better align and style elements on your blog. You can also investigate what CSS properties like font type and effects a site is using. All this is done using the Developer Tool provided by Google Chrome. Which lets you to edit CSS, HTML and Scripts of any website online. I am sure you will enjoy this tutorial. Follow up.
The previous version of sticky were well entertained and some of you asked how to add Facebook like button and Google Plus button to the stickybar. If you have already added the sticky bar then you just need to make few changes to your old code. Only step#6 is different else all styling and HTML is the same which we used in our previous tutorials else you can try these new codes from start and delete the previous one. MBT's Stickybar is just a custom version of hello bar but it has no Ads and can easily be styled and customized to blend your blog template. Since it is always better to have your own custom widgets therefore we designed this easy bar which sticks to the top of your blog or website to grab the attention of all visitors. Both these social plugins would help you increase your fan following. The Facebook like button will be linked to your fan page so that any like may turn out into a Fan. Lets get to work then!
Top 10 HTML5 Websites To Get Inspiration!
Html5 has developed an environment of enthusiasm in the web these days. And this excitement is justly explained since it has emerged as an innovative solution for web related issues, after more than ten years. HTML5 is designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs . We have found out some beautiful websites based on html 5 that may inspire your creativity and motivate you to learn it.
The Stickybar or fixed Bar that we released was warmly welcomed. What we all have been searching for was a Close Button or Cancel button that would hide the bar display. May be not every visitor enjoys viewing that fixed bar at the top, so they deserve to be provided with an option to view or hide the bar. While viewing one of the Wordpress Blogs I found this button next to their updates bar. I managed somehow to fetch the script half broken. Making it work with blogger template was difficult because blogspot templates are programmed via XML and the rules of XML are really harsh when it comes to Character case. Debugging the script was difficult but Alhamdulillah the hard work paid off. You can see it Live just to the right of my Stickybar at the top. I am excited to share it with you all. Lets get to work!
Yesterday I shared the trick of hiding the Feedburner logo from buzzboost widget and today we will learn how to change the default CSS styles completely. You will be able to change the text link color, font type and size, border colors, remove feedburner logo, change bullets and background color. It is extremely easy tutorial and I am sure both wordpress and blogger users will find it easy. This trick was possible only after we expanded the javascript code provided by feedburner. So lets jump straight to work!
Remove Feedburner Logo From Buzzboost Widget
Feedburner Buzzboost Widget lets you display headlines of your recent posts or recent comments using your RSS Feed. It republishes your Feed as HTML. By default the widget includes a credit at footer that says "Headlines By Feedburner" It was not that difficult to find a way for it after I expanded the JavaScript code and this code provided access to all CSS IDs and classes. Our next post would be on how to completely customize the appearance of buzzboost by editing the default styles. We will learn also in detail on how to change the bullet style, font size and colors etc. Lets now remove the logo "Headlines by Feedburner"