So friends today I will introduced a set of subscribe buttons that you can use in your blogger or wordpress platforms weblog without any type of issue, so you just need to add some set of requirements and you will be prepared for displaying your social link with these glossy icons. So now these icons consist of no JavaScript for float cruising impact but it’s the miracle of the CSS so it will not take whenever for running out these ones.
The guidelines offered below are for blogger blogs but these works in wordpress platforms so you can insert the CSS in one position and value in another as you normally do with all your devices. So I will not display any instruction’s for wordpress platforms weblogs.
- Go to Blogger > Template > Edit HTML.
- Press Ctrl + F and look for for ]]> and paste below CSS above it.
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
- Now just save template.
- Now navigate to Blogger > Layout > Add Gadget.
- Choose HTML/JavaScript and add below value into it.
<ul class="bubblewrap">
<li><a href="https://plus.google.com/u/0/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LKL8OSVb8Virht6zRmhxTrUR-Ek00o7kZLlw3CyfGUow3a0CcAEeRBZ7NetGqFaNBJDYhyphenhyphenCJrkXSuQ0c_v2Pt5Ywpp3EflGzgWTAjoRM1weKJJ9CoC7x4mDtea4zmsGnQjoGRdsai3c/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsb6lbqKRrbFFBW9C3H8K7vw3zTP4KG6NQ1IdssbGsCJ6F6U72wQBeJRRQ88c7orc7tLNbw069CyfW7ZO7ckhFPZOGaHylIWxPf44oHIoNjhDjLgbHq4OB-2ZhR97YPVm0jF_8u5RYV8/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVE6VkQ_EIPXuYVC9czDKQgZCWz9h1QUbz3dKWtBBEUSRdtnIqnpgdhP1Bgs7Vs4dV-oKwm6CrokF_AbF0fM718dGiM4jBW5K2gtA0Ijh8DM0WHMYbTKNXiwp-uzpbAepKcds2caoqGw8/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjygQ9_AgnrG1_8T6tHebuH5xTfBrmdk4twXdemN-wrdctj8QDI9ihR_HPKF8bIarZ8M8ol0ZpjYgRInY6JjN4FqYPyhefagp4M8JczM7HQZivlsKEiYg_3qCexa4C9nuodo3-_Pnq0uPc/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href=http://feeds.feedburner.com/xxxxxxxxxxxxxx target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijAzbHDFk1Pv6-CAAULTmK0pznuwIgX9hosgBA77DbOQlsOGT38fU9BstUgyBaCM4cK4eLu_VNcms5C6mly5-ga-j0cm-619Mzo4_vWul-jGtLfwNBCQHnMB3dhjkGZH4Ixubirs8ZdXY/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>
<li><a href="https://plus.google.com/u/0/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LKL8OSVb8Virht6zRmhxTrUR-Ek00o7kZLlw3CyfGUow3a0CcAEeRBZ7NetGqFaNBJDYhyphenhyphenCJrkXSuQ0c_v2Pt5Ywpp3EflGzgWTAjoRM1weKJJ9CoC7x4mDtea4zmsGnQjoGRdsai3c/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsb6lbqKRrbFFBW9C3H8K7vw3zTP4KG6NQ1IdssbGsCJ6F6U72wQBeJRRQ88c7orc7tLNbw069CyfW7ZO7ckhFPZOGaHylIWxPf44oHIoNjhDjLgbHq4OB-2ZhR97YPVm0jF_8u5RYV8/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVE6VkQ_EIPXuYVC9czDKQgZCWz9h1QUbz3dKWtBBEUSRdtnIqnpgdhP1Bgs7Vs4dV-oKwm6CrokF_AbF0fM718dGiM4jBW5K2gtA0Ijh8DM0WHMYbTKNXiwp-uzpbAepKcds2caoqGw8/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjygQ9_AgnrG1_8T6tHebuH5xTfBrmdk4twXdemN-wrdctj8QDI9ihR_HPKF8bIarZ8M8ol0ZpjYgRInY6JjN4FqYPyhefagp4M8JczM7HQZivlsKEiYg_3qCexa4C9nuodo3-_Pnq0uPc/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href=http://feeds.feedburner.com/xxxxxxxxxxxxxx target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijAzbHDFk1Pv6-CAAULTmK0pznuwIgX9hosgBA77DbOQlsOGT38fU9BstUgyBaCM4cK4eLu_VNcms5C6mly5-ga-j0cm-619Mzo4_vWul-jGtLfwNBCQHnMB3dhjkGZH4Ixubirs8ZdXY/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>
- Now just modify the red xxxxxxxxxxxxxx with your own personal website usernames, that is it now appreciate people have fun using these discussing control buttons.