Welcome To "Softway RKO" !

What You Can Get in Softway RKO?

We provide the tutorials, guides, articles, tricks and tips about Blogger, Blogging, SEO Tips, Basic Tips For New Bloggers, Making Money Online, Widgets, Templates and many more resources. All this is just for free! You can Sign Up to get updated for Latest Posts.

Wednesday, May 28, 2014

Filled Under:
,

Add CSS Rainbow effect for Blogger Images


HTML tutorial

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks



In Previous Post How To Add Related Posts widget V2 in Blogger this widget very clean cool Related posts widget And Today I am going to share Add CSS Rainbow effect for Blogger Images in this plugin your blog's all image are changing color automatically like a rainbow This Plugin make your blog more beautiful and more attractive blog . You don't want to add single color in your blog's image You just add Only one CSS Code in your blogger template this method are very easy and simple.To add this plugin your blog follow this steps.
Also Read:-Munsi Mag Blogger Template Download

How to Add CSS Rainbow effect for Blogger Images:-

  • Go To Blogger Dashboard>>Template>>Edit HTML
  • Now find this code ]]></b:skin> using (Ctrl+F)
  • Paste the following code before ]]></b:skin>
 .PTT-css3 {
cursor:pointer;
border:3px solid #6b6b6e;
background-color:#f2ac08;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcd600', endColorstr='#f2ac08');
background-image:-webkit-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-moz-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-ms-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:-o-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
background-image:linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
padding:18px 36px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
border-radius:13px;
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
text-shadow:0px 1px 0px rgba(0,0,0,0.3);
color:#140114;
font:normal 20px 'Century Gothic',Helvetica,Arial,Sans-Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}
.PTT-css3:hover {
border-color:#4a4743;
background-color:#fcc203;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcc203', endColorstr='#de7104');
background-image:-webkit-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-moz-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-ms-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:-o-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
background-image:linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
color:#ffffff;
}
@-webkit-keyframes hue {
100% { -webkit-filter:hue-rotate(360deg); }
}
img:hover {
-webkit-animation:hue 1s linear infinite;
}
Read more: http://pctoolstips.blogspot.com/2013/05/add-css-rainbow-color-effect-for.html#ixzz331SJftbm


  •  Click on Save Template
  • Finish!
Final Words
If you want to face some problems or getting errors during this process please write your problem in comment box.
Please share this article with your friends on social networking sites..


0 blogger-facebook:

Comment here

 
  • Home
  • About Us
  • Contact Us
  • Sitemap
  • Privacy Policy
  • Back To Top