Recherche dans le forum:
Rechercher


« Voir le sujet précédent :: Voir le sujet suivant »  
Auteur Message
Message28/05/2010, 11 11 04 (UTC)    
Sujet du message: Barre overblog !

Voila j'aimerai mettre une barre comme sur les blogs de OVERBLOG serait ce possible(il faut quelle reste toiujour en haut quand on defile) et pourrait ton metre des bouton au choix comme pour envoyer vers un site ...
Message28/05/2010, 11 11 08 (UTC)    
Sujet du message: PS

avec la barre de recherche bien sur (je suis deja referencer a google !)
Message04/06/2010, 07 07 53 (UTC)    
Sujet du message: Ré

Personne ne peut maider ? Je tient vraiment a mettre une barre comme celle de Overblog !

Ou au pire une qui fait pareille (qui reste en haut qui a une barre de recherche Google et ou l'on peut mettre des bouton au choix !)
Message04/06/2010, 13 01 19 (UTC)    
Sujet du message:

Barre de recherche Google fixé en haut personnalisable:

Code:

<center>
  <style type="text/css">

div.barre{ position:absolute;position:fixed;top:0px;left:0px;width:100%;height:35px;
;z-index:4;
       background:#f5c847;
font-size:12px;
font-family: Verdana,sans-serif;

      }
     
</style>

<div class="barre">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color:#f5c847;color:#000000">

  <div class="cse-branding-form">
    <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
      <div>
        <input type="hidden" name="cx" value="partner-pub-5559254873751159:nrbzf7g3xq1" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
        <input type="text" name="q" size="31" />

        <input type="submit" name="sa" value="Rechercher" />
      </div>
    </form>

  </div>
  <div class="cse-branding-logo">
    <img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" />
  </div>
  <div class="cse-branding-text"><font color="#000000"><em><strong>

    Recherche personnalisée</font></em></strong>
  </div>
</div>
 </div>



Dernière édition par webmaster-shop le 04.06.2010, 15:57; édité 1 fois
Message16/06/2010, 20 08 22 (UTC)    
Sujet du message: Merci !

Merci beaucoup ! Je sais pas créer de code HTML mais une fois en ma possession j'en fais ce que je veux après lavoir déchiffrer !^^

Pour l'autre barre je vais essayer mais le site étant en anglais ca va être dure et je crois qu'il faut heberger un fichier mais je suis pas sur par contre la barre est bcp plus fun mais il va me falloir du temps pour tout mettre en place !^^


Merci encore ! Et regarder mon site la barre et modifiée et j'y rajouterai des truc plus tard elle va être cool !

P.S : Je sais pas si je dois mettre une image en fond ou si je laisse en noir pouvez vous me donner une idée et si je met une image laquelle metteriez vous qui resorte bien avec mon site sachant que seul le haut sera visible ?
Message16/06/2010, 20 08 25 (UTC)    
Sujet du message: Ré

Faut aussi que je modifie la barre de recherche (recherche que sur mon site ) pouvez vous me délimiter le code de la barre de recherche pas celui de lensemple sil vous plait ?
Message17/06/2010, 08 08 16 (UTC)    
Sujet du message:

Pour créer et personaliser ta barre de recherche google ,c'est ici:

http://www.google.com/cse/

Pour installer le Toolbar (comme Overblog) , voici le code :


Citation:



<script type="text/javascript" src="http://www.pvmgarage.com/downloads/newsaggregator_toolbar/js/jquery-1.3.2.min.js"></script>

<style type="text/css"><!--
/* tolbar*/



/*-- Bottom Toolbar --*/

div#toolbar, div#toolbarbut {
position: fixed; /* set fixed position for the bar */
bottom: 0px;
right: 0px;
z-index: 9999; /* keep the bar on top */
height: 36px;
background: url(http://www.pvmgarage.com/downloads/toolbar/images/bcktool.png);
/* CSS3 */
-moz-border-radius-topleft: 8px;
-khtml-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-khtml-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset creates a inner-shadow */
-khtml-box-shadow: 0px 1px 10px #666;
-webkit-box-shadow: 0px 1px 10px #666;
/* CSS3 end */
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

div#toolbar {
width: 85%;
min-width: 700px; /* to limit the width when an excessive window resize */
margin: 0px auto; /* centered toolbar */
left: 0px;
}

div#toolbar a:hover {
border: none; /* fix 'hover' border in techNews Aggregator */
}

