Home | Who is Reza Faizal?

Showing posts with label Blogger Tips. Show all posts
Showing posts with label Blogger Tips. Show all posts

Social Moths



I came across the
Social Moths blogspot site few days back. I think it's a brilliant idea.

So what's the site all about?

Basically you can see the latest updates from some of the most popular bruneian blogs. Right now I notice that not all blogs is listed/registered with Social Moths. Not sure how many blogs he/she have registered.

I like the idea so much that I've created a similar page where I can checkout who's been updating their blog from my "babes" and "dudes" links. I've put it under "updates" at one of the tab button on top of my blog header picture. Isn't that cool?

You just need to sign up with Feevy. Very simple to put it in your own site.

Ok.... back to do some more work!!!

Web icon

Notice anything new in my site? Look at the address bar and you see I put in a small photo of myself (). It's a website logo or web icon and I'm going to share how I did it.

First, you have to create the logo or icon for your site. The size is 16 x 16 pixels and should be save as a windows icon file (.ico). I use Adobe Photoshop with a plugin I got here.

Next, if you using your own web server then you can just upload the icon file to your server. As for me, I try uploading the picture to my picasa web but it wasn't possible. Luckily I can put my file at bruneiforever.com server thanks to Bruneian.

All you need to do now is to edit your html code. Here the code for mine.

<LINK HREF="http://bruneiforever.com/forum/reza/rezafaizalicon.ico" REL="SHORTCUT ICON" >

Insert the code in between <HEAD> and </HEAD> tags. I put mine right after the <HEAD> tag.

So try it out. Any problem converting your image to ".ico" or need storage to put your ".ico" file in Bruneian server just let me know or email me.

This is for my personal bookmark. However, you all can use the tips below.

"
As you can see on the sidebar of this blog, I'm able to list down the most recent Posts and Comments along with it's relevant details. The great thing about this is, there's no script to install or javascript involved. It can be easily done just by using Blogger widget feature.
  1. First before you start, you'll need to find out your Blogger's Posts feed and Comments feed.
    http://*.blogspot.com/feeds/posts/default
    http://*.blogspot.com/feeds/comments/default
    where * represents your blog.
  2. Next, log in to your blogger account.
  3. On the dashboard under your blog title, click "Layout"
  4. Once your blog layout appears, click "Add a page element" on your sidebar.
  5. Choose "Feed" and add to blog.
  6. Insert your Posts or Comments feed into "Feed URL".
  7. Customise your settings:
    e.g. Title: Recent Posts/Comments
"
I got this tips from here.

I’ve added this “page element” 3 days back. I’ve seen “recent comments” section at Bruneian and AnakBrunei blog but not quite sure whether it is useful.

Bruneian told me it's good to put it in. So I decided to give it a try. This few days I realize the power of these “recent comments” sections. It really help me see quickly whether someone have post a comment on my new and old posts, allowing me to reply back to the comments quickly.

Here are the steps you can follow.

Step 1. Login to blogger and click "Template".
Step 2. Click "Page Elements" tab and click on "Add a Page Element"
Step 3. Choose "HTML/Javascripts"
Step 4. Type in the title e.g “Recent comments”, type in the code below to the content section then save.Step 5. Click “Template” and click “Edit HTML”.
Step 6. In the HTML code, search for "/head". Then use the code below after it. See example below :
Step 7. Click “SAVE TEMPLATE”.

That is it, refresh your blog and you will see the “Recent comments” section in your side bar. Re-position it wherever you like.

Btw… “var numcomments = 10” mean display 10 most recent comments, you can change it to display how many you like. “var numchars =70” mean display the first 70 characters of the comments. You can also change this figure.

Thanks Bruneian for the tip!

I've been trying to figure out a simple way to put a graphic/image file for my blog header. I was having breakfast with AnakBrunei and Bruneian this morning and I got this tips from AnakBrunei on how to do it.


Step 1. Login to blogger and click "Template".
Step 2. Click "Page Elements" tab.
Step 3. Click "Edit" on your "(Header)" element.
Step 4. Type in your "Blog Title" and in the "Blog Description" form type in the image source for you graphic/image file. For eg :
/*
<img src="http://lh3.google.com/image/rezafaizal/RaBX_IR2DSI/AAAAAAAAAAg/
4QRBVPnWZtc/whattodo.jpg"
>
*/
  1. For my blog I've decided to save the file using Picasa Web Album. It took me less than a minute to register and sign-up. Uploading picture/graphic/image file is very easy. From there I find out the image source of the file I like to use for my blog header.
  2. Make sure the pictures you want to upload is of the same width as the Header width. You got to look at the html code at "Template" -> "Edit HTML" and find "#header {" section.
Step 5. Now you need to do some adjustment. Also at the html code find "#header .description {" and make sure the values for "margin", "padding" and "line-height" set to "0". See below :

#header .description {
display: block;
margin: 0 0;
padding: 0 0 0;
line-height: 0;
font-size: 50%;
}

Step 6. Final touch-up. To hide the "Blog Title", just go to "Fonts and Title" and choose the color which match your "Page Background Color". You might need to change your "Page Header Background Color" to the same color.

Thank you AnakBrunei

Cbox tagboard

Cbox tagboard for website or blog let your visitors leave messages or chat with each other.

Instead of following the steps given in cbox site (for blogger.com). Here's a better way of doing it.

Step 1. Login to blogger and click on "layout"
Step 2. Click on "Template"
Step 3. Click on "Add a Page Element"
Step 4. Choose " HTML/JavaScript". Type in the title and paste the html code from cbox in the content box. Then save the changes.

This steps gives you the flexibility to move the cbox element anyway in the template.

Thanks Bruneian for the tips.