ORIG. BORA COURTYARD TABS
Read more
Nice blogging tip from http://ini-how.blogspot.com
Multi-Tabbed is very helpful if you wanted to save space on your blog. At the same time it is provide some vital information your blogs visitors are looking for. So having a multi-tabbed widget in your blog helps your visitors easily find what they are looking for like for example, the most popular post, recent post, and others.
Instructions to follow:
STEP #1:
Log in to Blogger and go to Layout -> Edit HTML and find this code in your blog:
</head>
Immediately ABOVE/BEFORE it, paste this code:
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.core.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>
<style>
.ui-tabs-selected a {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 8px 1px;
border-bottom: 1px solid #fff;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-bottom: -1px;
overflow: visible;
}
#fragment-1 {
background: #999900; //Background color of content area 1 (tab 1)
color:#FFFFFF; //Text color in content area 1 (tab 1)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-2 {
background: #CC9900; //Background color of content area 2 (tab 2)
color:#FFFFFF; //Text color in content area 2 (tab 2)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 {
background: #666666; //Background color of content area 3 (tab 3)
color:#FFFFFF; //Text color in content area 3 (tab 3)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 a {
color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3)
}
</style>
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->
The code highlighted in RED will control the appearance of the tabs. And the code highlighted in BLUE will control the appearance of the content area. To make your work easy, comments are written in front of the code above (highlighted in GREEN color).
Now save the template.
STEP #2:
Now go to Layout -> Page Elements
Click on Add a Gadget and select it as HTML/JavaScript type
And paste this code into it:
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Best Posts</span></a></li>
<li><a href="#fragment-2"><span>My Pictures</span></a></li>
<li><a href="#fragment-3"><span>Recent Posts</span></a></li>
</ul>
<div id="fragment-1">
<span style="text-align:left;">
<p>First tab is active by default:</p>
</span>
</div>
<div id="fragment-2">
<center><a href="http://tinypic.com" target="_blank"><img src="http://i29.tinypic.com/29ggyu0.jpg" border="0" alt="Image and video hosting by TinyPic"></a></center></div>
<div id="fragment-3">
Content of Tab #3
<br/><span style="font-size: xx-small;"><a href="hollywoodmoviestowatch.blogspot.com" target="_blank">Hollywood Movies to Watch</a></span>
</div>
</div>
Now before you save the widget, change the text in RED to change the names of tabs and change the text in BLUE to change the content of the tabs.
Save the widget and enjoy more content in less space.
Read more
You can customize post body font in any expect like color, size, style or family. First, you should know what is the default CSS code for post body and then we'll customize it according to our own taste. Go to Layout | Edit HTML and find this code:
1- margin:.5em 0 1.5em; is defining spacing between post and other elements in the blog like sidebar and header.
2- border-bottom:1px dotted $bordercolor; it very descriptive. It creates a dotted border at the bottom of the post with width 1px.
3- padding-bottom:1.5em; causes some space between posts and other elements at the bottom. The other elements could be labels, comments or date.
Now, I've given you some idea about the post body style definitions. By default, the font properties are not defined specifically for posts but we can easily do this by applying some simple CSS techniques.
1- How to change font size in post body!
You need to add font-size:15px; property in the default CSS code:
Tip: Try increasing or decreasing 15px to increase or decrease font size.
2- How to change font color in post body!
You need to add color:#FFFFFF; in the default definitions:
Tip: #FFFFFF is the hex code for white color, you can capture any color you see on your computer or on web and get the hex code of that color through a free utility ColorPic.
Remember: This property will not effect hyperlinks (?) in the post body, I'll tell you about hyperlinks customization later in this article.
3- How to change the font family in post body!
Font family means that you can control which font will be used to display post body. You can have Arial, Times New Roman, Georgia, Serif and many many more. So, you'll need to apply font-family:"Times New Roman",Georgia,Serif; property for this purpose.
Tip: I've added 3 fonts in font-family:"Times New Roman",Georgia,Serif;property, why? Because my user might not have Times New Roman installed on his/her computer then the second font Georgia will be used and similarly Serif can also be used.
Tip: See following article about CSS font family properties for information.
http://www.w3schools.com/css/pr_font_font-family.asp
4- How to change the style of post body font!
Remember: You might not need this property but this is useful for better understanding of your fonts.
By style, I mean you can make your font italic through font-style:italic; property.
Remember: If you'll not add this property in default definitions then your post body font will be displayed normal.
Tip: Blogger post editor provides an easy way to make specific part of text italic. When creating a post, select your text and click the i icon which is the second icon on toolbar.
Some of the above described properties will not effect hyperlinks (?) in the post body and there are no definitions in default Blogger CSS for hyperlinks (?) so lets add our own definitions.
This is the deafault code:
Add some more juice in it:
Now, I'll explain all 3 properties added in .post a {} tag.
1- color:#FF0000; is the hex code for red color, you can hex code of some other color to change it.
2- text-decoration:underline; will make your post hyperlinks (?) underlined, you can change this to text-decoration:none; if you don't want to apply it.
3- text-transform:uppercase; will change your hyperlinks (?) to transform to uppercase. You can change it to text-transform:lowercase; if you want your hyperlinks to display in lowercase or you can change it to text-transform:none; to nullify this effect.
You can also further customize the font appearance when mouse comes over your hyperlinks. For example you might want to change the color of your hyperlinks on mouse over or make it underlined or maybe change the font size.
This is our default CSS + hyperlinks CSS we added in the previous steps:
Add even more juice in it:
Now, I'll explain some changes I've made.
Note: All the properties in .post a:hover {} will be visible only when you'll move mouse over the link.
1- The color will change to blue (#0000FF).
2- There will be no decoration of text. Previously, we applied text-decoration:underline; property to make our hyperlinks underlined but when mouse will come over, it will not be underlined.
3- On mouse over, our hyperlinks will become lowercase.
The default code of posts!
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Understand the default code!
1- margin:.5em 0 1.5em; is defining spacing between post and other elements in the blog like sidebar and header.
2- border-bottom:1px dotted $bordercolor; it very descriptive. It creates a dotted border at the bottom of the post with width 1px.
3- padding-bottom:1.5em; causes some space between posts and other elements at the bottom. The other elements could be labels, comments or date.
Make changes in the default code!
Now, I've given you some idea about the post body style definitions. By default, the font properties are not defined specifically for posts but we can easily do this by applying some simple CSS techniques.
1- How to change font size in post body!
You need to add font-size:15px; property in the default CSS code:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:15px;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:15px;
}
Tip: Try increasing or decreasing 15px to increase or decrease font size.
2- How to change font color in post body!
You need to add color:#FFFFFF; in the default definitions:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
color:#FFFFFF;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
color:#FFFFFF;
}
Tip: #FFFFFF is the hex code for white color, you can capture any color you see on your computer or on web and get the hex code of that color through a free utility ColorPic.
Remember: This property will not effect hyperlinks (?) in the post body, I'll tell you about hyperlinks customization later in this article.
3- How to change the font family in post body!
Font family means that you can control which font will be used to display post body. You can have Arial, Times New Roman, Georgia, Serif and many many more. So, you'll need to apply font-family:"Times New Roman",Georgia,Serif; property for this purpose.
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-family:"Times New Roman",Georgia,Serif;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-family:"Times New Roman",Georgia,Serif;
}
Tip: I've added 3 fonts in font-family:"Times New Roman",Georgia,Serif;property, why? Because my user might not have Times New Roman installed on his/her computer then the second font Georgia will be used and similarly Serif can also be used.
Tip: See following article about CSS font family properties for information.
http://www.w3schools.com/css/pr_font_font-family.asp
4- How to change the style of post body font!
Remember: You might not need this property but this is useful for better understanding of your fonts.
By style, I mean you can make your font italic through font-style:italic; property.
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-style:italic;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-style:italic;
}
Remember: If you'll not add this property in default definitions then your post body font will be displayed normal.
Tip: Blogger post editor provides an easy way to make specific part of text italic. When creating a post, select your text and click the i icon which is the second icon on toolbar.
How to apply these properties on hyperlinks in the post body!
Some of the above described properties will not effect hyperlinks (?) in the post body and there are no definitions in default Blogger CSS for hyperlinks (?) so lets add our own definitions.
This is the deafault code:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Add some more juice in it:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
Now, I'll explain all 3 properties added in .post a {} tag.
1- color:#FF0000; is the hex code for red color, you can hex code of some other color to change it.
2- text-decoration:underline; will make your post hyperlinks (?) underlined, you can change this to text-decoration:none; if you don't want to apply it.
3- text-transform:uppercase; will change your hyperlinks (?) to transform to uppercase. You can change it to text-transform:lowercase; if you want your hyperlinks to display in lowercase or you can change it to text-transform:none; to nullify this effect.
How to customize the hyperlinks for mouse over event (hover effect)!
You can also further customize the font appearance when mouse comes over your hyperlinks. For example you might want to change the color of your hyperlinks on mouse over or make it underlined or maybe change the font size.
This is our default CSS + hyperlinks CSS we added in the previous steps:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
Add even more juice in it:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
.post a:hover {
color:#0000FF;
text-decoration:none;
text-transform:lowercase;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
.post a:hover {
color:#0000FF;
text-decoration:none;
text-transform:lowercase;
}
Now, I'll explain some changes I've made.
Note: All the properties in .post a:hover {} will be visible only when you'll move mouse over the link.
1- The color will change to blue (#0000FF).
2- There will be no decoration of text. Previously, we applied text-decoration:underline; property to make our hyperlinks underlined but when mouse will come over, it will not be underlined.
3- On mouse over, our hyperlinks will become lowercase.
Read more
Subscribe to:
Posts (Atom)
