Trik Komputer: Change Color Fonts & Background Use jQuery

Masih ingat bagaimana cara membuat buku tamu serelek jebret alias hide show! Terus apakah sobat masih ingat dengan cara gimana membuat warna background berubah, dan bagaimana pula mengganti warna tulisan pada daerah postingan blog! Kesempatan sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi cara membuat itu semua tiga trick menjadi satu, mengganti background, merubah warna huruf post, dan ditampilkan dengan gaya show/hide.
Trik jQuery plugin tentu membutuhkan script jQuery :) Penjelasan singkat tentang penerapan seputar plugin menggunakan jQuery script ke dalam blog Simple Explanation of the jQuery Plugins. Kalau memang berminat memasang trick berikut, silahkan coba lihat dulu demonya yah (lihat pojok kiri atas) ;;)

Kode CSS

#options{
position: absolute;
left: -3px;
top: 50px;
float: left;
background: #f3f2f2;
width: 160px;
height: 245px;
z-index: 1;
display: none;
}
#options_button{
position: absolute;
left: -2px;
top: 50px;
width: 30px;
height: 30px;
background: #f3f2f2;
background-image: url(HTTP://GAMBAR-RESOLUSI-16 x 16px.PNG);
background-repeat: no-repeat;
background-position: center;
z-index: 1;
cursor: pointer;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
}
h2,h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
margin: 5px 10px;
font-size: 14px;
font-weight: bold;
}
#texture_options, #color_options{
padding: 0 16px;
overflow: auto;
}
.color, #texture_options img{
float: left;
width: 32px;
height: 24px;
margin: 3px;
border: 2px solid #cbcbcb;
cursor: pointer;
}
#color1{
background-color: #2eaaf9;
}
#color2{
background-color: #888888;
}
#color3{
background-color: #c56f23;
}
#color4{
background-color: #28923a;
}
#color5{
background-color: #a54ece;
}
#color6{
background-color: #ce1e1e;
}

Markup HTML

<div id="options" class="rounded">
<h2>OPTIONS PANEL</h2>
<div id="texture_options">

<h3>Textures</h3>

<img src="HTTP://GAMBAR-PATTERN 1-FORMAT.PNG" alt=" " />
<img src="HTTP://GAMBAR-PATTERN 2-FORMAT.PNG" alt=" " />
<img src="HTTP://GAMBAR-PATTERN 3-FORMAT.PNG" alt=" " />
<img src="HTTP://GAMBAR-PATTERN 4-FORMAT.PNG" alt=" " />
<img src="HTTP://GAMBAR-PATTERN 5-FORMAT.PNG" alt=" " />
<img src="HTTP://GAMBAR-PATTERN 6-FORMAT.PNG" alt=" " />
</div>

<div id="color_options">

<h3>Color Options</h3>

<div id="color1" class="color"></div>
<div id="color2" class="color"></div>
<div id="color3" class="color"></div>
<div id="color4" class="color" ></div>
<div id="color5" class="color"></div>
<div id="color6" class="color"></div>
</div>
</div>

<div id="options_button" class="rounded"></div>

Snippet jQuery Script

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('#options_button').click(function() {
         $('#options').slideToggle('slow');
  var width=$(this).css('left')
  if (width=='-3px')
         $(this).css('left', '150px');
  else $(this).css('left', '-3px');
});
$('#texture_options img').click(function () {
                var source='url('+$(this).attr('src')+')';
        $('body').css('background-image',source);                
});
 $('.color').click(function(){
  var color=$(this).css('background-color');
  $('#Blog1').css('color', color);
  $('.color_button').css('background-color', color);
});
});
//]]>
</script>

Plugin diatas sengaja Koben serasikan dengan tag Blog1 dimana hal itu merupakan unique ID postingan blogger ;) Jadi bila bukan blogger harus diganti kode itu ;))
Biar mudahnya begini saja, silahkan sobat buka halaman form add widget blogger! Masukan semua bumbu berikut

Click to expand here

Inspired by http://webdesignerlab.com/templates/coming-soon/index.html
Happy jquery \m/

Trik Komputer

Kamis, 09 Februari 2012

Change Color Fonts & Background Use jQuery

Kode CSS

Markup HTML

Snippet jQuery Script

Tidak ada komentar:

Posting Komentar