TUTORIAL MEMBUAT MENU MENYAMPING PADA BLOG

Hallo... berjumpa lagi dengan saya. Kali ini saya akan memposting tentang......

TUTORIAL MEMBUAT MENU MENYAMPING
       yang seperti ini..

Langkah-langkahnya seperti ini :

1. Buka blog kamu

2. Pilih tata letak --> add gadget ---> Java/HTML

3. Copas code dibawah ini

        <li><a rel="nofollow" href="#"><span>Link 1</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>

4. Save

# - url untuk setiap menu ( cth: http://jombinabelog.blogspot.com/2012/01/menu-horizontal-pada-blog.html)

Link 1 - 7 - nama menu yang korang nak letak ( cth home, about me, contact dll)

Ada beberapa style nih buat menunya

1.

Kodenya : 

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

2.

          

kodenya :

&lt;style&gt; #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } &lt;/style&gt; &lt;div id=&quot;tabsE&quot;&gt;&lt;ul&gt;&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;

       

3.

      

kodenya : 

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvAqYEy5NI/AAAAAAAACvk/Upvw2dOoy3c/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvAqaCPITI/AAAAAAAACvo/6J1w2JWIlz0/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

Selamat mencoba..

cc : http://jombinabelog.blogspot.com/2012/01/menu-horizontal-untuk-blog.html