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

---

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!