New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How to Customize Sidebar Using Animated Borders In Blogger


Mastering the different SEO tips, providing quality and unique  contents to the visitors really matters most to bloggers who are goal-oriented. And having a unique and creative sidebar  also adds weigh in order to attract our readers  to stay a longer period of time in our site. This is important to guide the readers to take a look on to those plug-in, widgets and gadgets and consequently interact on them. Feel excited to apply this tweak on your blog? Please follow the steps below.

Live Demo


How to Animate Moz (Normal) Border In Blogger Sidebar

customize sidebar with hover effect


Step 1. Log-in to your Blogger Account
Step 2. Go to Blogger Dashboard
Step 3. Click Template (back-up your template)
Step 4. Hit the Edit HTML button
Step 5. Look for the code ]]></b:skin>
Step 6. Just above ]]></b:skin> paste the code below

.sidebar .widget {
border:2px dashed #FF0000;
padding:0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
background-color:none;
}
.sidebar .widget:hover {
border:2px ridge #DF0101;
padding:0;
}

  • Replace dashed with a different border styles here.
  • Change or replace the hexadecimal color FF0000 and DF0101  that would blend to blog's theme here.
Step 7. Save your Template!

How to Customize Sidebar Using Animated Moz- Border In Blogger



Live Demo

Step 1. Repeat step 1 to 5 above
Step 2. Paste the code below above ]]></b:skin>
.sidebar .widget {
border-top-left-radius: 0;
border-bottom-right-radius: 0;
padding:0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
background-color: #E6E6E6;
}
.sidebar .widget:hover {
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
padding: 0;
background-color: #D8D8D8;
}
Step 3. Save your Template and you are done!
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...