NEWS
Loading...
  • Posted by : Johanes Djogan 24 Jul 2011

    Animated Text dan Icon Menu Dengan jQuery
    Apa kabar sobat,dah lama nih ga share tentang Jquery lagi,sekarang saya mau kasih tutorial cara memasang Menubar
    dengan animated Text dan Icon atau lebih tepat'a menggunakan gambar dengan sentuhan Jquery yang animasi'a
    sangat menarik

    .Contoh'a bisa sobat lihat disini.trik ini saya dapatkan dari http://tympanus.net.sobat juga bisa lihat trik menarik lain'a disana.ok,ga usah basa - basi lagi,langsung baca tutorialnya~


    Langkar pertama,Buka blogger =>Rancangan=>edit HTML
    lalu Copas semua CSS dibawah ini,Tepat diatas kode ]]></b:skin>


    .sti-menu{
    width:1010px;
    position:relative;
    margin:60px auto 0 auto;
    }
    .sti-menu li{
    float:left;
    width:200px;
    height:300px;
    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:42px;
    font-weight:bold;
    text-transform:uppercase;
    position:absolute;
    padding:10px;
    width:180px;
    top:140px;
    left:0px;
    text-shadow: 0px 1px 1px black;
    }
    .sti-menu li a h3{
    font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
    font-size:18px;
    font-style:italic;
    color: #111;
    position:absolute;
    top:248px;
    left:0px;
    width:180px;
    padding:10px;
    }
    .sti-icon{
    width:100px;
    height:100px;
    position:absolute;
    background-position:top left;
    background-repeat:no-repeat;
    background-color:transparent;
    left:50px;
    top:30px;
    }
    .sti-icon-care{
    background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/care.png);
    }
    .sti-icon-alternative{
    background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/alternative.png);
    }
    .sti-icon-family{
    background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/family.png);
    }
    .sti-icon-info{
    background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/info.png);
    }
    .sti-icon-technology{
    background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/technology.png);
    }



    langkah kedua,kamu Copas lagi Font google api,paket Jquery animated dibawah ini.
    lalu letakan di atas kode </body> atau boleh juga dibawah kode ]]></b:skin>.


    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.iconmenu.js"></script>
    <script type="text/javascript">
    $(function() {
    $('#sti-menu').iconmenu();
    });
    </script>


    Dan langkah terakhir,kamu Copas kode HTML dibawah ini dimanapun kamu mau ^^
    Mau dirancangan=>elemen halaman=>tambah gadget=>HTML/javascript BOLEH.
    atau maudirancangan=>edit HTML=> copas di dalam/bawah kode <body> juga boleh,tergantung sobat mau letakan dimana.


    <ul id="sti-menu" class="sti-menu">
    <li data-hovercolor="#37c5e9">
    <a href="#">
    <h2 data-type="mText" class="sti-item">Advanced Patient Care</h2>
    <h3 data-type="sText" class="sti-item">Personalized to your needs</h3>
    <span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
    </a>
    </li>
    <li data-hovercolor="#ff395e">
    <a href="#">
    <h2 data-type="mText" class="sti-item">Alternative Medicine</h2>
    <h3 data-type="sText" class="sti-item">Holistic approaches</h3>
    <span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
    </a>
    </li>
    <li data-hovercolor="#57e676">
    <a href="#">
    <h2 data-type="mText" class="sti-item">Modern Info Center</h2>
    <h3 data-type="sText" class="sti-item">Educating you</h3>
    <span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
    </a>
    </li>
    <li data-hovercolor="#d869b2">
    <a href="#">
    <h2 data-type="mText" class="sti-item">Future Family Planning</h2>
    <h3 data-type="sText" class="sti-item">For a healthier future</h3>
    <span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
    </a>
    </li>
    <li data-hovercolor="#ffdd3f">
    <a href="#">
    <h2 data-type="mText" class="sti-item">Advanced Technology</h2>
    <h3 data-type="sText" class="sti-item">From the latest research</h3>
    <span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
    </a>
    </li>
    </ul>


    Note:
    1.Ganti tanda pagar # dengan Url yang kamu inginkan.
    2.li data-hovercolor adalah warna link hover'a
    3.<h2 data-type="mText" class="sti-item">Nama link</h2>
    4.<h3 data-type="sText" class="sti-item">Descripsi link</h3>


    Slesai deh,kalau sudah simpan template~xD
    bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^
    cosplayfanatictemplates

    { 7 comments... read them below or Comment }

    1. Sob. Bagusan desain blog demonya daripada blog yang ini. Saya kesulitan membaca informasi di blog yang ini, suer. Lebih baik pakai desain blog demonya supaya lebih mudah dibaca.

      BalasHapus
    2. thx sob,saya pikir" juga gitu,desain blog yg ini memang masih berantakan.maka'a blog yg ini emang belum slesai,msh tahap perbaikan.

      BalasHapus
    3. son thx banget info na....gw user baru niih mohon di bimbing.....post info terbaru ya sob

      BalasHapus
    4. maaf mksud ane sob td bukan son..heheheh maklum pengguna baru

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -