widget navigasi gradient style blogspot

Menu navigation atau yang saya sebut dengan widget navigasi gradient style blogspot. cara membuat widget navigasi gradient style pada halaman blog sangat bervariasi, tapi pada postingan kali ini widget navigasi gradient style blogspot yang akan kita buat memakai CSS 3 dengan tampilan widget navigasi gradient style blogspot yang lebih memukau, menarik dan elegan untuk halaman sebuah blog yang handal, silahkan lihat demonya jangan lupa disimak tutorialnya bila anda ingin memasang widget navigasi gradient style blogspot pada halaman blog kesayangan anda, langsung saja menuju TKP.

Demo

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 :Widget navigasi gradient style blogspot
By : Rivai Silaban | Blog Design
Update : Senin, 21 Oktober 2013
******************************************/
.bdanimet-css {
overflow: hidden;
display: inline-block;
width: 960px;
}
.bdanimet-css li{
background-color: #80FFFF;
background-image: linear-gradient(#00C4C4 0%, #80FFFF 50%, #80FFFF 51%);
background-image: -moz-linear-gradient(#00C4C4 0%, #80FFFF 50%, #80FFFF 51%);
background-image: -o-linear-gradient(#00C4C4 0%, #80FFFF 50%, #80FFFF 51%);
background-image: -ms-linear-gradient(#00C4C4 0%, #80FFFF 50%, #80FFFF 51%);
background-image: linear-gradient(#00C4C4 0%, #80FFFF 50%, #80FFFF 51%);
border-right: 1px solid;
box-shadow: 1px -1px 0 #80FFFF inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
position:relative;
float: left;
list-style: none;
border-color: #33CCCC;
}.bdanimet-css li:after{
content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;
background-image:-webkit-gradient(linear, left top, right top, from(#008A8A),color-stop(0.5,#008A8A), to(#008A8A));
background-image:-moz-linear-gradient(left, #008A8A, #fff 50%, #008A8A);
background-image:-o-linear-gradient(left, #008A8A, #fff 50%, #008A8A);
background-image:-ms-linear-gradient(left, #008A8A, #fff 50%,#008A8A);
background-image:linear-gradient(left, #008A8A, #fff 50%, #008A8A);
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}.bdanimet-css li:first-child{
border-radius: 4px 0 0 4px;
}.bdanimet-css li:first-child:after,
.bdanimet-css li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
border-radius:4px 0 0 4px;
}.bdanimet-css li:last-child{
border-radius: 0 4px 4px 0;
}.bdanimet-css li:last-child:after,
.bdanimet-css li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

border-radius:0 4px 4px 0;
}.bdanimet-css li a{
color: #666666;
display: inline-block;
font: 15px/1 comic sans, comic sans ms, cursive, verdana, arial, sans-serif;;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
}.bdanimet-css li a:hover{
color: #000000;
}.bdanimet-css a.homeIcon{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1EBXsCt7LxSsv-d0Zl1Wj2yxx1WNCzBeClWnHWlCyLQhzrMjKs1yWMnkvdHLzfoEXYPs6NhWpra-ghmzhDuBGnms9_xhNKvRI65Gnv7gSR-tMuChFTwtbCq5oUwxfgkQGGP-FwKfQ0Jg/s1600/home.png') no-repeat center center;
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
}.bdanimet-css li:hover:after,
.bdanimet-css li.selected:after,
.bdanimet-css li:target:after{
opacity:1;
}.bdanimet-css:hover li.selected:after,
.bdanimet-css:hover li:target:after{
opacity:0;
}.bdanimet-css li.selected:hover:after,
.bdanimet-css li:target:hover:after{
opacity:1 !important;}

Install tag html

• Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya.
• Copy code dibawah ini lalu pastekan dibawah widget " HEADER "
  Pada halaman blog pasti mempunyai "Header" jadi anda pastekan kode dibawah ini dibawah semua kode HEADER blog anda.
• Save halaman anda dan lihat hasilnya, semoga bermanfaat.
  

<!-- Rivai Silaban | BLOG DESIGN code start -->
<ul class="bdanimet-css">
<li id="home"><a href="LINK ANDA " class="homeIcon">Home</a></li>
<li><a href="LINK ANDA">About us</a></li>
<li><a href="LINK ANDA">Kategori</a></li>
<li><a href="LINK ANDA">Contact us</a></li>
<li ><a href="LINK ANDA">Privacy Policy</a></li>
<li><a href="LINK ANDA">Desclaimer</a></li>
<li><a href="LINK ANDA">Sitemap</a></li>
</ul><!-- Rivai Silaban | BLOG DESIGN code end -->

Keterangan Code

• Tulisan kode warna MERAH ganti dengan link menu anda.
• Edit semua warna menu sesuai dengan warna selera atau template anda.

Kesimpulan
Widget navigasi gradient style blogspot ini merupakan widget hasil design CSS 3 yang mengunakan sistem gradient sehingga mempercantik tampilan widget navigasi gradient style.

Bila anda mengalami masalah dalam pemasangan widget navigasi gradient style blogspot ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Widget navigasi gradient style blogspot
Senin, 21 Oktober 2013
Rivai Silaban | Blog Design

menu

• cara membuat menu blogspot
• cara membuat widget menu slick blogspot
• widget mega menu blogspot
• widget menu
• widget jquery menu horizontal
• widget menu bar google style
• widget Floating Menu Social media valid html5
• widget flying navigasi jquery tooltip
• cara membuat widget jquery flying menu
• cara membuat jquery flying menu valid html5

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 : 2:17 PM