Save Widget Below of the Header

Save Widget Below of the Header

Few days ago, there are some friends who ask me, “ How to save widget below header exactly? ” Generally, we can’t save widget or element, right in below of header in Blogger template. Usually, we can only put element or widget in top of Post element, but of course width of that element just as wide as ‘post width’. Then maybe you will ask me, “ Do we have some ways, to save widget or element, exactly below the header? ” The answer is…. Of course, we can…. In fact, we have a lot of ways for fix that thing. But, in order that there are limitations of times and places, I can’t write all of the tricks here. I will only give you one way for fix that problem. Ready? Okay then, here we go….

Follow my instructions below:

1. Login to Blogger with your id.
2. Click Layout.

3. Click Page Element tab, look at the structure of your layout template. Usually, the header element will be show like this :

   

4. We are going to fix this thing. Let’s begin the party!!!
5. Just click Edit HTML tab.
6. Click sentence Download Full Template, you must backup this thing. It’s very important!

7. Find out codes which like this :

8. Delete that code and change with this one:

9. Click Save Template button. Wait ‘till this is done.

10. Click Page Element tab and your layout template will be like this :
    

    
    

11. Feel please to customize your blog with a new Page Element below the header.
12. In order to add Page Element, you can click Add Page Element. You can add anything you want. And then, you can drag the new element, below of header elementr, if you already finish your business with your new element.
13. If your setting was done, just click SAVE in top of that page.
14. Well done, now see the result.

Happy blogging to all.

Link to this post

Free Tool : Scott Box Shot Maker 2.0

Free Tool : Scott Box Shot Maker 2.0

Hello guys! i'm glad to meet you again. Now i will give you a cool free tool, this tool named with Scott Box Shot maker 2.0. What's the function of Scott Box Shot maker 2.0? with Scott Box Shot maker 2.0 you can create an ebook cover very easy. Want to try this tool? click at the button below :




See you again at my free download tool.

Link to this post

Free SEO ebook : Search Engine Optimization made easy

Free SEO ebook : Search Engine Optimization made easy

Want to get 1 top ranking at Google Search? Need ton traffic to your site? Optimize your site or blog. Don't know what should be do with your blog? Download this SEO e-book and read how to optimize your blog. The creator of this free e-book is Brad Callen. I'm loving this e-book because very simple but complete, good tips and trick. So, don't waiting untill tomorow, go a head to download this e-book. File size to download is only 1.66 MB. Please click at the image button :

Free Tool : HTML Color v1.4

Free Tool : HTML Color v1.4

Do you a web designer, blog designer, or hobby to edit your blog template? Maybe you need this tool. The name of this tool is HTML Color v1.4, with HTML Color V1.4 you can get HTML color code with easy method because HTML color v1.4 can record the color from image at your monitor, over you mouse computer at the area of your monitor and HTML color v1.4 will give you the HTML code.

This tool is free tool, i'm has been use this tool from a long time ago to help for design my free blog template. No need install, run only. Download file is 184 KB. Want to try this tool, please click at the link below :

Split Header Column Became Two Column

Split Header Column Became Two Column

Tomorrow night, one of my blog visitors has been ask to me how to insert search engine at the header blog? Hmmmm... All right... I try to answer this question. To inserting a search engine or everything at the header column, you must split your header column became 2 or 3 column. For example I'm has been split my header column became 2 column.

Much technique to split header column, however I will show you my technique at my free template magazine template 1, so before you exercise to split header column please download template here! And then please create a new blog for practice.

Are you ready to do some action with me? All right.. follow these steps. Go to your page element, and you will find template structure like this :

Now we will change the header column become 2 header columns. Click Edit HTML tab, go to your template code and find the code like this :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Delete above code and replace with this code ;

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

Go to lower side and find the code like this :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

Delete above code and replace with this code :

<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='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Click SAVE CHANGES button and done.

Now click Page Elements tab and you will see your header column become 2 columns :


OK guys, now you can add anything at the new element in the right header.

If you feel interest with this post, please digg it.

See you next time at my new tutorial.

Make a D'tree at Menu Blog

Make a D'tree at Menu Blog

Did you ever seen Window Explorer? At Window Explorer have a beauty menu likely my left banner. Did you know, you can make that menu at your blog. For example, please checkout my example blog here!, this menu named D'tree menu.
Feel interest to make this menu at your blog? here is the steps to make a d'tree menu :



#Step 1

1. Click layout.


2. Click Edit HTML tab.
   


3. Click the Download full template link. Save your template (very important)


4. Go to your template code, and find the code </head> .


5. Copy and then paste following code above of </head>


