Simple Notice Board (jatuh ke bawah bila cursor menyentuh)

Dah hampir 2 minggu tak update blog, maklumlah baru habis cuti midsem.. Jadi takda masa nak update, sepenuh masa diperuntukkan bersama keluarga tercinta..^^,

Ok, bagi yang tak tahu apa yang dimaksudkan oleh tajuk entri ni,boleh tengok gambar di bawah. Sebelum dan selepas kursor dihalakan ke notice board... Kalau nak cuba halakan sendiri pun boleh, cuba halakan kursor awak ke notice board yang berada di sisi kanan blog.

Tutor kali ni request dari Puan Icha

1. Log in > Dashboad > Design > Edit Html > Tick Expand Widgets Template

2. Tekan Ctrl F serentak dan Cari kod ini : </head> atau </body>

3. Dah jumpa? Copy kod ini dibawah dan paste di atas kod </head> yang awak cari tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function() {
$(&quot;.tab_content&quot;).hide(); //Hide all content
$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab
$(&quot;.tab_content:first&quot;).show(); //Show first tab content
//On Click Event
$(&quot;ul.tabs li&quot;).click(function() {
$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class
$(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab
$(&quot;.tab_content&quot;).hide(); //Hide all tab content
var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});</script>

4. Lepas tu , tekan ctrl F serentak dan cari kod ini pulak : ]]></b:skin>

5. Dah jumpa? Alhamdulillah, kemudian copy kod ni dan paste di atas kod ]]></b:skin> tadi:

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 300px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 150px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 300px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

6. Preview dulu. Kalau tak ada ERROR, terus SAVE!

p/s : tujuan letak kod ni supaya nak elakkan notice board dari terbuka dengan sendiri.

7. Kemudian, kod untuk notice board : Dashboard > Design > Add Html > Html/Javascript

8. Copy , and paste kod bi bawah ini di ruangan html/javascript

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFB6D6;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">
<center>
Isi dalam tajuk 1</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Isi dalam tajuk 2
</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Isi dalam tajuk 3</div>
</div>

Nota kaki :

. Warna hijau : untuk tulisan Tab Manu

. Warna oren : untuk background Tab Menu

. Warna biru : untuk background isi tab menu

. Warna pink : tulis tajuk Tab (e.g : shoutbox,ping di sini, dll)

. Warna merah : paste kan kod awak. (e.g : kod shoutmix, kod about me, dll)

>> kod warna

9. Akhir sekali, jangan lupa tekan butang save. Semoga berjaya^^,
p/s : bagi memudahkan mengedit kod html, bleh cuba edit&preview di sini terlebih dahulu sebelum paste di add html >> real-time HTML editor

sumber : klik

Tweet