Membuat dan Memasang Menu Mac Doc di Blog

Membuat dan Memasang Menu Mac Doc di Blog

Pernahkan kamu melihat tampilan blog yang cantik dengan hiasan berupa menu yang jika disorot akan membesar dengan efek transisi yang halus? 

Kalau pertanyaan itu diberikan pada saya maka saya jawab, iya, bahkan saya sangat tertarik ingin mencobanya. Menu tersebut lebih terkenal dengan istilah Mac Doc, karena mungkin ide awalnya mencontek menu-menu Doc dari tampilan OS Mac.

Kemudian, setelah cukup lama saya mempelajarinya akhirnya hari ini saya pasang juga hasil kreasi unik tersebut disalah satu blog saya. Namun di blog saya tersebut bukan menu-menu profil atau semacamnya yang saya pasang, menu yang saya pasang saya gunakan untuk menampilkan tombol-tombol jejaring sosial, sehingga bagi pengunjung yang ingin berinteraksi lebih lanjut dengan kita melalui jejaring-jejaring sosial tersebut dapat langsung klik melalui menu Doc tersebut.

a. Tampilannya:

Menu yang tersedia disini meliputi: Delicious, Digg, Facebook, Reddit, Technorati, Twitter, Google +, dan bonus untuk menu menuju halaman Kontak, dan juga RSS Feed. Kurang lebih tampilannya sebagai berikut:

Tampilan menu mac doc

b. Cara memasangnya:


Jika anda ingin memasangnya caranya sangat mudah, cukup Copy saja Script kode berikut ini, lalu masukkan ke widget blog anda. 


Memasukkan ke widget juga sangat mudah, dari halaman Design - Element Laman, lalu tambahkan Gadget, pilih HTML/Javascript. Pastekan script berikut didalamnya, lalu Save.


=====================================================


<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://wahyuwinoto.googlecode.com/files/tampilan.js"></script>
<style>
/* social media melayang */
.macsosial {
position:fixed;
top: 5px;
}
#dock2 {
width: 100%;
bottom: 0px;
left: 0px;
}
.dock-container2 {
height: 60px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJub9olk_Ygsm9XPApxzqts1rGvowLgbT7qjkyP6B6E9ldfJzPF-0mrF735jcE7HsKpf2x9nlOwXT9K0s-T86MKbiv9bJMqgiuOofKSDZKqF-kI0WpqBTpxhPDKaz9aKxgF5HKSZS7EM/s1600/quote.jpg);
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="ISI DENGAN URL ANDA">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgApkzCbzO6ByKsH9-n_U0KlMuopAcgiU1Xm-MgScmoc2J1kWOqZbDDWmbdkO42dcmB8JKgEezwVgHjQyssndmdpaLf5SjUzdojnYZGnSEtZPGo1TnJsyKBrOTS3Tw2YaQIqJUPh9pvlpA/s1600/delicious.png" alt="delicious" />Delicious</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwWFBjeAqaBh4wLRgZweCmIcr_0GVfuew21UeG-ODUat4xbiW2FakfiatztYkLdbPqJRQ4WE7C0BSQHNvBy2jntCqkzLUN0VdNOh8ktVOM6MJmCdUfsuALHqrD8LY_qCRP7Tj_vhn_jPU/s1600/Digg.png" alt="Digg" />Digg</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Apkn0QDA0Q7brt-BsixSjhCqUoDd2EAaBmrtMaqx93gkgNHSm5hW1IZflIa_9dvqve2OSYk99tmAtAwLuIU7Dksj5VMmnSmZbzooqVNfNTrZm36cTrTMAmQDn_HOm2umZWVap2B4XuU/s1600/facebook.png" alt="facebook" />Facebook</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_SWaUc5Of6iixZ0s4vKzmQ9Yt0BY8KUO6p2ACNNaKh66aaED7j4Ppodc0UAugmlPM0f-L0W3Wa2WaM15bsg-77Llijnd6eVN6YbAekiLsZIRSeqjHLy1oZDIZKBPwoqgEnOqDMHORio/s1600/reddit.png" alt="reddit" />Reddit</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXMps884bgdvcTuvNIrJdytzrD2JqYyqDKSAcUdrim-5S58eQIPOb213WMaTACkNL_MM4Pon4k3Jm6VK2KZ5NddYvoJE25KJUWaXpTS-o7-0wteKjbypNy8xIiXKgS17apNlblWlYQeA/s1600/Technorati.png" alt="Technorati" />Technorati</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguX6F1ZPhITGfPb7rIVLH0GkDY5zJuiHWuv-xEqEfHKY9Ejnu3PGYIhKbt6AaFeiuvDrCtTUYP1IpOmdlW6SqPK53Cn0RUHSXjTDjTTigtwFznmbFa68On9jNQnLPl4vuDRPWUuL-7ZEU/s1600/twitter.png" alt="twitter" />Twitter</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmafmr5H72x1jj3RtNYp62BfyE8Z2PkG3_yrYvAIrOdTkWzbELDPGqBrlUDKScixjCx5QDv1kKFTjsA_oiZm2icj4ixnPc8O2VcLHA_3g_hjK5AE4KjNrNMSSdikvtpo5PQ4Q9EZImi9s/s1600/googleplus.png" alt="googleplus" />Google +</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTegAj0ZWR8Xdf4AC8tJk5ZwpAXEaDQ4yTuoElYUifVeGQQYbMMUxG3TN-b4Eo46jT5QMUpVWYkdJKZf_PeaBeU5P45dTqa70HOZvkqj0H7HgsLttyi4DYZk2wE2-SCpeCRZeZLqiiNTU/s1600/email.png" alt="Email" />Kontak</a>
<a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqDl7SJARHKSNXtdUv9x0Sz-3LvuoQwqxME3f0dJm6ooiKGoAOZvJpuBqjnG0RuHDAdama0zgomqYRCICeVM3aufrYaKucb-pp8y96j2iCpcRsERhE8Cp0aiMuzRwRy6n1rm2smzXa58/s1600/rss2.png" alt="rss" />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: 'top',
halign : 'center'
}
)
}
);
</script>

=====================================================

semoga bermamfaat

Posting ini telah dilihat sebanyak (Beberapa kali)

Baca juga artikel lainya

Posted in: internet,SITE MAP