About   All Tips   Tips by Category   Tips by Ability   Help!

Removing Minima Separators-Intermediate

There are a few things that come standard in a minima template that used to drive me crazy:
  1. The dotted line that separates widgets in the sidebar.
  2. The dotted line that separates posts.
  3. The lines around the header section.
I was grateful for these things back when I didn't have a clue how to create my own post/widget separators and header. Didn't take long before I searched for and succeeded at finding a way to get rid of them. Luckily, this is REALLY simple!


How to remove the widget separator in sidebars:
Find the 'Sidebar Content' section in the HTML of your blog.
Refer to the image above and change the 1px (circled in red) to 0px.
Preview and save.
------------------------------------------------------------------------------------

How to remove the post separator:
Find the 'Posts' section in the HTML of your blog.
Refer to the image above and change the 1px (circled in red) to 0px.
Preview and save.
---------------------------------------------------------------------------------

How to remove the lines around the header:
Find the 'Header' section in the HTML of your blog.
Refer to the image above and change the 1px (circled in red in two different places) to 0px.
Preview and save.

Nothing to it!

Clickable Slideshow- Intermediate/Advanced

*Some people have reported problems viewing the slideshow on their computers once it is created. The first 1-2 buttons scroll fine, then skip and return to the first button. If my sample slideshow does that for you and does not scroll the right way after refreshing your screen, then I would suggest that you not follow this tutorial. If you do choose to try making a slideshow, I would make sure it will work for you with just a couple of buttons before investing all of the time it takes to create a full slideshow. Be sure to refresh your screen a couple of times before chalking up your efforts as unsuccessful.


Sneaky Momma Blog Design
Sneaky Momma Blog Design
Sneaky Momma Blog Design
Sneaky Momma Blog Design
Sneaky Momma Blog Design


It's been awhile since I've done a tutorial over something somewhat complicated. Making a clickable slideshow (like the one above), is surprisingly easy. You have to work with HTML, but you do not have to make any changes to your template. However, it is a bit tricky if you've never worked with HTML before. Pay close attention to every little character. If this doesn't work for you, start completely over and try again. You can do this!

1. Find which buttons you'd like to use.

2. Copy their HTML codes into an easy to find list. Make sure to put spaces between the codes so that you can easily tell them apart. You can find these codes in the little grab boxes underneath the buttons on the blogs that they are on.

3. Go to customize-->add gadget-->HTML/Javascript.

4. Copy and paste the following code (the exact code used to make the slideshow above) into the big box.
<center><span ><span class="Apple-style-span" style="FONT-WEIGHT: bold"></span></span>
<marquee direction="up" onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="3" bgcolor="#ffffff">

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>


<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>

</marquee></center>


5. Replace my button's codes with each button that you would like to include in your slideshow. If you would like to add more buttons, simply add the button's code to the list, making sure to put it before </marquee></center>.
Ex: The HTML of one of my buttons looks like this:

<center><a href="http://www.sneakymommablogdesign.blogspot.com"
target="_blank"><img border="0" alt="Sneaky Momma Blog Design"
src="http://i409.photobucket.com/albums/pp178/sneakymomma/
smbdbutton-pb2.png"/></a></center>


You'll notice I repeated it several times so that you could see the slideshow effect. Just highlight my code and paste each button you want into your slideshow once.

6. Save.

You may have to go in to the code and delete the spaces in between the buttons, depending upon the desired effect. You can insert &nbsp in between each button to add a space.

You can change the background color of your slideshow to match your blog. Simply change the #ffffff (at the top) to whatever you wish it to be. You can find a hex code for just about any color by clicking here or by installing ColorZilla if you have Firefox.

Are some of your buttons not centered? Add <center>to the beginning of the individual button's code and </center>to the end of each button code. Most buttons are automatically centered.

This can be a little complicated, so take your time. Remember, if you don't get this on the first try, delete everything and start fresh. It's so much easier to begin again than to scrutinize every character trying to discover what was left out.

Have fun!