div#toolbarbut { /* div for the 'hide status' */
width: 60px;
height: 15px;
margin-right: 3%;
display: none;
}

.leftside {
float: left;
}

.rightside {
float: right;
}

span.showbar a { /* show button */
padding: 5px;
font-size: 10px;
color: #989898;
}

/*-- Left Side --*/

ul#social li {
display: inline;
}

a.rss {
display: inline-block;
width: 104px;
height: 35px;
margin-left: 5px;
background: url(http://www.pvmgarage.com/downloads/toolbar/images/rss.png) no-repeat;
}

a.facebook, a.twitter, a.digg, a.delicious, a.stumble {
display: inline-block;
width: 40px;
height: 35px;
margin-top: 1px;
}

a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover {
background-position: 1px 1px; /* simple css hover effect */
}

a.facebook {
background: url(http://www.pvmgarage.com/downloads/toolbar/images/facebook.png) no-repeat;
}

a.twitter {
background: url(http://www.pvmgarage.com/downloads/toolbar/images/twitter.png) no-repeat;
}

a.delicious {
background: url(http://www.pvmgarage.com/downloads/toolbar/images/delicious.png) no-repeat;
}

a.digg {
background: url(http://www.pvmgarage.com/downloads/toolbar/images/digg.png) no-repeat;
}

a.stumble {
background: url(http://www.pvmgarage.com/downloads/toolbar/images/stumble.png) no-repeat;
}

.tip {
position: absolute; /* important */
top: -75px;
width: 250px;
height: 78px;
background: url(http://www.pvmgarage.com/downloads/toolbar/images/tip.png) no-repeat;
float: left;
display: none;
}

/* custom distances for the icons */
#tipfacebook {
left: 75px;
}

#tiptwitter {
left: 120px;
}

#tipdelicious {
left: 165px;
}

#tipdigg {
left: 210px;
}

#tipstumble {
left: 255px;
}

.tip ul {
padding: 22px 0 0 25px;
}

.tip ul li {
display: inline;
padding-left: 3px;
}

.tip ul li a {
font-size: 18px;
color: #989898;
}

.tip ul li a:hover {
color: #666;
}

.tip ul li small {
font-size: 10px;
}

/*-- Right Side --*/

span.downarr { /* hide button */
float: right;
border-left: 1px solid #a4a4a4;
}

span.downarr a {
display: block;
width: 36px;
height: 26px;
padding: 25px 0 0 10px;
background: url(http://www.pvmgarage.com/downloads/toolbar/images/downarrow.png) no-repeat 5px 7px;
}

span.menu_title {
background: #e4e4e4;
border-left: 1px solid #a4a4a4;
padding: 10px;
}

span.menu_title a {
font-size: 16px;
line-height: 34px;
color: #9a9a9a;
}

.quickmenu {
position: absolute; /* important */
top: -251px;
right: 46px;
width: 260px;
height: 250px;
background: #e4e4e4;
border-top: 1px solid #a4a4a4;
border-left: 1px solid #a4a4a4;
border-right: 1px solid #a4a4a4;
/* CSS3 */
-moz-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
-khtml-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
-webkit-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
/* CSS3 end */
display: none; /* important */
}

.quickmenu ul {
padding-top: 20px;
}

.quickmenu ul li {
border-bottom: 1px solid #989898;
padding: 5px 10px;
margin: 0 15px 0 15px;
}

.quickmenu ul li a {
font-size: 18px;
color: #989898;
display: block;
}

.quickmenu ul li a:hover {
color: #666;
}
--></style>



<script type="text/javascript"><!--
$(document).ready(function(){



//hide toolbar and make visible the 'show' button

$("span.downarr a").click(function() {

$("#toolbar").slideToggle("fast");

$("#toolbarbut").fadeIn("slow");

});



//show toolbar and hide the 'show' button

$("span.showbar a").click(function() {

$("#toolbar").slideToggle("fast");

$("#toolbarbut").fadeOut();

});



//show tooltip when the mouse is moved over a list element

$("ul#social li").hover(function() {

$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE

$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element

$(this).find("div").hide();

});

});



//don't jump to #id link anchor

$(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {

return false;

});



//show quick menu on click

$("span.menu_title a").click(function() {

if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible

$(".quickmenu").fadeIn("fast"); //show menu on click

}

else if ($(".quickmenu").is(':visible')) { //if quick menu is visible

$(".quickmenu").fadeOut("fast"); //hide menu on click

}

});



//hide menu on casual click on the page

$(document).click(function() {

$(".quickmenu").fadeOut("fast");

$(".quickmenu").css({'vivibility': 'hidden'});

});

$('.quickmenu').click(function(event) {

event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements

});





});
// --></script>
</p>

