Blog Mbahyar

Home » Posts filed under jQuery

Tampilkan postingan dengan label jQuery. Tampilkan semua postingan

Membuat Menu Tab View dengan JQuery

Cara Membuat Tab View dengan JQuery Efek Animasi Roll, ditambah sentuhan JQuery didalamnya. Misalnya Anda dapat melihat pada gambar di bawah:

tutorial blog Mbahyar

Bagaimana Masbro, keren kan tab tampilan widget? selain tabview juga bisa membuat blog Anda tampak rapi. Yowes, mari kita mulai untuk membuatnya.

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>

#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}

6. Setelah itu, cari kode </ head> setelah bertemu dan menempatkan kode javascript tepat di atas jQuery berikut:

<script language='javascript' src='http://mbahyar-tabblog.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&#39;#tabdua, #tabtiga&#39;).hide();

$(&quot;ul.slick li&quot;).click(function () {

$(&quot;.active&quot;).removeClass(&quot;active&quot;);

$(this).addClass(&quot;active&quot;);

$(&quot;.content-slick&quot;).slideUp();

var content_show = $(this).attr(&quot;title&quot;);

$(&quot;#&quot;+content_show).slideDown();

});

});

</script>

8. Simpan tempalate, dan bro masih jauh neh ... pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Kemudian pasang kode di bawah ini:

<ul class="slick">

<li title="tabsatu" class="slick active">Tab Satu Gan</li>

<li title="tabdua" class="slick active">Tab Dua Gan</li>

<li title="tabtiga" class="slick">Tab Tiga Gan</li>

</ul>

<div id="tabsatu" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Satu

</div>

<div id="tabdua" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Dua

</div>

<div id="tabtiga" class="content-slick">

Taruhlah kode HTML/Javascript anda di Tab Tiga

</div>

9. Sampai di sini Anda dapat membuat kulit jquery acara tab tampilan widget gulir. dan jangan lupa untuk menyimpan.

Keterangan:

Kode berani mengganti / isi dengan widget sobat inginkan.

dan untuk kode CSS, harap edit dan sesuaikan dengan template Anda. dan jika zoom ingin kasus blog saya, jangan lupa untuk memberikan komentar, saya akan membantu sebisa mungkin.

Dan lagi, jika Anda sudah ditemplate jquery-1.3.2.min.js? sarana untuk file.js 'tidak perlu ditambahkan lagi.

Itu mungkin Cara Membuat Tab View dengan JQuery Efek Animasi Roll, keberuntungan, mungkin berguna.

Membuat kwick Menu Navigasi Blog dengan jquery

3 comments

Kwick Blogger Navigation Menu dengan jQuery, mungkin itulah yang akan saya bahas kali ini. Setelah kemarin saya membahas juga untuk cara membuat Jquery Gulir Tampilkan Sembunyikan Tab View Widget, kita pergi lagi, dan masih sekitar JQuery. Ini juga merupakan reques dari beberapa blogger, yang diminta untuk membuat tutorial sebuah. Ok, masih penasaran jika teman saya bisa melihatnya di blog saya menu navigasi ini, atau dapat melihat gambar / sreenshot bawah.

tutorial blog Mbahyar

yang akan membuat blog terlihat lebih keren bro, karena dengan jQuery Sliding Navigation Menu.

Berikut adalah langkah-langkah untuk membuatnya:

1. Login ke blogger sobat

2. Masuk ke desain / Desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

6. Kemudian cari kode <head>, dan letakkan tepat di atas kode jQuery berikut:

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

Juga tambahkan kode script berikut di bawah ini:

<script type='text/javascript'>

$().ready(function() {

$(&#39;.kwicks&#39;).kwicks({

max : 205,

spacing : 5

});

});

</script>

7. Simpan template.

Nah untuk file.js ada ketika menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu lagi dipasang.

8. Selanjutnya masih terisak, pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Untuk cara berikutnya, rada rumit, ketika teman ditemplate halaman widget yang ada ke halaman ditas pos, teman saya hanya menambahkan kode berikut:

<div class='kwickswrap'>

<ul class='kwicks'>

<li id='kwick1'><a href='http://mbahyar.blogspot.com/' title='halaman utama'>Home</a></li>

<li id='kwick2'><a href='#' id='hide_top-klik'>Portfolio</a></li>

<li
 id='kwick3'><a 
href='https://plus.google.com/u/0/116762594657804062750/posts' 
title='about'>About</a></li>

<li id='kwick4'><a href='http://mbahyar.blogspot.com/search?max-results=200'>Portfolio</a></li>

<li
 id='kwick5'><a 
href='http://mbahyar.blogspot.com/user/viyan%20pradita' title='contact 
us'>Contact</a></li>

<li id='kwick6'><a href='http://code.google.com/p/k-blogger/' title='recomended links'>Resource</a></li>

</ul>

</div>

9. Simpan / Save. Sipppp, di sini sobat mampu membuat kwick blogger menu navigasi dengan jQuery.

Catatan:

Karena aku bisa membayangkan kwick'nya menu pelajaran-blog.blogspot.com, ada juga tutorial, tapi sedikit berbeda dari cara saya. Untuk Kode CSS silahkan sesuaikan sendiri ke blog Anda.

Nah, di atas adalah cara yang saya terapkan di blog saya dulu. Ketika teman punya masalah, teman bisa meminta melalui komentar di bawah ini.

