Add Yahoo! Messenger to Blog

Do you know what is Yahoo! messenger? I sure you is surely knew it. Yahoo! messenger is one of yahoo.com service very popular in the world. Then what his relation with blog? some blogger wish to be in his blog attached yahoo ! messenger icon , hence if him online in yahoo! messenger can in knowing by his blog visitor and also can easy to in contacting for chatting. If you ask to me, can yahoo! messenger icon add at blog? the answer is can, and not only that, we can choose icon what is will add. The choice is differentiated in 10 choice, you remain to choose style ID which which is compatible according to your :

This is the style ID of yahoo! messenger icon :

YM icon
Allright, to placed the yahoo! messenger icon just place this code at your sidebar :

<a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>
For example. If your yahoo ID is xxxxx@yahoo.com, your ID is xxxxx, So the code for yahoo! messenger icon with choice Style ID 9 is as follows :
<a href="ymsgr:addfriend?balakasadut24"><img src="http://opi.yahoo.com/online?u=balakasadut24&m=g&t=9" border="0"></a> Now, how to place the code to your blog. Follow the teps :
  1. Login to blogger with your ID.
  2. After entering the dasboard page , click Layout.
  3. Click at Page Element tab.
  4. Click at Add a Page element.
  5. After emerging pop up window , click add to blog button for the things HTML/JavaScript.
  6. Copy and paste the code below into available column :
  7. Change YOURID with your yahoo ID and StyleID with number of your choice.
  8. Click   save changes   
  9. Finish. Please see the result.

Recent Posts and Recent Comments at Sidebar

Many from bloggers wish insatlling the widget of Recent post and Recent post at sidebar, and for this matter is several blogger creating recent post and recent comment widget by JavaScript, However i think that is not good for your blog SEO (Search Engine Optimization). Besides not good to SEO, installation JavaScript risk to slow down your blog loading, so that matter it's can make your visitor don't feel balmy.
To install recent post and recent comments, be in fact you can use your blog feed address. this is the address of Recent Post :


http://YourBlogName.blogspot.com/feeds/posts/default

And this is the address of Recent Comments :

http://YourBlogName.blogspot.com/feeds/comments/default
YourBlogName must be alter with your blog name. For example :

this is my Recent Post address :

http://totorial-tips-trik-blog.blogspot.com/feeds/posts/default

And this is my Recent Comments address :

http://totorial-tips-trik-blog.blogspot.com/feeds/comments/default


Still compused to install this feed address to your blog. Please follow the steps :

  1. Login to blogger with your ID
  2. After entering the dashboard page , click Layout
  3. Click at Page Element tab. See the picture below :
  4. page element
  5. Click at Add a Page element.
  6. After emerging pop up window , click add to blog button for the things Feed. See the picture following :
  7. feed element
  8. After that, Insert your feed URL (URL feed post for Recent posts or URL feed comment for recent comments). Example :
  9. feed url
  10. Click Continue button.
  11. Then alter the title with Recent Post for recent post widget or Recent Comments for recent comments widget. Example :
  12. feed url
  13. Click SAVE CHANGES button.
  14. Move that element where you want, and then click SAVE button.
  15. Finish. Please see the result.

Now you have had Recent Posts or Recent Comments widget at your sidebar with good SEO for your blog.

Make a News Paper Style Drop Caps

Do you have read a magazine or newspaper? the answer is surely have. In this opportunity I will study concerning how do to make an alphabet which in printing bigger in comparing with other ordinary alphabet such as in writing in a newspaper or magazine. For example :
Many the way to back up the data in Widgets / page element, but I'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code.


To make the article like that is easy very, you are only adding a few CSS codes when you post an article. However you post an article, you must choose edit html tab tab, don't at compose tab tab. This is the codes :

<span style="float:left;color: #000;background:#fff;line-height:80px; padding-:1px 5px 0 0; font-family:times; font-size:100px;">First alphabet</span>
Example. however you must remember when you add this code you must at Edit HTml tab :

<span style="float:left;color: #000;background:#fff;line-height:80px; padding-top:1px; padding-right:5px; font-family:times; font-size:100px;">M</span>any the way to back up the data in Widgets / page element, but I'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code. This is the result : Many the way to back up the data in Widgets / page element, but i'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code.
To be you more understanding, I will elaborate concerning above codes : color: #000 : this is the code for alphabet color, #000 is code for black color, you can alter this code with your color. background:#fff : this is the code for background color of first alphabet (firt alphabet). #fff is code for white color, you can alter this code with you want color. padding:1px 5px 0 0 : this the code dor padd, 1px--> padding for top, 5px psdding for right, 0 --> padding for bottom, 0 --> padding for left. You can alter the value of padding with other value. font-family:times : this code is for style of font, you can alter the font with font what you want, example verdana, georgia and etc. Font-size:100px : this code is for size of font, you can alter the size of font.
This is several example :

<span style="float:left;color: #0C3259;background:#BCBBBB;line-height:80px; padding:1px 5px 0 0; font-family:times; margin: 0px 5px 5px 0px; font-size:100px;">First alphabet</span>
The result : M any the way to back up the data in Widgets / page element, but I'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code.



<span style="float:left;color: #0C3259;background:#77FD8D;line-height:80px; padding:0 5px 0 5px; border: 2px solid #606160; border-right: 2px solid #606160; border-bottom: 2px solid #606160; font-family:georgia; margin: 0px 5px 5px 0px; font-size:100px;">First alphabet</span>
The result : M any the way to back up the data in Widgets / page element, but i'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code.



<span style="float:left;color: #04440E;background:#E0F5FD;line-height:80px; padding:0 13px 0 10px; border: 2px solid #057B19; border-right: 2px solid #057B19; border-bottom: 2px solid #606160; border-top: 1px solid #057B19; border-left: 1px solid #057B19; font-family:arial; font-style: italic; margin: 0px 5px 5px 0px; font-size:100px;">First alphabet</span>
The result : M any the way to back up the data in Widgets / page element, but i'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code. And please create any style with your.
Except the above step, you can create a News Paper Style Drop Caps with other way. this is more then easy. this is the steps: Step #1 :

  1. Login to blogger with your ID
  2. After entering the dashboard page , click Layout.
  3. Then click edit HTML tab.
  4. Click the Download full template link. Save your template:
  5. Go to your template code
  6. Copy and paste the following code above of ]]></b:skin>
  7. Click Save Template button
  8. Step #1 is finish.
Step #2 :
  1. Click Setting tab.
  2. Click formatting tab.
  3. Go to lower side. you will find a blank text are beside Post Template. Fill that blank text area with this code :
  4. <span class="magazine"> </span>
  5. Click Save settings button.
  6. finish
How to post your article?

When you post your article, choose tab. and you will see the code below :
<span class="magazine"> </span>
Place the first alphabet between <span class="magazine"> and </span>

Example :
<span class="magazine">M</span>any the way to back up the data in Widgets / page element, but I'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code. 
 
Publish your article and finish. Please see the result. I think this is enough, see you at my next tips 

Add Google Talk to Blog


google talk
I'm sure you are surely knew what is the Google Talk, with Google talk you can send instant messages, make voice calls, leave voice mail messages, transfer files and etc, however of course must with other Google user. Do you know, now you can add Google talk to your blog? not yet known its way? please follow the steps following :



  1. Login to blogger with your ID.
  2. After entering the dashboard page , click Layout. Please saw the picture :
  3. layout
  4. Click at Page Element tab. See the picture below :
  5. page element
  6. Click at Add a Page element.
  7. After emerging pop up window , Click add to blog button for the things HTML/JavaScript. See the picture following :
  8. javascript
  9. Copy and paste the code below into available column :
  10. Click   save changes   
  11. Finish. Please see the result.

How To Make a drop down Menu

Do you ever seen the menu such as below? please click at the menu to see the effect of this menu :
The name of this menu is drop down menu.
To make the dropdown menu, you only make the code be like this :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Your text title here! </option>

<option value=" your address link here "> the text here will be display </option> </select></form>

For example, the code such as the following :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option>- Blog Tutorial - </option>
<!-- change the links with your own -->
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">Blog setting</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-backup-template.html">Backup template</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/12/how-to-backup-your-widgets_19.html">backup widget</option>

</select></form>

This is the result :
You can make the drop down menu more than one, just make the code more than one, so very simple.
Now, how to add this code to your blog. This is the step :
  1. Login to blogger with your ID
  2. After entering the dasboard page , click Layout. Please saw the picture :
  3. layout
  4. Click at Page Elements tab. See the picture below :
  5. page element
  6. Click at Add a Gadget.
  7. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :
  8. javascript
  9. Copy and paste the code below into available column :
  10. Click   save changes   
  11. Finish. Please see the result.

OK brother, now you have a drop down menu at your blog. Or maybe you still confused with the step above? don't worry i have an easy way to do it, just click the button below, log in to your blog and the widget will add to your blog automatically:
Add a dropdown in the sidebar of your blog.

Have a nice day My friends. See you at my next post