Home
Blogger

Add Text Shadow Effect in Blog Post Title on Mouse Hover

Add Text Shadow Effect in Blog Post Title on Mouse Hover
CSS effect

By the Bless of CSS we can create enormous effects and decorate our Blog site.  Formerly we were depended on images for Blog designing. But now by using CSS Blog developer able to create different design. In case of Google Blogger we see many widget developing by developer and most of the design can be create and moderate by CSS.

In this tutorial I will show you a simple text design with Pure CSS that will add an effect on Blog post title. After applying this trick while a visitor click on Blog Post title then it will display a shadow of post title. And when user will release the mouse then shadow will disappear. This is really amazing.


Every Blogger template has its own post title design but I have added another script for better looks of your Blog post title. Post title script is below-

.post-title {
color: #333;
font-family: 'Oswald', sans-serif;
font-size: 24px;
line-height: 30px;
padding-bottom: 10px;
font-weight: 400;
}

here I have used Oswald font for post title. Because this font is best for displaying Blog post title. So you should find and remove any previous Post title code first. Just find the code like above and remove it.
long shadow

Though this trick is completely based on CSS coding so you don't have to worry about Blog loading speed. For applying this trick just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)


Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

.post-title {
color: #333;
font-family: 'Oswald', sans-serif;
font-size: 24px;
line-height: 30px;
padding-bottom: 10px;
font-weight: 400;
}

h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color: #333;
text-decoration: none;
transition: all 0.7s linear;
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
-o-transition: all 0.7s linear;
-ms-transition: all 0.7s linear;}

h3.post-title a:hover, h2.post-title a:hover, h1.post-title a:hover {
color: #000;
text-shadow: 2px 2px 5px #eee, 5px 5px 5px #707070;
}

Step 5 hit the Save template button.

Now visit your Blog and mouse over on post title and see a shadow is appearing. This is looks amazing and your Blog visitors will love it. Actually the total tutorial is about creating a text shadow so thanks to CSS for helping to make this beautiful effect. 

2 comments

  1. Hi Rabbi Khan! Thank you for this useful post. I have a question for you: when I hover the mouse over highlighted text in your post, a description appears. How can I do that in my own blogger blogposts? And how would it work when someone's browsing on their mobile phone (without a 'mouse' hovering)? Thanks in advance
    • Hi Huss Farsani,
      This is an old trick. I have seen in many Blog that they have also shared the tutorial. For this reason I didn't shared this widget in my Blog. Can you please give me the blog URL so i can see what exactly you want to use.
      Thank you :t
Go Up