Membuat Media Sosial Menu Dorp Down menggunakan PurseCSS3 Glossy

Miev akan Berbagi Tips dan Trik khusu untuk Blogger dan ini Berhasil di pasang di Blog SOFTMIEV,Sebuah menu media sosial yang terbuat dari (hampir) murni CSS3. Di sini Miev menggunakan kombinasi CSS3 Gradien dan Box Shadow untuk menciptakan efek realistis. Pada dasarnya, tombol panah di sisi kanan adalah pseudo elemen dari elemen <label> yang kemudian Miev tutupi dengan elemen checkbox.

Setelah itu, Miev menyembunyikan wujudnya dengan CSS transparasi.

Jadi, ketika Miev mengeklik tombol drop down di bagian kanan, maka yang terjadi sebenarnya adalah Miev sedang mengeklik elemen checkbox transparan yang berada di atas elemen palsu (pseudo elemen) dari <label>:

Langkah langkah pembuatan :
1. Masuk ke akun Blogger
2. Masuk ke Template > Edit HTML
3. Di sini Miev simpan Di bawah Header dan cari <header id='header-wrapper'> letakan di bawah nya,ingat tiap template Blog itu berbeda beda jadi sobatMiev tidak usah menghawatirkan akan eror,tinggal sobatMiev cari tempat untuk kode HTML ini yang sobat inginkan,

<div class="glossy-selectbox">
    <input type="checkbox">
    <label data-default="Share This Post!" data-focus="Select one of the social media service..."></label>
    <ul>
        <li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li>
        <li><a class="social-facebook" href="#" target="_blank">Facebook</a></li>
        <li><a class="social-twitter" href="#" target="_blank">Twitter</a></li>
        <li><a class="social-google" href="#" target="_blank">Google+</a></li>
    </ul>
</div>

4. Cari kode ]]></b:skin> simpan di atas kode ]]></b:skin> jika tidak ada perubahan cari kode <style> dan simpan di bawah kode <style>

/*
 * Pure CSS3 (with some data URI images for the social media icons) Drop Down Menu for Social Media Sharing
 * Author: Taufik Nurrohman
 * URL: https://plus.google.com/108949996304093815163/about
 */

.glossy-selectbox {
  display:inline-block;
  font:normal bold 12px Arial,Sans-Serif;
  position:relative;
  width:300px;
  background-color:#111;
  text-align:left;
  /* CSS3 Browser */
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* IE only */
  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}

.glossy-selectbox:before,
.glossy-selectbox:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:3px solid transparent;
  border-width:5px 3px;
  border-bottom-color:#999;
  position:absolute;
  top:25%;
  right:5px;
  z-index:4;
}

.glossy-selectbox:after {
  border-color:#999 transparent transparent;
  top:auto;
  bottom:25%;
}

.glossy-selectbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}

.glossy-selectbox label {
  display:block;
  line-height:45px;
  color:rgba(255,255,255,.5);
  padding:0 15px;
  -webkit-transition:all 0s ease-out;
  -moz-transition:all 0s ease-out;
  -ms-transition:all 0s ease-out;
  -o-transition:all 0s ease-out;
  transition:all 0s ease-out;
}

.glossy-selectbox label:before {
  content:attr(data-default);
}

.glossy-selectbox label:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  border-left:1px solid rgba(0,0,0,.4);
  -webkit-border-radius:0 7px 7px 0;
  -moz-border-radius:0 7px 7px 0;
  border-radius:0 7px 7px 0;
  -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:hover + label {
  color:white;
}

.glossy-selectbox input:hover + label:after {
  background-color:rgba(255,255,255,.04);
}

.glossy-selectbox ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  left:14px;
  right:14px;
  background-color:#222;
  border:1px solid #111;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  visibility:hidden;
  opacity:0;
  z-index:99;
}

.glossy-selectbox li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  float:left;
  width:50%;
  display:inline;
}

