™Galery™

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:

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/AVvXsEj8erik2VCTr_VyV6O55eleAzUylX9B298tNbaRXiF2npOiQfH6bsQmvNKdUqWbih2ZmbnRQ_HJsM3I21oYyBK9iNzgEk9EYe_NibLY6EdBX03-gAnRpebvWip2zcUlmmhXcVc2yGj1Hs0/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/AVvXsEjhzhN7AdpkiTRSOLUqxiDMkFyvMMTp48yIF8Cs64QH7n9IKsD_QkCPB3XbRvpGDYVV0HcL7lcPfQbAMDkQn2lSgVrAJespXkCyGS8m5yqfavNB7CqBggvDKminMwYkff4zZ5U-TrS8XFE/s1600/delicious.png" alt="delicious" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYBJs9jSG81RQzysqxyZEV0_29-OLXgDDdsCrowCFLdwGtvZuYfw_Hc3B2kWp5ISXzjgywKycq3VqbXUFQ9p7lYrxB_Cs9R-QwhL6wzRABXEfuWh7Xx11PlFTZ4G3wtQh093qswTR8NsM/s1600/Digg.png" alt="Digg" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjXt5pyRsHDkGaakYjb3OUTGQLqDxZZtbShtOKAAO9OAjPjCQwoUKC3qlRlBa9SKeg-T5torVYutVto7ijpPQ26_kPZ4fSQrRxMNJLcnCJtjb8-ZLWoh4qtQEQKzzoJjHnfh3-2evDiM/s1600/facebook.png" alt="facebook" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs8JjfBMf5xkEXblrAkX4YF5M2c0VtqYVJpwVjwoKTmgj0UIDvwtTw5vvidJ6-9NG2Z7RhODFprI66cegmFEIWcDya2BvxVgr9M0kDoGaoq-YMXPC_MqR9koY4Tp_wcvlaJrR7jDIcjOE/s1600/reddit.png" alt="reddit" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHCnrf0V0fDKSoVPwNapzyDf3a-9iQsT13ncpF4LPOQm1RcOeDlRohIK_YlGFkxbGBQS3HFLyrvjvd71sopRezVt_-IBOZCD6ROYNuhGdhVinTZKKfb5yTWp1rGt001PPdXQq8n8bQak/s1600/Technorati.png" alt="Technorati" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XBOAFD1cpunS_0kYYx_u9himaEueF0CYWp__CiOyfa0H_Z15CsMvBRRvb8J_PXhBgtLTfTOpUeUl990m8iaXcr0UoZ7A7sPWQg_8Sr8h_DrCvDcX2GA8QGefxr5KfKBoW6nKFpM0uhI/s1600/twitter.png" alt="twitter" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmrcSkfCkQPPMm9KTiA3kw6yyC9HxT3tGNPsAMWSVO3xFNKHhv7AA3K6dK6LTZ_YRNWMXomGcUxIwbxHbcMubWvaWyUdBlddn5fyPWtPe3_ifsJ4bcNiK2USijan-yGPIiP4AB68o9Vg/s1600/googleplus.png" alt="googleplus" /></a>
  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivE7hQszN2u3eDOyKWDgs6z3UrCLAMRLZG_4wc44rvQhxOr1JBoUnO6rR-WFe8V7HlP361XynA7VSsq-pZd5vellF06qJjydC03YTkhC1UK3IYLSm8FmBpWOM8AdTKdYg8Zq6JciJWui8/s1600/email.png" alt="Email" /></a>
  <a class="dock-item2" href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrii0DvDRr3PBzIm479kkl5YajmM_-NtFnx-cgLAfi8DZg9JOUfCVr8Q8-Nfyy_laassWj-CbIR__qSH3oUnL3CEQcnUBDoMQjgj97qKXwlF_WDDC0_hptquwgUzerjRpTMmYWEvdpy4M/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>

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