Zenplate

Minh Thu Blog ( Best template ever )

2009-10-09T19:47:00.002+07:00

This is the newest blogger template that was created by me-Zen.Just come and give your idea about this blog.Hope you enjoy!

www.thuzen.blogspot.com

Pull-up Menu plus Multiple subs

2009-08-15T07:51:00.006+07:00

Hello there, it is very long time for new tip right?Please accept my apology by this menu called Pull-up Menu.Besides, this menu also has multiple subs.Great?Why is it called Pull-up menu ?With the common menus,most templates use drop down menus, it means they will drop from top to down.So of course, pull-up means it will operate by the opposite way.This is the CSS menu, one other kind of menu that I wanna introduce you and provide you,trust me you cannot see these kinds of menu much on the other webs/blogs.Let's make it!

View live demo

Download

1.Add this code before the ]]></b:skin> tag, then read the instruction under the code to complete this step :

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.stunicholls.com.
Follow the instruction to make this menu on Zenplate.blogspot.com
=================================================================== */

.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}
/* top margin for this demo only */
#nav {padding:0; margin:200px 0 0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:verdana, arial, sans-serif;}
#nav li.top {display:block; float:left; padding-top:5px;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ddd; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top; line-height:29px;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top; line-height:29px;}

#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top; line-height:29px;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top; line-height:29px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200; background:#fff;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul
{left:0; bottom:40px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; height:auto; z-index:300;}
* html #nav li:hover ul {width:0;}
#nav li:hover ul li
{display:block; position:relative; float:left; font-weight:normal; background:#fff; clear:left;}
#nav li:hover ul li a
{display:block; font-size:11px; height:20px; line-height:20px; padding:0 5px; color:#000; text-decoration:none;}
#nav li ul li a.fly
{color:#4f8383; font-weight:bold;}
#nav li:hover ul li:hover
{background:#fff;}
#nav li:hover ul li a:hover {text-decoration:underline;}
#nav li:hover ul li a.fly:hover
{background:#4f8383; color:#fff; text-decoration:none;}
#nav li:hover ul li:hover.fly {background:#4f8383;}

#nav li:hover ul li:hover.fly > a.fly {background:#4f8383; color:#fff; text-decoration:none;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:-5px; margin-left:100%; bottom:-4px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; z-index:500; height:auto;}

Note: The red code,you will get them-the images in the file you need to download above.Host them and paste instead of the red code.

2.Now at this step, you have 2 choices to add this code : create a HTML/JavaScript and paste or paste directly in your source template in case you know exactly where it is:

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a id="products" href="#" class="top_link"><span class="down">Products</span></a>
<ul class="sub">
 <li class="fly"><a href="#" class="fly">Cameras</a>
   <ul>
    <li><a href="#">Nikon</a></li>
    <li><a href="#">Minolta</a></li>
    <li><a href="#">Pentax</a></li>
   </ul>
 </li>
 <li class="fly"><a href="#" class="fly">Lenses</a>
   <ul>
    <li><a href="#">Wide Angle</a></li>
    <li><a href="#">Standard</a></li>
    <li><a href="#">Telephoto</a></li>
    <li class="fly"><a href="#nogo11" class="fly">Zoom</a>
     <ul>
   <li><a href="#">35mm to 125mm</a></li>
   <li><a href="#">50mm to 250mm</a></li>
   <li><a href="#">125mm to 500mm</a></li>
     </ul>
    </li>
  <li><a href="#">Mirror</a></li>
  <li class="fly"><a href="#" class="fly">Non standard</a>
     <ul>
   <li><a href="#">Bayonet mount</a></li>
   <li><a href="#">Screw mount</a></li>
     </ul>
    </li>
   </ul>
 </li>
 <li><a href="#">Flash Guns</a></li>
 <li><a href="#">Tripods & Monopods</a></li>
 <li><a href="#">Filters</a></li>
</ul>
</li>
<li class="top"><a id="services" href="#" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
 <li><a href="#">Printing</a></li>
 <li><a href="#">Photo Framing</a></li>
 <li><a href="#">Retouching & Renovation</a></li>
 <li><a href="#">Archiving</a></li>
</ul>
</li>
<li class="top"><a id="contacts" href="#" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
 <li><a href="#">Support</a></li>
 <li class="fly"><a href="#" class="fly">Sales</a>
  <ul>
  <li><a href="#">USA</a></li>
  <li><a href="#">Canadian</a></li>
   <li><a href="#">South American</a></li>
   <li class="fly"><a href="#" class="fly">European</a>
    <ul>
 <li class="fly"><a href="#" class="fly">British</a>
      <ul>
         <li><a href="#">London</a></li>
   <li><a href="#">Liverpool</a></li>

   <li><a href="#">Glasgow</a></li>
   <li class="fly"><a href="#" class="fly">Bristol</a>
    <ul>
   <li><a href="#">Redland</a></li>
   <li><a href="#">Hanham</a></li>
  <li><a href="#">Eastville</a></li>
        </ul>
       </li>
   <li><a href="#">Cardiff</a></li>
   <li><a href="#">Belfast</a></li>
      </ul>
     </li>
  <li><a href="#">French</a></li>
  <li><a href="#">German</a></li>
  <li><a href="#">Spanish</a></li>
    </ul>
   </li>
   <li><a href="#">Australian</a></li>
   <li><a href="#">Asian</a></li>
  </ul>
 </li>
 <li><a href="#">Buying</a></li>
 <li><a href="#">Photographers</a></li>
 <li><a href="#">Stockist</a></li>
 <li><a href="#">General</a></li>
</ul>
</li>
<li class="top"><a id="shop" href="#" class="top_link"><span class="down">Zenplate</span></a>
<ul class="sub">
 <li><a href="http://zenplate.blogspot.com">Zenplate Home</a></li>
 <li><a href="http://zenplate.blogspot.com/2008/10/contact-me.html">Contact</a></li>
 <li><a href="http://zenplate.blogspot.com">Need help</a></li>
                    <li><a href="http://www.zenplate.blogspot.com/search/label/css%20menu">Other Menus</a></li>
</ul>
</li>
<li class="top"><a id="privacy" href="http://zenplate.blogspot.com" class="top_link"><span>Privacy Policy</span></a></li>
</ul>

Done, change them by your own,if you do like this menu, please leave me a comment below and don't forget to subscribe me,send this post to your friends.Thank you!

Photographic Film

2009-08-15T07:11:00.005+07:00

View live demo

Get full code

Paper Craft

2009-08-15T07:05:00.004+07:00

View live demo

Get full code

Nature Gift

2009-08-06T07:04:00.004+07:00

View live demo

Get full code

Spring Flowers

2009-07-31T07:13:00.006+07:00

View live demo

Get full code

Protonema

2009-07-29T06:45:00.003+07:00

View live demo

Get full code

Girly Magz

2009-07-29T06:39:00.004+07:00

View live demo

Get full code

Community

2009-07-29T06:34:00.003+07:00

View live demo

Get full code

Funky Chicks

2009-07-27T07:53:00.004+07:00

View live demo

Get full code

Premium Blogger Dashboard

2009-07-27T07:48:00.004+07:00

View live demo

Get full code

Reckoning

2009-07-27T07:43:00.004+07:00

View live demo

Get full code

Stylish Dropline Menu

2009-07-23T19:25:00.007+07:00

Good day my friends! I am very eager now so these tips tell me that they want to be published and love to be placed on your blog now.Of course I cannot resist.

Introduce to you, this is the newest kind of menu, old but not really old , this is not seen regularly on any blog and website, called Dropline Menu.Yeah my menu albums are still so much in my personal data, but anyway you will see them all! Certainly you have seen this menu, but not much guides can offer you the tip about making this type of menu.It is very comfortable and nice if you are so boring about the "old man" drop down menus.Ok I bla bla bla too much, take a look at the demo and lets do it!

View live demo

Download

1.This is so old step for you , add this code before the
]]></b:skin> tag:

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.stunicholls.com.
Follow the instruction to make this menu on Zenplate.blogspot.com
=================================================================== */

#nav {
height:36px; position:relative; font-family:arial, verdana, sans-serif; font-size:11px;z-index:500;
}
#nav .select {
margin:0; padding:0; list-style:none; white-space:nowrap;
}
#nav li {
float:left; background:url(blank_over_p.gif);
}
#nav .select a {
display:block; height:36px; float:left; background: url(blank_p.gif); padding:0 0 0 15px; text-decoration:none; line-height:25px; white-space:nowrap; color:#ddd;
}
#nav .select a b {
display:block; padding:0 30px 10px 15px; background:url(blank_p.gif) right top;
}
#nav .select li:hover a {
background: url(blank_over_p.gif); padding:0 0 0 15px; line-height:27px; cursor:pointer; color:#fff;
}
#nav .select li:hover a b {
display:block; padding:0 30px 9px 15px; background:url(blank_over_p.gif) right top; cursor:pointer;
}
#nav .sub {
display:none; margin:0; padding:0 0 0 60px;list-style:none;
}
#nav .sub li {background:transparent;}
#nav .select li:hover .sub {
height:18px; display:block; position:absolute; float:left; width:750px; top:28px; left:0; text-align:center;
}
#nav .select li:hover .sub li a {
display:block;height:18px; line-height:16px; float:left; background:transparent url(transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;
}
#nav .select li:hover .sub li a:hover {
color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px;
}

