Tags: Blog Design / Blogging Tips / CSS Tricks

Add CSS3 Hover Animation Effect to Post Titles in Blogger

- 53 Comments

You might have seen hover effect on post titles on many blogs (especially in blogger blogs). Adding a CSS3 hover animation effect to post titles will increase your readership and it'll also attract your readers. One of our readers asked us that how to add a link nudge effect to post titles in blogger. So, today in this article we are going to learn how to add CSS3 hover animation effect to post titles in Blogger. How it works? Click on the demo button and move your mouse cursor over any post title to see how it works.

Demo

Add CSS3 Hover Animation Effect to Post Titles in Blogger

Step 1. Log in toy your Blogger Account
Step 2. Go to Template >> Edit HTML and search for the ]]></b:skin> tag
Step 3. Now copy the below code and paste it just above/before it

.post h2 {
margin:.1em 0 0;
padding:0 0 4px;
font-size:1.0em;
font-weight:normal;
line-height:2.5em;
color:#444;
font-family: Oswald, Serif;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
display:block;
text-decoration:none;
color:#444;
font-size:2.0em;
font-weight:normal;
font-family: Oswald, Serif;
}
.post h2 strong, .post h2 a:hover {
color:#2aa4cf;
padding: 0px 00px 0px 10px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Step 4. Click on Save Template button
And you're done!

From Editors Desk

We hope this article helped you in learning How to Add CSS3 Hover Animation Effect to Post Titles in Blogger. Share this article with your friends and don't forget to subscribe us!

How to Add CSS3 Rounded Border Wrap in Blogger Templates

- 17 Comments

Adding Rounded Corners body wrapper to your blog is a great way to make your template more beautiful and attractive. By default, there is no border/rounded border wrap in blogger templates. By adding such styles you can make your blog look like professional blogs. This wrapper will make your blog to fit in every screen and it will also attract your visitors. So, today in this article we are going to share How to Add CSS3 Rounded Border Wrap in Blogger Templates.

Add CSS3 Rounded Border Wrap in Blogger Templates

Step 1. Log in to your Blogger Account
Step 2. Go to Template and click on Edit HTML Button
Step 3. Search for the ]]></b:skin> tag
Step 4. Copy the below code and paste it just above/before it

#bgtwrap {
    background: #ffffff;
    width: 965px;
    margin: 10px auto 5px auto;
    padding: 0;
    position: relative;
    border-right: 15px solid #333;
    border-left: 15px solid #333;
    border-top: 10px solid #333;
    border-bottom: 15px solid #333;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    box-shadow: #333 0px 1px 3px;
    }

Step 5. Now search for <body> and paste the below code just below/after it

<div id='bgtwrap'>

Step 6. Finally, search for </body> and paste the below code just above it

</div>

Step 7. Click on Save Template Button
And you're done

Final Words

We hope this article helped you in learning How to Add CSS3 Rounded Border Wrap in Blogger Templates. Share this article with your friends and don't forget to subscribe us!

Tags: Blogging Tips / CSS Tricks

How to Create a Tooltip For Hyperlink in Blogger

- 2 Comments

What is a tooltip? A tooltip is a text in box which is displayed over a hyperlink, when you move your mouse cursor on the link. Tooltips are used for displaying extra text over links. Tooltips can be used for all sorts of things i.e descriptions, definitions, word meanings etc. You might have seen different types of tooptips on many blogs. So, today we are going to share a simple and beautiful tooltip for your blog. In the image below "Text to Show" is your text and link and the text in the blue box just above it is your tooltip.

How to Create a Tooltip For Hyperlink in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template and Click on Edit HTML button
Step 3. Now search for the ]]></b:skin> tag
Step 4. Copy the below code and paste it just above/before the ]]></b:skin> tag

/* Tooltip Provided by blogolect.blogspot.com */
a:link,
a:visited {
position:relative;
}
.bgttooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#2aa4cf;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background: #2aa4cf;
border-color:#2aa4cf;
}
.bgttooltip:before,
.bgttooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.bgttooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .bgttooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.bgttooltip,
.bgttooltip.left {
left:0;
right:0;
}
.bgttooltip:before,
.bgttooltip:after,
.bgttooltip.left:before,
.bgttooltip.left:after {
left:40px;
right:auto;
}
.bgttooltip:before {
border-top-color:#2aa4cf;
}
.bgttooltip:after {
border-top-color:#2aa4cf;
}
/* Tooltip Provided by blogolect.blogspot.com */

Step 5. Click on Save Template button

How to Use this Tooltip for Hyperlink

In the post editor click HTML and paste the following code where you want to use it

<a href="Your-Link-URL">Text to ShowYour Tooltip Text</a>

Customization:

Replace Your-Link-URL with your URL

Replace Text to Show with the text you want to show before hover

Replace Your Tooltip Text with the text you want to show in tooptip on mouse hover

