Blogger Template : Violet 2.0

As I promise, today I’ll give you new template with image gallery feature. This feature I’ve already mentioned in the previous post. If you miss the post, you can read it here. I make this template with purple color dominating the whole appearance. Well, I choose this color, because it’s a trend now. So, I hope you like it.

Type : Blogspot template  XML Name : Violet 2.0 Designer : Free Tips 4U  Added : 29 January 2010  Properties : 2 columns, fixed width, purple Feature :  * Image gallery by Stu Nicholls Demo : Click Here!  Download: template_violet2.rar

You may download and use my template freely as long as you agree to the Term of Use.

Read More...

Car Auto Insurance

Nowadays, many people realize how important it is to have insurance(s). But for me – and maybe for you too – spending money to buy insurance is giving me a headache. But, not buying insurance is unwise. Bad things can happen anytime, anywhere, to you or your family member or even your properties. So, I realize that I must have protection for me and my family, and also protection for my properties. That’s why I need more than one insurance, such as life insurance, auto insurance, homeowner insurance, etc.

I know I need those insurances, and I have to decide which insurance company has the best services with the best price – lower price of course. So, what I do is visiting a website called TopCheapInsurance.com, which will help you decide which insurance company will give you the best services and prices. It will give you a comparison insurance rate and instant insurance quotes that will help you to reach your final decision.

For example, if you need an auto insurance, then you’ll need an instant auto insurance quote. Believe me, it really helps. And don’t forget to protect your home from fire, from natural disaster, from burglary by buying homeowners insurance. Just remember, before you decide, get a  homeowners insurance quotes to give you enough information and help you decide which insurance company give you the most.

Read More...

Galeri Imej Cantik Untuk Blogger

Halo semuanya…

Baru-baru ini saya jalan-jalan ke ‘rumah’ tetangga dan menemukan ‘sesuatu’ yang menurut saya sangat menarik dan bila dipasang di blog, pasti akan membuat blog tampak lebih oke. Si pencipta – Stu Nicholls – menyebut fitur ini dengan sebutan “A permanent image click gallery with up/down thumbnails”. Biar lebih jelas lihat deh demonya di sini atau buat yang ‘malas’ lihat screenshot di bawah ini:

Kamu bisa lihat di sebelah kanan, terdapat  jendela yang menampilkan gambar dalam ukuran ‘full’ apabila kamu klik ‘thumbnail’ di sebelah kanan. Sedangkan di bagian bawah disediakan baris untuk menempatkan teks dan link.

Dan fitur ini tidak menggunakan JavaScript, hanya CSS dan HTML.

Mau pasang ini di blog kamu? Nah pada kesempatan ini saya akan memberikan cara memasang fitur ini di blog kamu.

1. Seperti biasa login ke www.blogger.com > Tata Letak > Edit HTML
2. Jangan lupa untu mem-back up dulu template kamu
3. Letakkan kode di bawah ini tepat di atas ]]></b:skin>
   /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/double-click-gallery-vertical.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #gallery { width:750px; height:550px; margin:0 auto; position:relative; font-family:verdana, arial, sans-serif; background:#fff; } #gallery #slides {position:absolute; right:10px; top:0; height:550px; width:92px; overflow:hidden; text-align:center; z-index:500;} #gallery #slides div {width:92px; height:550px; position:relative; padding-top:10px;} #gallery #slides div ul {padding:0; margin:0; list-style:none; width:92px; height:550px} #gallery #slides div ul li {float:left; padding:1px 0; width:92px; height:69px;} #gallery #slides div ul li a {display:block; width:92px; height:69px; float:left;} #gallery #slides div ul li a b {display:none;} #gallery #slides div ul li a.previous {background:url(http://www.cssplay.co.uk/menu/double-click/up.png) no-repeat center center;} #gallery #slides div ul li a.next {background:url(http://www.cssplay.co.uk/menu/double-click/down.png) no-repeat center center;} #gallery #slides div ul li a img {display:block; width:92px; height:69px; border:0;} #gallery #slides div ul li img.blank {margin:0 auto; padding-top:11px;} #gallery #slides div ul li a:focus {outline:0;} #gallery #fullsize {position:absolute; left:0; top:0; height:550px; width:750px; overflow:hidden; text-align:center; z-index:200;} #gallery #fullsize div {width:750px; height:700px; padding-top:70px; position:relative;} #gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:1px solid #eee; width:480px; height:360px; position:relative; background:#fff; padding:10px;} #gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:18px;} #gallery #fullsize div p {padding:5px 135px; margin:0; font-size:12px; line-height:18px;}
