Beautify Sidebar Widget

Assalamualaikum and hi people ;) So, today I would like to make a compilation of tutorial on how to beautify sidebar widget. Follower widget, Contact Form widget, Popular posts widget and Blog Archive widget.

• 1. Log in your blogger account.
• 2. Go to Dashboard > Template > Edit HTML.
• 3. Back up your template. ( Optional = In case you want to save your previous code )
• 4. Click ctrl + F and search for  ]]></b:skin>
• 5. Copy below code and paste it above / before ]]></b:skin>

Where to find WidgetID ?

• 1. Log in your blogger account.
• 2. Go to Dashboard > Template > Edit HTML.
• 3. Choose Jump to widget ( Now you can see a list of your widget ID. )
• 4. Example : Widget ID for blog archive widget is BlogArchive1 for follower widget is Followers1

How to add background, border to certain widget ?

#WidgetID .widget-content {
padding:5px;  max-width:100%;
border:2px solid #FFD1D1;
background-color:#FFF4F4;
border-radius:10px;
}

Add scrollbox to widget :

#WidgetID .widget-content {
max-height: 200px;
padding:5px;  max-width:100%;
border:2px solid #FFD1D1;
background-color:#FFF4F4;
border-radius:10px;
overflow: auto;
}

Add icon beside blog archive post title :

Search the code like below using F3 or ctrl + F

<li><a expr:href='data:post.url'><data:post.title/></a></li>

Then add the code below between <li> and <a expr:href='data:post.url'><data:post.title/></a></li>

<img src='URL ICON' style='padding-right:5px;'/>

Example :
<li><img src='URL ICON' style='padding-right:5px;'/><a expr:href='data:post.url'><data:post.title/></a></li>

Change the color of blog archive arrow icon :

Search the code like below using F3 or ctrl + F
.widget .zippy {

Then, delete the code that you had search with it sub code.

Example of code to be deleted :
.widget .zippy {
  color: $(widget.alternate.text.color);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

Then, replace the code with below code :

.widget .zippy {
color: #FACCCC;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);}

Customize Popular Post Widget :

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

}

#PopularPosts1 li{

position:relative;

margin:0 0 10px 0;

padding: 3px 2px 0 17px;

left:-5px;

}

#PopularPosts1 ul li{

position: relative;

display: block;

padding: .4em .2em .4em 2em;

*padding: .2em;

margin: .5em 0;

text-decoration: none;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:before{

content: counter(li);

counter-increment: li;

position: absolute;

height: 2em;

width: 2em;

line-height: 1.5em;

font-size: 25px;

color: #666666; /* text color of numbers */

text-align: center;

font-weight: bold;

border-radius: 2em;

position: absolute;

left: -12px;

transition: all .3s ease-out;

}

.popular-posts .item-thumbnail img {

width:55px; height:55px;

border-radius: 15px;

-moz-border-radius: 15px;

-ms-border-radius: 15px;

-o-border-radius: 15px;

-webkit-border-radius: 15px;

border: 1px solid #C5DEBA;

padding:3px;background:#F4E0CD;

-webkit-box-shadow:0 1px 1px #ccc;

-moz-box-shadow:0 1px 1px #ccc;

box-shadow:0 1px 1px #ccc;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.popular-posts .item-thumbnail img:hover {

opacity:1.0;

transform:scale(1.2) rotate(5deg);

-moz-transform:scale(1.2) rotate(5deg);

-ms-transform:scale(1.2) rotate(5deg);

-o-transform:scale(1.2) rotate(5deg);

-webkit-transform:scale(1.2) rotate(5deg));

}

Customize contact form :

/* Contact Form Container */
.contact-form-widget {
width:220px;
font:13px century gothic;
max-width: 100%;
margin: 0 auto;
padding: 10px;
border:3px dotted #BDE5D7;
background-color:#FFFAE6;
color: #222222;
background-image:url(https://i.imgur.com/saPGOlL.png);
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 2px;
padding:5px;
font:12px century gothic;
}

/* Submit button style */
.contact-form-button-submit {
border: 3px solid #F4E0CD;
background:#BDE5D7;
color: #222222;
width: 100%;
max-width: 100%;
margin-top: 4px;
text-align:center;
font:13px century gothic;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #F4E0CD;
border: 3px solid #BDE5D7;
}
.contact-form-name {
background-image:url(https://i.imgur.com/tDtge.png)
}
.contact-form-email {
background-image:url(https://i.imgur.com/tDtge.png)
}
.contact-form-email-message {
background-image:url(https://i.imgur.com/tDtge.png)
}

The Notes : Color code here
Blue Text : Widget ID
Orange Text : Border color
Fuchsia Text : Background color and background image URL here
Green Text : Text color
Purple Text : URL icon here
Grey Text : Form background image URL

...........PREVIEW AND SAVE...........

Do comments for any inquiries

......................................