<link rel="StyleSheet" href="http://ahom24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript" src="http://ahom24.googlepages.com/dtree.js"></script>


6. Click Save Template button.


7. Step 1 is done.
   

#Step 2

1. Click Add a Page Element to make a element.


2. Choose for HTML/Javascript.


3. Copy and paste the following code at the element :
   


<div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p> <script type="text/javascript"><br /><!--<br /><br />d = new dTree('d');<br /><br />d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');<br /><br /><br />d.add(1,0,'Free template & navigation')<br /><br />d.add(3,1,'free template','');<br />d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');<br />d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');<br />d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');<br />d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');<br />d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');<br />d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');<br />d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');<br />d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');<br />d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');<br />d.add(100,3,'template klasik');<br />d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');<br />d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');<br /><br />d.add(5,1,'Free css menu navigation');<br />d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');<br />d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');<br />d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');<br />d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');<br />d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');<br />d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');<br />d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');<br />d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');<br />d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');<br /><br />d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');<br />d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');<br />d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');<br />d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');<br />d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');<br />d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');<br />d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');<br />d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');<br /><br />d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');<br />d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');<br />d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');<br />d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');<br /><br /><br />document.write(d);<br /><br />//--><br /></script> </div>


Click SAVE CHANGES button.
4. Done. Now you have a d'tree menu at your blog.

Notes : Original code is from http://www.destroydrop.com. All of links at this tutorial is my link, you must changing the links with yourself links.

Happy blogging!

Magazine Template 1

Magazine Template 1

This is my new free template, named Magazine Template 1. Bellow is screen shot for Magazine Template 1:

Specifications :

Type : Blogger beta template (XML)
Column type : Multiple columns Template
color : white Background color : black
Template Width : 900 pixels
Sidebar width : 300 pixel
Leftsidebar_1 : width : 280 pixel
leftsidebar_2 : width : 275 pixel
bottombar width : 210 pixel Browser test : IE6, FF3 beta 4, opera 9.25, Netscape 9.0.0.6
Download file : 8kb

Download | Demo

Enjoy your new template

Source

Free Template : Classic Minima Series

Free Template : Classic Minima Series

Several days ago, somebody told and asked me, how to make minima 3 column, but he want ed at Classic Template. And now I have had classic minima template.

Now I have had classic minima template 3 column series, which are : Classic White Minima 3 column, Classic Blue Minima 3 column, Classic Black Minima 3 column, and Classic Ochre Minima 3 column.

LICENSE

By downloading and using our blogger template, you agree to the following terms:

1. Don't delete credits link to this blog and this blog.
   
2. You may NOT resell the template.
   
3. You may modify, translate or distribute all of the template.
   
4. You may use the template for personal or commercial projects

Download template

If you feel interested in this template, please feel free to download. Please Click at the button below :


Classic White Minima 3 column





Classic Black Minima 3 column





Classic Blue Minima 3 column





Classic Ochre Minima 3 column




If you have downloaded the templates, please extract with software extractor such as Winzip or Winrar, because the files is still at zip file.

Beside at this blog, you can also download the template at this blog.

If you enjoy this post and want to share with your friends please Digg It!

See you at my other free template.

Source

Free Template : Dots Dark 3 column

Free Template : Dots Dark 3 column

Several days ago, i was given a free template 3 column, there is Dots 3 Column. Now I will give you other series of Dots template, yea.. it is Dots Dark 3 Column. This is once of original blogger template by Douglas Bowman. Originally have 2 column, and I had modified this template become 3 column. If you are a lover of 3 column template, you can download it for free here.

LICENSE

By downloading and using our blogger template, you agree to the following terms:

1. Don't delete credits link to this blog and this blog.



2. You may NOT resell the template.



3. You may modify, translate or distribute all of the template.



4. You may use the template for personal or commercial projects

Download template

If you feel interested with this template,please feel free to download. Please Click at the button below :





Installing Template

After you download the Dots dark 3 column template, you must ekstract from zip file to xml file. Remember, ekstract from zip file to xml file before you upload this file to blogger. Before you install this template, don't forget to backup your template and your widgets. please read this post and this post for english version. and for Bahasa Indonesia version, you can read at this post and this post.

for install Dots dark 3 column template, you can read at this post.


See you again at my next post. Wait for my other free template.

If you enjoy with this post please Digg It!

Source

Free Template : Tic Tac Blue 3 column

Free Template : Tic Tac Blue 3 column

Meet you again at my free template 3 column, there is Tic Tac blue 3 Column. This is once of original blogger template by Dan Cederholm. Originally have 2 column, and I had modified this template become 3 column. If you are a lover of 3 column template, you can download it for free here.

LICENSE

By downloading and using our blogger template, you agree to the following terms:

