Dayz Blog's™

Hmm.. hampir sama kayak RocketDock di dekstop PC nih liat dekstop Laptopku !


oke bagi yang mau pasang di blogya silahkan ikuti tutornya !!

Biar gak kecewa mending liat dulu DEMONYA klik > disini

1. Login ke blogger, gk punya akunnya ? bikin dulu, males ? mending jangan pasang haha xD

2. Pergike Template > Edit HTML

3. COPAS CSS di bawah ini, dan simpan SEBELUM kode ]]></b:skin>

/* ---------------
Menu navigasi CSS Mac  Dock top with jQuery
---------------------------------- */
/* dock - top */
.dock {
    position: relative;
    height: 50px;
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcRW3NMuwWGDo-Ucc4S20ETkzlXw_oFks5qCTu9dNYPgx70K1kYn3I8Kcqy2bbZXayF-lMHd5EAkwjREvp7skiHi-NaiuhqdGieYfc_PzLG6jR5P0g7KQ6KmpV4obNKEIX0qBdtpUCb4/s1600/dock-bg2.gif);
    padding-left: 20px;
}
a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}
.dock-item span {
    display: none;
    padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
    width: 100%;
    bottom: 0px;
    position: relative;
    left: 0px;
}
.dock-container2 {
    position: absolute;
    height: 50px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKmsCdVPH4N4nL-dxZIa5LT40A8xz26PHbQvIe21OJ4DFT8lUmXYq0ESsu175rhyEcvsn8DqiWUkgPhpc-kUJ14aW8bpwBCHvPKvPZRU-L-TZnisCEXttTbrE2PsTLP6fm__zWexxbO4/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%;
}

4.  COPAS lagi sekarang simpan SEBELUM kode </head>

<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/interface.js"></script>

5. Satu lagi, sekarang simpan SEBELUM kode </body>

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

</script>

6. Klik simpan Temlplate

Jika sudah, sekarang pergi ke Tata letak >> tambah Gadget >> HTML/JavaScript
COPAS lah script di bawah ini !

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAgtlqQYk__ZYR5kTQtUJ7Rdjb1pMyRNAcF8OlYvldN8UNWTBmKP7QRdAmJ7rp_lFAI2G_WQ2gWekKuccyThqSSri7QZzZfxzZZOV3kPAe-tbw5kFQLhVXx3HWPNir3wk-lKQg6aXToA/s1600/home.png" alt="home" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaY9q7ejYHn_e6CQNEPdVitU-iyCsFTBkYFttbEfwM2TJn6DxcFxgvCSdr0Yem1vIoPq7HsXpztTQpmpwixJILKbE5Cjp-QduV6gr8nJ9rvQfUurJYblGuJAz3bmeRTdZuNSM22ycvR-Q/s1600/email.png" alt="contact" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB-wWg_d7SBPbrbggSez7OnSeqW1mYL98VgvOA37mbPRgVLCCo-Wvy0OEO1fQ9WkJ1Cor6hPENn2qwQpE9TAzl-fYfJy0EUv_c91Drk7lhD5peEPUKc-5goxg5zWSv2OfgztFnTzPQrCM/s1600/portfolio.png" alt="portfolio" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-FZeYy3qh7No12NTeYBgwFvUFG1Kjv2cnyLugi8Rgyufb6eImwbIanX7M-CgZOHg68zzTlr3Qvklnhg_ps7p46j7pmEx12XD9FSeQEY_Thqc5jQ2L_ILxyLE4KcDSLuJvsuULtZIcfos/s1600/music.png" alt="music" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgs32XLq-Xy2GSIw74vpEpE_G7Ga4i4Dovjx6x8dMH_b3O3H4HIAv4W4uzbpAJnMWE_GjxsMMqsa-JJgQrILzoM8koJ7phfh6Dzg30cCnXm2bplMLstsqH1EN40U9FUPb5KxZwEJ1Cq0/s1600/video.png" alt="video" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_c7mZQP7fYwq7Zj2tViXUyZb2T7lG2RbUiXkIDUUvmIelrtvWy0GK_IzRwqnKk7i968lRDtnwoog5_1_dWt0T5ENdSjoxVt4vXs-TMQ-QS54kwfOOsxU9SXNRTVwwI4H1_ZaAvy3FhE/s1600/history.png" alt="history" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsroPaTAdtpsGrcOIOo4oG89zfLkBlMF4wPv67O9Sq_RA8ydOdSMDCxHsHxGuDNnd9sNOCcN5mP57WdGr9DjOLx_jIILCfKd8rFe2-_cPTj6eLMYFotKsINg6ZdYNMrtlRmAHsKdsS-k/s1600/calendar.png" alt="calendar" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj597KXEP7471CSmc2YcfNxVbFQWaA2XbEBmVuDjE5N8-vXta2y2CdQMMX5nDoQVYq4NdtVEifqLx-qI5bEt_CJ_0nKf2BgzhJIHkEFrH1MR7ziKfrRbhXsmWKsNNHmxa5gbdjJ0rLSOWc/s1600/rss.png" alt="rss" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtpNs1FL67kwtDEByzTU2pOamN_xW-Q2sNrK-WB_rOQ_M98JBhZAykUE2NVNU7vnhIX4iQ7PHuqxbQZGVkHG-UOFzyGbTsMwbf1adUojRscVtbleX56rIqAHikuCHJUgLULSuAUKQXH7Q/s1600/rss2.png" alt="rss" /></a>
  </div>
</div>

 NB : Tanda Pagar Biru "#" silahkan ganti dengan Link sesuka mu !
Script by Blogger Base