At this step, just notice the red code, you can get the icons in the file you have to download.Upload them and paste the links there.

2.Add this script before the </head> tag:
<script src="stuHover.js" type="text/javascript"></script>

Notice the blue code, there is one js file,you need to download and upload it to your favorite host, get the direct link and paste there.Done!

3.This is the last step and from this step you can option by your own labels,create a HTML/Javscript and paste this code, or you can put right in your source template if you know which place to place:

<div id='nav'>
<ul class='select'><li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>Joseph Turner</b></a>
<ul class='sub'>
<li><a href='#'>Fishermen at Sea</a></li>
<li><a href='#'>The Shipwreck</a></li>
<li><a href='#'>The Vale of Ashburnham</a></li>

<li><a href='#'>Crossing the Brook</a></li>
</ul>
</li>
<li><a href='#'><b>John Constable</b></a>
<ul class='sub'>
<li><a href='#'>The Hay Wain</a></li>
<li><a href='#'>Brighton Beach</a></li>
<li><a href='#'>Malvern Hall</a></li>

<li><a href='#'>Salisbury Cathedral</a></li>
<li><a href='#'>Weymouth Bay</a></li>
</ul>
</li>
<li><a href='#'><b>Henri Matisse</b></a>
<ul class='sub'>
<li><a href='#'>The Girl with Green Eyes</a></li>
<li><a href='#'>The Dream</a></li>

<li><a href='#'>Woman in Blue</a></li>
<li><a href='#'>The Yellow Dress</a></li>
<li><a href='#'>The Piano Lesson</a></li>
</ul>
</li>
<li><a href='#'><b>Zenplate</b></a>
<ul class='sub'>
<li><a href='http://zenplate.blogspot.com/2008/12/about-me.html'>About Zenplate</a></li>

<li><a href='http://zenplate.blogspot.com/2008/10/contact-me.html'>Need for help</a></li>
<li><a href='http://www.zenplate.blogspot.com/search/label/Jquery%20menu'>Jquery Menus</a></li>
<li><a href='http://www.zenplate.blogspot.com/search/label/css%20menu'>Css Menu</a></li>
<li><a href='http://zenplate.blogspot.com/2009/07/stylish-dropline-menu.html'>How to make this menu?</a></li>
</ul>
</li>
</ul>
</div>

All Done, Now save and join, if you feel there is any problem please leave a comment below, share this tip to your friends and subscribe me see the next great and amazing drop line menu version!

Requirements : CSS
Website: http://www.stunicholls.com/menu/pro_dropline_1.html
Convert to Blogger : Zenplate

Cubismo

2009-07-23T18:31:00.003+07:00

View live demo

Get full code

Night Whimsy

