Assalamu'alaikum Warohmatullohi Wabarokatuh
Selamat Datang Di Situs Kami
Bismilahirrahmanirrahim
Tafsir Mimpi atau Arti mimpi ini Sebagian Besar Di ambil dari Kitab Ta'bir Ru'yah Shoghir karya Ulama Besar Syekh Muhammad Bin Sirrin. Disertai Dengan Contoh dan Kisah nyata dari berbagai Sumber Semoga Bisa Bermanfaat. Serta Artikel artikel Islami, Semoga Menambah Hasanah Ke Islaman Kita... Amin
- Login ke dashboard blogger
- Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
- Klik Add Gadget / Tambah Gadget.
- Pilih/klik opsi HTML/Javascript
- Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
- Klik Save / Simpan
- SelesaiNah itulah tutorial bikin menu horizontal blogger.
Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)
Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.HTML/Javascript lainnya
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.
<style type="text/css">/* Made By Klik-blogger.blogspot.com */#ddblueblockmenu{ border: 1px solid #000000; /*Main Border Color */ border-bottom-width: 0; width: 100%; } #ddblueblockmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #ddblueblockmenu a{ display: block; padding: 3px 0; padding-left: 9px; width: 94%; /*94% minus all left/right paddings and margins*/ text-decoration: none; color: #ffffff; /* Menu Font Color */ background-color: #2175bc; /*Menu background Color */ border-bottom: 1px solid #90bade; /*Bottom border color */ border-left: 7px solid #1958b7; /*Left border color */ list-style-type:none; } * html #ddblueblockmenu a{ /*IE only */ width: 94%; /*IE 5*/ width: 94%; /*94% minus all left/right paddings and margins*/ } #ddblueblockmenu a:hover { background-color: #2586d7; /*Menu background Color On Hover*/ border-left-color: #1c64d1; /*Left border color On Hover*/ } #ddblueblockmenu div.menutitle{ color: #ffffff; /* Title Font Color */ border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background-color: #000000; /*Menu Tite Background Color*/ font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } /* Made By Klik-blogger.blogspot.com */ </style> <div id="ddblueblockmenu"> <div class="menutitle">Browse</div> <ul> <a href="http://www.Klik-blogger.blogspot.com/">Home</a><a href="http://www.Klik-blogger.blogspot.com/about/">About us</a><a href="http://www.Klik-blogger.blogspot.com/category/blogger-templates/">Bloggertemplates</a> <a href="http://www.Klik-blogger.blogspot.com/category/tricks-and-hacks/">BloggerTricks</a> <a href="http://www.Klik-blogger.blogspot.com/blogger-tools/">Blogger Tools</a><a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/> </ul></div><font size="1">Menu By <a href="http://www.Klik-blogger.blogspot.com/">Klik-blogger.blogspot.com</a></font>
Selamat mencoba dan semoga berhasil
