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 :
- Login blogger
- Rancangan, Elemen laman
- Tambah Gadget
- 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>
Keterangan:
- Jika script jQuerynya sudah ada, ttidak perlu lagi ditambahkan lagi.
5. Simpan Dan lihat hasilnya.
Selesai, mohon kritik dan sarannya jika ada sesuatu yang kurang untuk kemajuan kedepannya, Semoga bermanfaat.
Postingan kali ini merupakan request dari seorang pengunjung baru blog ini. Saya kira dari sekian pengunjung dan penanya yang pernah merequest tutorial, inilah satu penanya yang menurut saya punya cara yang unik mengajukan request. kenapa saya bilang unik?
