If you prefer the old version of the Recent Readers widget and you are not happy with the default customization options offered by MyBlogLog, you can take it further and style your widget as you please. Unfortunately no matter what colors you choose if someone that isn’t logged in his MyBlogLog account views your page that person will see the text “You! Join Our Community” on a white background and if your widget is not positioned in an area that has a white background
it looks very nasty. On top of that you may want to customise your text link decoration, size of the images, borders, etc.

Instead of overwriting the declarations in the js generated by MyBlogLog i advise you to strip the code by deleting the variables related to colors:

  • c_color_bottom_bg
  • c_color_link
  • c_color_link_bg
  • c_color_heading
  • c_color_heading_bg

I’m not going to explain which variable does what because that’s irrelevant and anyway we will remove them from the js. It’s not a secret that you can do very little customization with them. Below you can see the original code and the stripped one:

1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;c_color_heading_bg=000000&amp;c_color_heading=FFFFFF&amp;c_color_link_bg=FFFFFF&amp;c_color_link=FFFFFF&amp;c_color_bottom_bg=000000" type="text/javascript"></script>
1

<script src="http://pub.mybloglog.com/comm2.php?mblID=HereGoesYourID&amp;c_width=270&amp;c_sn_opt=n&amp;c_rows=10&amp;c_img_size=h&amp;c_heading_text=&amp;" type="text/javascript"></script>

You can see that my c_heading_text variable is empty as i don’t have a header text for my widget. Now here comes the actual customization process. I tried to make it as simple to understand as i possibly could and made a few comments on the code so that you can figure out which class is for what. There are a few declarations that i left out because they don’t really help much as their properties are inherited from the really important declarations that are listed below. The following code must be added in your style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

/* start images related  */
body table#MBL_COMM img
{
border:1px solid black;
float:left;
height:24px;
padding:0px;
position:relative;
width:24px;
z-index:999;
}
body table#MBL_COMM td.mbl_join_img
{
background-color:black;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop images related  */
 
/* start of "You!" link */
body table#MBL_COMM td.mbl_join 
{
background-color:BLACK;
border-bottom:0pt none;
color:white;
cursor:pointer;
font-size:11px;
margin:0pt;
padding:2px;
text-align:left;
}
/* stop of "You!" link */
 
/* start the whole widget */
body table#MBL_COMM
{
background-color:black;
border:1px solid black;
font-family:Verdana,Arial,Sans-Serif;
font-style:normal;
font-weight:normal;
line-height:12px;
width:270px;
}
/* stop the whole widget */
 
/* start of the tds wrapping the images */
body table#MBL_COMM td.mbl_img
{
background-color:black;
border-top:0pt none;
cursor:pointer;
margin:0pt;
padding:2px;
width:26px;
}
/* stop of the tds wrapping the images */
 
/* start of the three trs wrapping the bottom links */
body table#MBL_COMM td.mbl_fo_hidden 
{
background-color: black;
color:white;
cursor:pointer;
font-size:10px;
padding:2px;
text-align:center;
}
/* stop of the three table rows wrapping the three bottom links */
 
/* start of "Join My Community" link */
 body table#MBL_COMM td.mbl_join a
{
	color: white;
}
body table#MBL_COMM td.mbl_join a:hover
{
	color:#6C6C6C;
}
/* end of "Join My Community" link */ 
 
/* start of "Join This Commnunity" link */
body table#MBL_COMM td.mbl_fo_hidden a
  {
   color:white;
	}
body table#MBL_COMM td.mbl_fo_hidden a:hover
 {
	color:#6C6C6C;
}
/* end of "Join This Commnunity" link */
 
/* start of "View Reader Commnunity" and "Provided by MyBlogLog" links*/
body table#MBL_COMM td.mbl_fo_hidden a:visited
{
	color: white;
}
body table#MBL_COMM td.mbl_fo_hidden a:visited:hover
{
	color: #6C6C6C;
}
/* end of "View Reader Commnunity" and "Provided by MyBlogLog" links*/

That all. Refresh the page and voila ! You can see the outcome in my footer. Of course i used colors to best fit my blog design but feel free to play with the code until you get what you want.


Have you enjoyed reading this article ? Subscribe to my feed.

Stumble It! • Digg This! • Save to del.icio.us • Add to Mixx! • Sphinn It! • Email this