Keresés a blogban
Previous Pause Next

2010. március 21.

5 füles oldalsáv widget - 5 tabbed content widget by Bloganol

Bejegyezte: Wise Lady dátum: 3/21/2010

Az oldalsávomban található egy widget, amelyen fülek vannak, és a füleken különböző tartalom. Én ezzel alakítottam ki a profilom, sok információ kis helyen elfér. Ezt a widgetet ezen a helyen találtam:
http://www.bloganol.com/2008/03/5-tabbed-content-widget-for-blogger.html
Nincs más teendő vele, mint az oldalsávhoz kérni egy HTML/Javascript modult, belemásolni az alábbi kódot, és a pirossal jelzett részeken átírni a fülek feliratát, a kékkel jelzett részek helyére pedig bemásolni az egyes fülek tartalmát, ami bármi lehet, szöveg, HTML kód, kép, widget, linkek stb.
A widget 380 pixel széles.
Természetesen a fülekből törölhetünk, a színeket megváltoztathatjuk, a szélességet is csökkenthetjük. Ehhez CSS tudás szükséges.

<!– widget by Bloganol.blogspot.com –>
<script language=”JavaScript” type=”text/javascript”>
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById(‘tt’+i);
tr = document.getElementById(‘dd’+i);
ta = document.getElementById(‘aa’+i);
if(t==i){
if(t==1) ts.className=”Tab1″;
if(t==2) ts.className=”Tab2″;
if(t==3) ts.className=”Tab3″;
if(t==4) ts.className=”Tab4″;
if(t==5) ts.className=”Tab5″;
ta.className=”srchlinksel2″;
ts.style.borderBottom=”1px solid #FFFFFF”;
tr.style["display"]=”block”;
tr.style["visibility"]=”visible”;
}
else{
ts.className=”tb2″;
ta.className=”srchlink2″;
ts.style.borderBottom=”1px solid #B5D6EF”;
tr.style["display"]=”none”;
tr.style["visibility"]=”hidden”;
}
}
}
</script>

<!– CSS Begin //–>

<style type=”text/css”>.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#EEF5FB’,EndColorStr:’#D9E9F6′);BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#DEFFC6′,EndColorStr:’#B7E4A2′); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#EEF5FB’,EndColorStr:’#DEEFF7′); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#4A84AD’,EndColorStr:’#00426B’); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#FFFFFF’,EndColorStr:’#A5DEDE’); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#FEDFB3′,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #fedfb3
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#B39DFE’,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #b39dfe
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#F6FE9D’,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #f6fe9d
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#FEAF9D’,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #feaf9d
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:’#9DFEA5′,EndColorStr:’#FFFFFF’);
BACKGROUND-COLOR: #9dfea5
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>
<!– CSS End //–>
<!– Widget Code Ends Here –>

<!– widget by Bloganol.blogspot.com –>

<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td align=”middle” onclick=”st2(‘1′)” height=”22″ id=”tt1″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid” width=”70″
class=”Tab1″><a id=”aa1″
class=”srchlinksel2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB1 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘2′)” height=”22″ id=”tt2″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”47″
class=”tb2″><a id=”aa2″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB2 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘3′)” height=”22″ id=”tt3″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”62″
class=”tb2″><a id=”aa3″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB3 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘4′)” height=”22″ id=”tt4″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”48″
class=”tb2″><a id=”aa4″
class
=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB4 felirat
</b></font></a></td>
<td style=”BORDER-BOTTOM: #b5d6ef 1px solid” width=”2″>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”2″>
<tbody>
<tr>
<td width=”2″></td></tr></tbody></table></td>
<td align=”middle” onclick=”st2(‘5′)” height=”22″ id=”tt5″
style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid” width=”52″
class=”tb2″><a id=”aa5″
class=”srchlink2″ href=”javascript:undefined”><font
class=”f12″><b>
TAB5 felirat
</b></font></a></td></tr>
<tr>
<td colspan=”9″>
<div style=”BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px;
BORDER-BOTTOM: 0px”
><!– Main Headlines Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″ height=”5″>
<tbody>
<tr>
<td height=”5″></td></tr></tbody></table>
   <font color=”#797979″ class=”f10″
