blogger test

Affichage des articles dont le libellé est widget. Afficher tous les articles

Home » Posts filed under widget

samedi 23 février 2013

Cool widget Facebook sur votre site

voila une widget Facebook pour installer sur votre site !
c'est une voiture qui apparaitre en bas du votre site et le travers du droit vers le gauche , si un visiture clique sur elle , il seras redirigé vers votre Page !
j'ai choisis ce example parce qu'il est simple a installer !
il suffit de copier/coller ce code dans le widget du votre blog :

<div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="http://outil-du-web.blogspot.com/" target="blank"> <abbr title="outil-du-web"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTtAF62ltAoSMgph9bG5Igum5QS8zp6nSyxYCwJ4QXnpd5Qljp0YBssQLwEVf39qTgAj7NylF5U-z38MKqSjLyt2-LSMnv6kt3ZrM0xiaFuM5-XslAMlmCj4_94Z6O1mwLMWNpDxVO6YV/s69/I1.png" /> </abbr> </a> </marquee> </div>

#remplacer le texte en rouge par votre titre et le texte en jaune par le lien de votre page. merci de commenter @++ :D

mercredi 15 août 2012

installer wibiya toolbar.

salut a tous de nv !! :D

J'ai un nouveaux gadget pour vos blogs !! c'est wibiya toolbar !!

voila un capture d'écran !

vous peuvez modifier les application en bas !!

1- accéder a wibiya .
2- finir l'inscription.
3- personaliser votre ToolBar.
4- ajouter a blogger .

@++ :D

voila une simple video pour vous aider !

dimanche 12 août 2012

Fenétre Pop-up Facebook LikeBox.

La fenétre pop-up facebook like box est des plus utuliser aujourd'hui dans les site webs. j'ai déja redériger un article de cette sujet !! voila : Facebook LikeBox JQuery avec minuterie.

1- Accéder a blogger.

2- Ajouter Gadget Html/Java script.

3- Coller le code suivant en remplacent nomutulisateur par le nom d'utulisateur de votre page facebook.

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTREGoag1N9xrctplJRNjYwEXsXRucWf_8Vh8xanyh5U4OZYlF9tQIX08_HJ4LrWRmzpKrgCCZH8t5mOpWNV49qQQt7jvDBX1yNwDWJ1CIj99C583IAYiGATX-jAHD0pfmyGJJnbRiY73/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuuYG7GwVq5vR5DylHLSJ3RPvVEdtTWbUdAjHwM88SLuqVgkpHByUU5YhXpSaBcA_z0ul_EJdbbRV3tJiCtPO9x3qz07DiS6lPA7IGLDAVJVIZxj5Q24izkjaguhfPOt4NjOB8tER9po3/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTREGoag1N9xrctplJRNjYwEXsXRucWf_8Vh8xanyh5U4OZYlF9tQIX08_HJ4LrWRmzpKrgCCZH8t5mOpWNV49qQQt7jvDBX1yNwDWJ1CIj99C583IAYiGATX-jAHD0pfmyGJJnbRiY73/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTREGoag1N9xrctplJRNjYwEXsXRucWf_8Vh8xanyh5U4OZYlF9tQIX08_HJ4LrWRmzpKrgCCZH8t5mOpWNV49qQQt7jvDBX1yNwDWJ1CIj99C583IAYiGATX-jAHD0pfmyGJJnbRiY73/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuuYG7GwVq5vR5DylHLSJ3RPvVEdtTWbUdAjHwM88SLuqVgkpHByUU5YhXpSaBcA_z0ul_EJdbbRV3tJiCtPO9x3qz07DiS6lPA7IGLDAVJVIZxj5Q24izkjaguhfPOt4NjOB8tER9po3/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTREGoag1N9xrctplJRNjYwEXsXRucWf_8Vh8xanyh5U4OZYlF9tQIX08_HJ4LrWRmzpKrgCCZH8t5mOpWNV49qQQt7jvDBX1yNwDWJ1CIj99C583IAYiGATX-jAHD0pfmyGJJnbRiY73/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTREGoag1N9xrctplJRNjYwEXsXRucWf_8Vh8xanyh5U4OZYlF9tQIX08_HJ4LrWRmzpKrgCCZH8t5mOpWNV49qQQt7jvDBX1yNwDWJ1CIj99C583IAYiGATX-jAHD0pfmyGJJnbRiY73/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTREGoag1N9xrctplJRNjYwEXsXRucWf_8Vh8xanyh5U4OZYlF9tQIX08_HJ4LrWRmzpKrgCCZH8t5mOpWNV49qQQt7jvDBX1yNwDWJ1CIj99C583IAYiGATX-jAHD0pfmyGJJnbRiY73/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NZFTl4YS5L3_QWn6tABmaXrQBhLkkc_d_im6-6jDQhi5gLzpXoNsKQFCKnJmW2P5NMoT1cRcKBuT0n3s5Qrod3p-FE6d1Qdebk4PYs2EyNigA5xy2S97WgRcfsrC9Eopx1FVC9gaFERg/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UuQdn5lBfCg2aJj-GPZVuWpIRNbhDuSFCJxvlspFHh8qsPpxKmdz0rdip8QPWGF_AaWBL9AS28j49wi-NQlHL0TqG1x0nXbfLcfy2p1R0dDnoZhZ0mMWvSq9fh77tc_n4lAefTHEgIjp/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTREGoag1N9xrctplJRNjYwEXsXRucWf_8Vh8xanyh5U4OZYlF9tQIX08_HJ4LrWRmzpKrgCCZH8t5mOpWNV49qQQt7jvDBX1yNwDWJ1CIj99C583IAYiGATX-jAHD0pfmyGJJnbRiY73/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3> 
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnomutulisateur&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="
http://outil-du-web.blogspot.com
">outil du web</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="
http://outil-du-web.blogspot.com
">Blogger Widgets</a></p>
</div>
</div>

