Thursday, 18 August 2016

Beautify Sidebar Widget

Animal shape macarons

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

Widget Name

How to add background, border to certain widget ?


Border, background on follower widget

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


Add scrollbox to widget :


Scroll box 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 :


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 :

Customize

/* 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
......................................

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thank you for this tutorial :) your blog is my #1 teacher :)

    ReplyDelete