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 :
Salah satu dock dalam Mac OS
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/AVvXsEiTRaEqu0rjs5qPcW2MmfPgdmQN-9vH6KhY55mFwgMd4MJPV8Z-ndbWtFjIxA8F_u6ZiR61sSMXSiolZ_qQbqFepjsYsAn20MmHLJ-H0IaCw__UbgbvgXZzzI_5-lYxLz4SSFipotS8MYtz/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}5.Terakhir Save, dan Lihat hasilnya.
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/AVvXsEgG-M74MopbkIHj9rak66SLTziiAyuwKnuqm6xiAeUsNctWIEFc-QUE3kUoqpm3-vOnjlVMN9fTdFnWqnL8Uxj0mMGqt5fN8-ROtaxd5hpF05Uc_Jh0-bY7EH9ul-daG9mdGOOE9uPCEq6_/s1600/home.png)}
ul#UTnavdocbwh .mail a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORqr3dxOzJKn0Tr6RHqda9W2SxK8dtTzSLk6_iFUStLEf0MTsaIG7dap9f2_RRwYePYAENolOtjxSzmPYqS456A9bfVH1CSP4AobrJYiGwIfvZN4m8HKUgNPlR62cvfcSmcTc8hYxDA0Z/s1600/mail.png)}
ul#UTnavdocbwh .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUpmfxo_ZDfnZBGjH2f_6wyd9M4Ixb0y2ia4kjmBD9Z9X2d_depzJOZkKap8x9-NBO1ijg6KEgbUjl8U2fRDL-sIrjYJZgasUhJI1sYSGeu-O7cdR8qbhjEG815kZ21gwDw5YYx7L-6ib/s1600/link.png)}
ul#UTnavdocbwh .history a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS20zrxr3YT7OW_FKjVARASg6c_MWx1CI5U2OPlVvUQhQtvTCU960Ls3AIoqCqVTFKIPsUypnU3z0tSCPCFJPwlRfJCsWkDNjUvwIdScXSV-apx7mLJlajXfuRkuinG8Cxjxxk9xsz3OUN/s1600/history.png)}
ul#UTnavdocbwh .google-plus a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7718RfKDlt74eqBL45aDJlYFjECBtiICP8iW62N-Q-8JIi5xQo0O27QCkRW7uaV-lrzoQFX8gMdEHU9U8ZOR825bxPVwY-xEaiNQxTlJrh-VfXHHDmad3GQTVLnzip2eB058emloC49W/s1600/google-plus.png)}
ul#UTnavdocbwh .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE96t2CPIcNvwbn7ZFAnu_GVq51-5c-xJKWFdSWwG_fgW2hLegDdZ8SraIjt30TD1kBohhLu1eN0eDa_phSX_R_3iK6UlPl0MAjKcqY8RX36X3ktk8Vq3-rmK35LNI-SfEn5saQWM9vwdT/s1600/rss.png)}
ul#UTnavdocbwh .rss a:hover{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ZF1xW95JDh94MSTPY5jyBI-Hvt6Zg-BQsY0YalOk7G9s1fVDZa23dn-gqIqOzkoH2nviAZg5ntpel2Z2eughAxUjmNvBPt9kIIZVwLbJXyOid9ePzHhRRqw6ZOIaktZt6IHdKLnoCmB3/s1600/rss1.png)}</style>
<ul id="UTnavdocbwh">
<li class="home" title="Kembali ke halaman utama"><a href="http://ngawicybers.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.ngawicybers.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://ngawicybers.blogspot.com/feeds/posts/default"></a></li>
</ul>
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.
Posting Komentar