4. Dalam kasus ini, fitur akan diletakkan di bawah header, maka carilah kode berikut ini:
   <div id='header-wrapper'>
   <div id='head-inner'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Free Tips II (Header)' type='Header'/>
   </b:section> </div> <div id='r_head'> <b:section class='header' id='header2' preferred='yes'/>
   </div>
   </div>
5. Lalu letakkan kode di bawah ini tepat di bawah kode header.
   <div id='gallery'>
       <div id='slides'>
           <div id='slide1'>
               <ul>
                   <li><img alt='' class='blank' src='http://www.cssplay.co.uk/menu/double-click/upx.png'/></li>
                   <li><a href='#pic1'><img alt='Winter branches' src='http://www.cssplay.co.uk/menu/double-click/pic1.jpg'/></a></li>
                   <li><a href='#pic2'><img alt='Wading birds' src='http://www.cssplay.co.uk/menu/double-click/pic2.jpg'/></a></li>
                   <li><a href='#pic3'><img alt='Bird on a post' src='http://www.cssplay.co.uk/menu/double-click/pic3.jpg'/></a></li>
                   <li><a href='#pic4'><img alt='Early bloomers' src='http://www.cssplay.co.uk/menu/double-click/pic4.jpg'/></a></li>
                   <li><a href='#pic5'><img alt='Green lizard' src='http://www.cssplay.co.uk/menu/double-click/pic5.jpg'/></a></li>
                   <li><a class='next' href='#slide2'><b>Next</b></a></li>
               </ul>
           </div>
           <div id='slide2'>
               <ul>
                   <li><a class='previous' href='#slide1'><b>Previous</b></a></li>
                   <li><a href='#pic2'><img alt='Wading birds' src='http://www.cssplay.co.uk/menu/double-click/pic2.jpg'/></a></li>
                   <li><a href='#pic3'><img alt='Bird on a post' src='http://www.cssplay.co.uk/menu/double-click/pic3.jpg'/></a></li>
                   <li><a href='#pic4'><img alt='Early bloomers' src='http://www.cssplay.co.uk/menu/double-click/pic4.jpg'/></a></li>
                   <li><a href='#pic5'><img alt='Green lizard' src='http://www.cssplay.co.uk/menu/double-click/pic5.jpg'/></a></li>
                   <li><a href='#pic6'><img alt='Feeding the birds' src='http://www.cssplay.co.uk/menu/double-click/pic6.jpg'/></a></li>
                   <li><a class='next' href='#slide3'><b>Next</b></a></li>
               </ul>
           </div>
           <div id='slide3'>
               <ul>
                   <li><a class='previous' href='#slide2'><b>Previous</b></a></li>
                   <li><a href='#pic3'><img alt='Bird on a post' src='http://www.cssplay.co.uk/menu/double-click/pic3.jpg'/></a></li>
                   <li><a href='#pic4'><img alt='Early bloomers' src='http://www.cssplay.co.uk/menu/double-click/pic4.jpg'/></a></li>
                   <li><a href='#pic5'><img alt='Green lizard' src='http://www.cssplay.co.uk/menu/double-click/pic5.jpg'/></a></li>
                   <li><a href='#pic6'><img alt='Feeding the birds' src='http://www.cssplay.co.uk/menu/double-click/pic6.jpg'/></a></li>
                   <li><a href='#pic7'><img alt='A group of butterflies' src='http://www.cssplay.co.uk/menu/double-click/pic7.jpg'/></a></li>
                   <li><a class='next' href='#slide4'><b>Next</b></a></li>
               </ul>
           </div>
           <div id='slide4'>
               <ul>
                   <li><a class='previous' href='#slide3'><b>Previous</b></a></li>
                   <li><a href='#pic4'><img alt='Early bloomers' src='http://www.cssplay.co.uk/menu/double-click/pic4.jpg'/></a></li>
                   <li><a href='#pic5'><img alt='Green lizard' src='http://www.cssplay.co.uk/menu/double-click/pic5.jpg'/></a></li>
                   <li><a href='#pic6'><img alt='Feeding the birds' src='http://www.cssplay.co.uk/menu/double-click/pic6.jpg'/></a></li>
                   <li><a href='#pic7'><img alt='A group of butterflies' src='http://www.cssplay.co.uk/menu/double-click/pic7.jpg'/></a></li>
                   <li><a href='#pic8'><img alt='Ladybirds' src='http://www.cssplay.co.uk/menu/double-click/pic8.jpg'/></a></li>
                   <li><a class='next' href='#slide5'><b>Next</b></a></li>
               </ul>
           </div>
           <div id='slide5'>
               <ul>
                   <li><a class='previous' href='#slide4'><b>Previous</b></a></li>
                   <li><a href='#pic5'><img alt='Green lizard' src='http://www.cssplay.co.uk/menu/double-click/pic5.jpg'/></a></li>
                   <li><a href='#pic6'><img alt='Feeding the birds' src='http://www.cssplay.co.uk/menu/double-click/pic6.jpg'/></a></li>
                   <li><a href='#pic7'><img alt='A group of butterflies' src='http://www.cssplay.co.uk/menu/double-click/pic7.jpg'/></a></li>
                   <li><a href='#pic8'><img alt='Ladybirds' src='http://www.cssplay.co.uk/menu/double-click/pic8.jpg'/></a></li>
                   <li><a href='#pic9'><img alt='Butterfly' src='http://www.cssplay.co.uk/menu/double-click/pic9.jpg'/></a></li>
                   <li><a class='next' href='#slide6'><b>Next</b></a></li>
               </ul>
           </div>
           <div id='slide6'>
               <ul>
                   <li><a class='previous' href='#slide5'><b>Previous</b></a></li>
                   <li><a href='#pic6'><img alt='Feeding the birds' src='http://www.cssplay.co.uk/menu/double-click/pic6.jpg'/></a></li>
                   <li><a href='#pic7'><img alt='A group of butterflies' src='http://www.cssplay.co.uk/menu/double-click/pic7.jpg'/></a></li>
                   <li><a href='#pic8'><img alt='Ladybirds' src='http://www.cssplay.co.uk/menu/double-click/pic8.jpg'/></a></li>
                   <li><a href='#pic9'><img alt='Butterfly' src='http://www.cssplay.co.uk/menu/double-click/pic9.jpg'/></a></li>
                   <li><a href='#pic10'><img alt='Trees in the mist' src='http://www.cssplay.co.uk/menu/double-click/pic10.jpg'/></a></li>
                   <li><img alt='' class='blank' src='http://www.cssplay.co.uk/menu/double-click/downx.png'/></li>
               </ul>
           </div>
       </div>
       <div id='fullsize'>
           <div id='pic1'>
               <img alt='Winter branches' src='http://www.cssplay.co.uk/menu/double-click/pic1.jpg'/>
               <h3>Winter branches</h3>
               <p>Followed by some descriptive text and maybe a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic2'>
               <img alt='Wading birds' src='http://www.cssplay.co.uk/menu/double-click/pic2.jpg'/>
               <h3>Wading birds</h3>
               <p>Another piece of descriptive text and again a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic3'>
               <img alt='Bird on a post' src='http://www.cssplay.co.uk/menu/double-click/pic3.jpg'/>
               <h3>Bird on a post</h3>
               <p>Yet more descriptive text and maybe a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic4'>
               <img alt='Early bloomers' src='http://www.cssplay.co.uk/menu/double-click/pic4.jpg'/>
               <h3>Early bloomers</h3>
               <p>And another line of descriptive text and maybe a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic5'>
               <img alt='Green lizard' src='http://www.cssplay.co.uk/menu/double-click/pic5.jpg'/>
               <h3>Green lizard</h3>
               <p>With descriptive text and maybe a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic6'>
               <img alt='Feeding the birds' src='http://www.cssplay.co.uk/menu/double-click/pic6.jpg'/>
               <h3>Feeding the birds</h3>
               <p>A description of the picture can go here with a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic7'>
               <img alt='A group of butterflies' src='http://www.cssplay.co.uk/menu/double-click/pic7.jpg'/>
               <h3>A group of butterflies</h3>
               <p>Descriptive text and maybe a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic8'>
               <img alt='Ladybirds' src='http://www.cssplay.co.uk/menu/double-click/pic8.jpg'/>
               <h3>Ladybirds</h3>
               <p>The text can be over as many lines as you want, but you may need to adjust the size of the containing div to make sure that it can all be seen. The <a href='http://www.cssplay.co.uk/'>link</a> can be used if you want.</p>
           </div>
           <div id='pic9'>
               <img alt='Butterfly' src='http://www.cssplay.co.uk/menu/double-click/pic9.jpg'/>
               <h3>Butterfly</h3>
               <p>Followed by some descriptive text and maybe a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
           <div id='pic10'>
               <img alt='Trees in the mist' src='http://www.cssplay.co.uk/menu/double-click/pic10.jpg'/>
               <h3>Trees in the mist</h3>
               <p>Another piece of descriptive text and maybe a <a href='http://www.cssplay.co.uk/'>link</a>.</p>
           </div>
       </div>
   </div>
   <p class='info'>Copyright 2009 stu nicholls - CSS play</p>

   
   Keterangan:
   Warna ungu adalah url dari gambar - berurutan - dari gambar 1 sampai dengan gambar terakhir.
   Warna hijau adalah judul dari gambar
   Warna biru adalah keterangan gambar dan link
