?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Membuat Rocking Rolling Rounded Menu Dengan JQuery Dan CSS3

Rocking Rolling Rounded Menu dengan JQuery dan CSS3 adalah salah satu cara mepercantik menu navigasi pada blog kamu, dengan memasang jQuery ini maka akan mempermudah juga bagi para pengunjungmu untuk bisa memilih menu yang diinginkan. saya sendiri sebenarnya suka dengan menu ini,hanya saja setelah saya mengukur berat blog ini dan ternyata cukup gemuk, maka saya tidak memasang menu ini, sama halnya dengan membuat daftar isi dengan jQuery Accordion widget ini tidak membuatjadi lelet. nah bagi kamu yang ingin memasangnya saya persilahkan juga.

Rocking Rolling Rounded
Rocking Rolling Rounded Dengan JQuery Dan CSS3

Cara Pemasangan

Letakkan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Tapi jika dalam template kamu sudah terpasang script ini,maka kamu tinggalkan langkah ini

Kemudian letakkan juga kode dibawah ini tepat dibawah kode JQuery 1.3.2 tadi.

<script src='http://reader-hosting.googlecode.com/svn/trunk/rotate/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://reader-hosting.googlecode.com/svn/trunk/rotate/jquery-css-transform.js' type='text/javascript'/>

Kemudian Cari kode ]]></b:skin> dan letakkan kode diawah ini diatas kode ]]></b:skin>

#rocking-rolling {
width: auto;
height: 52px;
text-align: left;
font-family: "Trebuchet MS",sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form {
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin: 0 0 0 0;
pading: 0 0 0 0;
border: none;
background: transparent;
}

#rocking-rolling .item {
position: relative;
background-color: #f0f0f0;
float: right;
width: 52px;
margin: 0px 5px;
height: 52px;
border: 2px solid #ddd;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow: 1px 1px 3px #555;
-webkit-box-shadow: 1px 1px 3px #555;
box-shadow: 1px 1px 3px #555;
cursor: pointer;
overflow: hidden;
}

#rocking-rolling .link {
left: 2px;
top: 2px;
position: absolute;
width: 48px;
height: 48px;
}

#rocking-rolling .icon_home {
background: transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail {
background: transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}

#rocking-rolling .icon_help {
background: transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find {
background: transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos {
background: transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content {
position: absolute;
height: 52px;
width: 220px;
overflow: hidden;
left: 56px;
top: 7px;
background: transparent;
display: none;
}

#rocking-rolling .item_content h2 {
color: #aaa;
text-shadow: 1px 1px 1px #fff;
background-color: transparent;
font-size: 14px;
}

#rocking-rolling .item_content a {
background-color: transparent;
float: left;
margin-right: 7px;
margin-top: 3px;
color: #bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
font-size: 12px;
}

#rocking-rolling .item_content a:hover {
color: #0b965b;
}

#rocking-rolling .item_content p {
background-color: transparent;
text-transform: none;
font-weight: normal !important;
display: none;
}

#rocking-rolling .item_content p input {
border: 1px solid #ccc;
padding: 1px;
width: 155px;
float: left;
margin-right: 5px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan sesuai tempat menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'> Letakkan kode ini dibawah kode

<div id='header-wrapper'>

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>

<h2>KONTAK SAYA</h2>

<p>
<a href='#'>Email</a>

<a href='#'>Twitter</a>

<a href='#'>Facebook</a>

</p>
</div>
</div>
<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>

<h2>BANTUAN</h2>

<p>
<a href='#'>Buku Tamu</a>

<a href='#'>Lapor</a>

<a href='#'>Kritik dan Saran</a>

</p>
</div>
</div>
<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>

<h2>TELUSURI</h2>

<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'>
<input name='q' type='text' />
</form>
</p>
</div>
</div>
<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>

<h2>GALERI FOTO</h2>

<p>
<a href='#'>Kategori</a>

<a href='#'>Arsip</a>

<a href='#'>Daftar Isi</a>

</p>
</div>
</div>
<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>

<h2>MULAI DARI SINI</h2>

<p>
<a href='#'>Pelayanan</a>

<a href='#'>Portfolio</a>

<a href='#'>Pembayaran</a>

</p>
</div>
</div>
<div style='clear:both;'></div>
</div>
<script type='text/javascript'>
function collapse(a) {
var b = 1440;
var c = setInterval(function () {
if (b == 0) {
clearInterval(c);
return
}
b -= 40;
$('.link', a).stop().animate({
rotate: '+=40deg'
}, 0)
}, 10);
a.stop().animate({
width: '52px'
}, 1e3).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut()
}

function expand(a) {
var b = 0;
var c = setInterval(function () {
if (b == 1440) {
clearInterval(c);
return
}
b += 40;
$('.link', a).stop().animate({
rotate: '+=-40deg'
}, 0)
}, 10);
a.stop().animate({
width: '268px'
}, 1e3).find('.item_content').fadeIn(400, function () {
$(this).find('p').stop(true, true).fadeIn(600)
})
}
$('.item').hover(function () {
var a = $(this);
expand(a)
}, function () {
var a = $(this);
collapse(a)
})
</script>

Terakhir Simpan template kamu.

iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

Sejauh ini belum ada diskusi yang masuk. Mulailah berdiskusi dan temukan teman-teman barumu.

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!