Practice Makes Right,repetitions Make Perpect.

Tentang Blog Ini ×

B log Ini merupakan media saya untuk berbagi segala hal yang berhubungan tentang blogging meskipun masih sederhana,Mand4rt juga merupakan media saya dalam menuangkan hasil karya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca.

Aura Template

T emplate yang saya gunakan ini merupakan buatan saya sendiri, Banyak yang mengatakan bahwasanya DHE adalah template hasil cloningan secara utuh namun tidak demikian template ini saya susun dari sangat dasar dengan pemahaman yang sedikit awam dan otodidak dalam pembuatannya saya berusaha meniru tampilan beberapa template yang pernah dipakai oleh:

DTE :] web.id

Tentang Saya

S

alam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Provinsi Sulawesi Barat Dan Saya Bersekolah Di SMA Neg 1 Polewali.Nama saya Haekal Fikri akrab dipanggil Haekal. Saya Tidak Mempunyai Guru Saya Belajar Secara Otodidak Beserta Bantuan Dari Teman-teman blogger saya dan saya masih NEWBIE Jadi jika Saya Tidak Dapat Menjawab Pertanyaan Anda Tentang Seputar Blogging Harap Di Maklumi.
iklan
Bagikan kepada teman!

Membuat List Link Berjalan 3D With jQuery

Membuat List Link Berjalan 3D With jQuery


Selamat siang sob mumpung libur sehari ini saya sempatkan untuk mosting artikel lagi hehe,Kali ini saya mau share tutorial Membuat List Menu 3D With jQuery Yang saya dapat dari Web Luar negri hehe,Untuk Mengefisienkan waktu langsung saja ke TKP.
Contoh Bisa Lihat Langsung Dibawah Ini..!!(Sorry Agak Kacau :v)



Gimana?? jika sobat tertarik mencobanya, silahkan ikuti tahap-tahap berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan kode Berikut tepat diatasnya.

#list{

margin:0 auto;

height:600px;

width:600px;

overflow:hidden;

position:relative;

background-color:#111;

-moz-box-shadow:0px 10px 20px #000;

}

#list ul,

#list li{

list-style:none;

margin:0;

padding:0;

}

#list a{

position:absolute;

text-decoration:none;

color:#666;

text-shadow:0px 1px 2px #000;

}

#list a:hover{

color:cyan;

}

4. Kemudian cari kode </body> dan taruh kode berikut tepat di atasnya.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(document).ready(function(){

    var element = $('#list a');;

    var offset = 0;

    var stepping = 0.03;

    var list = $('#list');

    var $list = $(list)

    $list.mousemove(function(e){

        var topOfList = $list.eq(0).offset().top

        var listHeight = $list.height()

        stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;

    });

    for (var i = element.length - 1; i >= 0; i--)

    {

        element[i].elemAngle = i * Math.PI * 2 / element.length;

    }

    setInterval(render, 20);

    function render(){

        for (var i = element.length - 1; i >= 0; i--){

            var angle = element[i].elemAngle + offset;

            x = 120 + Math.sin(angle) * 30;

            y = 45 + Math.cos(angle) * 40;

            size = Math.round(40 - Math.sin(angle) * 40);

            var elementCenter = $(element[i]).width() / 2;

            var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"

            $(element[i]).css("fontSize", size + "pt");

            $(element[i]).css("opacity",size/100);

            $(element[i]).css("zIndex" ,size);

            $(element[i]).css("left" ,leftValue);

            $(element[i]).css("top", y + "%");

        }

        offset += stepping;

    }

});

</script>

KET::
Jika Sobat Sudah memasang script yg berwarna hijau diatas, mka, kode diatas tidak perlu lagi (biar gak double).

5. Dan untuk pemanggilan kodenya, sobat bisa memasukan kode berikut, di edit html atau di bawah <body> atau di kolom +gadged.


<div id="list">

<ul>

<li><a href="#">ajax</a></li>

<li><a href="#">css</a></li>

<li><a href="#">design</a></li>

<li><a href="#">firefox</a></li>

<li><a href="#">flash</a></li>

<li><a href="#">html</a></li>

<li><a href="#">jquery</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">SEO</a></li>

<li><a href="#">www</a></li>

<li><a href="#">web</a></li>

<li><a href="#">xhtml</a></li>

</ul>

</div>

iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Diposkan Oleh ❖
  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

26 Komentar

Anonim Permalink
wew keren mas,tp apa bkl memperberat loading blog mas ??
Permalink
hehe Thanks Mas,Mungkin Nggak Sih Saya Coba Loadingnya Nggak Lama Kok :D
Permalink
Wow, kayak team pocong :D