>
<!– wmlheadline begin –>
<!– TDate Begin –>
<!– Date Begin –>
Browse Items</font>
<!– Date End –>
<!– TDate End –>
<div id=”dd1″ style=”BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB1 tartalma
</font></td>
</tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table></div><!– Main
Headlines End //–></div>
<div id=”dd2″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– News Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB2 tartalma
</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– News End
//–></div>
<div id=”dd3″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Business Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB3 tartalma
</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– Business End
//–></div>
<div id=”dd4″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Movies Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB4 tartalma
</font></td>
</tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td height=”4″></td></tr></tbody></table><!– Movies End
//–></div>
<div id=”dd5″ style=”BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid”
><!– Sports Begin //–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″
width=”380″>
<tbody>
<tr>
<td width=”14″></td>
<td valign=”top”><font color=”#16387c” class=”f12n”>
TAB5 tartalma
</font></td></tr>
<tr>
<td colspan=”2″ align=”right”><font class=”f10″><b> Widget
by <a href=”http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html”
target=”_blank”>Bloganol</a></b>
  </font></td></tr>
<tr>
<td
height=”4″></td></tr></tbody></table>

<!– Widget Code Ends Here –>

Ha tetszett és segített neked ez a poszt, kérlek lájkold ezt az oldalunkat is:
LÁJKOLOM
Köszönöm. Wise Lady

Megosztás |

Címkék:

9 megjegyzés:

Juci írta... [Válasz erre...]

Szia!

Pont fordítva írtad, mint ahogy csináltad.

Piros színnel van a felirat, kékkel meg a tartalom.

De amúgy értelmes, köszi! :)

2010. március 21. 21:36
Wise Lady írta... [Válasz erre...]

Tényleg :D

2010. március 22. 7:41
playcaller írta... [Válasz erre...]

hasznos nagyon, köszönöm a tippet, bár pont a CSS tudásom nem túl komoly, de azért majd csak kisül belőle valami.

2010. március 22. 22:01
Nikoletti Petra - Lakberendező írta... [Válasz erre...]

Pont ilyet kerestem! Tudnál segíteni, légyszi? Hogy másoltál be képet? Köszönöm!

2010. június 21. 19:01
Wise Lady írta... [Válasz erre...]

Töltsd fel a Picasába a képet. Kattints rá. Ezután egérjobbgomb. Tulajdonságok, kattints rá.
Ott lesz a kép URL címe. Másold ki. Írj egy ilyen kódot arra a helyre, ahová tenni akarod. A width mögötti számmal megadhatod a szélességét, a height mögöttivel pedig a magasságát.
<img src="http://a-kep-URL-cime" width="100px" height="100px" />

2010. június 21. 19:51
Nikoletti Petra - Lakberendező írta... [Válasz erre...]

Ez gyors volt, köszönöm! :)

2010. június 21. 20:01
. írta... [Válasz erre...]

Tudnál segíteni? mindent úgy csináltam, ahogy leírtad mégsem lett olyan. széthúzta és semmi kis fülek meg egyebek nem jelentek emg

2012. május 24. 12:52
Wise Lady írta... [Válasz erre...]

@Szofi
Írd meg a blogod URL címét.

2012. május 24. 13:26
. írta... [Válasz erre...]

Már kitöröltem de beszúrtam még egyszer h lásd mi a bajom vele
http://edesitettelet.blogspot.com/

2012. május 24. 14:11

Megjegyzés küldése

Feliratkozás: Megjegyzések küldése (Atom)

Text Widget

Magyar nyelvű Blogger helpblog

-