23 Mei 2013

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.

Responsive Web Design using CSS3


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">sidebar</div>
</div>

<div id="footer">
3 Footer
</div>

This is very useful for web development.

Wireframe
Responsive Web Design using CSS3

CSS
*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

Step 2
Now working with an unorder list <ul> tag.
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
....
....
</ul>
</div>

Responsive Web Design using CSS3

CSS
ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

Step 3 - @media 768px
Working with screen media resolution minimum width at 768px

Wireframe @media 768px
Responsive Web Design using CSS3

CSS @media 768px
@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

Step 4 - @media 1140px
Working with screen media resolution minimum width at 1140px

Wireframe @media 1140px
Responsive Web Design using CSS3

CSS @media 1140px
@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}

}

Step 5 - @media 480px
Working with Nav bar list media resolution minimum width at 480px. This is applicable for screen media resolution higher than 480px.
Responsive Web Design using CSS3

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

Modernizr
Modernizr is a JavaScript library that detects the availability of native implementations for next-generation Web Technologies. These technologies are new features that stem from the ongoing HTML5 and CSS3 specifications.
Responsive Web Design using CSS3

HTML Code
For implementing lower version browser like Internet Explorer 7 and 8, you just include modernizr.min.js after style sheet inside header tag. download link.
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>

<div id="header">

<div id="logo">Logo</div>
<div id="nav">

<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>

</div>

</div>

<div id="main">
<div id="article">Content Here</div>
<div id="sidebar">sidebar</div>
</div>

<div id="footer">
Footer
</div>

<body>
</html>

Now this code works fine with Internet Explorer lower version.

Note: Modernizer doesn't support inline CSS.

style.css
Final CSS

*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}

}

Note: Modernizer doesn't support inline CSS.
Credit

17 Mei 2013


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.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML 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/Javascript

9. Paste below code.

ul{
margin:0;
padding:0;
}
a:link {
color: #F8F8F8;
text-decoration: none;
font-weight: bold;}
li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a{
color:#FFFFFF;
font-size:15px;
text-decoration:none;
}
p{
padding:0px 5px;
}
.subtext{
padding-top:15px;
}
/*Menu Color Classes*/
.green{background:#6AA63B url('http://3.bp.blogspot.com/-3cLBeUu-1R0/UTgpxWnSwKI/AAAAAAAAHIk/2h3-L7TZ_gw/s1600/btrix_green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('http://4.bp.blogspot.com/-EzBNw2YVc7Q/UTgpxf566uI/AAAAAAAAHIo/Sob7Coasfr8/s1600/btrix_purple-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('http://3.bp.blogspot.com/-12cl-ExmtYQ/UTgpyR2j_4I/AAAAAAAAHIs/aGoTV2vhII8/s1600/btrix_red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('http://1.bp.blogspot.com/-j-GJUBRUWOE/UTgpxW6-ETI/AAAAAAAAHIw/TPHf5UHYokI/s1600/btrix_blue-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('http://1.bp.blogspot.com/-c-QpLECnz4c/UTgpyg_c_LI/AAAAAAAAHJA/2CxSN50MOiA/s1600/btrix_yellow-item-bg.jpg') top left no-repeat;}
</style>
<ul>
<li style="overflow: hidden; height: 50px; display: block;" class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li style="overflow: hidden; height: 48px; display: block;" class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li style="overflow: hidden; height: 50px; display: block;" class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li style="overflow: hidden; height: 50px; display: block;" class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li style="overflow: hidden; height: 50px; display: block;" class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6444047-1");
pageTracker._trackPageview();
} catch(err) {}</script>
Replace # with your links.

10. Now save your HTML/Javascript'.

16 April 2013

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-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 part in white is default, and I've customized template a bit with part in orange.

...I've also added some padding so the text is not too close to the edge. Read more about adding borders in Blogger here.
...your style will be different, of course. But this doesn't really matter .

So, you want to keep the same style (design) and separate posts into individual boxes. Here's:

HOW TO DO IT
First thing you should do is back up your current Blogger template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML, and in the code section, find the following line of code:
#main-wrapper {
...in my example the whole section looks like this:
#main-wrapper {
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
width: 410px;
float: $startSide;
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 */
}
...now, I'm going to copy the style (in orange) and paste it in my main-wrapper elements (find the following lines in code):
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
....after pasting the code, it should look like this:
h2.date-header {
margin:1.5em 0 .5em;
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;

padding-left:7px;

}

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
background:#FFDEAD;
border: 1px solid #E9967A;

padding-right:7px;

padding-left:7px;

}
....you can see the added code in orange.

Next thing is to hide (or delete) the copied style from "main-wrapper". If I don't do this, my template will look like this:

....to avoid it, I'll hide the style in "main-wrapper" using /* and */....in the code it's like this:
#main-wrapper {
/*background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;*/
width: 410px;
float: $startSide;
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 */
}
...alternately, you can just DELETE the style from the main-wrapper...
...now, the style for main-wrapper is disabled, and you can see a gap (a Blog background, in fact) between your posts...

FIX
To align your sidebar with the post section, find this part of code:
h2.date-header {
margin:1.5em 0 .5em;
..and change it to:
h2.date-header {
margin:0 0 .5em;
Save Template.

ADVICE
► In this example, the date has it's own box. Hm. You can change this if you don't like it. Read the instructions on:
How to move the date under the post title in Blogger

► If you have switched to Embedded comments below posts, you should consider customize them a little bit......Why? Because your Blog background may come in the way, causing low visibility of the comments and comment form....It depends on your background color. You'll get it.
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='clear: both;'/>
</b:if>
</b:includable>

Delete the code from above and replace it with this one:
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Save the template. View your blog and click on some label....no more box.
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 template), but it will always start with "border:"
...use CTRL + F (Apple Key+F) to locate the line easily...

We can change:
- the width 1px into 2px, 3px, 4px....
- border style solid, into some other style. Like, dotted, or dashed.....
- change the color, inserting the part in green, below the existing part (in white):

border: 1px solid $bordercolor;
border-color: ff7700;
...with this, we gain control of border color, so Blogger "$bordercolor" is no longer in charge...
..to change the color into the one you want, change the hex value (hex color library here)..

There's also one cool style that I don't see so often in Blogger Designs, and that is using borders for a specific part of the "box". You can change right, left, upper and bottom border. And they can all be in different styles!
I want to add a frame / box / borders around my sidebar section. And, I want left one to be red, right one blue, bottom one green and top one yellow. Here's how:
#sidebar-wrapper {
border-left: 3px solid #FF0000;
border-right: 3px solid #0000FF;
border-bottom: 3px solid #00FF00;
border-top: 3px solid #FFFF00;
padding-left:7px;
width: 220px;
float: $endSide;

...I added some padding-left so that the text is not to close to the border...
...change the width, colors, styles...
...and that's it. I know it looks silly, but you'll experiment, and get a beautiful results....

And if you are up to some more customization, check this article about placing your custom picture as a divider.

Mengenai Saya

Tutorial Blogger

Entri Populer