6. Sehingga kodenya menjadi seperti ini:
7. Lalu simpan perubahan yang telah kamu lakukan.
8. Lihat hasilnya di blog kamu.

Ingat, jangan merubah credit link dari si pembuat fitur ini! Sebagai bentuk penghormatan atas kerja kerasnya menciptakan suatu fitur yang indah seperti ini dan sebagai manusia yang beradab – sekali lagi – jangan merubah/menghilangkan credit link yang terdapat di dalam skrip. Si pembuat membolehkan kita semua menggunakan fitur ini, tetapi khusus untuk penggunaan komersial kamu harus meminta ijin tertulis dari si pembuat. Kamu bisa lihat detilnya di situs si pembuat dengan mengklik link ini.

Saat ini saya sedang membuat template baru dengan memasukkan fitur ini di dalamnya. Tunggu ya kehadirannya!

Read More...

Navigation Menu With Sub-Menus

Bahasa | English

Today I will explain how to make navigation menu with sub-menu like sample shown below. Try moving your cursor over the menu Blogger Template and see what happen. You will see that the menu expand and show sub-menus.

• Home
• Blogger Template
  • 2 Column
  • 3 Column
  • 4 Column
• Blogging Trick
• Forum
  • Learn SEO
  • Adsense
  • Blog Monetize
  • Link Exchange

 

By installing this menu on your blog, it will make your blog more interesting. For blog owner, you can categorized the contents easily. And for your blog's visitor, of course, they will explore your blog easier and easily choose the categories they like. You can see live demo here.

The navigation menu I’m going to explain is not using javascript. It is built using HTML and CSS. So, I believe you will find it very easy to install it on your blog.

Well, it’s time to let you know how to install this menu on your blog. As usual, you need to login to www.blogger.com and directly go to Edit HTML. Before precede to the next step, remember to back-up your template first.

1. Find this code ]]></b:skin>

2. Paste the code below right above the previous code. The code in red is the code for width of menu area. Mostly the width is the same with the body width of your template. Change the value to suit your template.

   #NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
3. Before precede to the next step, you need to determine the location of the menu on your blog. Mostly, the menu position is either on the top (above the header) or below the header block. In this sample I put the menu above the header then you have to look for this code <div id='header-wrapper'>
4. Paste the code below above the previous code.

   <div id='NavbarMenu'>

   <div id='NavbarMenuleft'>

   <ul id='nav'>

   <li><a href='http://allfreetips4u.blogspot.com'>Home</a> </li>

   <li><a href='#'>Blogger Template</a>

   <ul>

           <li><a href='http://allfreetips4u.blogspot.com/search/label/2 column'>2 Column</a> </li>

           <li><a href='http://allfreetips4u.blogspot.com/search/label/3 column'>3 Column</a> </li>

           <li><a href='http://allfreetips4u.blogspot.com/search/label/4 column'>4 Column</a> </li> </ul> </li>

   <li><a href='#'>Blogging Trick</a> </li>

   <li><a href='#'>Forum</a>

   <ul>

          <li><a href='http://allfreetips4u.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>

          <li><a href='http://allfreetips4u.blogspot.com/search/label/Adsense'>Adsense</a> </li>

          <li><a href='http://allfreetips4u.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>

         <li><a href='http://allfreetips4u.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>

   </ul> </li> </ul>

   </div> </div>