1. Don't delete credits link to this blog.



2. You may NOT resell the template.



3. You may modify, translate or distribute all of the template.



4. You may use the template for personal or commercial projects

Download template

If you feel interested with this template,please feel free to download. Please Click at the button below :





Installing Template

After you download the Tic Tac Blue 3 column template, you must ekstract from zip file to xml file. Remember, ekstract from zip file to xml file before you upload this file to blogger. Before you install this template, don't forget to backup your template and your widgets. please read this post and this post for english version. and for Bahasa Indonesia version, you can read at this post and this post.

for install Tic Tac Blue 3 column template, you can read at this post.

If you enjoy this post please Digg It!


See you again at my next post. Wait for my other free template. Cheer.

Source

Free Template : Tic Tac 3 column

Free Template : Tic Tac 3 column

Today i have new one for free template 3 column, there is Tic Tac 3 Column. This is once of original blogger template by Dan Cederholm. Originally have 2 column, and I had modified this template become 3 column. If you are a lover of 3 column template, you can download it for free here.
LICENSE

By downloading and using our blogger template, you agree to the following terms:

1. Don't delete credits link to this blog.



2. You may NOT resell the template.



3. You may modify, translate or distribute all of the template.



4. You may use the template for personal or commercial projects

Download template

Click at the button below (6 kb) :




Installing Template

After you download the Tic Tac 3 column template, you must ekstract from zip file to xml file. Remember, ekstract from zip file to xml file before you upload this file to blogger. Before you install this template, don't forget to backup your template and your widgets. please read this post and this post for english version. and for Bahasa Indonesia version, you can read at this post and this post.

for install Tic Tac 3 column template, you can read at this post.


See you again at my next post. Wait for my other free template.Have a nice day.

Free Template : Dots3 column

Free Template : Dots3 column

I have new one for free template 3 column, there is Dots 3 column template. This is once of original blogger template by Douglas Bowman. Originally have 2 column, and I had modified this template become 3 column. If you are a lover of 3 column template, you can download it for free here.

LICENSE

By downloading and using our blogger template, you agree to the following terms:

1. Don't delete credits link to this blog.



2. You may NOT resell the template.



3. You may modify, translate or distribute all of the template.



4. You may use the template for personal or commercial projects

Download template

Click at the button below (8 kb) :



Installing Template

After you download the Dots 3 column template, you must ekstract from zip file to xml file. Remember, ekstract from zip file to xml file before you upload this file to blogger. Before you install this template, don't forget to backup your template and your widgets. please read this post and this post for english version. and for Bahasa Indonesia version, you can read at this post and this post.

for install Dots 3 column template, you can read at this post. See you again at my next post. Wait for my other free template.Cheer.

Free Template : Denim 3 column

Free Template : Denim 3 column

I have had a 3 column template again, there is denim 3 column template. This is once of original blogger template by Darren Delaye. Originally have 2 column, and I had modified this template become 3 column. If you are a lover of 3 column template, you can download it for free here.

LICENSE

By downloading and using our blogger template, you agree to the following terms:

1. Don't delete credits link to this blog.



2. You may NOT resell the template.



3. You may modify, translate or distribute all of the template.



4. You may use the template for personal or commercial projects

Download template

Click at the button below (3 KB) :







Installing Template

After you download the denim 3 column template, you must ekstract from zip file to xml file. Remember, ekstract from zip file to xml file before you upload this file to blogger. Before you install this template, don't forget to backup your template and your widgets. please read this post and this post for english version. and for Bahasa Indonesia version, you can read at this post and this post.

for install denim 3 column template, you can read at this post.


Have a nice day, see you again at my next post. Wait for my other free template.Cheer.

Free Template : Harbor 3 columns template

Free Template : Harbor 3 columns template

A have had a 3 columns template for you, there is harbor 3 columns template. This is once of original blogger template by Douglas Bowman. Originally have 2 columns, and I had modified this template become 3 columns. If you are a lover of 3 columns template, you can download it for free here.

Screen shot :

LICENSE

By downloading and using our blogger template, you agree to the following terms:

1. Don't delete credits link to this blog.
2. You may NOT resell the template.
3. You may modify, translate or distribute all of the template.
4. You may use the template for personal or commercial projects

Download template

Click at the button below (6 kb) :







Installing Template

After you download the harbor 3 columns template, you must extract from zip file to XML file. Remember, extract from zip file to XML file before you upload this file to blogger. Before you install this template, don't forget to backup your template and your widgets. please read this post and this post for english version. and for Bahasa Indonesia version, you can read at this post and this post.

for install harbor 3 columns template, you can read at this post.


