Website Ribbon

Menu

Lisez, Commentez, Notez, à VouS de JoUer !
Affichage des articles dont le libellé est GEEK. Afficher tous les articles
Affichage des articles dont le libellé est GEEK. Afficher tous les articles

jeudi 29 janvier 2009

Une barre de recherche intra-blog

Voici le code à intégrer en tant que gadget pour obtenir une barre de recherche (recherche à l'intérieur de son propre blog), comme celle que vous voyez sur la droite !

Enjoy Claire ! Et n'oubliez pas de retirer les espaces ...


L'URL de votre blog est à insérer à l'emplacement en gras :

< form method="get" action="http://blogsearch.google.com/blogsearch">< input type="text" name="as_q" size="31" maxlength="255" value="" />< input type="hidden" name="bl_url" value="http://votre adresse de BLOG ici/" />< input type="submit" name="btnG" value="Chercher dans mon blog" />< /form>

=)
Lire la suite...

jeudi 22 janvier 2009

Faire défiler un texte

Voici pour Claire, le code pour faire défiler un texte.

Vous pouvez l'insérer en tant que gadget comme sous la barre de menu, mais aussi dans le corps de texte de tout article (comme ci-dessus).


< marquee scrolldelay="100" onmouseover="this.stop();" onmouseout="this.start();"> le texte < /marquee>

Insérer le texte que vous souhaiter voir défiler à la place de "le texte" en gras dans le code.
Modifier la vitesse de défilement en changeant le nombre 100, en gras égalemment dans le code.



PS : encore une fois n'oubliez pas d'éliminer les espaces... merci !

=)
Lire la suite...

Des articles 5 étoiles

Anne a ta demande, voici comment ajouter des étoiles de notation à la fin des articles.

Pensez donc à noter celui-ci, ci-dessous !


LA METHODE (hyper compliquée):
1/ Aller sur le site OUTBRAIN, il suffit de suivre les instructions pour s'inscrire et c'est installé !



=)
Lire la suite...

Insérer "Lire la suite" pour raccourcir un article

Voici enfin le procédé pour afficher uniquement le début d'un article + "lire la suite", dédié à Claire et Greg en particulier.

Précision : pour ceux qui n'ont toujours pas lu le premier article de la rubrique GEEK, n'oubliez pas de retirer TOUS les espaces présents après les symboles "<", "&" et "=" dans TOUS les codes ci-après !


LA METHODE :
1/ Aller sur
Tableau de bord > Mise en page > Modifier le code html
Cocher "développer les modèles de gadgets".
Rechercher (Ctrl + F) les 2 lignes de code suivantes :
< div class='post-header-line-1'/>
< div class='post-body'>

3/ Coller juste après ces lignes le code suivant :
< b:if cond='data:blog.pageType == "item"'>
< style>.fullpost{display:inline;}< /style>
< p>< data:post.body/>< /p>
< b:else/>
< style>.fullpost{display:none;}< /style>

4/ Rechercher la ligne de code suivante (elle est juste en dessous de la manip précédente) :
< p>< data:post.body/>< /p>

5/ Coller juste après cette ligne le code suivant :
< a expr:href='data:post.url'>Lire la suite...< /a>
< /b:if>

6/ Enregistrez le modèle et c'est installé !
Ensuite lorsque vous rédigerez vos articles il faudra intercaler entre ces codes la partie du texte à cacher :
< span class="fullpost">
La partie du texte, image ou video à cacher !
< /span >



PS : petit conseil, au lieu de retaper à chaque fois les balises dans vos messages, enregistrez le code du point 6 en tant que modèle de message en allant sur
Paramètres > Mise en forme > (en bas) Modèle de message de blog.

PS²: pour les futures questions, non il n'est pas possible de sélectionner certains articles pour cette fonctionnalité. "Lire la suite" apparaîtra forcement dans tous vos articles !

=)
Lire la suite...

mercredi 14 janvier 2009

Poussière d'étoiles pour curseur

Claire qui a aimé se retrouver sur un nuage de rubriques, aimerait maintenant offrir un peu de poussière d'étoiles à sa souris.

Voici donc un peu de magie HTML pour vos blogs !


LA METHODE :
1/ Aller sur
Tableau de bord > Mise en page > Modifier le code html
Ne pas cocher "développer les modèles de gadgets".
Rechercher (Ctrl + F) la ligne de code suivante (elle est tout au début):
< head>

2/ Coller juste après cette ligne le code suivant :

