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 hereInspired by
http://webdesignerlab.com/templates/coming-soon/index.htmlHappy jquery \m/
Kalau yg satu ini tidak tahu juga cara kerjanya, tapi gaya juga ;))
<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>
<style>
#options{position:absolute;left:-3px;top:75px;float: left;background:#f3f2f2;width:160px;height:230px;z-index:1;display:none}#options_button{position:absolute;left:-3px;top:75px;width:30px;height:30px;background:#f3f2f2;background-image:url(http://webdesignerlab.com/templates/coming-soon/images/options.png);background-repeat:no-repeat;background-position:center;z-index:1;cursor: pointer}.rounded{border-radius:5px}h2,h3{font-family:Arial,Helvetica,sans-serif;margin:5px 3px;font-size:14px;font-weight:bold;text-align:center}#texture_options,#color_options{padding:0 15px;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:#888}#color3{background-color:#c56f23}#color4{background-color:#28923a}#color5{background-color:#a54ece}#color6{background-color:#ce1e1e}
</style>
<div id="options" class="rounded"><h2>OPTIONS PANEL</h2><div id="texture_options"><h3>Textures</h3><img src="http://webdesignerlab.com/templates/coming-soon/images/pattern1.png" alt=" "><img src="http://webdesignerlab.com/templates/coming-soon/images/pattern2.png" alt=" "><img src="http://webdesignerlab.com/templates/coming-soon/images/pattern3.png" alt=" "><img src="http://webdesignerlab.com/templates/coming-soon/images/pattern4.png" alt=" "><img src="http://webdesignerlab.com/templates/coming-soon/images/pattern5.png" alt=" "><img src="http://webdesignerlab.com/templates/coming-soon/images/pattern6.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>