Thursday 10 April 2014
Stunning Css Blockquotes With Hover Effects
Do you like this ?
This Blockquotes are really stylish and beautifull. This blockquotes are really very essential and necessary for a web designer to make his website more stylish. Make your Blogger or Wordpress blog more beautifull and give your readers a new BlockQuote style. If you want to highlight any headline or any important news of your blog post, you can use this Blockquotes style. i will show you the tutorial how to use this blockquote. This is a bulb style BLOCKQUOTE. when you take your mouse on it, it will change text and colour and give light effect to the bulb.
So, let's get started in the name of Allah.
Now adding this CSS code to you blog. it's really easy, you just need to add a CSS to your TEMPLATE.
If you are using blogge or blogspot.
- Go to Blogger > Template > Edit Html > and press CTRL + F and search for ]]></b:skin> and paste the below CSS code just above/before ]]></b:skin>
blockquote { background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZq5asUo0VMS0a10XDqjWgfRUS3Gy2pLo2cp6RfH_oj8k7aD2K_Ov5cFknfckdNpzAGNwygkqqH4UUXuygwFqz0EIauh3Z3EyaHQk5Ca-UwMMrmhN_ZM0FBmceZqd_374Xf32CUnWFruM/s1600/bulb-off.gif) no-repeat right bottom ; margin: 0 20px; padding: 20px 70px 20px 20px; color:#595959; font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif; border:1px solid #DDD; }blockquote:hover { background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoxXpj2udyiYXLBzBvjsVUX_w2UvsWp_vJLeIYKuXTFlJGmVep7pftWJO5t_RKK_zW5Q6zFJ52xeykiqA2vOUPX2KbwiYeAnVWe-04fuATRKD6YLxatYJPz35visJ1ZSvs4wbu-WnLm6Q/s1600/bulb-on.gif) no-repeat right bottom ; color:#E0E089; }The Green Image Link is link of the image when Mouse is moved away from the Blockquote, and the Red image link is the link of the image when the mouse is on the blockquote, YOU CAN CHANGE THE BOTH IMAGE LINK AND ADD YOUR OWN.
blockquote p { margin: 0; padding-top:10px; }
- Now save your Template.
How to use Blockquote ?
After you have added this blockquote to your blog, you need to know how it really works.
Whenever you make a new post, you can add this blockquote.
| |
This post was written by: Rashedul Islam
Assalamualaikum, I am Rashedul Islam Arman from Chittagong,Bangladesh. Founder of this Blog Alhamdulillah.If you Have any Problem,Complain,Suggestion or for Anything don't Hezitate to Contact ME,You can Directly contact me on my Facebook I'D
Subscribe to:
Post Comments (Atom)
0 Responses to “Stunning Css Blockquotes With Hover Effects”
Post a Comment