Crazy Mac Dock Menu Hack For Your Blog

Contributor: ေမွာ္ဆရာ

Mac crazy ေတြေရာ၊ crazy မဟုတ္သူေတြေရာ Mac လို႔ဆိုလိုက္တာနဲ႔ The Most Advance OS on the Whole World ဆိုတာကို သိၿပီးျဖစ္ၾကပါလိမ့္မယ္။ လွပေသသပ္ၿပီး၊ ဆြဲေဆာင္မႈအျပည့္ရွိတဲ့ GUI (Graphical User Interface) စနစ္၊ လံုၿခံဳမႈအျပည့္နဲ႔ စြမ္းေဆာင္ရည္ျမင့္မားတဲ့ လုပ္ေဆာင္မႈစနစ္ေတြဟာ စားသံုးသူေတြ အတြက္ေတာ့ Mac ကို လံုး၀လက္မလႊတ္ႏိုင္ေအာင္ ဖမ္းစားထားတဲ့ အခ်က္ေတြပါပဲ။

Mac User ေတြအတြက္ကေတာ့ အကၽြမ္းတ၀င္ျဖစ္ၿပီးသားမို႔ ထပ္ရွင္းစရာ မလိုေလာက္ေတာ့ပါဘူး။ Mac နဲ႔အကၽြမ္းတ၀င္မျဖစ္သူေတြ အတြက္ Mac Dock ဆိုတာဘာလဲ ဆိုတာအနည္းငယ္ ရွင္းဖို႔လိုပါလိမ့္မယ္။ တစ္ကယ္ေတာ့ Mac Dock ဆိုတာ ကၽြန္ေတာ္တို႔ Window ေတြမွာ သံုးသကဲ့သို႔ Application မ်ားကို အလြယ္တစ္ကူ အသံုးျပဳႏိုင္ရန္ Short Cut Icons (My Computer,My Document. အစရွိသည္) မ်ားကို Mac OS ရဲ့ လွပေသသပ္တဲ့ GUI စနစ္မွာ Menu Bar(Iconbar) တစ္ခုအျဖစ္ ေပ်ာ့ေပ်ာင္းစြာ ေပါင္းစည္းထားတဲ့ Mac OS ရဲ့ Desktop Iconbar တစ္ခုပါပဲ။

Mac Dock Menu တစ္ခုကို ဘေလာ့ဂ္မွာ ဘယ္လို အသံုးၿပဳထားသလဲဆိုတာ [ဒီေနရာ] မွာ သြားေရာက္ေလ့လာ ၾကည့္ရႈႏိုင္ပါခင္ဗ်ာ။

ကဲ. ေျပာေနၾကာပါတယ္ဗ်ာ။ လက္ေတြ႔အေနနဲ႔ အခု ေစ်းႀကီးလွတဲ့ Mac ကို ခင္ဗ်ား၀ယ္သံုးစရာ မလိုပါဘူး။ ခပ္မိုက္မိုက္ Mac Dock ေလးတစ္ခု ခင္ဗ်ား ဘေလာ့ဂ္ထဲကို ေရာက္ရွိလာဖို႔ ဒီပို႔စ္ေလးကို ဖတ္လိုက္ဖို႔ပဲ လိုပါတယ္။

စမယ္ဗ်ိဳ႔။ ပထမဆံုးလုပ္ရမွာက ဒီေအာက္က CSS ကုဒ္ေတြကို ]]></b:skin> မတိုင္ခင္ Footer CSS ကုဒ္ရဲ့ ေအာက္မွာ ဆက္ထည့္ေပးပါ။ ဒီ CSS ကုဒ္ေတြက Mac Dock Menu ကို ဘေလာ့ဂ္ ေအာက္ေျခမွာ ေပၚေစမွာျဖစ္ၿပီး အေပၚမွာ ထားလိုသူေတြ အတြက္ကေတာ့ ေအာက္မွာ ဆက္ျပထားတဲ့ ကုဒ္ေတြကိုအသံုးျပဳေပးရပါမယ္။

အဆင့္(၁)

CSS Codes For Mac Dock Menu - For Those Who Want to Use at The Bottom

/* dock2 - bottom */