Cara Membuat Widget Kode Warna Dengan Jquery (New Style)

1 comment

Kembali ke tips dan trik, kali ini akan membahas tentang Mbahyar Jquery Color Picker, yang justru cara membuat widget dengan kode warna JQuery (gaya baru). Sebenarnya setelah saya sudah membuat kode warna widget, sobat bisa melihat posting saya sebelumnya adalah Cara Membuat Kode Warna Dalam Blog Widget. Nah bedanya jika kode warna dengan JQuery Saya rasa ini adalah lebih sederhana dan tidak memakan terlalu banyak ruang, dan pandangan yang lebih ringan, keren dan menarik. Selain itu CSS dan kode JavaScript yang digunakan lebih sederhana. Yang tentunya tidak akan menambah beban loading blog Anda. Penasaran? Untuk menjadi kawan Demo'nya lihat pada gambar di bawah ini:

Kode Warna Demo Dengan Jquery

Langkah-langkah berikut membuat widget dengan kode warna Jquery:

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada keyboard Anda sob), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>

/* jQuery Color Picker: Farbtastic */
.farbtastic {
position: relative;
}
.farbtastic * {
position: absolute;
cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
width: 195px;
height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
top: 47px;
left: 47px;
width: 101px;
height: 101px;
}
.farbtastic .wheel {
background: url(http://i865.photobucket.com/albums/ab218/1rd3/wheel-kode-blogger.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(http://i865.photobucket.com/albums/ab218/1rd3/mask-kode-blogger.png) no-repeat;
}
.farbtastic .marker {
width: 17px;
height: 17px;
margin: -8px 0 0 -8px;
overflow: hidden;
background: url(http://i865.photobucket.com/albums/ab218/1rd3/marker-kode-blogger.png) no-repeat;
}

6. Lalu masukkan kode script berikut di atas </ head>

<script src='http://k-blogger.googlecode.com/files/jquery_color_picker.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/farbtastic.js' type='text/javascript'/>
<link href='farbtastic.css' rel='stylesheet' type='text/css'/>
<script charset='utf-8' type='text/javascript'>
$(document).ready(function() {
$('#demo').hide();
$('#picker').farbtastic('#color');
});

</script>

7. Jauhkan pertama. Dan lebih lanjut untuk menampilkan alat kode warna, sobat bisa menempatkan kode berikut dalam posting blog atau widget.

<div id="demo" style="color: red; font-size: 1.4em;">
jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>
<form action="" style="width: 400px;">
<div class="form-item">
<label for="color">Color:</label><input id="color" name="color" type="text" value="#123456" /></div>
<div id="picker">
</div>
</form>

8. Simpan dan lihat hasilnya.

Keterangan:

Silakan mengedit CSSnya bagian, untuk menyesuaikan tinggi dan lebar template blog Anda. Kode Widget Dengan Jquery Warna (New Style) dapat dimasukkan ke dalam pos dan teman saya di widget blog. Good luck,

Cara Membuat Link Nudging Dengan jQuery

2 comments

Cara Membuat Link Nudging Dengan jQuery. Sebenarnya ada banyak tips dan trik yang saya bookmark blogspot tapi saya belum punya waktu untuk berbagi di sini, jadi jika tips atau trik yang sudah usang, mohon mengerti, ya. Kali ini saya akan membahas tentang jQuery, tentu menarik untuk mengamati dan mempraktekkan sob, teman saya pasti sudah sering mendengar menyenggol atau link Gampangannya adalah link ketika kursor bergerak maka link tersebut akan bergeser kesamping kanan, juga bisa hover link yang bergerak.

Tertarik padanya? Berikut adalah langkah-langkahnya:

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: </ head> (gunakan Ctrl + F pada keyboard Anda sob), setelah bertemu untuk tetap menaruh kode berikut CSS tepat di atas </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'> </script> <script type='text/javascript'> var dur = 400; // Duration Of Animation in Milli Seconds $(document).ready(function() { $('a.linknudge').hover(function() { $(this).animate({ paddingLeft: '25px' }, dur); }, function() { $(this).animate({ paddingLeft: 0 }, dur); }); }); // end of Jquery Script </script>

6. Sekarang simpan template anda.

Penting:

Jika blog Anda tidak dalam file.js kode:

http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

Jadi sobat tidak perlu menginstal file.js.

7. Bagaimana untuk dimasukkan ke dalam link Anda hanya dapat menambahkan kode kelas "linknudge" untuk link sobat seperti contoh di bawah:

<a class='linknudge' href='http://mbahyar.blogspot.com/'> Mbahyar | Tutorial Blog | SEO Blog </ a>

8. Selesai!

Nah cara atau kode di atas adalah untuk menghubungkan kostum, dengan menambahkan kode kelas 'linknudge'.

Berikut ini adalah kode lain untuk label dan untuk link kustom sobat:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

Keterangan:

Untuk pemasangan kode yang sama seperti yang saya jelaskan di atas.

Sekian dari saya, yang menyenggol Cara Membuat Link Dengan jQuery, Semoga bermanfaat.

Blog Mbahyar

Membuat Menu Tab View dengan JQuery

Membuat kwick Menu Navigasi Blog dengan jquery

Cara Membuat Widget Kode Warna Dengan Jquery (New Style)

Cara Membuat Link Nudging Dengan jQuery

Arsip Blog

Category

Popular Posts