Step 6. Click on Publish button
And you're done!!

Tags: Blogging Tips / CSS Tricks

How to Customize Blockquote in Blogger

- 7 Comments

First of all let me tell you that What is Blockquote? Blockquotes are sections of text which are used to highlight quotes from other text or simply a blockquote is used to highlight a text to make it different from other text on the page. Blockquotes are used to draw attention of your readers to particular parts of your blog or if you're a blogger then you can use blockquotes for highlighting code snippets of widgets/CSS codes. Whatever your purpose, using blockquotes is a perfect way to draw your readers attention. So today, in this tutorial we'll show you How to Customize Blockquote in Blogger. Check the image below to see how this blockquote looks that we are going to share today.

How to Customize Blockquote in Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Template >> Backup your Template and click on Edit HTML
Step 3. Search for .post blockquote and delete the code with all its occurrences. In most templates code looks like this

.post-body blockquote { blaa blaa blaa }

If your couldn't find it then no problem, its ok
Step 4. Now search for ]]></b:skin> and paste the following code just above/before it

.post blockquote{background:#ddd;border-left:1px solid #333;border-bottom:17px solid #333;border-top:1px solid #333;border-right:1px solid #333; margin-left:20px}
.post blockquote p{padding:10px}

Step 5. Click on Save Template button
And you're done!

How to Use Blockquote

Using blockquote is extremely easy, from the post editor type or paste whatever you want. Select the text/code that you want to show in blockquote and click on Quote tool.

From Editors Desk

We hope this article helped you in learning How to Customize Blockquote in Blogger. Share it with your friends and don't forget to subscribe us!

Tags: Beginner's Guide / CSS Tricks

How to Add CSS Codes to Blogger Using Template Designer

- 2 Comments

Planning to customize your blog's look using CSS? But having difficulties adding CSS to your blog? We know that customization of blog is not possible without CSS. So, what to do now? Don't worry, here's a short guide on adding CSS codes to blogger. Some bloggers found it difficult to locate ]]></b:skin> tag for adding CSS codes to blogger. So, today we are going to share a short, simple and easy guide on adding CSS codes to blogger without using the Template HTML Editor.

How to Add CSS Codes to Blogger Using Template Designer

Step 1. Log in to your Blogger Account
Step 2. Select a Blog that you want to Customize
Step 3. Go to Template and click on Customize button

Step 4. Click on Advance and add you CSS Code

Step 5. Finally click on Apply to Blog and you're done!
Note:
When you are adding the CSS Codes then be careful that you have to add the CSS without <style type="text/css"> and </style> tags and adding these may result in an error. On changing the template these CSS Codes will be removed.

Tags: Beginner's Guide / CSS Tricks

How to Customize Font Awesome Icons in Blogger

- 5 Comments

Font awesome are vector icons that can be used on any webpage. It is a set of SVG (Scalable Vector Graphics) Icons which means every icon looks awesome at any size. One of feature of Font Awesome icons is that these icons are easily customizable with CSS. Recently we've talked about How to Use Font Awesome Icons in Blogger and today we are going to discuss that How to Customize Font Awesome Icons in Blogger. So, let's come to the point

How to Use Font Awesome Icons

Simply: Choose an icon >> Note down its class name >> Use  tag >> Add it to your Blog. Example:

You can use these icons anywhere you want. e.g. Navigation menu, Side bar or anywhere you want in your template. You can view a list of available icons in Font Awesome Inventory here.
Visit this Link How to Use Font Awesome Icons in Blogger.

Resizing Icons

You can resize font awesome icons by using fa-lg, fa-2x, fa-3x, fa-4x and fa-5x. Check the examples below that how it works.

Customize Icons using CSS

You can also customize font awesome icons by applying CSS. Using CSS you can customize shadows, size, color and more.

.fa-envelope {
font-size: 16px;
color: #000;
padding: 5px;
border: 1px solid #ccc;
float:left;
}

You can replace the highlighted text with the class of any other icon and then customize it

Spinning Icons

You can spin font awesome icons by using fa-spin. Look at the examples below:









Rotate and Flip Icons

Just like spinning and resizing you can rotate these icons using fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-vertical and fa-flip-horizontal.











Stacking Icons

You can also stack two or more icons to create a new icon fa-stack or fa-stack-2x or fa-stack-3x for large icons. Example

Result:

Result:

List Icons

Replace bullets and numbering using fa-ul and fa-li tags. Exapmle

Minus Circle
Star Icon
Spinner Icon
Share Square

<ul class="fa-ul">
<li>Minus Circle</li>
<li>Star Icon</li>
<li>Spinner Icon</li>
<li>Share Square</li>
</ul>

From Editors Desk

We hope this article helped you in customizing font awesome icons for your blog. Share this article with your friends and don't forget to subscribe us. Feel free to ask. Your feedback is always highly appreciated.