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 22, 2013

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('http://4.bp.blogspot.com/-Mh5Wg1VZcUM/UmYaU52yGfI/AAAAAAAAB7M/KTqaRigR-ik/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

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 : Rivai Silaban Update pada : 2:17 PM

10 comments :

  1. Cuma mao berkunjung rutin saja lah mas
    tidak tau mao komentar apa

    ReplyDelete
    Replies
    1. heheh iya yah, yah mana tau ngasi saran tentang tampilannya sob, kan biar lebih mantap, ..
      thx atas kunjungannya..

      Delete
  2. kalau pake gambar lebih berat ya mas ??

    ReplyDelete
    Replies
    1. iya memang tapi tidak terlalu beratlah, kalo kita pake gambar dengan format gif aatau png dengan resolusi rendah tanpa full color yah ringan juga sob, tapi lebih baik tanpa gambar sih biar lebih abdol heheheh thx sob, atas sharenya berguna sekali, jadi masukan pada kami..

      Delete
  3. Mantap lah master...
    Kudu sering" mampir ke blog master nie biar nambah ilmu blogging nya,hehehe...

    ReplyDelete
    Replies
    1. heheh bukan master , saya masih newbie juga kok ilmu saya masih sebutir debu di dunia maya ini sob..

      silahkan sob, biar kita sama sama belajarnya..

      Delete
  4. Replies
    1. bantu gimana yah, maksudnya saya kurang paham appara pertanyaannya

      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