Cara Buat Animation Icon & Text Menu With JQuery

Cara Buat Animation Icon & Text Menu With JQuery

Pada Postingan Kali ini Saya Kembali Ke Tutorial Blogger Yakni Cara Membuat Animation Icon & Text Menu With JQuery Untuk Blog. Munkin Sobat Belum Paham Dengan Tutorial Kali ini Hanya Dengan Melihat Judul Dan Gambar Diatas Tapi Sobat Jangan Khawatir Karena Saya Sudah Sediakan Demonya yang Bisa Sobat lihat Dengan Klick Gambar dibawah.


Nah Bila Sobat Blogger Sudah Memantau Demonya Mungkin Diantara Sobat Semua Ada Yang Tertarik Untuk memasangnya Bisa Menyimak Tutorial Dibawah ini.

  1. Pertama Login Dulu Ke Akun Blogger Sobat.
  2. Silahkan Masuk Rancangan Lalu Pilih Edit HTML Dan Centang Expand Template Widget
  3. Selanjutnya Carilah Kode ]]> Dan Taruhlah Kode Dibawah ini Tepat Diatasnya.
    /*Sliding Text and Icon Menu Style*/
    .sti-menu{
    width:950px;
    position:relative;
    margin:10px auto 0 auto;
    }
    .sti-menu li{
    float:left;
    width:120px;
    height:170px;
    margin:1px;
    }
    .sti-menu li a{
    display:block;
    overflow:hidden;
    background:#fff;
    text-align:center;
    height:100%;
    width:100%;
    position:relative;
    -moz-box-shadow:1px 1px 2px #ddd;
    -webkit-box-shadow:1px 1px 2px #ddd;
    box-shadow:1px 1px 2px #ddd;
    }
    .sti-menu li a h2{
    color:#000;
    font-family: ‘Wire One’, arial, serif;
    font-size:13px;
    font-weight:bold;
    text-transform:uppercase;
    position:absolute;
    padding:2px;
    width:100px;
    top:100px;
    left:10px;
    text-shadow: 0px 1px 1px black;
    }
    .sti-menu li a h3{
    font-family: Baskerville, “Hoefler Text”, Garamond, “Times New Roman”, serif;
    font-size:12px;
    font-style:italic;
    color: #111;
    position:absolute;
    top:130px;
    left:10px;
    width:100px;
    padding:2px;
    }
    .sti-icon{
    width:100px;
    height:100px;
    position:absolute;
    background-position:top left;
    background-repeat:no-repeat;
    background-color:transparent;
    left:10px;
    top:5px;
    }
    .sti-icon-home{
    background-image:url(http://1.bp.blogspot.com/-Oe4n4MD1lNE/Tqrx3qk6_JI/AAAAAAAAADI/NsIsAX7yrl4/s1600/home.png);
    }
    .sti-icon-album{
    background-image:url(http://2.bp.blogspot.com/-JPWKs2i0umQ/Tqrx3_BSNKI/AAAAAAAAADo/aFEeJR9UTig/s1600/Photo.png);
    }
    .sti-icon-mail{
    background-image:url(http://2.bp.blogspot.com/-bVtju4v5npQ/Tqrx36bmRlI/AAAAAAAAADY/5fxNvRFpdw8/s1600/MAIL.png);
    }
    .sti-icon-info{
    background-image:url(http://3.bp.blogspot.com/-2Shix9TZxPs/Tqrx3yYf_cI/AAAAAAAAADQ/xcL6-AoQS4k/s1600/Contak.png);
    }
    .sti-icon-rss{
    background-image:url(http://4.bp.blogspot.com/-JL_ijANmoY0/Tqrx4eYagCI/AAAAAAAAAD4/3Opy4G90N3g/s1600/RSS.png);
    }

  4. Bila Langkah Diatas Sudah Selesai Selanjutnya Silahkan Cari Kode Dan Taruh Kode Dibawah ini Tepat Diatasnya.

    $(function() {
    $('#sti-menu').iconmenu();});

  5. Kemudian Simpan Template.
  6. Untuk Tahap Akhir Silahkan Sobat Masuk Ke Elemen Laman Kemudian Click Tambah Gedget Lalu Pilih HTML/JavaScript.
  7. Silahkan Sobat Copy Kode Dibawah ini Dan Masukkan Pada Kolom Kosong HTML/JavaScript Yang Tadi Sobat Buka Dan Simpan.

    • <a href="#“>

      My Home

      Halaman Utama

    • <a href="#“>

      My Album

      Galery Photo

    • <a href="#“>

      Info Saya

      My Prifille

    • <a href="#“>

      My Email

      Send Messenger

    • <a href="#“>

      Subcribe

      Langgan RSS

  8. Selesai Lihat Hasilnya.

  • Untuk Mengubah Icon Gambar Sobat Bisa Lihat Pada Langkah 3 Dan Silahkan Ubah Kode Yang Berwarna Merah Dengan URL Gambar Sobat.
  • Untuk Langkah 7 Silahkan Sobat Ubah Kode Pagar Yang Berwarna Biru Dengan Link URL yang Sobat Inginkan.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s