< script type="text/javascript">
// < ![CDATA[
var colour="# ff00ff";
var sparkles= 50;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.co.uk/rv *
* DON'T EDIT BELOW THIS BOX *
* topcode adapté *
****************************/
var x= ox= 400;
var y= oy= 300;
var swide= 800;
var shigh= 600;
var sleft= sdown= 0;
var tiny= new Array();
var star= new Array();
var starv= new Array();
var starx= new Array();
var stary= new Array();
var tinyx= new Array();
var tinyy= new Array();
var tinyv= new Array();
window.onload= function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i= 0; i< sparkles; i++) {
var rats= createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]= rats);
starv[i]= 0;
tinyv[i]= 0;
var rats= createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef= createDiv(1, 5);
var rdow= createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]= rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!= ox || y!= oy) {
ox= x;
oy= y;
for (c= 0; c< sparkles; c++) if (!starv[c]) {
star[c].style.left= (starx[c]= x)+"px";
star[c].style.top= (stary[c]= y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]= 50;
break;
}
}
for (c= 0; c< sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]== 25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+= 1+Math.random()*3;
if (stary[i]< shigh+sdown) {
star[i].style.top= stary[i]+"px";
starx[i]+= (i%5-2)/5;
star[i].style.left= starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]= 0;
return;
}
}
else {
tinyv[i]= 50;
tiny[i].style.top= (tinyy[i]= stary[i])+"px";
tiny[i].style.left= (tinyx[i]= starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]== 25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+= 1+Math.random()*3;
if (tinyy[i]< shigh+sdown) {
tiny[i].style.top= tinyy[i]+"px";
tinyx[i]+= (i%5-2)/5;
tiny[i].style.left= tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]= 0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove= mouse;
function mouse(e) {
set_scroll();
y= (e)?e.pageY:event.y+sdown;
x= (e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown= self.pageYOffset;
sleft= self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown= document.body.scrollTop;
sleft= document.body.scrollLeft;
}
else if (document.documentElement & & (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft= document.documentElement.scrollLeft;
sdown= document.documentElement.scrollTop;
}
else {
sdown= 0;
sleft= 0;
}
}
window.onresize= set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide= self.innerWidth;
shigh= self.innerHeight;
}
else if (document.documentElement & & document.documentElement.clientWidth) {
swide= document.documentElement.clientWidth;
shigh= document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide= document.body.clientWidth;
shigh= document.body.clientHeight;
}
}
function createDiv(height, width) {
var div= document.createElement("div");
div.style.position="absolute";
div.style.height= height+"px";
div.style.width= width+"px";
div.style.overflow="hidden";
div.style.backgroundColor= colour;
return (div);
}
// ]]>
< /script>

3/ Pour modifier la couleur des étoiles, changer le code couleur (en gras, au début du code). Elles sont roses par défaut pour répondre à la demande de Claire.

4/ Enregistrez le modèle et c'est installé !



=)
Lire la suite...

Nuage de mots-clefs avec Blogumus

A la demande d'Anne, j'ai sélectionné le nuage de mots-clefs Blogumus développé par "Roy Tank" et adapté pour Blogger par "Amanda".

Plus esthétique que le nuage classique, intéractif et animé (sous forme de sphère).


LA METHODE :
1/ Les mots-clefs qu'il utilisera seront vos libellés, autrement dit vos tags. (Anne tu n'en as pas pour le moment, pense donc à les mettre à jour.)

2/ Aller sur
Tableau de bord > Mise en page > Modifier le code html
Ne pas cocher "développer les modèles de gadgets".
Rechercher (Ctrl + F) la ligne de code suivante :
< b:section class='sidebar' id='sidebar' preferred='yes'>

3/ Coller juste après cette ligne le code suivant (voir le point 4 avant de valider):

< b:widget id='Label99' locked='false' title='Labels' type='Label'>
< b:includable id='main'>
< b:if cond='data:title'>
< h2>< data:title/>< /h2>
< /b:if>
< div class='widget-content'>
& lt;object type="application/x-shockwave-flash" data= "http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="200" height="200" allowscriptaccess="always" & gt;
& lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /& gt;
& lt;param name="bgcolor" value="#ffffff" /& gt;
& lt;param name="flashvars" value="tcolor=0x000000& amp;mode=tags& amp;distr=true& amp;tspeed=100& amp;tagcloud=& lt;tags& gt;
< b:loop values='data:labels' var='label'>
< a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>< data:label.name/>< /a>
< /b:loop>
& lt;/tags& gt;" /& gt;
& lt;p& gt;Blogumulus par & lt;a href='http://www.roytanck.com/'& gt;Roy Tanck& lt;/a& gt; et & lt;a href='http://www.bloggerbuster.com'& gt;Amanda Fazani& lt;/a& gt;& lt;/p& gt;
& lt;/object& gt;
< /div>
< b:include name='quickedit'/>
< /b:includable>
< /b:widget>