2009-07-23T18:21:00.003+07:00

View live demo

Get full code

AutoTransform Slide/Image

2009-07-21T08:16:00.016+07:00

I am sorry about the long time that I did not publish new tips for you.But from now it will be different, to sorry, I will bring this slide for you.I hope you will like it and I am sure it will not disappoint you.

This slide is called Auto Transform Slide/Image, its name is very special and its features,too.Let's find out them.

Why is it called auto transform image?Because you don't have to fix the margin if you want it bigger or smaller.All you have to do with your images is resizing the images to be smaller and bigger.If you have used this slide-Auto Image Slideshow-which I have published, you have to change the margin always to be fit.And why it is called auto transform slide?Yes that's the auto slide,too.

Now it's time to make it.

View live demo

Download

1.First, put this code before the ]]></b:skin> tag:

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}
/* begin: slideshow */
.slideshow {
position:relative;
padding:0;
margin:0;
}
.slideshow a img {
border:none;
}
.slideshow li.slide {
list-style-type:none;
}
.slideshow .slides {
height:260px;
margin:0;
}
.slideshow .slides li.slide {
visibility:hidden;
position:absolute;
left:0px;
top:0;
}
.slideshow .buttons {
display:none;
}
.slideshow .buttons {
display:block;
position:absolute;
z-index:100;
left:0px;
bottom:20px;
margin:0;
}
.slideshow .buttons li {
float:left;
display:inline;
width:30px;
height:30px;
margin:0;
padding-left:11px;
line-height:30px;
background-image:url('buttonBg.png');
background-repeat:no-repeat;
}
.slideshow .buttons li a {
float:left;
text-decoration:none;
width:30px;
height:30px;
color:#fff;
outline:0;
}
.slideshow ul.buttons li a:hover {
text-decoration:none;
color:#0a0a0a;
}
.slideshow ul.buttons li.active a:hover,
.slideshow ul.buttons li.active a {
color:#666666;
}
/* end: slideshow */

Ok, at this step you just have to notice the pink place if you really don't want to care about the fixing.You can get that icon in the file you have to download,or you can put your own icon, it's ok.

2.Now, add these 2 scripts before the </head> tag:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script charset='utf-8' src='transform.js' type='text/javascript'/>

Download the file I gave you, host it and get the direct link, paste it instead of the red code.

3.Save all and create a HTML/Javascript, add this code:

<div class='slideshow'>
<ul class='buttons'>
<li class='active' id='button1'><a href='#' title='website named desire'>1</a></li>
<li id='button2'><a href='#' title=''>2</a></li>
<li id='button3'><a href='#' title='oomph'>3</a></li>

</ul>
<ul class='slides'>

<li class='slide' id='image1' style='visibility:visible'>
<a href='http://zenplate.blogspot.com/2009/06/quiet-slide-image-rotator.html'><img alt='website named desire' src='http://i651.photobucket.com/albums/uu240/zendersto/imagesliderotator.png'/></a></li>

<li class='slide' id='image2'>
<a href='http://zenplate.blogspot.com/2009/06/bbc-radio-slide.html'><img alt='' src='http://i651.photobucket.com/albums/uu240/zendersto/footer.png'/></a></li>

<li class='slide' id='image3'>
<a href='http://zenplate.blogspot.com/2009/05/create-image-slideshow.html'><img alt='oomph' src='http://i651.photobucket.com/albums/uu240/zendersto/ghe.jpg'/></a></li>

</ul>
</div>

Alright, at this step, you can change the links and images by your own.I hope you will like this, please do me a back link for thank, thank you very much friends and don't forget to subscribe me to see more great tips for blogger.All you see here is just from Zenplate.

Requirements : Jquery
Developers: MIX Online
Website : http://visitmix.com/labs/glimmer/samples/sequence.html
Convert to blogger : Zenplate

