Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Tuesday, October 1, 2013

widget menu bar google style

Widget menu bar google style ini adalah hasil kreasi google.com, cara membuat widget menu bar google style ini tidak terlalu rumit sebab google sangat profesional dalam menangani kode kode html dan script. Bila anda tertarik dengan tampilan Widget menu bar google style silahkan simak penjelasan dibawah ini, klik DEMO untuk melihat hasilnya. Jika anda menginginkan tampilan menu dengan style lain, silahkan klik lnik artikel dibawah ini. Oke langsung saja menuju TKP.

Demo


Referensi Artikel


  • Widget flying navigasi with subscribe
  • Flying menu animasi
  • Jquery flying menu
  • Widget Flying menu bottom
  • Widget Flying menu with translate tool

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Menu bar google style
RE-Post : Rivai Silaban | Blog Design
Update : Selasa 01 September 2013
******************************************/
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}/*** Blog Design CSS and ***/


Install Script


  1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
  2. Pada Edit HTML template anda silahkan cari kode </head>
  3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
  4. Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.
  5. Script dan tag html merupakan hasil kreatife google.com dan berlisensi, saya tidak bertanggung jawab atas penyalah gunaan script dan kode tersebut.

<!-- Rivai Silaban | BLOG DESIGN | Google.com script menu start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/3121020641/jquery-google-menu.js"></script>
<script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>
<!-- Rivai Silaban | BLOG DESIGN | Google.com script menu End -->

Install Program Tag HTML


  • Setelah anda selesai memasang code scriptnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
  • Cari code <body> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <body>

<div class="menu">
<ul>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://plus.google.com">+You</a>
</li>
<!-- Using class="current" for the link of the current page -->
<li class="current">
<a target="_blank" href="http://www.google.co.in/">Web</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://orkut.com">Orkut</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://gmail.com">Gmail</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="https://www.google.com/calendar">Calendar</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="https://docs.google.com">Documents</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
</li>
<li><!-- Do not add any class for links with dropdown -->
<a href="#">More<span class="arrow"></span></a>
<!-- Drop Down menu Items -->
<ul>
<li><a href="http://www.google.co.in/reader">Reader</a></li>
<li><a href="https://sites.google.com">Sites</a></li>
<li><a href="http://groups.google.co.in">Groups</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>
<li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>
<li><a href="http://translate.google.co.in/">Translate</a></li>
<li><a href="http://books.google.co.in">Books</a></li>
<li><a href="http://scholar.google.co.in/">Scholar</a></li>
<li><a href="http://blogsearch.google.co.in">Blogs</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
<li>
<div class="mid-line">
</div>
</li>
</ul>
</li>
</ul>
</div>

Keterangan Code
  • Tulisan kode warna MERAH pada kode silahkan ganti dengan link anda sesuai yang tertulis pada tutorial..
  • Tulisan warna BIRU adalah nama link menu
  • Bila anda ingin lebih kreative silahkan anda edit CSSnya untuk menyesuaikan tampilan widget ini dengan thems template anda. selamat mencoba.

Kesimpulan

Wiget menu ini merupakan hasil dari kreasi google.com

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Widget menu bar google style
Selasa 01 September 2013
Tutorial by : Rivai Silaban | Blog Design
Code : Google.com

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

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 10:06 AM

10 comments :

  1. Master mau nanya nih, mohon maap di luar topik yah
    masalah chkme saya check blog anda descriptionnya ratio100% itu bagaimana caranya yah ?
    email saya : aufhie@Gmail.com

    ReplyDelete
    Replies
    1. Jangan dibilang masterlah, masih newbie juga nih..
      oh soal itu, wah kirain cuman saya yang cek blog saya ternyata banyak juga teman yang ngetes SEO Blog saya..

      yang sabar ya sob nanti saya balas, tenang saja bakalan bisa kok..

      Delete
  2. wah gan rivai makin sip aja ilmunya hehehehe.. sukses terus buat gan rivai.. :)

    ReplyDelete
    Replies
    1. ah masih sebutir ebu sob,,
      thx atas pendapatnya..

      Delete
  3. Beh makin keren saja ni Om rivai....
    aku juga pakai widget dari sini

    ReplyDelete
  4. Replies
    1. thx atas pendapatnya dan kunjungannya sob,
      salam bloger

      Delete
  5. assalam akhi silaban mau tanya master maaf di luar topik bhasan, kapan hari sya sudah pasang google translate pada menu gmail sya tapi sekarang hilang tidak muncul lagi menubar nya gimana cara mengatasinya.trimksih sbelumnya klo sempat mhon dibalas via,,,,mrjhon08@gmail.com

    ReplyDelete
    Replies
    1. soal pertanyaan itu, silahkan contact kami sob..
      sebab sudah merupakan suatu kebijakan kedepan ini untuk tidak menjawab pertanyaan diluar topik yang ada, agar tidak tertanggu pada para pembaca blog ini.

      Delete

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