Sep 26, 2008

How to Change Your MyBlogLog Widget Style or Colors

If you check my MyBlogLog widget at the bottom of this page, it already blended with my blog's template and colors. I didn't like how the old widget was displayed on my page so I decided to change it up. I'll show you how I did it.

This is very useful when you want to make it look like it's part of your layout. You also have more control over the colors, the width, the number of rows, the image sizes, and more. (Continue reading to know how to do this.)





If you have this new MyBlogLog widget code:
<script src="http://pub.mybloglog.com/comm3.php?mblID=<yourMyBloglogID>&r=widget&is=small&o=r&ro=5&cs=black&ww=150&wc=single&l=a"></script>

Simply change it to this code so you can have more control over the design: (from SlickAffiliate)
<script type="text/javascript" src="http://pub.mybloglog.com/comm2.php?mblID=<your MyBloglogID>&c_width=140&c_sn_opt=n&c_rows=5&c_img_size=a&c_heading_text=Recent Readers&c_color_heading_bg=000000&c_color_heading=BEBEBE&c_color_link_bg=000000&c_color_link=BEBEBE&c_color_bottom_bg=000000"></script>


Note: Only values in RED should be changed/edited. Continue reading for my guide on what each string or code represents.


You can edit the colors and how it is displayed by changing the following:

mblID - Your MyBlogLog ID usually starts with the year you signed up, followed by the month. For example, 200808#######, followed by some numbers. You can check it from the new widget given to you by MyBlogLog:

"....comm3.php?mblID=&amp..."

c_width - Change the value "140" to your desired widget size to fit on your sidebar or wherever you want to place it.

c_rows - Change the value "5" to the # of rows you want for your widget. Before you go crazy on this value, consider the fact that loading a lot of images will affect how fast your blog or website loads.

c_img_size - Change this to any value from "a" (smallest) to "e". Mine's set to "a".

c_heading_text - If you want to put a title on top of the widget, e.g., "Recent Readers", just type it in after this code. No need to put quotes.

c_color_heading_bg - Set this to your blog's background color. This will only be seen when someone visits your site and they're logged in to
MyBlogLog. Otherwise, they'll see a message "You! Join my Community" with white background.

c_color_heading - I didn't put anything here for my widget. For the sake of this guide, I set this to "Recent Readers". No need to put in quotes, just type your header text.

c_color_link_bg - Background color for the main box with all the icons of your visitors. I suggest you set it to your blog's background color for better blending.

c_color_link - Color of the text or your visitor's name if you decide to show their names.

c_color_bottom_bg - Background color of the bottom row where you see the links "View Reader Community", etc.

Now, if you want to remove the
MyBlogLog links at the bottom of the widget, which I don't recommend, just paste this code after <head> on your HTML code:

table#MBL_COMM td.mbl_fo_hidden { display:none; }


That's it! Leave me a comment so I can check what you did with yours.

1 comment:

  1. MyBlogLog has done a great job of not only building apps but building a community on there and being response to what the community wants. Truly a marriage of users and managers working together.
    Cheers,
    Jessica
    jessica@ forexsoftware-free.info

    ReplyDelete

If you don't have a Google or OpenID account, please use select Name/URL so I know who you are. Thanks for visiting!

Disqus for Just Another Pixel