Mobipress

2009-07-21T07:26:00.004+07:00

View live demo

Get full code

Paper Wall

2009-07-21T07:21:00.004+07:00

View live demo

Get full code

WP-Sora

2009-07-21T07:11:00.003+07:00

View live demo

Get full code

Sunlight Drop Down Menu

2009-07-15T17:33:00.012+07:00

Hi everyone,today I will bring you a next beautiful type of CSS menu name Sunlight Menu-The next version of drop down menu series,you can review the previous Drop Down Menu-Violet Style if you like.
Have you ever seen this menu before?As its name, why is it called Sunlight?

Because it has a stylish body with the bright and lovely color.This is a drop down menu with 1 sub, very match for the photography blog.

Alright let's do it!

View live demo

Download

1.First, you have to add this CSS code before the ]]></b:skin> tag

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.stunicholls.com.
Follow the instruction to make this menu on Zenplate.blogspot.com
=================================================================== */
.prodrop5 {padding:0 0 0 32px; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; border-bottom:5px solid #fc0;}

.prodrop5 li.top {display:block; float:left;}

.prodrop5 li a.pos1 {background:url(shades/home_0.gif); width:53px; height:30px; display:block; text-indent:-99999px;}
.prodrop5 li a.pos2 {background:url(shades/help_0.gif); width:50px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos3 {background:url(shades/abbey_0.gif); width:88px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos4 {background:url(shades/please_0.gif); width:124px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos5 {background:url(shades/revolver_0.gif); width:70px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos6 {background:url(shades/rubber_0.gif); width:94px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos7 {background:url(shades/yellow_0.gif); width:124px; height:30px; display:block;text-indent:-99999px;}

.prodrop5 li.p1 {background:url(shades/home_1.gif);}
.prodrop5 li.p2 {background:url(shades/help_1.gif);}
.prodrop5 li.p3 {background:url(shades/abbey_1.gif);}
.prodrop5 li.p4 {background:url(shades/please_1.gif);}
.prodrop5 li.p5 {background:url(shades/revolver_1.gif);}
.prodrop5 li.p6 {background:url(shades/rubber_1.gif);}
.prodrop5 li.p7 {background:url(shades/yellow_1.gif);}

.prodrop5 li.current a.pos1,
.prodrop5 li.current a.pos1:hover {background:url(shades/home_2.gif);}
.prodrop5 li.current a.pos2,
.prodrop5 li.current a.pos2:hover {background:url(shades/help_2.gif);}
.prodrop5 li.current a.pos3,
.prodrop5 li.current a.pos3:hover {background:url(shades/abbey_2.gif);}
.prodrop5 li.current a.pos4,
.prodrop5 li.current a.pos4:hover {background:url(shades/please_2.gif);}
.prodrop5 li.current a.pos5,
.prodrop5 li.current a.pos5:hover {background:url(shades/revolver_2.gif);}
.prodrop5 li.current a.pos6,
.prodrop5 li.current a.pos6:hover {background:url(shades/rubber_2.gif);}
.prodrop5 li.current a.pos7,
.prodrop5 li.current a.pos7:hover {background:url(shades/yellow_2.gif);}
.prodrop5 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.prodrop5 a:hover {visibility:visible; position:relative; z-index:200;}
.prodrop5 li:hover {position:relative; z-index:200;}
.prodrop5 li a.top_link:hover {background:transparent;}
.prodrop5 li:hover > a.top_link {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.prodrop5 ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.prodrop5 :hover ul {left:0; top:30px; background:url(shades/sub_back.gif); padding:3px; white-space:nowrap; height:auto; width:auto; z-index:300;}
.prodrop5 :hover ul li {display:block; height:20px; position:relative; font-weight:normal; width:auto;}
.prodrop5 :hover ul li a {display:block; font-size:12px; height:20px; line-height:20px; width:auto; padding:0 10px; color:#000; background:transparent; text-decoration:none;}
.prodrop5 :hover ul li a:hover {text-decoration:underline;}

Look at the red code, they are the places to put the icon images.You can get them all in the Download button.

2.Next , Save and create a HTML/javascript then paste this code in it:

<div id="beatles">
<ul class="prodrop5">
<li class="top p1"><a href="#" class="top_link pos1">Home</a></li>
<li class="top p2"><a href="#" class="top_link pos2">Help!<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://zenplate.blogspot.com/2008/10/contact-me.html">Need Zen's help</a></li>
<li><a href="http://zenplate.blogspot.com">Zenplate</a></li>
<li><a href="http://zenplate.blogspot.com/2008/10/contact-me.html">Contact Zen</a></li>
<li><a href="http://zenplate.blogspot.com/2008/06/advertiser-on-zenplate.html">Advertise on Zenplate</a></li>
<li><a href="http://zenplate.blogspot.com/2008/12/about-me.html">About Zen</a></li>
<li><a href="http://twitter.com/zendersto">Follow Zen on Twitter</a></li>
<li><a href="#">Zenplate's Feed</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/css%20menu">Other Menus</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/Jquery%20slide">Jquery tips for blogspot</a></li>
<li><a href="http://zenplate.blogspot.com">What can you find on Zenplate?</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/Premium%20Blogger%20Template">Premium Blogger Template</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/Css%20body">Let's design you blog</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p3"><a href="#nogo3" class="top_link pos3">Abbey Road<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Come Together</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Maxwell's Silver Hammer</a></li>
<li><a href="#">Oh! Darling</a></li>
<li><a href="#">Octopus's Garden</a></li>
<li><a href="#">I Want You (She's So Heavy)</a></li>
<li><a href="#">Here Comes The Sun</a></li>
<li><a href="#">Because</a></li>
<li><a href="#">You Never Give Me Your Money</a></li>
<li><a href="#">Sun King</a></li>
<li><a href="#">Mean Mr. Mustard</a></li>
<li><a href="#">Polythene Pam</a></li>
<li><a href="#">She Came In Through The Bathroom Window</a></li>
<li><a href="#">Golden Slumbers</a></li>
<li><a href="#">Carry That Weight</a></li>
<li><a href="#">The End</a></li>
<li><a href="#">Her Majesty</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p4"><a href="#nogo4" class="top_link pos4">Please Please Me<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">I Saw Her Standing There</a></li>
<li><a href="#">Misery</a></li>
<li><a href="#">Anna (Go To Him)</a></li>
<li><a href="#">Chains</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Ask Me Why</a></li>
<li><a href="#">Please Please Me</a></li>
<li><a href="#">Love Me Do</a></li>
<li><a href="#">P.S. I Love You</a></li>
<li><a href="#">Baby It's You</a></li>
<li><a href="#">Do You Want To Know A Secret</a></li>
<li><a href="#">A Taste Of Honey</a></li>
<li><a href="#">There's A Place</a></li>
<li><a href="#">Twist And Shout</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p5"><a href="#nogo5" class="top_link pos5">Revolver<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Taxman</a></li>
<li><a href="#">Eleanor Rigby</a></li>
<li><a href="#">I'm Only Sleeping</a></li>
<li><a href="#">Love You To</a></li>
<li><a href="#">Here, There And Everywhere</a></li>
<li><a href="#">Yellow Submarine</a></li>
<li><a href="#">She Said She Said</a></li>
<li><a href="#">Good Day Sunshine</a></li>
<li><a href="#">And Your Bird Can Sing</a></li>
<li><a href="#">For No One</a></li>
<li><a href="#">Dr. Robert</a></li>
<li><a href="#">I Want To Tell You</a></li>
<li><a href="#">Got To Get You Into My Life</a></li>
<li><a href="#">Tomorrow Never Knows</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top current p6"><a href="#nogo6" class="top_link pos6">Rubber Soul<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Drive My Car</a></li>
<li><a href="#">Norwegian Wood</a></li>
<li><a href="#">You Won't See Me</a></li>
<li><a href="#">Nowhere Man</a></li>
<li><a href="#">Think For Yourself</a></li>
<li><a href="#">The Word</a></li>
<li><a href="#">Michelle</a></li>
<li><a href="#">What Goes On</a></li>
<li><a href="#">Girl</a></li>
<li><a href="#">I'm Looking Through You</a></li>
<li><a href="#">In My Life</a></li>
<li><a href="#">Wait</a></li>
<li><a href="#">If I Needed Someone</a></li>
<li><a href="#">Run For Your Life</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p7"><a href="#nogo7" class="top_link pos7">Yellow Submarine<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Yellow Submarine</a></li>
<li><a href="#">Only A Northern Song</a></li>
<li><a href="#">All Together Now</a></li>
<li><a href="#">Hey Bulldog</a></li>
<li><a href="#">It's All Too Much</a></li>
<li><a href="#">All You Need Is Love</a></li>
<li><a href="#">Pepperland</a></li>
<li><a href="#">Sea Of Time</a></li>
<li><a href="#">Sea Of Holes</a></li>
<li><a href="#">Sea Of Monsters</a></li>
<li><a href="#">March Of The Meanies</a></li>
<li><a href="#">Pepperland Laid Waste</a></li>
<li><a href="#">Yellow Submarine in Pepperland</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

Alright now you can change by your own words.Save and join, hope you like this.Please offer me a back link for thanks.Thank you very much and don't forget to subscribe me to receive more great tips.

Requirements : CSS
Website: http://www.stunicholls.com
Bring to Blogger : Zenplate

Eden's Garden

2009-07-12T06:52:00.008+07:00

View live demo

Get full code

Toggery of mine

2009-07-12T06:49:00.004+07:00

View live demo

Get full code

7 Color

2009-07-12T06:36:00.003+07:00

View live demo

Get full code

Get Big Traffic with AutoSurfTraffic

2009-07-08T10:50:00.004+07:00

AutoSurfTraffic.com-Which will bring you a worth amount of traffic to your blog that you can't imagine!You can get hundreds of visitors just open your account and let it surf.
How does it work ? This is may be a really familiar to bloggers because these programs are very common now.But to find out a really good services is not quite easy and which are the convenient that we don't have to sit before the computer and click on the ads to get traffic.
Therefore, today I introduce you a completely comfortable and easy free traffic service.That's AutosurfTraffic.com.

As its name , it is completely automatic.You don't have to click any button to go to the next site to earn traffic.Great right ? I have looked for many auto surf service but I think this is one of the best service you should join.
So why don't you join it right ? Just click here, you will go to the signup place.The sign up form is not hard so you can do it yourself.
After you signed up, you have to activate your account in order to receive traffic by surfing the small amount of sites ( it doesn't matter at all for you right ? ).

Ok when you have activated your account, if you want to surf just go to the Home tab and click on the link below the line Click this link to surf instantly for points (opens in new window).That's all! I hope you will get more traffic and your blog rank will be improve.Join Autosurftraffic.com now !

Pro Drop Down- 1 sub Violet Style

2009-07-05T11:34:00.006+07:00

Hello everyone , at the previous tip about this menu series-Black&Blue Pro Drop Down with Bulkheads.I am sure you were very amazing and you are hoping for the next versions.And now , at this tip you will see the third menu style-Pro Drop Down Violet version.
Vertical,too and the bright color,good for bright pages.
Are you ready to get it ?

View live demo

Download

Ready ? let's go to blogger!

1.Add this code before the ]]></b:skin> tag:

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.stunicholls.com.
Follow the instruction to make this menu on Zenplate.blogspot.com
=================================================================== */
.preload1 {background: url(prodrop4/pro_drop4_2a.gif);}
.preload1 {background: url(prodrop4/pro_drop4_2b.gif);}

.prodrop4 {padding:0 0 0 32px; margin:0; list-style:none; height:36px; background:transparent url(prodrop4/pro_drop4_back.gif); position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
.prodrop4 li.top {display:block; float:left;}
.prodrop4 li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#666; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 10px; cursor:pointer;background: url(prodrop4/pro_drop4_0a.gif) no-repeat;}
.prodrop4 li a.top_link span {float:left; display:block; padding:0 20px 0 10px; height:36px;background:url(prodrop4/pro_drop4_0b.gif) right top;}
.prodrop4 li a.top_link:hover {color:#000; background: url(prodrop4/pro_drop4_2a.gif) no-repeat; line-height:25px;}
.prodrop4 li a.top_link:hover span {background:url(prodrop4/pro_drop4_2b.gif) no-repeat right top;}

.prodrop4 li:hover > a.top_link {color:#000; background: url(prodrop4/pro_drop4_2a.gif) no-repeat; line-height:25px;}
.prodrop4 li:hover > a.top_link span {background:url(prodrop4/pro_drop4_2b.gif) no-repeat right top;}


.prodrop4 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.prodrop4 a:hover {visibility:visible; position:relative; z-index:200;}
.prodrop4 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.prodrop4 ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.prodrop4 ul.sub1 {width:160px;}
.prodrop4 ul.sub2 {width:110px;}
.prodrop4 ul.sub3 {width:90px;}
.prodrop4 ul.sub4 {width:112px;}

.prodrop4 :hover ul {left:0; top:35px; background: #b9d3fb; padding:3px; border:1px solid #3a93d2; border-width:0 1px 1px; white-space:nowrap; height:auto; z-index:300;}
.prodrop4 :hover ul li {display:block; height:20px; position:relative; font-weight:normal; width:auto;}
.prodrop4 :hover ul li a {display:block; font-size:11px; height:20px; line-height:20px; width:auto; padding:0 10px; color:#000; text-decoration:none;}
.prodrop4 :hover ul li a:hover {background:#3a93d2; color:#fff;}

Take a look at the red code, they're the places need to be replaced by the icons in the downloaded file.

2.Save and create a HTML/Javascript,add this code in it:

<ul class="prodrop4">
<li class="top"><a id="home" href="http://zenplate.blogspot.com" class="top_link"><span>Home</span></a></li>
<li class="top"><a id="products" href="http://zenplate.blogspot.com" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub1">
<li><a href="#" class="fly">Digital SLR Cameras</a></li>
<li><a href="#">Interchangeable Lenses</a></li>
<li><a href="#/">Flash Guns and Accessories</a></li>
<li><a href="#">Professional Tripods</a></li>
<li><a href="#">Filters & Lens Hoods</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="services" href="http://zenplate.blogspot.com" class="top_link"><span>Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub2">
<li><a href="#">Printing & Framing</a></li>
<li><a href="#">Photo Editing</a></li>
<li><a href="#">Storage & Backup</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="contacts" href="http://zenplate.blogspot.com" class="top_link"><span>Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub3">
<li><a href="#">Support</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#/">Buying</a></li>
<li><a href="#">Photographers</a></li>
<li><a href="#">Stockist</a></li>
<li><a href="#">General</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="shop" href="http://zenplate.blogspot.com" class="top_link"><span>Zenplate</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub4">
<li><a href="http://zenplate.blogspot.com/">Jquery tips</a></li>
<li><a href="http://zenplate.blogspot.com/">Css tips </a></li>
<li><a href="http://zenplate.blogspot.com/">Image tips</a></li>
<li><a href="http://zenplate.blogspot.com/2008/12/about-me.html">About me</a></li>
<li><a href="http://feeds2.feedburner.com/zenplate">Zenplate Feed</a></li>
<li><a href="http://twitter.com/zendersto">Zen Twitter </a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a id="privacy" href="http://zenplate.blogspot.com" class="top_link"><span>Make this menu</span></a></li>
</ul>

Done! What are you waiting for ? Save a join now! Share this to your friends and don't forget to subscribe me to get more great tips!Please offer me a back link if you like my blog.Thank you very much friends!

Requirements: CSS
Website: http://www.stunicholls.com
Demo: http://natureblog-zenplate.blogspot.com
Bring to Blogger : Zenplate