cara membuat widget menu slick blogspot

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.

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************
Name : widget menu slick blogspot
By : Rivai Silaban | Blog Design
Update :Sabtu 11 January 2014 
site : www.rivai.org
******************************************/
.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/AVvXsEiO64DTEfEA_Jmgraa4Hx-cbC08cWoT0_ZN5SMqbdWsto9WpR6WRVPoUt41P1IdiY9AXNziz8Zu4oIY7QhVjxvXEgfTqVDPEGIee_s2o18sQW4wAcW43v3SaFuhy908Tmj_XO8FWp9A2aqP/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;}
/*** www.rivai.org CSS widget menu slick blogspot and ***/ 

Pasang code script dibawah ini tepat dibawah code <body>

Code HTML here..

 <!-- www.rivai.org code widget menu slick blogspot start-->
 <div id="ui_element" class="menu_slick_blogspot">
<ul>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu" class="hover">Menu Navigasi 0</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 11</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 111</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1111</a></li>
<li><a href="http://www.rivai.org/" 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>
<!-- www.rivai.org code widget menu slick blogspot end-->

Pasang code script dibawah ini di atas code </head>

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

Bila anda masih belum memahami tata cara pemasangan cara membuat widget menu slick blogspot ini silahkan kunjungi halaman sumbernya, semoga bermanfaat..
Sumber : http://www.rivai.org/2014/01/widget-menu-slick-blogspot.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:27 PM

4 comments :

UnknownJanuary 11, 2014 at 6:21 PM
woww mantap mas rivai sangat bagus :D kalau ganti warnanya juga bagus :D keren mas
AnonymousJanuary 12, 2014 at 11:26 AM
Wawww.. Keren Bang,, Mantap Bang.. :)

Oh Ya Bang,, Itu Kalo Ditambahin Menu Nya Kebawah Bisa Gak Tu Bang..??

Pengen Juga Lah,, Hahahaaa.. :D

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..

Konversi Kode Forum Diskusi Join to Blog

cara membuat widget menu slick blogspot

Rivai Silaban - Blog Design

System

Script Code

Support

Widget

Saturday, January 11, 2014