Add Bubble images for sharing widgets or book marking site

Before starting a good idea to backup your template first, get used to doing this if you want to edit the template.

1. Log in to Blogger.
2. Click the design .
3. Go to the Edit HTML check expand widget templates
4. If an error occurs you should download your template first
5. Copy and paste the following css code before the code ]]> </ b: skin> 

. Bubblewrap {
list-style-type: none;
margin: 0;
padding: 0;
}
. bubblewrap li {
display: inline;
width: 65px;
height: 60px;
}
. bubblewrap li img {
width: 55px;
height: 60px;
border: 0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
. bubblewrap li img: hover {
-moz -transform: scale (1.8);
-webkit-transform: scale (1.8);
-o-transform: scale (1.8);
}

Find the code like this:

<data:post.body/> </ b: if>
</ div>

Then place the following code after the code above:

<div class='bubblewrap'>
<ul>

<a href='#'> <img title = 'Add to Stumbleupon "/> </ a> </ li>

<a href='#'> <img title = 'Add to Facebook' /> </ a> </ li>

<a href='#'> <img src = 'http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb% 5B2% 5D.png 'title =' Add to Digg '/ > </ a> </ li>

<a href='#'> <img src = ' http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb% 5B2% 5D.png 'title =' Add to Twitter '/> </ a> </ li>

<a href='#'> <img src = 'http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb% 5B2% 5D.png 'title =' Add RSS Feed '/ > </ a> </ li>

</ Ul>
</ div>

Save Template . For the color code purple is the code for the image url, you can replace it with a picture that my friend had a social bookmark.

Posted by Durgesh on 12:04. Filed under Posts . You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry