Diah Andani Blog

join this site

https://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaACfoK5vky3XZIm9rcbP%252BabkabKSTAGrAlarPV9O5IlQwXxBqgPHYWaaCIQg3zAgZAejCqV27%252FEPAyNxjwXSFXewOv4R%252BgmXV6iBYrQuNh%252FyEYm3V6ACVsYYlX5vyp6HeYsZFkv%252Fq502rsWpkIdRYC0msnabt4mJXE8Yl9qGcad90aadRrq7XiSk9dhmfk63msfAk6kX2z6%252B0xUea6F3GuSlbfqGx8tLBSgPYv6iVCb6GKDXX4%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1

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:

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHyl3nwOdGSAl0gxMXTP9ViajhfozrqmEFlZQsKCxd_NittAeG1f3YXm4pyO9imXsLw1sqra5SIyxyK7TGUF8Dxd4BbS5xw5WRMBTGi442rdXgLNwt65dnN3inURolPL0W0a1g4X1CF94/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1gJqgcJDBYtErIxh3tkHJEvH38h607bA1KnX4HsWmj8bRG3pX6t_mCFJzwNx9rVS2oveEXMRiZgB3yEmfOqjWgd5Kq8YJbTltUKtTT5-fw7EgcwS8nab-6xkd1bfRiPfMQb-0UKHn_vQ/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>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QjcvpmXiji6ozXKFsYRJt7Zvr6Ozt37st717kLREhNSbJ33g3gwMBvCydvyqbixRiJbs06XVcr5Uh6b5jzqvZN6jBFI0IG_H-3P9r_OHWV0zXOgjpxnaBow3juT3COizjQJg4x2pvcA/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhoDTyBhs3UWRRAkZMDsmOW4MuabI5Ng3n7dwCWJEy5X39Lq0TwGo-PXU5YUlBqDInxvm_Dmo1y_LY7wEGY4F2W4231CQfCFsmYTYgd4C_DmxcBwh_WfiFtDpS9OYFz2BqxOLMJBI4zE/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"><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>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwlxSko74WltvVlgXamJ83arjgSHlbE4l-qAw72412TowdIkqhh989UrqeWFtiO2dx8Wllc-Nv_SxMals0HA7byIUJOK9ehPBqVyZEytJEzxq02rzqpo4ch437baosquaj63vs7ARmfpU/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCA6YvbFeV_N0zUXj5HnUonE3k_tnCan9nc_6RJcZpuoAZKjqg_kkdTHbDBGjKBLokyoTy9khyphenhyphen-PFF1strx39V2cQyEP-VUv7ApezIIYRykiJImE6cbLz91jA01PdrRg4WBEaeOhBIm8/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"><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>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"><ul id="navlist"><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>

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNYv9S6MsVL6CaCMCHzObQLX8YA0zuywV1c0Fp0puPb9omXsBFPB7uQM3q4UGgZTXn7X9MqshoY1yTUnyqGFz0KLGHoXd0uffmqV580MiweoTBKJBngegPf5Npl2ldqhZdK5Hm-My3Hds/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKDxIH-WJfQw3h15mpFxiAZy1v08_ZknGs0fhgTqqqiSB0x80qAq39RyYpYkVHinTJfMrh_eKBIhu0x-kTm3LK8ZZF0OpnIwIeCAUx_bABJVNVP3DqIMQHEZ-rK_iVRsUW0bvGo5t153s/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"><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>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIphMjFFAuLwf0wfPfjl3jUrPAsVA1qdCSLIf2xxWHFwEwUcnLSmfCQBw4vID8kPq88xjeQdMUPcUsXnsGJeNRBRxiWkqK_GPEqU8SqgSfAlUlyPNR3du7D0g_ZhVeqmGjPUXnZ4qfftk/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmWhpaoG8gADG32LCgMZ11NulwmIvAbqAM4y1XSmk_DyywRn0w5ifVlX51GKvRJ9L7hgUWNBs4ABo8UjHeP-cWMqmPnqvXbBbATEFMEv0snJxF5gSssMdiidPwqifAzvNUP7Mgapo6Dw/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"><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>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3yeIbC1dGEMf5wZpVaHlyAMmxAXv0MhrG7WZ4yc1C8tIrY73DjZPlSFReHTpYjs0EgJxk9nfup3DxzJgqDP5EoFseFxUb6umJbst_BJUoacGcUJbUHhseGkaxaHuPJnzxWDOXOCAIunc/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"><ul id="nav"><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>

<style> #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/AVvXsEiT86MBByH1fhQ717bNCF5SdjpRgxZvfeL4gGAbLxb5J8z5qroQ28L3F047N5-jC_ptKr0jP0LHIrd3AbyCrpiu88OmS7gqbNxzywK4gmwM02Zj6lYXzZBJfNqQ9A4AIsLUqCKhH153PUo/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/AVvXsEhRzUyTzoy5ebngjnMw82nqbHJ__3wpQaXmavvkSgrfuzMqk_YChLOnEIdnkSA6RPF2lA9JmzdVrcCIG5949HE3w2G7-z7go-WbFlndi8DrLnLE7PdEKAHrxfA5CnMvTXNf41pqVcv_en8/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; } </style> <div id="tabsE"><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>

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0vbV6jcECOruyK8RPPoE4pg5eXUnQ1tMPChbEfj_xtQt1th4CAy7ImDaK3pV7waFDD0WIx6-yAwt6N2rGfVSn3Nl3rG74IBgU3mS8j_AP0XKGL8-Bgv-h-dPw5yUZ37be7EzmXDdxMNY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK0flNllfLylw9PYs3NF25eNWXNi5ZR0CXFtgD3VRPpkqeiwBQ-weeWCK8DCbLSf_B-H5mFjO0upkM46UMQqguYIc3_HDbQ06jsuF3g4QxoziZC_odsWhgs-c6s69RmqFjj9hpF1eYu5Q/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>

4) Dah selesai klik save dan lihat hasilnya.

Diah Andani Blog

Selasa, 18 Maret 2014

Cute Icon

Senin, 17 Maret 2014

Menu Horizontal Untuk Blog

Salju dalam blog