How to Create a Site Link

Posted by Wayan Wahyoe on Thursday, June 10, 2010

If you often blogrool or exchange links, you will definitely need a place link. If many of the links of our friends will join Blogger links box lengthwise so that they can meet and destroy the beauty blog blog. Today we will make the link more efficiently to accommodate a link our friend. link box that we will create here there are three kinds, namely :



How to Create Links with Scrool
This model, if there are many links will not create a blog to be crowded, because there will be a roll bar beside that there are limits.

1. Go to the Layout menu (Design)
2. Page Elements (page elements)
3. Then Add A Gadget (add a gadget) and select HTML / JavaScript
4. then copy and paste the HTML code below:
<Div style = "border: 1px solid rgb (153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">
<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> ... and so on
</ Div>


How to make a move link
Models of this marque, the link will move from top to bottom or bottom to top and from left to right can also be vice versa.

1. Go to the Layout menu (Design)
2. Page Elements (page elements)
3. Then Add A Gadget (add a gadget) and select HTML / JavaScript
4. then copy and paste the HTML code below:
<Marquee align = "center" direction = "up" height = "100" scrollamount = "2"
onmouseover = 'this.stop ()' onmouseout = 'this.start ()' width = "95%">

<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> ... and so on

</ Marquee>


How to create and move links with scrool

This is a merger between the link with the link moves scrool

1. Go to the Layout menu (Design)
2. Page Elements (page elements)
3. Then Add A Gadget (add a gadget) and select HTML / JavaScript
4. then copy and paste the HTML code below:
<Div style = "border: 1px solid rgb (153, 153, 153); overflow: auto; width: 200px; height: 200px; text-align: center; ">
<Marquee direction = "up" width = "95%" scrollamount = "2"
onmouseover = "this.stop ()" onmouseout = "this.start ()" height = "200" align = "center">

<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> <br />
<a href="Url Blog"> Title </ a> ... and so on

</ Marquee>
</ Div>


Notes:

width: 200px; is the length of the text area
height: 200px; is the size of the width of text area
Url blog: is Your Link Url.
Title: is your title want
More aboutHow to Create a Site Link

Inserting Animation Tags Cloud

Posted by Wayan Wahyoe on Wednesday, June 9, 2010


Today we will create a tag cloud like that of wordpress. tags if the blogger is usually called a label. we may feel bored with the look of bloggers who label mediocre and not menarik.Tags cloud is actually made in word press, but now it can be used in blogger. Tags cloud animation will create labels or tags become more interesting.

Let us go straight to how to create tags cloud :

1. Login to Blogger > click Layout > Click Edit HTML.

2. Click on Download Full Template. backup template to be safe.

3. Find similar code with the code below :
<b:section class='sidebar' id='sidebar' preferred='yes'>

4. Copy and paste the code below the code earlier:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

5. Click save template.

6. Look at your blog

Note :


width = "250" you can change the width to 200px or according to your liking
height = "200" you can change height to 200px or according to your liking
&lt;param name="bgcolor" value="#ffffff" /&gt; is the background color.
&lt;param name="flashvars" value="tcolor=0x000000&amp; is the color of paper.

You can change color to "#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8000FF", "#FF0080"
More aboutInserting Animation Tags Cloud

How to Install Wibiya Toolbar in Blog

Posted by Wayan Wahyoe on Tuesday, June 8, 2010

Wibiya is one website that provides a free toolbar for your blog, toolbar from wibiya is very sophisticated. Features of this toolbar wibiya including: direct search, who's online, live video, translate, timeline, Facebook Various widgets, twitter, youtube, Live chat and sharing your photos. This toolbar is not sophisticated ? laughter

below is how to make it:



Open wibiya.com website and click the "Get It Now"

On Form "Create An Account" form content in accordance with your data and then strangled tomblol "Next".

Then choose the theme of your toolbar in the "Select A Theme" then click "Next" button.

In the "Application Settings" configuration your accounts into the toolbar, it Seletlah click the "Next".

In the "Add it" or final installation click on the logo "Blogger" or install it on blogger.

Make sure you are a blogger Log in to install this widget, after you click on the logo blogger on the final stage, you are directly aimed at the "Import page elements" bloggers.

.

Select a blog that you want to install the toolbar, then click the "Add Widgets" then the toolbar will be installed automatically and float at the bottom of your blog.

More aboutHow to Install Wibiya Toolbar in Blog