5. Now, it’s time to change some codes to meet your needs. The blue code is url-link and the red code is the anchor-text or the title of menu or sub-menu related to the link. For example Home menu. If you click on the Home menu, you’ll go to main page, so change the url with your blog’s url. Another example for Blogger Template menu. If you click the menu, it will take you to a page or pages that show postings with ‘blogger template’ label. So, you can change the url like this http://blogname.blogspot.com/search/label/blogger template. Change blogname with your blog’s name.
6. You can add or subtract the menu and submenu as you like. To add menu, just repeat the code as many time as you like. To subtract menu or sub-menu, you can remove the code.
7. And that’s it. Don’t forget to save your work.
8. Now your blog looks more interesting.

See Live Demo.

Related Posts:
 Free Tips to Edit Navigation Menu on MagStyle V1.1
 Recent Posts Widget With Thumbnails and Summaries
 Top 10 Hits Counter Widgets (Part 1) 
 Top 10 Hits Counter Widgets (Part 2)

Read More...

Get Custom Essay From ProfEssays.com

Most of blog owners, of course, want their blogs to have high Google PR. But, some people are having difficulties to reach that goal. As a matter of fact, it’s easy to get a PR – it’s true. What you need is to have good articles for your blog’s content. And don’t forget to add articles to be published on your blog regularly. Because Google loves contents. Google also hates plagiarism. So, do not – I repeat – do not copy paste other’s article or essay and published it on your blog. Trust me, it’s a bad thing  do, you’ll never get a PR. If you have difficulty to write a good essay, get a proffesional help. ProfEssays.com provides services in making custom essays. By using ProfEssay.com’s service, you will get a guaranteed quality essays done by professional writers. To ensure that the articles written by them are qualified, you can see samples of essays on their website. And you don’t have to worry about the price, you can see how much to pay – also on their site. So, why don’t you order now and prepare yourself for a PR.

Read More...

Membuat Menu Navigasi Dengan Sub-Menu

Bahasa | English

Hari ini saya akan membahas bagaimana membuat menu navigasi dengan sub-menu seperti contoh di bawah ini. Silakan anda gerakkan mouse anda pada contoh menu navigasi di bawah ini. Pada menu Blogger Template terdapat 3 sub-menu yaitu 2, 3, dan 4 Column.

• Home
• Blogger Template
  • 2 Column
  • 3 Column
  • 4 Column
• Blogging Trick
• Forum
  • Learn SEO
  • Adsense
  • Blog Monetize
  • Link Exchange

 

Dengan menu navigasi seperti di atas blog anda akan terlihat lebih menarik bukan? Selain itu tentunya bagi si pemilik blog juga lebih mudah meng-organisir konten dari blognya. Begitupun sebaliknya buat pengunjung blog anda, menu seperti ini mempermudah pengunjung dalam meng-eksplor isi blog anda. Anda bisa juga melihat live demo di sini.

Pada saat saya surfing, saya menemukan beberapa menu navigasi dengan sub-menu. Ada yang menggunakan javascript dengan tampilan dan efek yang sangat menarik, namun saya tidak akan membahasnya kali ini, mungkin di lain waktu saya akan posting tentang hal ini. Yang sekarang akan saya bahas adalah cara yang paling mudah dan tidak menggunakan javascript.

Nah, langsung aja ya masuk ke penjelasan bagaimana caranya memasang menu ini di blog anda. Seperti biasa anda perlu login ke www.blogger.com dan langsung menuju ke Edit HTML. Jangan lupa back-up dulu template anda. Setelah itu ikutilah langkah-langkah di bawah ini:

1. Carilah kode ]]></b:skin>

2. Setelah menemukan kode di atas, letakkan kode di bawah ini di atas kode tersebut. Kode berwarna merah adalah lebar dari menu navigasi, rubahlah nilai px agar sesuai dengan lebar blog anda.

   #NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
