basicblog

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.

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.

jCarousel is a jQuery plugin used widely for controlling list of items (both images, videos or text) in horizontal or vertical order. The items can be scrolled back and forth with animation. The carousel can be used either as image scroller or textscroller. It can be controlled externally with both JavaScript and AJAX and of course php. So it's a smart coded plugin that can be altered with all possible jquery functions. Its created by Jan Sorgalla and you can see several versions of here by visiting Sorgalla' website. To keep things simple we have filtered the code, compressed  it and made it as small as possible. You can easily customize it and install it on your BlogSpot blogs with just a single copy and paste of the code we would share today. You can use the same code to install it on any blogging platform may it be Joomla, wordpress or even a Static HTML website. Lets get to work now:

PHP is one of the most widely used programming scripts. It is the same language that gave birth to Facebook and your beloved Wordpress. Content Management systems and ecommerce websites are built largely with PHP. I really enjoy writing and testing algorithms. PHP is enjoyable as long as you are using the right tool else its all of a headache and tasteless consuming language. While developing my recent university project which was based on "Online Mobile Marketplace " I badly felt the necessity of built-in PHP and JavaScript functions. It is really difficult to code every single function out of scratch unless you use a handy tool to code fast and efficiently. I used various online free PHP editors but their Syntax Highlighting, intellisense and debugger sucked so bad that  I had almost made up my mind to switch to a different project. But then a fellow friend who is a freelance developer suggested that I should try Codelobster PHP Edition.

Blogger comment form is the only section in blogspot blogs that still irritates users a lot.  After a successful customization of this form last year we now took a step even further to integrate jQuery slideToggle and accordion effect into it. Luckily major browsers now do support JavaScript library so this widget is compatible with all browsers. The tutorial today will help you to create a beautiful expandable and collapsible huge button that will display comment form by sliding down smoothly when triggered and hide it when clicked again. We will be using simple jquery functions to enable a button to  show/hide all div sections that hold the comments box.

I had a habit of releasing freebies on special occasions two years ago but due to laziness I neglected its importance. In order to revive that lost habit we are releasing a free icon bundle entitled "Cheery" which is the nickname of  our funny university Chairperson =p. The bundle includes all major social networking icons like the latest Google Plus, Pinterest, Delicious, StumbleUpon, Technorati, Facebook, Twitter, RSS, DIGG  and most importantly an icon for MBT. This set thus includes a total of 10 Free well crafted icons in PNG Format. You can download the icons in original 300 X 300 pixels size. I have not resized them to standards like 16, 32, 48 and 128.

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.

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.

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

I am taking PHP classes these days and its going really great so far Alhamdulillah. Its really easy to learn this beautiful dynamic scripting language. Wordpress framework and all its plugins are build using PHP. Its an open source language and you don't need to buy any license to run it on your web servers. Facebook the biggest social media network is a live example of what this amazing language can do. PHP is really easy if your programming background (C and C++ ) along with HTML4/CSS3 skills are strong. In the second part of "Blogger SEO PACK 2012" series we discussed how to generate and submit multiple blogger sitemaps to Google, Yahoo and Bing, the same post gave me an idea to create a tool that may accept blog links and post count as an input and generate sitemap and ping links automatically as output. I used basic conditional statements to make this widget work. I am excited to present this cool new tool exclusively to all MBT readers. Please have a look at it first.

Rarely do people share the true secrets behind their fairly established online existence. The word "Blogger" simply defines a person who generates quality content and publishes it online. So anyone who is publishing something new and unique to the online media is called a "Blogger". But how would you define a "Professional Blogger?" In todays tutorial I will share every possible detail linked to six figure earning dream. Everyone loves to Make Money Online but not everyone is applying the correct formula and that's why people often abandon their blogging careers. All details below are based on what I practically experienced during my 3 years of Blogging career, so things shared here are deeply focused to guide how to survive online in this growing world competition. Make 2012 a year to establish your blogging Goals!

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.

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!