@++

samedi 11 août 2012

sharethis - share buttons

salut a tous !!
comment installer les buttons share (sharethis) sur ton blog.
suivez les étapes :
1- accéder a sharethis.com

@+ :D

Badge d'abonnement pour votre chaine youtube.

Unknown | 09:37 | script/html | widget | youtube Be the first to comment!

1- Accéder A blogger.
2- Mise en page > ajouter gadget > html/java script.
3- Coller le code :

<iframe class="youtube-frame" src="http://www.youtube.com/subscribe_widget?p=nomdutilisateur" scrolling="no" frameBorder="0">

4- mettre ton nom d'utulisateur a la place de "nomdutilisateur"
Résultat : @+

mercredi 8 août 2012

installer le gadget linkedin.

Unknown | 12:39 | widget Be the first to comment!

le gadget linkedin c'est comme le gadget articles similaires de blogger mais plus beau pour le théme de site.

voila le screen capture :

regarder cette video qui explique tous :

@++

Comment ajouter gadget labels animée (blogger)

Unknown | 12:29 | astuce | script/html | widget Be the first to comment!

tous les visiteurs vont aimer cette gadget !!

c'est une simple script pour rendre votre gadget (label) animée !!

1- accéder a votre blog.

2- clique sur "modéle" > modifier le code html.

3- tapez CTRL+F pour chercherc cette balise :

<b:section class='sidebar' id='sidebar' preferred='yes'>

coller ce script just aprés :

<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'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

@++

Générateur de boutons de partage bookmark

Voici le code à copier sur votre site internet pour afficher le bookmarker. Il vous suffit de copier directement de code dans la page désirée, et le tour est joué.

<div id="bookmarker_3354"><noscript>Javascript est desactiv&eacute; - <a href="http://www.supportduweb.com/">Support du web</a> - <a href="http://www.supportduweb.com/generateur-boutons-partage-share-button-bookmarker-web20-facebook-twitter-delicious-digg-bookmarks.html">Boutons partage bookmark</a></noscript></div><script type="text/javascript" src="http://services.supportduweb.com/bookmarker/2-3354.js"></script>