3. Sebelum melanjutkan ke langkah berikutnya, anda perlu menentukan posisi menu navigasi yang diinginkan. Biasanya menu navigasi diletakkan di atas header atau di bawah header. Misalkan anda ingin memasangnya di atas header, maka anda harus mencari kode <div id='header-wrapper'>
4. Lalu letakkan kode di bawah ini persis di atas kode tadi

   <div id='NavbarMenu'>

   <div id='NavbarMenuleft'>

   <ul id='nav'>

   <li><a href='http://allfreetips4u.blogspot.com'>Home</a> </li>

   <li><a href='#'>Blogger Template</a>

   <ul>

           <li><a href='http://allfreetips4u.blogspot.com/search/label/2 column'>2 Column</a> </li>

           <li><a href='http://allfreetips4u.blogspot.com/search/label/3 column'>3 Column</a> </li>

           <li><a href='http://allfreetips4u.blogspot.com/search/label/4 column'>4 Column</a> </li> </ul> </li>

   <li><a href='#'>Blogging Trick</a> </li>

   <li><a href='#'>Forum</a>

   <ul>

          <li><a href='http://allfreetips4u.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>

          <li><a href='http://allfreetips4u.blogspot.com/search/label/Adsense'>Adsense</a> </li>

          <li><a href='http://allfreetips4u.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>

         <li><a href='http://allfreetips4u.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>

   </ul> </li> </ul>

   </div> </div>

5. Sekarang anda perlu mengganti beberapa kode di atas agar sesuai dengan keinginan anda. Kode warna biru adalah url-link dan kode warna merah adalah anchor-text atau titel menu yang terkait dengan url-link tadi. Sebagai contoh menu Home. Anda menginginkan apabila menu ini diklik maka akan membawa anda kepada halaman utama dari blog anda, maka dari itu rubahlah url-linknya dengan url blog anda. Berikutnya, menu Blogger Template. Anda ingin apabila menu ini diklik maka akan membawa atau menampilkan posting-posting yang mempunyai label blogger template. Maka, rubahlah linknya menjadi http://namabloganda.blogspot.com/search/label/blogger template.
6. Anda bisa menambah menu maupun sub-menu dengan menambahkan kode seperti di atas. Sebaliknya anda pun bisa menghilangkan menu dan sub-menu yang tidak anda inginkan dengan menghapus kode di atas yang tidak diinginkan.
7. Setelah itu jangan lupa untuk menyimpan pekerjaan anda dan lihatlah hasilnya di blog anda.
8. Jika anda berhasil, tentunya blog anda akan terlihat lebih menarik.

Lihat Live Demo.

Related Posts:
 Tips Meng-Edit Menu Navigasi Pada MagzStyle V1.1
 Membuat Text Area
 Membuat Efek Marquee
 Menampilkan Kode HTML Di Dalam Posting
 Related Post Widget With Thumbnails

Read More...

Harry Potter Black Edition II (Redesigned)

Harry Potter Black Edition is my first blogger template that I created. I realize that this template is not perfect. The design was very simple, but – I don’t know why - many people love it. Wanna proof? Just go to BlogTemplate4U.com and you’ll see how many people have downloaded this template. It reaches 1725 and it’s still increasing. Recently, I found a very powerful tools to create template called Artisteer 2 and I’ve been using it since.

Those are the 2 reasons why I decided to redesign the Harry Potter Black Edition, and the result is amazing. Please compare these two templates from the screenshots shown below:

Harry Potter Black Ed. (Original)	Harry Potter Black Ed. II (New)
Type : Blogspot type XML Name : Harry Potter Black Edition Designer : Free Tips 4U Added : 23rd May 2009 Properties : 3 columns, fixed width, black Features : - Demo : Click here! Download : HarryPotter.rar	Type : Blogspot type XML Name : Harry Potter Black Edition II Designer : Free Tips 4U Added : 27th Dec. 2009 Properties : 2 columns, fixed width, black Features : - Demo : Click here! Download : HarryPotter2.rar

So, which one do you like? It’s your decision to make. And do not hesitate to download and use it as long as you agree to our Term of Use. And please give your critics, suggestion, comment or even question to us. Thanks.

You might also like:

	Template Superhero
	Template MagzStyle Rounded
	Template MagzStyle V1.1

Read More...