Pasang Dock Navigasi ala MAC With CSS (NO Javascript)

Kali saya akan mencoba share mengenai cara membuat dock dengan CSS, no Javascript jadi ga akan buat size tambah besar.
Sebetulnya saya sudah agak lama mengetahui cara ini tapi saya tahan sharenya agar satu - satu keluarnya :D

A: Apa itu Dock ? Maksudnya membuat dermaga di blog mang bisa ???
B: bukan itu, maksud disini, dock yaitu susunan icon - icon yang disusun sedemikian rupa agar dimaksudkan mempercantik sebuah tampilan, tahu kan icon yang sejajar yang biasanya berada diatas atau bawah ? kalo
ga tahu lihat gambar di bawah ini :


A : Oh tahu tapi kan itu bukannya ada di desktop linux atau Mac ?
B : Makannya saya coba share cara ini ke kamu agar tahu cara buatnya
A : Siap master !
B : Jangan panggil saya master pengetahuan saya masih sempit *malu

Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian bawah.
Baiklah jika sobat tertarik memasangnya diblog sobat, silahkan ikuti tahap-tahap berikut :
1. Seperti biasa Login Ke Akun Blogger Anda
2. Lalu Pilih Rancangan ===> Tambah Gadget ===> HTML / Java Script
3. Lalu Copy & Paste Kode di bawah ini :

<style>ul#UTnavdocbwh{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieeg6LEf3ZPLvhsaxYvO98D9tfCH4v0oMf_Ur_ng6lySBi10QdWq3nCpzJ_KL9Q-RWOj1rKeQsEoS9ZvJR7X1Ufimv8S_SVMf2DcBD7ECA3xo7rGRFCew_jh4tRG6RjcAZzvgi-q7EwVvx/s1600/alas.png) bottom no-repeat;list-style:none;margin-left:310px;opacity:.6;position:fixed;bottom:1%;width:400px;z-index:9;-moz-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out}
ul#UTnavdocbwh:hover{opacity:.9}
ul#UTnavdocbwh li{width:60px;display:inline;float:left;border:0}
ul#UTnavdocbwh li a{background-position:center;background-repeat:no-repeat;background-size:40px 46px;display:block;float:left;margin-top:-2px;width:50px;height:25px;padding-top:40px;text-decoration:none;text-align:center;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;opacity:.7}
ul#UTnavdocbwh li a:hover{background-size:64px 64px;opacity:1}
ul#UTnavdocbwh .home a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInY4twxfrFL3ig-ul1W9IeOKBALWC1voLQpCVyt1z46VaitS_1HbCuWRwK0yN6-JOX8yixWLz_fJhKNBS-ZaMETpQemI6hbOyr6u6UPtJe48HUYkvuL7uTNehO9yg_8_l0My9BriQAaEk/s1600/home.png)}
ul#UTnavdocbwh .mail a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoI-Xtg7DNy8hgo9xyUIaZWXNUjCIwau3cIaJt9srRzIu9Ydedm_zDGF-68xRH2i-ErH3L0DT9GAZ-YczlUL7jItQEhUfPfYX5QdX6gwzEXYISZ5DGZ1HOk20ETqLZD7ni2GeGLsXn_cKR/s1600/mail.png)}
ul#UTnavdocbwh .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRH8genMbQEVDG_ZXv9d2EZ9NcFIksVOKjiOIu3p61fp5LiOV25JRYAjUgYH7lM_Ba_Pm86KAV-Y8NPLc3JjvJbsZyqDiHbxcL27td6BHVQTRU2uYkLeSoyQlWnYdonr72cYGO1xNU_Qk0/s1600/link.png)}
ul#UTnavdocbwh .history a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgW2cbOlfimbTGy3OtlHb5ihvSUuBML8rLsk1mMHCIox3BHqOypWh363Fnw-Tp55Ti0Yr2muKnisqr1SERgx_lTtgyqiEaBe_h3LZI4QHV2tGIxnITDysmxQSrUig5QGUDUhtM6lx02O0/s1600/history.png)}
ul#UTnavdocbwh .google-plus a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyvBnS-rsUpQpPrmwBivlgE6DdYpmxjdv09GAQjX0lCBGAqAcOCEgQzcqkIcn9ldwQtGgAx677SVOqPqKPMge4QmCnHcM7eBMgbM4PS3kuObL7RCccmxnvb1_vKKPJ3T4u7d3nWlFQpsZ/s1600/google-plus.png)}
ul#UTnavdocbwh .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihs04HJNY4TyB4-CthFcgT18jV3sYP7wAMQbsLJXZEnhgAUCCXPG_p9pyc8CyYLLx-hTWS9urwIE-bDooPCdUJWxWOsqXmyhyZ_8pFKty_d1mJvF6BbO0kCShIkzGdEZs_zyenCOrZav_A/s1600/rss.png)}
ul#UTnavdocbwh .rss a:hover{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdqP4TdFoab8PdKhs5S4dXekvcr8LQZQ-Ct8pt8gV9qpYd2XB04WaNzcHx9dsoot1-5GWpS8IRxSK7Vh6bU_7xoVQJ_2f7OX67Od_Kz3Z7bV-rnTXzwnx7mNhELIOyPjaAnaNgD_E2VHN/s1600/rss1.png)}</style>
<ul id="UTnavdocbwh">
<li class="home" title="Kembali ke halaman utama"><a href="http://ut2a-4down.blogspot.com"></a></li>
<li class="mail" title="Kirim E-mail kepada saya"><a href="mailto:uttamogmog@yahoo.co.id"></a></li>
<li class="link" title="Lihat Blog dengan tampilan magazine (Minimalis)"><a href="http://www.ut2a-4down.blogspot.com/view/sidebar"></a></li>
<li class="history" title="Lihat keseluruhan Artikel Blog"><a href="http://ta-movie87.blogspot.com/2012/07/index-all-movie-u-movie87.html"></a></li>
<li class="google-plus" title="Lihat Profil Google +"><a href="https://plus.google.com/112804133967399358173"></a></li>
<li class="rss" title="Langganan akaUTta dengan RSS Feeds"><a href="http://ut2a-4down.blogspot.com/feeds/posts/default"></a></li>
</ul>

5.Terakhir Save, dan Lihat hasilnya.

NB::
1 :
margin-left:310px : silahkan sobat rubah sesuaikan dengan lebar blog / site sobat, dengan hitungan 400px yaitu lebar docknya maka masukan margin-left:310px, karena 310px + 400px + 310px = 1020px (sesuai dengan lebar halaman blog saya sekarang). Contoh lain misal lebarnya 1000px maka margin-left:300px karena 300px + 400px + 300px, tenang saja hitungannya menggunakan matematika sederhana xD
2 :
Harap diperhatikan apabila sobat ingin merubah gambar iconnya pastikan ukurannya 64px x 64px agar seluruh icon menjadi selarah sehingga tampilan tidak berkurang
3 :
Lihat .home dengan class="home" atau .mail dengan class="mail" setiap elemen css dan html saling berhubungan satu sama lain jadi apabila sobat ingin merubah :
.google-plus menjadi .facebook maka rubah juga class="google-plus" menjadi class="facebook" agar script valid.
4 :
Untuk yang saya buat maksimal 6 icon dengan ukuran 40px x 46px, jadi apabila sobat menyalahi aturan nanti jadi berantakan, kecuali apabila sobat ingin mengembangkannya sendiri, tetapi saya ga tanggung jawab xD.

Please rate this article: