Widget libellé avec barre de recherche integrée

Quelqu'un voudrait-il avoir un widget libellé dans lequel est intégré une barre de recherche ?

Article sponsorisé par l'Espace des étudiants en médecine du blog du chalet et des chalistes et Blogixtra

L'un des avantages que l'on peut tirer de l'exploitation des modèles blogger récemment créer sont les fonctionnalités nouvelles qui y sont ajoutées. Je viens de mettre un nouveau modèle sur mon blog Café biblique (il me plaît bien). J'y ai remarqué une barre de recherche couplé d'un des libellés qui ne s'affichent pas simultanément. Il faut cliquer sur le titre Recherche ou Catégories pour afficher soit la listes de vos catégories soit le module de recherche. Par défaut, c'est le barre de recherche qui s'affiche en premier.

L'avantage de ce widget est qu'il permet d'économiser de la place. Surtout qu'un blog peut avoir plusieurs libellés qui s'ils sont constamment affichés prennent énormément de la place sur le blog. Avec ce plugin, les catégories sont cachés et affichés seulement si le lecteur clique sur le titre catégorie.

Pour ceux qui seraient intéresser par cette fonctionnalité, voici ce qu'il faut faire :

1. Se connecter à votre compte Blogger. Aller sur "Mise en page" puis sur "Modifier le code Html" et là cochez sur "Développer des modèles de gadget. Pour les étapes suivantes, après avoir mis le code de l'étape, enregistrez le modèle, puis passez à l'autre étape.

2. Mettre le code suivant après la balise <b:section id='sidebar' preferred='yes' showaddelement='yes'> (ou similaire) qui commence votre sidebar

<b:widget id='Label1' locked='true' title='Categories' type='Label'>
<b:includable id='main'>
<div class='tabber'>
<div class='tabbertab'>
<h2>Search</h2>
<div class='searchform'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<input class='s' name='q' onblur='if (this.value == '') {this.value = 'Chercher sur ce blog...';}' onfocus='if (this.value == 'Chercher sur ce blog...') {this.value = '';}' type='text' value='Chercher sur ce blog...'/>
<input alt='Submit button' class='button' src='http://i254.photobucket.com/albums/hh92/eblogtemplates/wppremium/button-submit.gif' type='image'/>
</form>
</div>
</div>

<div class='tabbertab'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<ul class='tablist'>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>

</div><!--Tabber end -->
</b:includable>
</b:widget>


3. Mettre le code css suivant avant la balise ]]></b:skin>


/* Tabber Style start -------------------- */

.tabberlive .tabbertabhide {
display:none;
}
.tabber {
}
.tabberlive {
margin:0 5px;
}
ul.tabbernav
{
margin:0;
padding: 3px 0;
font: bold 12px Arial, Helvetica, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
text-decoration: none;
}
/*---- tabbertab = the tab content---------------------*/
.tabberlive .tabbertab {
padding:5px;
}

ul.tabbernav li a {
background:#F4F3E8 none repeat scroll 0%;
border-bottom:medium none;
}
ul.tabbernav li a:link {
color:#B30000;
}
ul.tabbernav li a:hover {
background:#333333 none repeat scroll 0%;
color:#FFFFFF;
}
ul.tabbernav li.tabberactive a {
background-color:#D8D7CC;
border-bottom:1px solid #D8D7CC;
color:#30261E;
}
ul.tabbernav li.tabberactive a:hover {
background:white none repeat scroll 0%;
border-bottom:1px solid white;
color:#000000;
}
.tabberlive .tabbertab {
background:#D8D7CC none repeat scroll 0% 50%;
border-top:0pt none;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

ul.tablist {
color:#333333;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:5px 0px;
padding:0pt;
}

ul.tablist li {
border-bottom:1px dotted #959595;
font-size:11px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt 5px;
padding:2px 0pt 0pt 15px;
text-align:left;
}

ul.tablist li {
background:transparent url(http://i254.photobucket.com/albums/hh92/eblogtemplates/wppremium/bullet-arrow3.gif) no-repeat scroll 3px 8px;
border-bottom:1px dotted #959595;
color:#333333;
}
ul.tablist li a {
color:#333333;
}
ul.tablist li a:hover {
color:#B30000;
}

/*tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
.searchform {
padding: 10px;
}
.searchform .s {
font-family: Arial, Helvetica, Sans-Serif;
padding: 5px;
margin-right:5px;
width: 213px;
float: left;
background: #fff;
color: #333;
border:1px solid #443b34;
}
.searchform .button {
}

4. Mettre le code javascript suivant après la balise ]]></b:skin>

<script type='text/javascript'>
// <![CDATA[
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';

for (arg in argsObj) { this[arg] = argsObj[arg]; }

this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();

if (this.div) {

this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{
var
childNodes, /* child nodes of the tabber div */
i, i2, /* loop indices */
t, /* object to store info about a single tab */
defaultTab=0, /* which tab to select by default */
DOM_ul, /* tabbernav list */
DOM_li, /* tabbernav list item */
DOM_a, /* tabbernav link */
aId, /* A unique id for DOM_a */
headingElement; /* searching for text to use in the tab */

if (!document.getElementsByTagName) { return false; }

if (e.id) {
this.id = e.id;
}

this.tabs.length = 0;

childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {

if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {

t = new Object();
t.div = childNodes[i];

this.tabs[this.tabs.length] = t;

if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}

DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];
t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {

for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}

DOM_li = document.createElement("li");
t.li = DOM_li;
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;

if (this.addLinkId && this.linkIdFormat) {

aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

DOM_li.appendChild(DOM_a);
DOM_ul.appendChild(DOM_li);
}

e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);

if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{

var
rVal, /* Return value from the user onclick function */
a, /* element that triggered the onclick event */
self, /* the tabber object */
tabberIndex, /* index of the tab that triggered the event */
onClickArgs; /* args to send the onclick function */

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

a.blur();

if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);
return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i; /* counter */

for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

div = this.tabs[tabberIndex].div;

if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);

if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';

return this;
};

function tabberAutomatic(tabberArgs)
{
var
tempObj, /* Temporary tabber object */
divs, /* Array of all divs on the page */
i; /* Loop index */

if (!tabberArgs) { tabberArgs = {}; }

tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {

if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}

function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}
// ]]>
</script>

5. Enregistrez le modèle et allez voir le résultat.

Quelqu'un est-il preneur ?