How To Customize Blogrolling (CSS)

Posted by Tembra Variantoro Saturday, August 7, 2010
(Artikel ini telah Kadaluarsa, silakan cek http://varisphere.blogspot.com/2011/04/new-dynamic-blogroll-of-fasilkom-ui.html)


Sequel of these articles. :)
Well, I think I'll use English this time. (I am so rarely writing in English nowadays xD) And sorry for wrong spelling, grammar, punctuation or whatever.. Let's get into the main topic! ^^;

Now, that you have the Blogrolling, let's customizing it using CSS!
CSS, stands for Cascading Style Sheet, is a great invention in building a website! ^^

And it is simple too.^^

Now, for building a customized blogroll, there are two elements: "the container" and the texts itself.

Your blogroll is bound in the "container". And usually, we used tag <div> for it.
For example, this code:

<div style="height: 100px; width: 200px; border: 2px dotted #FF0000; overflow: auto;">
Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here
</div>

will generate:
Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here

Note the bold part:
style="height: 100px; width: 200px; border: 2px dotted #FF0000; overflow: auto;"

This is thing that we want to manipulate. The style, this is an important attribute for determining how your html element displayed on Web Browser. This method, however, called as "inline style sheet".

There are three ways of inserting style sheet:
- External style sheet/Linked style sheet
- Internal style sheet/Embedded style sheet
- Inline style sheet.

The "internal style sheet" would be more elegant to used. It is defined in head section of HTML (between <head> and </head> using <style> tag. For example:

<head>
<style type = text/css>
p {
text-align : center;
font-size : 16px;
background-color : #FFFF00;
}
</style>
</head>

For blogger user, the <style> tag is being replaced by <b:skin> tag. So, put the CSS code there (since blogger using well-documented XML).
And for wordpress.com user, you can't change your internal CSS code, so you have to use inline style CSS instead. (update: wordpress.com user also can change the CSS in the "Appearance > Edit CSS" section)

The external style sheet is not really differ with internal one. The main difference is, the code on external style sheet are separated from main HTML file (saved as .css file type) and being linked by this code:
<link rel="stylesheet" href="your code link./...css" type = "text/css">

Well, lets move on.

style="height: 100px; width: 200px; border: 2px dotted #FF0000; overflow: auto;"
Like its name, height and width are used to defined the area of the container. This is to make sure that the blogroll doesn't take too much of your website view. And value overflow: auto is used to make sure that every element inside the container visible as well by using scrollable area.
This is what happen if you set overflow value as hidden.

Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here

The border is used to customize the border that appear around HTML element.

Furthermore, you can customize the background of your blogroll.
And in the end, you can get a whole cool container like this:

Lorem ipsum ea duo posse cetero. Iusto mundi quaerendum te nec, his vide tritani an. Ea mei nonumy aliquip antiopam, quaeque laoreet vituperata ei has. Duo salutandi definiebas ad. Cu sed diceret propriae indoctum, id duo dolore primis erroribus, at usu commune adversarium. Evertitur similique honestatis at eos, suavitate definitiones ius ex.

Corrumpit patrioque in vix, convenire evertitur vel ad, facete delicatissimi id pri. Ius cu vero docendi eloquentiam, has dolorum accusamus id. Id cum rebum ipsum possim. Sed id quod mucius vocibus, pro cu graeco sapientem necessitatibus, vidit malorum sed te. Ex propriae iracundia posidonium mel, homero soleat mei an.

And here is the style for example above:

width: 400px; border: 3px outset #CCFF00; height: 150px; overflow: auto; background-color: #DCF9D4;


Well, now head into the most interesting part. Editing the text.

The standard one that I showed on http://varisphere.blogspot.com/2010/08/fasilkom-ui-2008-blogroll-bloglist.html looks a little bit boring.

So, why dont we try to change to this, instead:


To do so, you need to use the internal/external style sheet instead of inline style sheet. In this tutorial, I prefer the internal one

All you have to do is putting attribute "class" inside tag <div> and let the rest being take care by css section.
For example:
<div class = "customizeBlogRoll2>Your blogroll here </div>

and then put this code in the CSS section (for blogger user, put this code between <b:skin> and </b:skin>tag)

.customizeBlogRoll2{
width: 500px;
border: 3px outset #CCFF00;
height: 150px;
overflow: auto;
background-color: #DCF9D4;
padding: 5px;
}

.customizeBlogRoll2 img{
padding : 0px;
border : 0px;
margin : 0px;
background : none;
}

.customizeBlogRoll2 a:link, /*unvisited link*/
.customizeBlogRoll2 a:active, /*selected link*/
.customizeBlogRoll2 a:visited{ /*visited link*/
font-size: 16px;
color: #0011FF;
margin: 0 0 3px 0;
}

.customizeBlogRoll2 a:hover{ /*mouse over link*/
font-weight: bold;
color: #FF0045;
text-transform: uppercase;
margin: 0px;
}

Note that:
a:link - Defines the style for normal unvisited links.
a:visited - Defines the style for visited links.
a:active - Defines the style for active links. A link becomes active once you click on it.
a:hover - Defines the style for hovered links. A link is hovered when the mouse moves over it.

You may change the text-style by changing value of font-size, text-align, color, etc. Here is reference that may help you working with CSS text : http://www.yourhtmlsource.com/stylesheets/csstext.html

Enjoy! :D

0 comments:

Post a Comment

Daripada menggunakan "Anonymous" untuk memberi comment, sebaiknya gunakan "Name/URL". URL bisa dikosongkan jika memang dikehendaki.. :)

Terima kasih :)