Oh ya mas emoticonnya gimana tuh? Keren abiss ...
Permalink
bila cursor di atas nya bisakah perputaran nya melambat mas
Permalink
bagus dach :D
Permalink
wah ane ngak jadi pertamax :p
- salam damai -
Permalink
Mantap mas.. jgn lupa kunjungan baliknya :)
Permalink
keren hasilx sob.., walaupun kayak agak berat :)
Permalink
Gilee!! Muter-muter mulu mas, bikin pusing .. :P
Permalink
mantap gan tutorialnya
Permalink
setiap penambahan CSS atau JS pasti tambah beban sob :D
Permalink
kalau boleh saran nie untuk mas Haekal fikri kata-kata seperti ini

Logo icon bulet menyerupai emoticon dengan border biru dan dalam keadaan Poker Face adalah hak cipta dari Haekal Fikri. Anda boleh memajangnya namun tidak boleh menggunakannya., logo tersebut saya kembangkan dengan kode dasar dari salah satu master blogger indonesia mas Taufik Karim saya ucapkan kasih kepada beliau,dan jika sobat menemukan logo icon bullet yang sama dengan blog ini maka itu adalah murni hasil cloningan dari source blog ini karena saya tidak membagikan scriptnya secara umum.

itu tidak sepatutnya dipajang pada disclaimer mas haekal karena beberapa waktu lalu mas haekal meminta izin kepada mas taufik karim untuk meminjam logo nya untuk digunakan dimandart begitu pun juga pada ehp kalau saya sih sah-sah saja mas meniru tampilan blog saya toh saya juga terinspirasi dari blog lain juga tapi untuk logo iconnya
mas taufik karim sudah mencantumkannya penjelasannya pada disclaimer opick blog karena beberapa blog termasuk mandart mempunyai kesan mirip dengan logonya sehingga opick blog mengganti kembali logo blognya tersebut tetapi tidak mengganti nama pencipta icon bullet seperti pada blog mas ini, takutnya ntar jadi salah paham antara mas haekal dengan mas taufik...
nanti malah seperti saya dengan om ivan mas saya hanya menyarankan saja supaya blogger indonesia tidak berantam lagi bila mas haekal tidak mengindahkannya juga tidak papa... terima kasih :)
Permalink
keren mas, muter2 ..
Permalink
icon bullet dengan ciri kaca mata bening mulut keadaan terdiam saya bikin selama 2 hari non stop (maklum itu cara belajar otodidak) alhamdulilah jadi sesuai harapan walau belum competible semua browser

Yang pastinya mas imron menulis komentar seperti itu dengan maksud yang sangat baik, jangan sampai pertengkaran antar blogger terulang kembali seperti yang pernah menimpa pada diri mas imron sendiri karena bagi mas imron kita ini semua bersaudara.

Mungkin mas haekal mempunyai rasa ke khawatiran yang tinggi terhadap kode logo tersebut di copy oleh orang lain, atas ijin pinjam logo tersebut terhadap pemilik tunggal logo. dalam hal ini pemilik kode tersebut yaitu Taufik Karim. walaupun pada awalnya ijin tersebut hanya PINJAM dan sampai sekarang masing terpasang, bagi saya tidak jadi masalah

buat mas Imron terima kasih atas simpati nya
buat mas haekal terima kasih sudah memakai kreasi dari opic blog
santai saja... no problem... cleared......
Permalink
iya mas :-d :-d
Permalink
Oh Gitu Ya Sob Hehe Maaf Saya Masih Newbie :D
Permalink
hehe ya gitu deh mas :D
Permalink
Pertama-tama Saya Ucapkan Atas Mas Imron Dan Mas Taufik,Ada Benarnya Juga Yang Mas Imron Katakan Tetapi Seperti Kita lihat kata-kata mas taufik ''Mungkin mas haekal mempunyai rasa ke khawatiran yang tinggi terhadap kode logo tersebut di copy oleh orang lain, atas ijin pinjam logo tersebut terhadap pemilik tunggal logo. dalam hal ini pemilik kode tersebut yaitu Taufik Karim. ''Jadi Itu Salah Satu Alasannya Saya Menulis kata'' tersebut dan buat mas taufik mohon maaf mas yang sebesar-besarnya karna jika saya masih menggunakan logo mas karna saya sedang sibuk sama urusan sekolah dan lain-lain :D
Permalink
hehe iya mas :D
Permalink
hehe thanks gan :-d
Permalink
hehe iya sob :D
Permalink
iya sob sama-sama :)
Permalink
oke sip mas :-d
Permalink
All @Thanks :D
Permalink
ini sih membuat pusing mas hehehe.. :)
Permalink
hehe iya mbak :D

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG ANDA </i>
Untuk menyisipkan gambar, gunakan tag <i rel="image"> URL GAMBAR </i>
Untuk menyisipkan Judul, gunakan tag <b rel="h3"> JUDUL ANDA DI SINI... </b>
Untuk menciptakan efek tebal gunakan tag <b> TEKS ANDA DI SINI... </b>
Untuk menciptakan efek huruf miring gunakan tag <i> TEKS ANDA DI SINI... </i>

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 kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
:):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya::p*Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

gobottom