Happy weekend and see you again at my next post. Wait for my other free template.Cheer.

Make A Table of Content

Make A Table of Content

Do you like to read the book? your answer surely will immeasurable, there is to answer to like and there is also to answer don't like. But I sure you have read a book. In a book is be one named by table of contents, with table of contents will make the reader the book easy to find the parts the content of a book wishing in reading. The question possibly emerge is what is his relation between books with blog? there is, do not only a book that can make the table of contents, in a blog even also we can do it,

There is 2 steps to make a Table Of content at the blog :

Step #1

1. Login to blogger with your ID.
2. After entering the dashboard page , click Layout.
3. Then click edit HTML tab.
4. Click the Download full template link. Save your template.
5. Please mark the little box beside Expand Widget Templates. Wait for a moment.
   
   



6. Go to your template code, and find the code like this :
   
   




7. Delete above code, and replace with the following code :
   
   
   <b:if cond="'data:blog.homepageUrl"> <b:if cond="'data:blog.pageType"> <a href="'data:post.url'"> <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"> <data:post.title/></div></a> <b:else/> <b:include data="'post'" name="'post'/"> </b:if> <b:else/> <b:include data="'post'" name="'post'/"> </b:if>



8. Click Save Template button
9. Done.

Step #2

1. Click at Page Element tab.
2. Click at Add a Page element.
3. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript.
4. Copy and paste the code below into available column :
   
   YourBlogName.blogspot.com/search?max-results=200">Show all post »»



5. Alter YourBlogName with your blog name. Example : my blog name is rohman-freeblogtemplate. Alter 200 with other number, because this is the sum of how much post want to show.
6. Click
7. Finish. Please see the result.

Now you have a Table Of Content at your blog.

Source

Free CSS menu : Vertical-1 Menu

Free CSS menu : Vertical-1 Menu

Hi brother ! today i want to give you a vertical menu. The name is vertical-1 menu because this is the first vertical menu, his menu is very compatible in placing at sidebar.

below is following the example of vertical-1 menu. Please drop your mouse to the menu :

CSS Library

Home
Blue menu
Blue menu 2
Double Line Menu
Flip menu

UniQue Template

Minima 3 column
Minima 3 column (beta)
1st template unik
Scribe 3 column
Blu Lover
Gray Lover

Feel interest to make vertical-1 menu at your blog? please follow the steps :

Step 1 :

1. Sign in to blogger with your ID.
2. Click layout tab.
3. Click Edit HTML tab.
4. Click Download Full Template, save your template for backup data.
5. Copy and paste the code below at above of ]]>




/* vertikal vertikal kuning di mulai */ /*Credits: Blog tutorial */ /* get full tutorial at : http://rohman-freeblogtemplate.blogspot.com */ #vertical-1{ border-bottom-width: 0; } #vertical-1 ul{ margin: 0; padding: 0; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */ } #vertical-1 a{ display: block; padding: 3px 0; padding-left: 9px; width: 200px; /* width of mrnu */ text-decoration: none; color: #333222; /* this is the color of alphabet */ border-right:1px solid #000000; background-color: #FBEC04; border-bottom: 1px solid #6A6731; border-left: 7px solid #918C3B; } #vertical-1 a:hover { background-color: #FAF6B9; border-left: 12px solid #918C3B; width: 195px; /*lebar */ } #vertical-1 div.menutitle{ color: white; border-bottom: 1px solid #053E66; padding: 5px 3px 5px 13px; background-color: black; width: 201px; font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; }



6. Click Save Template button

Step 2 :

1. Click Page Element tab
2. Click Add a Page Element
3. Click ADD TO BLOG button below Javascript/HTML
4. Copy and paste the code below in to the element



<div id="vertical-1"> <div class="menutitle">CSS Library</div> <!-- this is the 1st title --> <ul> <!-- Please alter with your links --> <a href="http://rohman-freeblogtemplate.blogspot.com">Home</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html">Blue menu</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html">Blue menu 2</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html">Double Line Menu</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html">Flip menu</a> <!-- add any links here --> </ul> <div class="menutitle">UniQue Template</div> <!-- this is the 2nd title --> <ul> <a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column</a> <a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Minima 3 column (beta)</a> <a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1st template unik</a> <a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column</a> <a href="http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html">Blu Lover</a> <a href="http://template-unik.blogspot.com/2007/08/gray-lover-template.html">Gray Lover</a> <!-- add any links here --> </ul> </div> <!-- end off vertical-1 menu -->



5. Click SAVE button


6. Click and hold the new element and drag to place where you want


7. Click SAVE button


8. Finish
   

Now you have had a beautiful menu, please change his colour with your colour. See you at my next post. Don't miss it

Source