@++

Gadget article recommandé pour Blogger

Unknown | 09:29 | astuce | script/html | widget Be the first to comment!

suiver le étapes :D !!.

1- Connectez vous à blogger, cliquez sur “Modèle” > “Modifier le code html” > “Traiter”. Cochez “Développer les modèles de Gadgets”.

2- Trouvez la balise suivante:

]]></b:skin>

3- Ajoutez ce code css juste avant la balise ci-haut :

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}

4- Trouvez l'un des bouts de code ci-après :

<div class='post-footer-line post-footer-line-1'>

<data:post.body/>

ou bien !!

<p class='post-footer-line post-footer-line-1'>

5- Juste avant l'un d'eux (seulement l'un d'eux), mettez le code suivant :

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

6- Enregistrez votre modèle.

7- Allez sur "Mise en page" >> "Ajouter un gadget". >> "HTML/Javascript" et collez le code suivant dans la grande case de la pop-up qui va s'afficher.

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Article recommandé</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://gadget-article-recommandes.googlecode.com/files/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script>

@++

lundi 6 août 2012

installer le gadget Disqus.

Unknown | 13:53 | astuce | widget Be the first to comment!

Disqus est un service Web de discussion et de commentaires d'articles centralisé avec authentification unique. Il permet à des sites Internet de se décharger de la gestion des commentaires d'articles, et à ses utilisateurs de pouvoir poster des commentaires en utilisant le même compte quel que soit le site Internet. Le service a été fondé en mai 2007 par Daniel Ha et CTO Jason Yan, et la société est basée à San Francisco, en Californie. Il est utilisé par des sites à grande affluence, tel les sites de CNN ou de Fox News Channel.

voila la video qui explique tous :)

dimanche 5 août 2012

Gadget oiseau Twitter volant sur votre blog

Vous voulez mettre un peu d'animation sur votre blog ? Voici pour vous un code qui va mettre un peu de mouvements sur votre blog; l'oiseau Twitter volant. en commence :

Ce script est à mettre dans un gadget HTML/Javascript. Prenez soin de remplacer identifiant-twitter par votre identifiant Twitter.

script :

Si vous avez aimé cet article, n'oubliez pas de le partager en utilisant les boutons ci-dessous OK @+.

Mettre votre blogger en mode économie d'énergie

Unknown | 10:35 | astuce | script/html | widget Be the first to comment!

Saviez vous qu'il est possible de mettre votre blog en mode économie d'énergie ? Oui, oui, cela est très possible grâce à un script fournit .

video

voila une photo qui explique tous :D

Le script suivant, qui mettra votre blog en mode économie d'énergie, est à mettre dans le modèle html de celui-ci, juste avant la balise </head>.

le script est :

enregistrer votre modèle.

@+++ :D

Gadget Fans sur Facebook flottant sur Blogger

Je ne sais pas pour vous, mais moi j'aime bien le gadget Module Social Facebook (Fans sur Facebook) flottant que je vois sur certains blogs. Au repos, le gadget affiche juste un petit logo Facebook sur le coté droit de votre blog, logo qui reste fixé au même endroit, que le lecteur monte ou descende la page.

Lorsque la souris passe sur le logo, celui-ci s'étend pour afficher le Module social Facebook,

Pour afficher ce Gadget Module Social Facebook flottant sur votre blog, voici les étapes à suivre :

1- connecter a blogger .

2- Trouvez la balise </head> et collez le code suivant juste avant :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Enregistrez votre modèle. clique sur ctrl+F pour rechercher :D.

3- Allez sur "Eléments de la page", cliquez sur "Ajouter un gadget" sur votre sidebar et choisissez "HTML/Javascript".

4- Collez le code suivant dans votre nouveau Gadget HTML/Javascript :

Remplacez l'url en rouge par celle de la page des Fans de votre blog sur Facebook, puis cliquez sur "Enregistrer" et allez voir ce que ça donne sur votre blog. @+++