Cara Membuat menu Fixed social mac doc style

Sebenarnya lagi males posting tapi karena memang lagi tidak ada pekerjaan, lihat-lihat artikel posting yang terdahulu tepatnya Tutorial Menu navigasi CSS Mac Dock bottom, mending saya edit ganti jadi menu navigasi dengan Social Icon biar lebih bermanfaat
dan bedanya bisa dipakai sebagai Gadget Fixed navigasi menu. Yang bikin jenuh cuma Ngedit Icon di Photoshop yang Bikin Ngantuk.
Saya tidak membuat Demonya Tapi mungkin bisa dilihat di screenshot berikut untuk tampilannya:

Untuk cara membuatnya, sudah saya buat sesimpel mungkin, ikuti langkah-langkah berikut :

1. Login blogger
2. Rancangan, Elemen laman
3. Tambah Gadget
4. Pilih Html/Java script, dan simpan script berikut:

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

<script type="text/javascript" src="http://kangdadang.googlecode.com/files/interface.js"></script>
<style>
/**************************
Fixed social mac doc style            *
************************ */
.macsosial {
    position:fixed;
    bottom: 10px;
    }
#dock2 {
    width: 100%;
    bottom: 0px;
    left: 0px;
}
.dock-container2 {
    height: 50px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vkMuUbl6IkN_xAhV5QyT9qhlX8R6uJ6R0vZqCcqI8Vi8Tx7Au9kvN3vZ2LwD5xhdo7RDgCthaEJXP1oRf7hGmDE9OL1TWzGwishLZi_tQ4xk-JjxaKHzXW03itAno3H1TrB7-WBnmsw/s1600/dock-bg.gif);
    padding-left: 20px;
}
a.dock-item2 {
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    bottom: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
}
.dock-item2 span {
    display: none;
    padding-left: 20px;
}
.dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}
</style>

<div class="macsosial">
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJO-WslMS01gzWEym77_vIbmf35fxTlNuoDKHFvULUyWt0qNBt8L52k3tp9q3UBXj4m3Mes_Nvh8b0HsUfSPUk92PjOGJWKzwbSFj0TiZthCiwtJu-ZCz5nE6hcCcbDcsrxRn1B7CL5k/s1600/delicious.png" alt="delicious" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFzpd8hxlVHThQYKPqRQkkbEEA8neVepmSQg4-gPZdo0gs7GCimufo7JBZr5xXvBErn82tcaiZHJ_vhSmeg_LJCBsQMsHDhGnBfBSQLUoahJ9X0MNi-M1-vqg0WxpjYavWXwnNpNaVZ9Y/s1600/Digg.png" alt="Digg" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4FnGKxrXkRLOdftga4xfLRJR4D_GBjGspixNI1otSA2VJA4m0bTPAzSF-gD2XHrIFw2Fv6K-l6uVF53W84oOeChAJLMGRZfFp_V4FikPSvMcS_sad2j4f9b-_TE4KqmGlt5HuaPpS5Ag/s1600/facebook.png" alt="facebook" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaB3gqfXeh9fZWz9YdppY6kT61AOmsCbPC95wngO2iXxg0arf-ed7o7jap0XkBIY2Ai8-gYfsqU3sFilN1Ghcnj13vyOxYlFlgw-cf3bg2AjX7r3AcaMWTdkyGUKTR5vW6dMTWWPf_8kU/s1600/reddit.png" alt="reddit" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI_o8NqRlZGVfQMfCaFfLx1psb0OgKkk9aaVevZm2K-OSOzgm5gpUXLt5bvaQr-s9F3CcY9mDUBF5IL8tOiWFilgY_bZST_AILoFVouhI4__eMzysaX2Fc5TyWEIzohuwu1SfZyGpGNcs/s1600/Technorati.png" alt="Technorati" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0zkYNIROKJuD_Zx25Ss6NhTbume09kbv_1XHDFNN_Z8NMxqXOe1THqGKgMwZuRPWmAkuvhlmQkAo_imyJWhMx5oLC7e3kv7B5u7hp43lD7wLL19WGNBaUnBWP1AwQrQ8Aawn7yDclDRE/s1600/twitter.png" alt="twitter" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblLPfRQBdHlfz3-ileJ94esAouaLxt5gPvGYATU8O8_Ly3KK7aMClgtxbC4wT2kPic_80_PEkW-Kyt3w_7uD4m_NH2L_HWAtxazMB0KJrc__G8pon2t2QwJWfONiAt9bdCbsgX67t24A/s1600/googleplus.png" alt="googleplus" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2E3Qc6Y9PMAS9bLdj-0G9wUTbt_XzpPo97h68-romcUO70BbfNdnz36F0PQtdSQzyqLuxlbNfF4uPbdwhm_hVlruuqW8crJzvNg3sOlEeHrSZpfBFQ7vRin8DTjKH4NLNee9-hj4PQOA/s1600/email.png" alt="Email" /></a>
  <a class="dock-item2" href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZbAU0BaM5HjDFCQd1aVUuv5jdnKpbjtqyRWfNaqfnB7qEWf8xl84DRseJPodd15trKROeLrodv3U-urvsl09qxtsHwmxJt-oIGG7cKscg3eROvMmdqshP3QbLwh7azjKrQk5o0wqPkXI/s1600/rss2.png" alt="rss" /></a>
  </div>
</div>
</div>

<script type="text/javascript">
 
    $(document).ready(
        function()
        {
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>

Keterangan:

• Jika script jQuerynya sudah ada, ttidak perlu lagi ditambahkan lagi.

5. Simpan Dan lihat hasilnya.

Selesai, semoga bermanfaat :)

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.