News Update :
Home » » Dynamically change the background color to blogger

Dynamically change the background color to blogger

By: omer nawaz on Tuesday, 27 January 2015 | 10:05

Connect to blogger presentation >> Edit HTML and find the following line:
]] > </ b: skin >
Paste the following code just before the line pécédente :
.bg1 {background : url (URL image1 ) repeat-x ; background- color: # 6c0000 ; }
.bg2 {background : url (URL image2 ) repeat-x ; background- color: # 5A2A00 ; }
.bg3 {background : url (URL image3 ) repeat-x ; background- color: # 00345B ; }
Image1 URL : replace with a small icon that reflects the color ( # 6c0000 red).
Image2 URL : replace with a small icon that reflects the color ( # 5A2A00 maroon ) .
Image3 URL : replace with a small icon that reflects the color ( blue # 00345B ) .
Then look for this line:
</ head>
And just before pasting the following code :
<script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js ' type = ' text / javascript ' /> <script type = 'text / javascript' >
$ (document ) .ready (function () {

$(&quot;li.one&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&#39;bg2 , bg3&#39;).addClass(&quot;bg1&quot;);
    });

    $(&quot;li.two&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg3&quot;).addClass(&quot;bg2&quot;);
    });

    $(&quot;li.three&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg2&quot;).addClass(&quot;bg3&quot;);
    });

});
</script>
Si vous utiliser déja jquery dans votre blog, pas la peine de coller la premiére ligne aussi.
Coller le code suivant dans votre blog, peut etre dans un message blogger(article), la barre latérale, ...
<ul>
<li class="one"><a href="#">Rouge</a></li>
<li class="two"><a href="#">Maron</a></li>
<li class="three"><a href="#">Bleur</a></li>
</ul>
Voila c'est tout est merci.

Post a Comment

 
Contact Us | Privacy policy | Term of use | Advertise with Us | Site map
Copyright © 2011. Blogging Brain . All Rights Reserved.
Design Template by Blogging Brain | | Powered by Blogger