4/ Modifiez selon vos goûts les codes mis en gras :
. largeur
. longueur
. couleur du fond
. couleur de la typo
. taille de la typo

5/ Enregistrez le modèle et c'est installé !
En allant sur
Mise en Page > Eléments de la page
le nuage Blogomus apparait comme nouveau gadget, vous pouvez le déplacer à votre guise et modifier son titre.



PS : un petit défaut se révèle parfois, il manque un des libellés, j'espère que vous faites partie des chanceux !

=)
Lire la suite...

Introduction GEEK avec Apple !

Premier article de la section GEEK, destinée à répondre à vos demandes de partage de codes !
N'hésitez donc pas à poster vos requêtes en commentaire sur cet article.

Une précision IMPORTANTE dès maintenant : pour que les codes fonctionnent correctement il faudra y retirer TOUS les espaces présents après les symboles "<", "&" et "=".

Et voici une petite vidéo virale dans l'esprit geek pour bien commencer :




Ce clip réalisé par Dennis Liu, vend aussi bien le son Again & Again du groupe The Bird and The Bee que la quarantaine d'applications Mac d'Apple.

Stratégie Apple déjà souvent exploitée : Pour l'iPod Nano avec Feist ou pour iTunes avec Coldplay, U2, Eminem, Mary J. Blige, Paul McCartney, Bob Dylan, etc... (en ne citant que les spots où les artistes eux-mêmes apparaissent).

Pour bien finir, terminons avec la version PC :



=)

Lire la suite...

lundi 15 décembre 2008

SudokuPoz




Le code :

< script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js">< /script>< script>if (WIDGETBOX) WIDGETBOX.renderWidget('95a7dab1-c285-4fa5-b240-9ed9bf949109');< /script>< noscript>Get the < a href="http://www.widgetbox.com/widget/sudoku-shanda5505">Sudoku< /a> widget and many other < a href="http://www.widgetbox.com/">great free widgets< /a> at < a href="http://www.widgetbox.com">Widgetbox< /a>!< /noscript>

Enjoy !
=)
Lire la suite...

SpaceInvadersPoz




Le code :

< script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js">< /script>< script>if (WIDGETBOX) WIDGETBOX.renderWidget('bf1ecc0f-019c-482f-8406-31870e7d3dd7');< /script>< noscript>Get the < a href="http://www.widgetbox.com/widget/space-invaders">Space Invaders< /a> widget and many other < a href="http://www.widgetbox.com/">great free widgets< /a> at < a href="http://www.widgetbox.com">Widgetbox< /a>!< /noscript>

Enjoy !
=)
Lire la suite...

SuperMarioBrossPoz




Le code :

< script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js">< /script>< script>if (WIDGETBOX) WIDGETBOX.renderWidget('c62e5466-d75a-4be8-8706-800ec3699e6d');< /script>< noscript>Get the < a href="http://www.widgetbox.com/widget/the-new-random-site-widget">Super Mario Bros (with Luigi)< /a> widget and many other < a href="http://www.widgetbox.com/">great free widgets< /a> at < a href="http://www.widgetbox.com">Widgetbox< /a>!< /noscript>

Enjoy !
=)
Lire la suite...

BubblesPoz




Le code :

< script src="http://widgetserver.com/syndication/subscriber/InsertWidget.js?appId= aa9fd9be-fcd7-4bc5-9f24-0dcad85583a9" type="text/javascript">< /script>< noscript>Get the < a href="http://www.widgetbox.com/widget/bubbles-game">Bubbles< /a> widget and many other great free widgets at < a href="http://www.widgetbox.com">Widgetbox< /a>!< /noscript>< img border="0" style="visibility:hidden;width:0px;height:0px;" width="0" src="http://runtime.widgetbox.com/syndication/track/aa9fd9be-fcd7-4bc5-9f24-0dcad85583a9.gif" height="0"/>

Enjoy !
=)
Lire la suite...

SnakePoz




Le code :

< embed pluginspage="http://www.adobe.com/go/getflashplayer" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" height="320" src="http://www.neave.com/games/get_game.php?swf=snake" width="360" name="neaveSnake">< /embed>< p>< a href="http://www.neave.com/games/">< /a>< /p>

Enjoy !
=)
Lire la suite...