Once again I am here to talk about my gadget.You can use this gadget not only as news bar but also as blog or site features teller.As I used it as "Blog Features".This is a cool and reliable gadget which make it easier to show important contents of your site to your readers.
So let's get started.
First I shall talk about it's title and it border.Below there is little code.I shall describe only necessary properties which you will set up according to your need.
First of all copy the codes which are under consideration and past it in notepad.Then set up the described properties according to your requirement.This is the easy way to prepare gadget.
--------------------------------------------------------------------------------------------------------------------------------
<table style="width: 100%;height: 40px;" border="3"cellpadding="3" cellspacing="1"><tbody><tr><td class="SnapHeader" style="width: 100%; height: 40px;">Your News Bar Title</td></tr></tbody></table>
=========================================================================
Height and Width First of all setup the height and width of your title's border.You can just change the quantities which have white background color.We can put height and width in percentage.I shall recommend you to keep width 100% in this way it will automatically use available width.However if this value is disturbing your template then off course you have you put require value.And it is the dimension of only title (not of whole gadget).
Border Cellspacing
The value of border decides the obesity of border.Higher value makes border more obsessive.And the cell spacing defines the text area in the border.In the above code value in green is cellspace.
Title of Gadget
The text written in gray background is the title.So change it into your desired title.
Here is the example of this code with width=100%;height=100px and border=15px and cellspacing=10.
My Gadget Title Is Here |
Now come to the second part of our tutorial here is another part of code.
______________________________________________________________________________
<table class="table_style" style="font-weight: normal; font-size: 10pt; width: 100%; font-family: Arial; height: 200; text-align: right;" border="3" cellpadding="0" cellspacing="2"><tbody><trstyle="color: black;"><td style="line-height: 15pt; height: 14px; background-color: gray;"align="center"valign="top"><marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" height="200"><table id="DataList1" style="height: 20px; width: 100%; border-collapse: collapse;" border="0" cellspacing="0"><tbody><tr>
______________________________________________________________________________
The above code defines the properties of News Box (Box containing our news or features etc).
As title box here again we shall have to put the dimension and border properties of News Box.I think you can easily understand from above code that where to put height ,width ,font-size ,border's obesity ,scrolling direction (marquee direction =up or down).However please note that the width of News Box should be equal to the width of title box.The red background colored text are properties of your news cell (small box inside the news box containing your news's text and link).And scroll amount is the speed of scrolling your news.In HTML language every color has a specific code so you can fill colors of your choice.
You can write direct color name instead of it's html code for this propose write color name then put a semicolon (;) after this put a quote symbol (") for example I am to make background color green so I will write background-color: green;" that it.
Below is the example of title bar and news bar (having no cell).
Your News Bar Title |
Now come to third code (last code).Which are information container blocks.
______________________________________________________________________________
<td><table style="border: 1px none rgb(255, 153, 0); width: 100%;" border="0" cellpadding="0" cellspacing="0"><tbody><tr style="height: 40px;"><td style="border: 1px solid rgb(255, 153, 0); width: 99%; background-color: white;" onmouseover="style.backgroundColor='#FFE3CE';" onmouseout="style.backgroundColor='#FFFFFF'"><img src="Put here the link of your icon (direct link)"><a href="Put here the link (URL) of your new" target="_blank" style="font-family: Verdana; color: rgb(0, 0, 0); font-size: 9pt;">
Type your text as news here </a>
</td></tr><tr style="height: 5px;"><td></td></tr></tbody></table></td></tr><tr>
______________________________________________________________________________
This the code for put information and link of your desire.Her a new type color are used as rgb(251, 350, 542).To get such type of color use webmaster's tool.(CLICK HERE TO DOWNLOAD).This program is for thirty days trial.As we need to put many news or pieces on information so copy this code and past below the existing code again and again until you got require number of news blocks.Modify each code (The news and link).As you see that we can upload a small icon in each news block.Put only direct link.To remove icon then remove {"<img src="Put here the link of your icon (direct link)">}.IF YOU DO NOT KNOW THAT WHAT IS DIRECT LINK AND HOW TO GET IT THEN CLICK HERE TO KNOW ABOUT IT.If you don't want to open news links in new tab the just remove the orange colored background text. And at bottom of the your gadget put following code.Don't change it and past it at absolute bottom.
==================================
</tbody></table></marquee>
</td>
</tr>
</tbody></table>
</td>
</td>
</tr>
</tbody></table>
</td>
===================================
Do not type any thing after this if you don't know what may be.Or until you have enough knowledge about HTML.
Tip: To make your gadget standard and faultless make all widths same.
Tip: To make your gadget standard and faultless make all widths same.