How To Sparate Gadget Sidebar Blogger


You should keep in mind:

► this is the example for the Blogs that already have a customized (stylized) Sidebar (colorized, borderized..)
► this example was made in Minima Blogger template (so your code may be a bit different, but the procedure is the same)
► it doesn't matter if you have "heavily" customized template, you can apply these setting anyway

UNDERSTAND THIS
We have to imitate the main style of our sidebar-wrapper (the one that carries the style for the whole sidebar element), and apply it to individual widgets (gadgets). Here's the style of the sidebar-wrapper in this example:
#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
...the styles we're interested in here are: background and border
...next is to apply this to our widgets...

Ok, LET'S DO IT
First, back up your current Blogger template. Then, go to: LAYOUT ► EDIT HTML ► and locate this part in the code (this is for default Minima blogger template, it may look a bit different for you):
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
...DELETE it, and replace with this one:
.sidebar .widget {
background:#ADD8E6;
border: 1px solid #E9967A;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
...we've divided the main widget and sidebar widget in order to apply the style...
...in pink, you can see the copied style from sidebar-wrapper...
...in green, you can adjust the padding of the widget content (if the padding was 0px, the text would be to close to the border)..

► Next thing is to delete (hide) the style from the sidebar-wrapper. Why? Because if you don't, your sidebar will look like this:
To avoid this, find the sidebar-wrapper:
#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
...and DELETE the background and border (or any other style you've applied to your widgets/gadgets):
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Komentar

Posting Komentar

Postingan populer dari blog ini

Blogspot Template Elements

Gambar
The #main and .post are the titles of each containers. Each container codes must be contained within {...} . For the explanation below, we'll focus on the codes inside the post block, especially for the explanation on the margin and padding (the codes colored in red ). Margin - sets the distance between the border of the container to the border of a parent (larger) container outside it. There are 4 numbers defining the Margin property. The 1st number sets the top margin, the 2nd sets the right margin, the 3rd number sets the bottom margin, and the 4th number sets the left margin. It basically sets the whole margin in a clock-wise fashion starting from the top. In the case above, the parent container for the post container is the main container. See how the dashed border for the blue ( post ) container is placed inside the green ( main ) container following the post block's margin command (the codes in red). If the post 's margins are all set to zero, then th
Baca selengkapnya

Customization Posts Title Blogger

Gambar
How to customize your blogger Posts Title ...we can add some background picture behind the post title, or borders, change font...........................well, a lot. Before doing any customization, back up your template. Just in case.... Let's start with the beginning. Heh. For customization, we will use the CSS style in the code section that corresponds to our Post Title : .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; } ..... Attention: this example is made in Minima Blogger default template, so your actual code may differ a bit it's important to find the part ".post h3", or if you have custom template, the find the part that "carries" the style for your Post Title... It's also important to know the width of your Post Title area, which is basically the same as your Post Content area ("main-wrapper" by default). This information, you'll find in this part of code:
Baca selengkapnya

How To Remove Showing Posts With Labels Blogger

Gambar
Here's one more thing which folks find irritating. Or unnecessary. When you click on one of your labels, blogger filters your posts tagged with that particular label. That's great, but we don't need a big box saying the same thing. If you like it though, even better. But maybe your readers don't... So, if you want to remove it, follow me. It's an easy one. Log in to your Blogger account, Back-up your template, then go to: DASHBOARD -- LAYOUT -- EDIT HTML -- hit EXPAND WIDGET TEMPLATES , find the following part of code: <b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='c
Baca selengkapnya