How to Change - Customized Each Sidebar Widget Differently
Posted in blogger tutorial
No comments:
Are you bored with your dirty looking Sidebar?Do You Want to Change or customized Siderbar widgets Font color ,font Size ,background Color (List, Label etc.) on Blogger? Well then, You have come to the right place.In default Blogger Templates,You found That All widegets of Sidebar have same font size , font Color,Font Style.Here we informed that how you can change/ Customized Sidebar widgets Heading ,Size ,color as Your Mind " above posts.If you want to Customize Each Sidebar Widget Differently, just do the following steps:
Advantages/Features
Style/Customized Each Sidebar Widget .
Simple and Small Code Used
Load Quickly and Easy to Use
Your Blog Will Looks awsome
This is also very simple process and just takes your few seconds to make changes in it. All you need to do is to simply follow below instructions and Customize / Change Widget diffrently
SELECT / CHOOSE THE WIDGET YOU WANT CHANGE
Each widget added in Blogger Layout has a unique ID. We will use this ID to apply some style to our widget. So, First You have to find ID Of the Widget You Want to Change.For find the Id You have to go.
Dashboard ► LAYOUT ► EDIT HTML ► and By Using Ctrl+F Keys Search "sidebar-wrapper" .
In my case, the code looks like this:
- Go to Blogger >> Dashboard>> Template>> Edit HTML.
- Find below tag in your template By Using Ctrl+F Keys
]]></b:skin>
</head>
- Now just above it paste the following code.
#Label1 {
background:#FFF4BF;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #FFE25F;
}
#Label1 h2 {
background: url( your image link) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}
#Label1 a:link {
color:#5F5F5F;
text-decoration:none;
}
#Label1 a:visited {
color:#5F5F5F;
text-decoration:none;
}
#Label1 a:hover {
color:$titlecolor;
text-decoration:underline;
}
- Click On Preview to verify that everything is as you want.
- Finally save your template by Clicking on Save Template and now you are done
SHORT DISCREPTION OF CODE
- The part in green is the style for the specific widget box (in this case Label). You can change background, font style, position, colors, borders of the widget.
- Blue part is defining only the HEADING of the widget.
- The part in Pink defining only color of link appear before visiting
- The part in violet defining the color appear when visited the link.
- The part in Dark Red defining the color appear when pointer move on link