Adding Icon to Link List / Label

Posted by Wayan Wahyoe on Monday, June 7, 2010

Now we will try to add a label and a link icon on the sidebar. The meaning of icons link list is a small icon beside the usual list of links that we place on our blog's sidebar. This icon can be different. First of all you should have saved the icon on your image hosting. For example in tiniypic.com, photobucket.com or another image hosting places. For example a green arrow icon to the storage address like this:

http://i35.tinypic.com/2n03mgz.jpg

Later you can replace with your own icon.

1. login to blogger with your id. Find the following code:
. Sidebar li (
border-bottom: 1px dotted # cccccc;
margin: 0;
padding: 0 0 .25 em 17px;
line-height: 1.2em;
)

2. There may be differences in the template, the focus just code. Sidebar li (which is a code on a list of links in the sidebar or search for code that is almost similar. Then add the address of your icon on the bottom. For example:
. Sidebar li (
background: url ("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .20 em;
border-bottom: 1px dotted # cccccc;
margin: 0;
padding: 0 0 .25 em 17px;
line-height: 1.2em;
)

3. Then click the Save Template button and see the results. If no problems, the result will be like the image below:

4. In the left list of links and labels will have a small arrow icon.

Good luck .... Glad
More aboutAdding Icon to Link List / Label

How to Create Search Engine Logo

Posted by Wayan Wahyoe on Sunday, June 6, 2010

If you want to make a logo of a website, like google or you want to create a logo as well as pictures without opening an application from photoshop.

We can create google logo with a very easy and fast, my friend can visit the following websites:

http://funnylogo.info/create.asp Then enter the name of the search engines that we will create, select the design of its logo, then click Create My Search Engine.

logo search engines you've finished.
friends can save the url address, then use url forwarding to shorten the URL address and the last show off to friends that we have successfully created their own search engine.
More aboutHow to Create Search Engine Logo

How to Create a Text Area

Posted by Wayan Wahyoe on Saturday, June 5, 2010

Text area is a place for us to write the text. Text areas can be used to place banner code that is ready to be copied by the visitor, or admin messages to visitors. Text areas can be used also as a place to post your HTML code, but a lot of shortcomings and less efficient. how to post the HTML code, please read here. If you do not know what a text area, this is a sample text area with html code :

Normal Text Area


copy the html code above into your blog




copy the html code above into your blog


Note :
center : you can change into "left", "right"
WIDTH : you can change to 200px or according to your liking
Height : you can change to 200px or according to your liking

If you want automatic highlight, please copy the code below .
<form name="textarea"><textarea name="txt" rows="2" cols="20" onclick="this.form.txt.select()" readonly="readonly" style="width: 430px; height: 100px; border-color: gray; color: blue; background-color: white; font-weight: bold;">
Your Text
</textarea></form>

More aboutHow to Create a Text Area

Create Google Search Widget on the Blog ( version 2 )

Posted by Wayan Wahyoe on Friday, June 4, 2010

previously, I already identifies the blog search engines here

how to install a second version of google search widget on this blog. For those of you who also want to google search widget, please read this article till the end. Example google search like this:



To install this google search widget, the same way as pairs of yahoo search widget. You must login in blogger, then go to the page layout and add a page element and select the html/javascript. Next, please copy and paste the code below and replace the red text in accordance with the description of your blog:

<form action="http://www.google.com/search" method="get">

<input onfocus="this.style.background='#fff';" maxlength="255" value=""
type="text"onblur="if(this.value=='')this.style.background='#fff
url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)
3px center no-repeat'" style="height:18px;border: solid 1px black; background:#fff
url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)
3px center no-repeat; position:relative;" size="25" name="q"/>

<input id="btn_undefined" style="position:absolute;padding-left:5px;"
value="Search" src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png"
type="image"/><br/>

<div style="margin-top:5px;">

<li style="display:inline;padding-right:10px;margin-top:5px;">
<input checked="checked" value="" name="sitesearch" type="checkbox"/> Web</li>

<li style="display:inline;padding-right:10px;margin-top:5px;">
<input checked="checked" value="http://yourblog.blogspot.com" name="sitesearch"
type="checkbox"/> Your Blog</li>
</div>
</form>


after copy and paste,
replace http://yourblog.blogspot.com with your url address.
replace Your Blog with the name you want.
More aboutCreate Google Search Widget on the Blog ( version 2 )