For this customization, I have Blog Bulk to thank for. If you saw my previous post about the tips and tutorials I use most often, you'll find the tutorial for styling your widgets manually.
Okay, on to how I customized my widgets!
1. The first thing I did was look for free tape strips that I can use. I found mine via Pugly Pixel, which is an awesome resource for blog and graphic designers. I simply typed "tape strips" on the search bar and voila!
2. So I found my tape strip and I scaled it down to the size I would need. Actually, what I did was open a new post on my blog and uploaded the image of the tape strip. Once uploaded, I clicked on it and chose SMALL on the toolbar that pops up. Once the image was scaled down to a smaller size, I right-clicked on it, chose "Copy image URL" and pasted the URL somewhere so I can get back to it later. Then I saved the post as a draft. If you prefer, you can always upload your tape strip image on photo storage sites like Photobucket and just grab the image URL.
3. After getting my tape strip image ready, I went to Template and made a back up of my template (click on Backup/Restore on the upper right corner). This is very important when playing around with your template. You want to have that back up in case things don't turn out the way you hoped and you'd need to go back to your original template.
4. After saving my back up, I clicked on Edit HTML and looked for my widget IDs. I basically just scrolled down to the last part where I can find the contents of my sidebar (see photo below). For this tutorial, I'm using the widget ID: HTML23 which refers to the widget with the title "Hey, I'm Leah!" (see where it is in the photo?).
5. Next, I looked for this in my template: ]]></b:skin>
and I added the following code ABOVE it.
You can see that I've identified the widget -- #HTML23. The first set of code basically means I made the background of my widget white (#FFFFFF) with a padding of 10px on all sides. You can adjust this as you see fit.
The second set of code refers to the widget title (h2). For the background, I put down the image URL of my tape strip (in blue). For your own widget, you may need to adjust the placement of the image (top center, bottom left, bottom right, etc.), the height, margin-top, padding-top, text-align (left, right, center). Edit the measurements and preview your template to see how it looks. Play around with the measurements until you're satisfied with how your widget looks.
6. Once I was satisfied with how my widget looked, I clicked on Save. Then I did the same for all the other widgets on my blog.
And that was it.
For more on how to style or customize your sidebar widgets, you can go to where I learned the trick: http://www.blogbulk.com/2010/03/widget-customization-how-to-style-each.html.
If you have any questions, feel free to email me or comment. :)
and I added the following code ABOVE it.
#HTML23 {
background: #FFFFFF;
padding: 10px;
}
#HTML23 h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIxAEFg5lv_crQu5tvs7KMmFDI6D31qCjrTpZbOgsLK_hfCUggXZFxxTQF3FZtyU1VuYuapNCei7kSBfJcXHO994uEgsldsbFS4P7e_zdbNl3Q2ZG9rV8jKbZzS9yCqoAxYMC5ulKDm4/s200/tapestrips_lightblue_grid+2.png) no-repeat top center;
height: 45px;
margin-top: -34px;
padding-top: 10px;
text-align: center;
}
background: #FFFFFF;
padding: 10px;
}
#HTML23 h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIxAEFg5lv_crQu5tvs7KMmFDI6D31qCjrTpZbOgsLK_hfCUggXZFxxTQF3FZtyU1VuYuapNCei7kSBfJcXHO994uEgsldsbFS4P7e_zdbNl3Q2ZG9rV8jKbZzS9yCqoAxYMC5ulKDm4/s200/tapestrips_lightblue_grid+2.png) no-repeat top center;
height: 45px;
margin-top: -34px;
padding-top: 10px;
text-align: center;
}
You can see that I've identified the widget -- #HTML23. The first set of code basically means I made the background of my widget white (#FFFFFF) with a padding of 10px on all sides. You can adjust this as you see fit.
The second set of code refers to the widget title (h2). For the background, I put down the image URL of my tape strip (in blue). For your own widget, you may need to adjust the placement of the image (top center, bottom left, bottom right, etc.), the height, margin-top, padding-top, text-align (left, right, center). Edit the measurements and preview your template to see how it looks. Play around with the measurements until you're satisfied with how your widget looks.
6. Once I was satisfied with how my widget looked, I clicked on Save. Then I did the same for all the other widgets on my blog.
And that was it.
For more on how to style or customize your sidebar widgets, you can go to where I learned the trick: http://www.blogbulk.com/2010/03/widget-customization-how-to-style-each.html.
If you have any questions, feel free to email me or comment. :)
0 comments