Template CSS Blogger

Smartphone revolution brings new features to the web development, it is time to change your website design into a responsive design instead of maintaining a separate mobile version . Responsive design will automatically adjust itself based on the screen size of the media devices. This post explain you how to use CSS 3 @media property and working with Internet Explorer using Modernizr. Download Script      Live Demo Try live demo with different screen resolutions. Step 1 Web layout divided into three horizontal parts are Hearder , Main and Footer . Here Header div divided into  two horizontal parts such as Logo and Nav and the same way Main div divided into Article and Sidebar . HTML Code <div id=" header "> 1 Header <div id=" logo ">logo</div> <div id=" nav ">links</div> </div> <div id=" main "> 2 Main <div id=" article ">article</div> <div id=" sidebar "&g

In this tutorial im gonna explain how to add Bouncing   with jQuery.It  have nice hover effect. Every menu are different  with colors. Im   using   jQuery and  HTML,  Just check out demo.Its easy to add to blogger. get my all menu bar here 1. Log in to blogger account and Click drop down. 2. Now select " Template " Like Below. 3. Now you can see Live on blog, Click EDIT HTM L Button" 4. Now click Proceed button.     5. Find this tag by using Ctrl+F    </head> 6. Paste below code Before </head> tag <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1' type='text/javascript'/> <script src='http://bloggertrixcode.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/> <script src='http://bloggertrixcode.googlecode.com/files/animated-menu.js' type='text/javascript'/> 7. Go to blogger and click Layout 8. Click Add Gadget and select 'HTML/J

In this tutorial, we're going to divide (separate) our posts in boxes (frames), so each post will have it's own "house", and you'll be able to see background between them. See below what I'm blabing about: Ok. You should keep in mind : ► this is the example for the Blogs that already have a customized (stylized) Post area ► this example was made in Minima Blogger template (so your code may be a bit different, but the procedure is the same) ► it doesn't matter if you have "heavily" customized template, you can apply these setting anyway UNDERSTAND THIS .... main-wrapper defines the Post area in Blogger Template. The whole idea here is to copy the style of main-wrapper , and to apply it to elements inside of it. ....now, the whole section of "main-wrapper" looks like this (in my example): #main-wrapper { background:#FFDEAD; border: 1px solid #E9967A; padding-right:7px; padding-left:7px; width: 410px; float: $startSide; word-wr

Here's one more thing which folks find irritating. Or unnecessary. When you click on one of your labels, blogger filters your posts tagged with that particular label. That's great, but we don't need a big box saying the same thing. If you like it though, even better. But maybe your readers don't... So, if you want to remove it, follow me. It's an easy one. Log in to your Blogger account, Back-up your template, then go to: DASHBOARD -- LAYOUT -- EDIT HTML -- hit EXPAND WIDGET TEMPLATES , find the following part of code: <b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='c

In Blogger default templates (like Minima ), you can see that all kinds of borders are present. Borders around header, borders between posts and sidebar gadgets. In the control menu, Fonts and colors , we are allowed just to change the color of the border. But there's so much more to it.... First, let's check the styles for the borders that we can use: none : no border at all dotted : series of dots. dashed : series of short line segments. solid : single line segment. Double: two solid lines. Groove: 'carved' into the canvas. ridge : like it is coming out of the canvas. inset : like it is embedded in the canvas. outset : like it is coming out of the canvas. HOW TO CHANGE MY BORDER? To make any kind of changes, you have to go to: DASHBOARD ► LAYOUT ► EDIT HTML, and find the code that corresponds to the borders: border:1px solid $bordercolor; ...your code (CSS style) may be a bit different, (this is example for Minima default templa

You should keep in mind : ► this is the example for the Blogs that already have a customized (stylized) Sidebar (colorized, borderized..) ► this example was made in Minima Blogger template (so your code may be a bit different, but the procedure is the same) ► it doesn't matter if you have "heavily" customized template, you can apply these setting anyway UNDERSTAND THIS We have to imitate the main style of our sidebar-wrapper (the one that carries the style for the whole sidebar element), and apply it to individual widgets (gadgets). Here's the style of the sidebar-wrapper in this example: #sidebar-wrapper { background:#ADD8E6; border: 1px solid #E9967A; width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } ...the styles we're interested in here are: background and border ...next is to apply this to our widgets... Ok, LE