#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: #FFFFFF;
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px "Zawgyi-One",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%;
}


CSS Codes For Mac Dock Menu - For Those Who Want to Use at The Top

/* dock - top */

.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: #FFFFFF;
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px "Zawgyi-One",Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}

အဆင့္(၂)

ဒီအဆင့္ၿပီးၿပီဆိုတာနဲ႔ ေအာက္က Java Script ကုဒ္ေတြကို ]]></b:skin> ႏွင့္ </head> ၾကားမွာ ထည့္ေပးပါ။ ထံုးစံအတိုင္း Top အတြက္ နဲ႔ Bottom အတြက္ ကုဒ္ (၂) မ်ိဳးခြဲေပးထားပါတယ္။

Java Script For Mac Dock Menu - For Those Who Want to Use at The Bottom

<script type="text/javascript" src="http://myanmarne0.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://myanmarne0.googlepages.com/interface.js"></script>

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(http://myanmarne0.googlepages.com/iepngfix.htc) }
</style>
<![endif]-->

<!--dock menu JS options -->
<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>


Java Script For Mac Dock Menu - For Those Who Want to Use at The Top

<script type="text/javascript" src="http://myanmarne0.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://myanmarne0.googlepages.com/interface.js"></script>

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(http://myanmarne0.googlepages.com/iepngfix.htc) }
</style>
<![endif]-->

<!--dock menu JS options -->

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

ဒီအဆင့္မွာ သံုးထားတဲ့ .js ႏွင့္ iepngfix.htc ဖိုင္(၂) ခုကို Bandwidth ကုန္သြားတဲ့အခါမ်ိဳးမွာ ပံုမွန္အလုပ္မလုပ္မႈ ျဖစ္ျခင္းမွ ကာကြယ္ရန္အတြက္ မိမိကိုယ္ပိုင္ Fileden | Ripway | Google Pages အစရွိတဲ့ Hosting တစ္ခုခုမွာ ျပန္တင္ၿပီး အသံုးျပဳသင့္ပါတယ္။


အဆင့္(၃)

ေနာက္ဆံုးအဆင့္အေနနဲ႔ Dock Menu ကို Bottom မွာ ထည့္လိုသူမ်ားအတြက္ ဒီကုဒ္ေလးကို ေတြ႔ေအာင္ရွာပါ(Ctrl+F အကူအညီျဖင့္)။

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ဒီေနရာမွာ ေအာက္က ျပထားတဲ့ ကုဒ္ေတြ ထည့္ရပါမယ္။

</div></div> <!-- end outer-wrapper -->


For Those Who Want to Use at The Bottom (HTML Codes for Mac Dock Menu)

<!--bottom dock -->

<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#"><span>Home</span><img src="http://myanmarne0.googlepages.com/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><span>Contact</span><img src="http://myanmarne0.googlepages.com/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><span>Portfolio</span><img src="http://myanmarne0.googlepages.com/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><span>Music</span><img src="http://myanmarne0.googlepages.com/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><span>Video</span><img src="http://myanmarne0.googlepages.com/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><span>History</span><img src="http://myanmarne0.googlepages.com/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><span>Calendar</span><img src="http://myanmarne0.googlepages.com/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><span>Links</span><img src="http://myanmarne0.googlepages.com/link.png" alt="links" /></a>
<a class="dock-item2" href="#"><span>RSS</span><img src="http://myanmarne0.googlepages.com/rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><span>RSS2</span><img src="http://myanmarne0.googlepages.com/rss2.png" alt="rss" /></a>
</div>
</div>



Mac Dock Menu ကို ဘေလာ့ဂ္ရဲ့ အေပၚမွာ Navigation Bar သဖြယ္ အသံုးျပဳလိုသူေတြအတြက္ကေတာ့ ဒီကုဒ္ေလးေတြကို ေျပာင္းလဲရွာေဖြဖို႔လိုပါမယ္။

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='More Blogging (Header)' type='Header'/>
</b:section>
</div>

ဒီေနရာမွာ ေအာက္က ျပထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးပါ။

<div id='content-wrapper'>


For Those Who Want to Use at The Top (HTML Codes for Mac Dock Menu)

<!--top dock -->

<div class="dock" id="dock">
<div class="dock-container">

<a class="dock-item2" href="#"><span>Home</span><img src="http://myanmarne0.googlepages.com/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><span>Contact</span><img src="http://myanmarne0.googlepages.com/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><span>Portfolio</span><img src="http://myanmarne0.googlepages.com/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><span>Music</span><img src="http://myanmarne0.googlepages.com/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><span>Video</span><img src="http://myanmarne0.googlepages.com/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><span>History</span><img src="http://myanmarne0.googlepages.com/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><span>Calendar</span><img src="http://myanmarne0.googlepages.com/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><span>RSS</span><img src="http://myanmarne0.googlepages.com/rss.png" alt="rss" /></a>

</div>
</div>


ဒီအဆင့္မွာ မွတ္သားစရာ (၂) ခုရွိပါတယ္။

(က) သံုးထားတဲ့ ပံုအားလံုးဟာ ကၽြန္ေတာ့္ရဲ့ Google Pages စာမ်က္ႏွာမွာ တင္ထားတာျဖစ္တဲ့ အတြက္အကယ္၍ ဒီ Hack ကိုအသံုးျပဳသူမ်ားလာခဲ့ရင္ ပံုေတြရဲ့ Bandwidth ကုန္တဲ့အခ်ိန္ မိမိစာမ်က္ႏွာမွာ ပံုမေပၚတာေတြ၊ ပံုမွန္အလုပ္မလုပ္တာေတြ ျဖစ္ႏိုင္ပါတယ္။ အဲဒီအတြက္ အေကာင္းဆံုးကေတာ့ ပံုအားလံုးကို ေဒါင္းလုဒ္လုပ္ၿပီး မိမိကိုယ္ပိုင္ Google Pages မွာျဖစ္ျဖစ္၊ အျခား Image Hosting မ်ားမွာျဖစ္ေစျပန္တင္ၿပီး အသံုးျပဳသင့္ပါတယ္။

(ခ) မိမိကိုယ္ပိုင္ အျခား Icon Design မ်ားေျပာင္းလဲ အသံုးျပဳလိုတယ္ဆိုရင္ေတာ့ ေအာက္ပါဆိုဒ္ေတြမွာ သြားေရာက္ရွာေဖြ ေဒါင္းလုဒ္ လုပ္ၿပီး အစားထိုးအသံုးျပဳႏိုင္ပါတယ္။

http://www.crystalxp.net/galerie/en.cat.1.html
http://www.vistaicons.com/
http://www.iconarchive.com/
http://interfacelift.com/icons-mac/faq.php

(ဂ)ေနာက္တစ္ခုကေတာ့[href="#"] ဆိုတဲ့ ကုဒ္ရဲ့ [#] ေနရာမွာ မိမိထည့္လိုတဲ့ လင့္ခ္ တစ္ခုစီထည့္ေပးရပါမယ္။ Home,Contact အစရွိတာေတြကို မိမိစိတ္ႀကိဳက္ အမည္ေပး၊ ေရွ႔ေနာက္ ေနရာေျပာင္းေရြ႔လို႔ရပါတယ္။

အားလံုးပဲ အဆင္ေျပၾကလိမ့္မယ္လို႔ ထင္ပါတယ္။ အဆင္မေျပမႈတစ္ခုခုရွိခဲ့ရင္ ဒါမမဟုတ္ ပိုမိုေကာင္းမြန္တဲ့ အႀကံအစည္ေလးမ်ား ရွိခဲ့ရင္လည္း မွတ္ခ်က္မွာ လြတ္လြတ္လပ္လပ္ ၀င္ေရာက္ေဆြးေႏြး၊ အႀကံေပး ေရးသားႏိုင္ပါေၾကာင္း။

Sources: SmashingMagazine

Technorati Tags: Blogger Hacks | Mac Dock | Mac dock menu | Mac dock menu for blog | Mac dock menu hack | Mac dock menu hack for blog | Mac style menubar | Mac style menubar for blog | Mac style menu bar hack | crazy mac dock | crazy mac dock hack | crazy mac dock hack for blog | blogging hacks | blogger hackz