.glossy-selectbox a {
  display:block;
  position:relative;
  color:#999;
  text-decoration:none;
  text-shadow:0 0 2px black;
  line-height:30px;
  border-top:1px solid #111;
  border-right:1px solid #111;
  padding:0 15px 0 32px;
  -webkit-box-shadow:inset 0 0 0 1px #333;
  -moz-box-shadow:inset 0 0 0 1px #333;
  box-shadow:inset 0 0 0 1px #333;
  /* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}

.glossy-selectbox a:nth-child(even) {
  border-right-width:0;
}

.glossy-selectbox a:before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  position:absolute;
  top:7px;
  left:7px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:50% 0;
}

.glossy-selectbox a:hover:before {
  background-position:50% 100%;
}

.glossy-selectbox .social-rss:before      {background-image:url('img/social_rss.png');}
.glossy-selectbox .social-facebook:before {background-image:url('img/social_facebook.png');}
.glossy-selectbox .social-twitter:before  {background-image:url('img/social_twitter.png');}
.glossy-selectbox .social-google:before   {background-image:url('img/social_google.png');}

.glossy-selectbox a:hover {
  background-color:rgba(0,0,0,.2);
  color:#ccc;
}

/* On click, then... */
.glossy-selectbox input:checked + label {
  color:rgba(255,255,255,.4);
  -webkit-transition-duration:.4s;
  -moz-transition-duration:.4s;
  -ms-transition-duration:.4s;
  -o-transition-duration:.4s;
  transition-duration:.4s;
}

.glossy-selectbox input:checked + label:before {
  content:attr(data-focus);
}

.glossy-selectbox input:checked + label:after {
  background-color:rgba(0,0,0,.2);
  -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:checked ~ ul {
  visibility:visible;
  opacity:1;
}

5. Simpan Template

"selebihnya sobatMiev bisa sesuaikan dengan Blog sobatMIev"

semoga Bermanfaat !!! :D

Read more »

Posted in: menu,Tutorial Blog

Desain Menu Navigasi Terbaik: ZipUp

ZIPUP (Zero Image - Pilled Up)

Merupakan menu navigasi JQuery dengan model bertumpuk sebagai ciri khasnya. Menu ini sama sekali tidak menggunakan background image sebagai latar belakangnya. Semuanya murni menggunakan CSS3. Salah satu keistimewaan menu ini adalah kemampuannya di dalam menampilkan deskripsi menu layaknya tooltip untuk memastikan bahwa para pengunjung tidak akan tersesat saat hendak menuju ke sebuah halaman melalui menu tersebut. Dua buah tipe yang Miev akan Share ini sebenarnya terinspirasi dari model JQuery Image Menu. Mengingat keleluasaan modifikasinya yang terbatas, Miev Memodifikasi model menu ini untuk mengatasi beberapa masalah itu. Miev hanya mengambil fungsi efek dan mengedit CSSnya saja:

Untuk membuatnya Anda tinggal memilih salah satu, apakah memilih tipe vertikal atau horizontal. Namun sebelum itu Anda harus memanggil JQuery dan paket easing sebagai langkah pertama:

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

 

Ambil scriptnya di sini. Jika sudah, sekarang Anda bisa melanjutkan ke langkah berikutnya, yaitu memilih model:

• Menu Navigasi ZIPUP Horizontal
• Menu Navigasi ZIPUP Vertikal

Navigasi ZIPUP Horizontal

Untuk membuat versi horizontal, pertama-tama temukan kode ini: </head>
Salin kode di bawah ini kemudian letakkan tepat di atasnya:

<script type='text/javascript'>
$(document).ready(function() {
    $('div.tovikh ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(500, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({width:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(100, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({width:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

Selanjutnya salin paket CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau jika tidak ada perubahan letakan kodenya tepat di atas kode </style>

/**
 * Copyright Juni 2013 :: miftah shidiq
 * http://miftahshidiq.blogspot.com
 */

.tovikh {
  width:670px;
  height:50px;
  font:italic 16px Times,serif;
  border:2px solid #e6e6e6;
  padding:0 0;
  margin:10px 5px 25px;
  color:#fff;
  text-decoration:none;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  overflow:hidden;
}

.tovikh ul {

Terakhir sobatMiev tinggal meletakkan kerangka objeknya. Salin kode ini, kemudian letakkan di tempat dimana sobatMiev menginginkan menu navigasi ini ditampilkan:

<div class='tovikh'>
     <ul>
          <li><a href='#'>Mitra
                    <em>Deskripsi1</em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>
</div>

Klik Simpan Template.

Navigasi ZIPUP Vertikal

Untuk membuat versi vertikal, pertama-tama cari kode ini: </head>
Salin kode di bawah ini kemudian letakkan tepat di atasnya </head>

<script type='text/javascript'>
$(document).ready(function() {
    $('div.tovikv li em').hide();
    $('div.tovikv ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(700, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({height:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(200, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({height:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

Selanjutnya salin paket CSS dibawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau jika tidak ada perubahan salin dan pastekan tepat di atas kode</style>




/**
 * Copyright Juni 26 2013  :: miftah shidiq
 * http://miftahshidiq.blogspot.com
 */

.tovikv {
  height:640px;
  width:220px;
  font:italic 16px Times,serif;
  border:2px solid #e6e6e6;
  padding:0 0;
  margin:0 0 10px;
  color:#fff;
  text-decoration:none;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  overflow:hidden;
}

.tovikv ul {

Terakhir Anda tinggal meletakkan kerangka objeknya. Menu navigasi vertikal umumnya diletakkan di atas kode ini:
<b:section class='sidebar' id='sidebar'>
Salin kode di bawah ini, kemudian letakkan tepat di atas kode <b:section class='sidebar' id='sidebar'>

<div class='tovikv'>
     <ul>
          <li><a href='#'>Mitra
                    <em>Deskripsi1</em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>
</div>

Klik Simpan Template.

Spesifikasi Menu

ZIPUP Horizontal:

• Setiap unit menu horizontal memiliki lebar 30 piksel, dengan panjang menu ideal untuk sepuluh buah menu sebesar 670 piksel.
• Tinggi menu horizontal idealnya 50 piksel.

ZIPUP Vertikal:

• Setiap unit menu vertikal memiliki tinggi 30 piksel, dengan tinggi menu ideal untuk sepuluh buah menu vetikal sebesar 640 piksel.
• Lebar menu vertikal idealnya 220 piksel.

Tipografi Menu:

• Setiap unit menu didefinisikan sebagai:
  
  <li><a href='#'>Nama Menu<em>Deskripsi Menu</em></a></li>
  
  Ganti Nama Menu dengan nama menu yang sobatMiev inginkan, dan Deskripsi Menu dengan kata-kata yang disesuaikan dengan nama menunya. Setelah itu ganti simbol # dengan sebuah alamat URL.
• Meskipun di sini Miev membatasi ukuran-ukuran menu navigasi ZIPUP, namun bukan berarti bahwa memodifikasi menu ini akan membuat tampilannya menjadi berantakan. Menambah ataupun mengurangi jumlah menu sama sekali tidak akan merusak tampilan, jadi sobatMiev tidak perlu khawatir. Miev hanya memberikan saran-saran penentuan ukuran Miev tepat.

Read more »

Posted in: menu

Membuat Menu Navigasi dengan Efek Hover Menggulung

 

Kali ini Saya hanya akan menggunakan CSS3 Transisi untuk menganimasikan efek menggulung tiap item,yang sebelumnya Miev juga belajar dari sobatMiev yaitu mas Taufik Nurrohman,jika sobatMiev penasaran dan ingin mencobanya silahkan,dan Miev sudah mengujinya dan berhasil,sayang Miev tidak bia tampilkan di blog ini di karenakan terlalu banyak CSS di blog ini,dan itu akan memberatkan blog ini,

Untuk membuatnya, 

1. masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cari script yang tampak seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Jika template sobatMiev sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode Setelah itu salin script dibawah ini, lalu letakkan tepat di bawah script tadi:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#topnav li").prepend("<span></span>");
    $("#topnav li").each(function() {
        var linkText = $(this).find("a").html();
        $(this).find("span").show().html(linkText);
    });
    $("#topnav li").hover(function() {
        $(this).find("span").stop().animate({
            marginTop: "-40"}, 250);},
    function() {
        $(this).find("span").stop().animate({
            marginTop: "0"}, 250);
    });
});
//]]>
</script>

Jika sudah, sekarang kita masuk ke tahap pemodelan. Salin kode CSS ini, kemudian letakkan di atas kode ]]> atau :

ul#topnav { margin:30px; padding:0; list-style-type:none; float:left; font-size:1em; } ul#topnav li { margin:0; padding:0; overflow:hidden; float:left; height:40px; } ul#topnav a, ul#topnav span { padding:10px 20px; float:left; text-decoration:none; color:#fff; background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x; text-transform:uppercase; clear:both; width:100%; height:20px; line-height:20px; } ul#topnav a { color:#555; background-position:left bottom; } ul#topnav span { background-position:left top; }

Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin kode di bawah ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<ul id='topnav'>
    <li><a href='#'>Beranda</a></li>
    <li><a href='#'>Profil</a></li>
    <li><a href='#'>Portfolio</a></li>
    <li><a href='#'>Komentar</a></li>
    <li><a href='#'>Kontak</a></l>
    <li><a href='#'>Bantuan</a></li>
</ul>

Simpan template sobatMiev

Read more »

Posted in: menu