Cara membuat widget menu slick blogspot - cara membuat widget menu slick blogspot dengan jquery,cara membuat widget menu slick blogspot menu slick blogspot ini memiliki tampilan yang menarik. Pada dasarnya memanfaatkan cara membuat widget menu slick blogspot ini hanya untuk menampilkan suatu menu yang lebih mudah dilihat para pengunjung dan tidak memakan tempat pada halaman blogspot. cara membuat widget menu slick blogspot ini sangat membantu blogger mania untuk menampilkan suatu menu yang unik, untuk melihat tampilan widget menu slick blogspot ini silahkan klik link demo dibawah ini, setelah anda berada di halaman demo widget menu slick blogspot silahkan dekatkan cursor anda pada menu wang berwarna kuning dan bila anda tertarik memasangnya, silahkan simak tutorial dibawah ini, langsung saja menuju TKP.
CSS
.menu_slick_blogspot{
height:40px;
line-height:40px;
position:fixed;
top:150px;
left:0px;
font-family: arial;
font-size:16px;
text-transform:uppercase;
}.menu_slick_blogspot_main{
color:#f0f0f0;
z-index:10;
border:1px solid #222;
background-color:#000000;
cursor:pointer;
text-align:left;
font-weight:bold;
text-indent:20px;
width:100px;
position:absolute;
top:0px;
left:0px;
text-shadow:1px 1px 1px #000;
}.menu_slick_blogspot_main:hover{color:#fff;}
.menu_slick_blogspot_main_right{
width:40px;
height:40px;
position:absolute;
left:60px;
top:0px;
cursor:pointer;
border:1px solid #000;
background:#0099FF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9tszE5HOnqEO-dA0AMiIthdRnUPRxZp-tIuL6ZPdtIhnAxOjI-GscvqC7EqTJfR1IecTt8g56f1XN8FeMNyaFiVAPQY1GLmY0TcqtdggGcFBly7kI8ptPQdvnPgNNZEVh0UcDyA1JLsE/s1600/right.png') no-repeat center center;
background-color: #FFFF00;
}.menu_slick_blogspot ul {
position:absolute;
left:202px;
top:0px;
width:1024px;
list-style:none;
padding:0px;
height:30px;
margin:0;
}.menu_slick_blogspot ul li a{
text-decoration:none;
cursor:pointer;
display:block;
float:left;
margin:0px;
text-indent:10px;
padding:0px 10px 0px 3px;
line-height:40px;
height:40px;
text-indent:10px;
letter-spacing:1px;
color:#FFFFFF;
background-color:#800000;
text-shadow:1px 1px 1px #000;
border:1px solid #333;
border-left:none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}.menu_slick_blogspot ul li a.hover{
color:#FFFFFF;
box-shadow:0px 0px 3px #000 inset;
background-color: #B90000;
text-shadow: none;}
Pasang code script dibawah ini tepat dibawah code <body>
<div id="ui_element" class="menu_slick_blogspot">Pasang code script dibawah ini di atas code </head>
<ul>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu" class="hover">Menu Navigasi 0</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 11</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 111</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1111</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 11111</a></li>
</ul>
<div class="menu_slick_blogspot_main">Menu</div>
<div class="menu_slick_blogspot_main_right"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/61616341111/slick.js"></script>
