Widget libellé avec barre de recherche integrée

By
Advertisement

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 ?


6 commentaires:

  1. Hello Rodney

    Donc oui, moi je suis preneuse. J'aime beaucoup.

    J'ai essayé sur mes deux blogs et j'ai eu le même message d'erreur à chaque fois:

    "Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
    Message d'erreur XML : Element type "input" must be followed by either attribute specifications, ">" or "/>"."

    Dommage...

    @+, Isa

    RépondreSupprimer
  2. @ Zaius et Gizmo : Essaie ceci, tu télécharge l'intgralité de ton modèle. Tu intégre les modifications en ouvrant le fichier xml sous wordpad ou notepad. Puis tu réenregistre le fichier sous format xml.

    Puis tu revient, tu télécharge le fichier xml sous ton compte (parcourir puis télécharger).

    Espérons que ça marche.

    RépondreSupprimer
  3. Même problème pour moi.
    Re-dommage...

    RépondreSupprimer
  4. Idéalement il faudrait que le moteur de recherche soit un google adsense ainsi cela rapporte

    RépondreSupprimer
  5. Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
    Message d'erreur XML : The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section.

    RépondreSupprimer
  6. MEME PROBLEME C A CAUSE DE TEMPLATA ET LA CREATION DES TEMPLATE PEUT MANQUE KELKE OBJET

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT