Archive for the ‘HTML Tips’ Category

Setting Blogger Custom Domain Using Namecheap

As you’re all know, this blog is no longer using Blogspot domain. It’s directly www.frelia.com. Sorry, I don’t mean to be narcist, but that’s my own domain *digampar*. Yesterday, one of my friend who want to make her own domain name asked me how to setup from Blogspot to .com using namecheap. She bought a domain from Namecheap. At first, I don’t know how to answer that question because I use free DNS service as my domain redirection between Namecheap and Blogger.

Some people shared their experience about namecheap and blogger custom domain and on this post I just wanna make it more clear by adding a screenshot of setting steps. So, let me summarize it. First, I assume you already have a namecheap account and bought one domain name for only $9. Login to namecheap and you will be directed to your account.

In your control panel, click “manage domains” on the top menu. Then, click your domain name. Next, choose “All host record” menu.

Then, under “IP Address/URL” section, just enter ‘ghs.google.com‘ (without quote) beside the ‘www’ sign, and your domain name in ‘http://www.yourdomainname.com‘ beside the ‘@’ symbol. Save it.
This is not over yet. Go to your Blogger account. From dashboard, click “setting”, after that click “publishing” –> Custom domain, Go to advanced setting. Fill your domain name correctly. Save and you have done well :)

Please note, in some case, need at least an hour or even a day to make your DNS setting being recognize and active. Me myself need less than a day to make it active. ARe you ready to make your own domain name for your blog? Yeah, having a blog with custom domain name is more reputed.

Incoming search terms for the article:

Put Social Bookmarking Widget On Your Blog

There’s no doubt that social bookmarking is very important for increase traffic and enhance your blog/website status. By submitting our blog to some social bookmarking sites, we can have the chance to promote our article and possibility that more people know about our blog from those social bookmarks. We can also get free backlink from them. In this case, we want people who read our blog always remember with us by provide social bookmarking button. That’s possible if someone who interested with one of your article bookmark us in Technorati (for example). Of course, you need to put a widget that contains of several well-known social bookmarks. You can see the preview below this post.

To put it in your blog, here is the codes. Due to the codes are too long, you can simply download it here. If you want to put it in your blog sidebar, just copy and paste it by make a new gadget (HTML/Javascript) and done by save it. If you want it like mine (below the post), you must first use “Read More” in your blog. This is the steps :

Copy all codes and paste here to make it parsed. Then get all parsed code by copy it.
Open your blog HTML, don’t forget to expand template widget. Then search <p><data:post.body/></p> and paste the parsed codes after it.
Save and done, look how beautiful it is.

That’s all for this time. Just for sharing. Seeya^^
~lalala~

Put "Translator Widget" To Your Blog

Putting “translator widget” is very useful for your blog. This can be used when a visitor for foreign country find your blog and they don’t understand about your language. So, they can use this widget to translate into their own language. This widget is powered by Google and support most of language in the world (except animal language, hehehe), and the translation result are not bad as well. Want to put it into your blog? Follow this :

When you login to your blogger account, go to layout setting. Add a gadget to place HTML code below :

<script
src=”http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js”></script>

And the result will be like this :

Try it by test to your blog into any language. That’s easy, right?

Make "Recent Comments" Widget For Your Blog

To put “recent comments” widget is used for make your visitors know about anyone who has given us a comment in one of our blog post. You can put this widget at your blog main page.

This is the code for it :

<script style=”text/javascript”
src=”http://kendhin.890m.com/comments.js”></script><script
style=”text/javascript”>var a_rc=8;var
m_rc=false;var n_rc=true;var o_rc=40;</script><script src=”http://www.frelia.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments”>
</script>

  • The 8 value is number of comments you want to display, and replace www.frelia.com with your blog.
  • Add a gadget into “edit layout” menu, choose “HTML/Javascript” and paste this code, save and done.

That’s all, and so easy and simple. Good luck to try.

Incoming search terms for the article:

Basic Learn About HTML

A web/blog will not separated with an element called HTML (Hyper Text Mark Up), because the HTML is definetly blog elements. ALthough you can make a post just by clicking and choosing quick-menu, at least you must be understand about HTMl basically. This time, I want you to learn some important codes, tags, and much more. Let’s begin :

HOW TO INSERT IMAGE
Code :
<img src=”http://4.bp.blogspot.com/_2xYMafqDASs/SdO3QjtEBdI/AAAAAAAAANQ/QGVEJk4_hmw/S1600-R/frel.png” border=”0″ height=”17″
width=”90″>

URL with blue lines is your image URL/location.
height=”17″ width=”90″ is height and width of your picture.
The result is :

Haha, too small? You can adjust its size later.

MAKING THE TEXT/IMAGE IN LEFT, CENTER, Or RIGHT
Code :
<center>text</center>

You can replace <center> with <left> or <right>
You can replace text with your own text or image code.

MAKE A NEW LINE
Code :
<br>

Just add this code before the sentences to make it in new lines.

MAKE BOLD, ITALIC, UNDERLINE, OVERLINE
<b></b>
<i></i>
<u></u>
<s></s>

Result :
bold
italic
underline
overline

MAKING TEXT COLOR
<font color=”#FF0000“>
text </font>

<font color=”red“> text </font>

You can replace it with another color.

COLOR CODE

Warna Kode
#000000
#999999
#FFFFFF
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#9900FF
#FF6600

Make a "Moving Text" (Marquee)

making an attractive blog is a desire of the bloggers. All of that for the sake of the precious visitors. One way to make your blog more attractive is your ability to make your text “moving”. This is called Marquee.

Usually we can find any posts with “moving text” at some business site. Thhat’s to make a visitor interested. For example, you can see this text below :

“Welcome to my blog…”

To make that text moving, you can simply insert the text in this code below :

<marquee align=”center” direction=”left”
scrollamount=”3″ width=”60%” height=”100″>

“Welcome to my blog…”

</marquee>

The text with with red color “welcome to my blog” can be replaced with any texts, links, or images. You can make it moving.

Info :

  • Direction “left” : text will moved to left side. You can change to “right” if you want it moved to right side or can be “up” and “down”
  • Scrollamount=”3″ : for set the moving speed. You can change it faster or slower
  • Width : horizontal marquee border
  • Height : vertical marquee border

Done, you can try this in any blog posts. Good luck.