Lagi banyak tugas nih bero xD maklum lah kelas 9 lagi sibuk Ujian praktek :)
Yaudah langsung ajah sekarang aku mau share navigation CSS dock menu di blog tau gk ? kalo gk tau liat di gambar di bawah ini !
Dock menu di blog
Yaudah langsung ajah sekarang aku mau share navigation CSS dock menu di blog tau gk ? kalo gk tau liat di gambar di bawah ini !
Hmm.. hampir sama kayak RocketDock di dekstop PC nih liat dekstop Laptopku !
oke bagi yang mau pasang di blogya silahkan ikuti tutornya !!
1. Login ke blogger, gk punya akunnya ? bikin dulu, males ? mending jangan pasang haha xD
2. Pergike Template > Edit HTML
3.
/* ---------------
Menu navigasi CSS Mac Dock top with jQuery
---------------------------------- */
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://lh6.googleusercontent.com/-yDiEKIe1uvE/TYk7YS7rnJI/AAAAAAAAAaM/gfG2vdjgTS4/s1600/dock-bg2.gif);
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 Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: relative;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(https://lh3.googleusercontent.com/-fmqNzHvyjbU/TYk7WUmoQaI/AAAAAAAAAaI/rhdjOhBd3pk/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%;
}
4.
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/interface.js"></script>
5. Satu lagi, sekarang simpan SEBELUM kode </body>
<!--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'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
6. Klik simpan Temlplate
Jika sudah, sekarang pergi ke Tata letak >> tambah Gadget >> HTML/JavaScript
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item2" href="#"><img src="https://lh5.googleusercontent.com/-Tzvk7gEQayM/TYk7hMbzrBI/AAAAAAAAAaY/AKv8REtJ2Bo/s1600/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><img src="https://lh4.googleusercontent.com/-RW1CNT_pjaY/TYk7bcwN9QI/AAAAAAAAAaQ/vS59D1M5euI/s1600/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><img src="https://lh4.googleusercontent.com/-wPaS5JWh1hM/TYk7pWPBenI/AAAAAAAAAao/B9yKqG2NaA0/s1600/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><img src="https://lh5.googleusercontent.com/-ZyW9SH0hcY0/TYk7n6DktqI/AAAAAAAAAak/T1B6jxb7Cgo/s1600/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><img src="https://lh6.googleusercontent.com/-uYoefPPwTQE/TYk7xytlqNI/AAAAAAAAAa0/ep3940GHq8c/s1600/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><img src="https://lh6.googleusercontent.com/-bwKSU_xFjIc/TYk7ewTZ9bI/AAAAAAAAAaU/yyOGMdInqfk/s1600/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><img src="https://lh3.googleusercontent.com/-cBGBsQkJ54I/TYk7UK9B-QI/AAAAAAAAAaE/qWc3jO0NVC8/s1600/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><img src="https://lh3.googleusercontent.com/-UovHAEdtbqA/TYk7rLHFe0I/AAAAAAAAAas/pjKjOKCE8Wk/s1600/rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><img src="https://lh5.googleusercontent.com/-igrXkJUyY_E/TYk7uSY6uRI/AAAAAAAAAaw/5VPf85w8vjE/s1600/rss2.png" alt="rss" /></a>
</div>
</div>
NB : Tanda Pagar Biru "#" silahkan ganti dengan Link sesuka mu !
Nah kalo yang warna biru itu Link gambar, mau di ganti atau gk juga Gpp !
kalo udah di edit-edit Klik SIMPAN, cek deh blogmu xD
yaudah segitu aja, semoga bermanfaat, mohon maaf kalo agak GJ maklum Niubi !! >.<
Tidak ada komentar:
Posting Komentar