Tutorial Bina Blog: Menu Horizontal Untuk Blog

Disamping menampakkan kelainan pada rupa blog anda, dengan adanya menu horizontal ini, blog akan lebih mudah di explore oleh pelawat. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod Menu Horizontal pada ruang Html / Javascript tadi.

<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>

# - 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)

* Terdapat 9 pilihan style menu horizontal untuk anda pilih. Just copy kod yang disediakan:

&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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2tpQCihoVAaEoVWehOm_lRMjgvrolNaj1XWNKz3M91Bpzp8buBLl9sj10eyYM4sZkGy-7cRNNIiRrJBcLAAZtrcw3lPEUaCAQRBrwNKLawd6dzkHGm05FWYdI96sco9ppX_RnSGYagQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPPye2zvMSkW5gYUVZhCoI_zsu_q5TxYO9MrIPonoP4e4F4ssxa9rgua83pkZFr-QlEGtuLHoXlu-GdNhjLaRYtUclcf-I3sEne1cs04h7cyHFlyHe2ZiYHAcoiyZsh9sQuwg_4qtHFPs/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;