Blogroll with marque effect

in this post, we'll explain a bit about making bloggroll with marque effect, because it may be with many links or banner that is placed in a blog if not summarized it will overcrowd our blog pages, and therefore we inigin explain a bit how to create a blogroll with effects of the marque. for example like my blogroll have the side bar on the right, now this is how to make it:

1. log into you blogspot.  
2. click into the page design elements  
3. then add the gadget and select HTML / Java script  
4. Copy the code below into the HTML / Java script 
5. click SAVE

<MARQUEE Align="center" height="80" direction="left" scrollamount= "3" onmouseover='this.stop()' onmouseout='this.start()' width="95%">

 <a href="http://yusron-news.blogspot.com"> <img src="http://img198.imageshack.us/img198/8765/logonewsv.jpg" /> </ a>
# Link2
# Link3
# Link ...
</ Marquee> 

Description: 

- Code in red is my link Benner.

- Code "left" it shows the direction of movement, you can replace it with down, left, right (if not clear, please ask via comments). - If you replace it with a vertical movement (up or down) then, add the code <br /> at the end of the link or banner that you install. - The number "80" indicates the height of box your blogroll. The more the number the higher the size of the blogroll. 

- Number "3" indicates the speed of the marque, the larger the number, the faster movements.

- In writing " # link1, # Link2, and so on ..." replaced with a banner or link your friend.  

I hope that this bit can help, good luck and thank you.

»»  READMORE...

Continue Reading »

make automatic readmore

good morning friends ...
on this occasion we will provide a blog tricks, namely how to make readmore ... Automatic, may have a lot of tutorials like this, but what if we want to share knowledge about the blog, because it may be still a lot of friends who do not understand about how to make readmore ... automatic.
let's get started.

1. log into your blogspot account.
2. first download the template before you, as a precaution in case something goes wrong.
2. then click on the design.
3. select the "edit HTML".
4. Do not forget to check the "expand widget templates" ..
5. then locate the code </ head>, to facilitate the search, press Ctr+F.
6. then copy the code below and paste the code above the </ head>.

<script type='text/javascript'>
thumbnail_mode var = "float";
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</ script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>

6. then look for the code <data:post.body/>
7. and replace the code with the code below.

<b:if cond='data:blog.pageType == "item"'>
   <data:post.body/>
   <b:else/>
   <div expr:id='"summary" data:post.id'>
   <data:post.body/>
   </ div>
   <script type='text/javascript'>
   createSummaryAndThumb ("summary <data:post.id/>");
   </ script>
   <span style='padding-top:5px;;float:right;text-align:right;'> <a expr:href='data:post.url' rel='bookmark'> <img align = 'right' border = '0 '
   </ b: if>

9. then click save template.

hopefully benefit us this simple post, Good luck.

»»  READMORE...

Continue Reading »

how to create a vertical menu

Vertical menu is suitable when installed in the sidebar because of its vertical lined sevara. Examples such as the picture next to it. How to make:
1. Login to blogger, go to "Layout -> Edit HTML"2. Find the code </ head> and enter the following eighth before the code </ head>
<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>
3. Then find this code ]]></ b: skin> insert the following code before ]]></ b: skin> or before the code </ style>. Place in the line CSS code.

. Glossymenu,. Glossymenu ul li {
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; / * WIDTH OF MAIN MENU ITEMS * /
border: 1px solid black;
}
. Glossymenu li {
position: relative;
}
. Glossymenu li a {
background: white url ('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
. Glossymenu ul li {
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
. Glossymenu li ul li {
float: left;
}
. Glossymenu ul li a {
width: 180px;
}
. Glossymenu li a: visited,. Glossymenu li a: active {
color: white;
}
. Glossymenu li a: hover {
background-image: url ('http://blog.superinhost.com/vertical/blue2.gif');
}

* Html. Glossymenu li {float: left; height: 1%;}* Html. Glossymenu li a {height: 1%;}

To select the color menu, note the red codes (blue1.gif and blue2.gif). Replace the code with the color choices below. For example if you want to choose the color red menu then the code becomes like this:
 
. Glossymenu li a {
background: white url ('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
and

. Glossymenu li a: hover {background-image: url ('http://blog.superinhost.com/vertical/red.gif');


Colors vertical menu:
blue1.gif
blue2.gif

green1.gif
green2.gif

red1.gif
red2.gif

pink1.gif
pink2.gif

black1.gifblack2.gif

4. Then in the save.
5. Then to menu "Page Elements"
6. Select "Add Page Elements -> HTML / JavaScript" then enter the following code into it:
<ul id="verticalmenu" class="glossymenu">
<a href="http://yusron-news.blogspot.com/"> Home </ a> </ li>
<a href="http://yusron-news.blogspot.com/">Health</ a> </ li>
<a href="http://yusron-news.blogspot.com/"> Free Templates </ a> </ li>
<a href="http://getebook.co.cc"> Free Ebook </ a> </ li>
</ Li>
</ Ul>

The color code green is the color blue link and who is the text displayed. If you want to add a menu to stay for longer code like that and so on.
Good luck!!!

 source: http://trik-tips.blogspot.com

»»  READMORE...

Continue Reading »