Home » Archives for June 2012
Popular posts is not just a widget it is just like a representative of your entire blog.because it is nothing but the list of most view posts on your blog through out that blog life.that is enough for visitor to understand the quality of your blog content and how that blog will informative to him.so if you design this widget very colorful ,the it will attract the visitor concentration and will increase your page views.here i'm going to show you how to add color full popular posts widget in your blogger side bar. take a
DEMO of this widget
1) go to blogger ----> template ----> Edit Html
2)find ]]></b:skin>
3) past the bellow code just above the ]]></b:skin>
/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 0px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border-left:5px solid #FF0099;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
4) Save template that's it
customization of blogger design is the most important factor in attracting visitors for your blog.in this Blogger Designing posts i want to go through so of the important elements that will help you in make your blogger blog and posts more attractive.a part of this in this post i'm going to explain you how to create a table in html.befor going to main part you need to know some important tags that we to use in creat a table in html.
<table> -starting tag of a table
<tbody> represents starting of table body
<tr> represents table row
</tr>represents ending tag of a row in a table
<th> represents table header. this must end with </th>
<td> represents table discription this must end with </td>
</tbody></table> ending tags of a table
Now i'm going to show you basic strecture of table and its html code
<table><tbody>
<tr><th> Header1 </th><th>Header 2</th></tr>
<tr><td> Deseription 1</td><td>description2</td></tr>
</tbody></table>
the above code will look like below
| Header1 | Header 2 |
|---|
| Deseription 1 | Description2 |
Now i'm going to explain you how to design your stylishly. for that tags you need to know some tags
1)border tag 2) width tag 3)style tag 4) border radius tag
now i'm going to use these tags
<table border ="3" width="250px" style="background:red;border-radius:2px; color:white;"><tbody>
<tr><th> Header1 </th><th>Header 2</th></tr>
<tr><td> Deseription 1</td><td>description2</td></tr>
</tbody></table>
the above code will look like
| Header1 | Header 2 |
|---|
| Deseription 1 | description2 |
you can change that width, colors, as you like.you can also use custom back grounds like images etc.
Example:
<table border ="3" width="250px" style="background:#F4F3F3 url(http://www.labnol.org/wp/wp-content/themes/baba/F2F1ED.png);border-radius:5px; color:
#F00000
;"><tbody>
<tr><th> Header1 </th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
<tr><td> Deseription 1</td><td>description2</td><td>description2</td><td>description2</td></tr>
</tbody></table>
in this example i'm using image as background this will look like
| Header1 | Header 2 | Header 3 | Header 4 |
|---|
| Deseription 1 | description2 | description2 | description2 |
| Deseription 1 | description2 | description2 | description2 |
| Deseription 1 | description2 | description2 | description2 |
You can also use "border-color: ; " to change border color
reference for colors
"font-family: ;" to change your table font
reference for fonts
"font-weight: ;" to change your font style
how this post will help in your blogger posts designing