<div id="toolbarbut"> <!-- hide button -->
<span class="showbar"><a href="#">show bar</a></span>

</div>

<div id="toolbar"> <!-- toolbar container -->

<div class="leftside"> <!-- all things in floating left side -->
<ul id="social">
<li><a class="rss" href="#"></a><!-- icon -->
<div id="tiprss" class="tip"><!-- tooltip -->
<ul>
<li><a href="#">580 Readers</a></li>

<li><a href="#"><small>[Subscribe]</small></a></li>
</ul>
</div>
</li>
<li><a class="facebook" href="#"></a>
<div id="tipfacebook" class="tip">
<ul>
<li><a href="#">Share Page</a></li>

<li><a href="#">| Profile</a></li>
</ul>
</div>
</li>
<li><a class="twitter" href="#"></a>
<div id="tiptwitter" class="tip">
<ul>
<li><a href="#">ReTweet</a></li>
<li><a href="#">| Profile</a></li>

</ul>
</div>
</li>
<li><a class="delicious" href="#"></a>
<div id="tipdelicious" class="tip">
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">| Profile</a></li>

</ul>
</div>
</li>
<li><a class="digg" href="#"></a>
<div id="tipdigg" class="tip">
<ul>
<li><a href="#">Digg</a></li>
<li><a href="#">| Profile</a></li>

</ul>
</div>
</li>
<li><a class="stumble" href="#"></a>
<div id="tipstumble" class="tip">
<ul>
<li><a href="#">Stumble</a></li>
<li><a href="#">| Profile</a></li>

</ul>
</div>
</li>
</ul>
</div>

<div class="rightside"> <!-- all things in floating left side -->
<span class="downarr"> <!-- hide button -->
<a href="#"></a>
</span>

<span class="menu_title">
<a class="menutit" href="#">quick menu</a> <!-- quick menu title -->
</span>
<div class="quickmenu">
<ul> <!-- quick menu list -->
<li><a href="#">Premium Member</a></li>
<li><a href="#">Become Author</a></li>

<li><a href="#">Submit News</a></li>
<li><a href="#">Send Feedback</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>

</div>

</div>


En rouge === Html pour placer les liens dans le menu

Coller le code dans "texte au-dessus du design."

Exemple ici: http://testpagefrgd.fr.gd/

______________

Visitez :
Message17/06/2010, 11 11 09 (UTC)    
Sujet du message:

Encore mieux merci je ferai ça plus tard !
Montrer les messages depuis:   


Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com