❥ Cookie Valley: July 2010

Saturday 31 July 2010

Each post in separate box

Ok. You should keep in mind:

► this is the example for the Blogs that already have a customized (stylized) Post area
► 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
....main-wrapper defines the Post area in Blogger Template. The whole idea here is to copy the style of main-wrapper, and to apply it to elements inside of it.

....now, the whole section of "main-wrapper" looks like this (in my example):

#main-wrapper {
background:#FFDEAD;border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
width: 410px;
float: $startSide;
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 part in white is default, and I've customized template a bit with part in orange.

...I've also added some padding so the text is not too close to the edge. Read more about adding borders in Blogger here.
...your style will be different, of course. But this doesn't really matter .

So, you want to keep the same style (design) and separate posts into individual boxes. Here's:

HOW TO DO IT
First thing you should do is back up your current Blogger template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML, and in the code section, find the following line of code:

#main-wrapper {

...in my example the whole section looks like this:

#main-wrapper {
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
width: 410px;
float: $startSide;
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 */
}

...now, I'm going to copy the style (in orange) and paste it in my main-wrapper elements (find the following lines in code):

h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

....after pasting the code, it should look like this:

h2.date-header {
margin:1.5em 0 .5em;
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
}

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
}

....you can see the added code in orange.

Next thing is to hide (or delete) the copied style from "main-wrapper". If I don't do this, my template will look like this:

....to avoid it, I'll hide the style in "main-wrapper" using /* and */....in the code it's like this:

#main-wrapper {
/*background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;*/
width: 410px;
float: $startSide;
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 */
}

...alternately, you can just DELETE the style from the main-wrapper...
...now, the style for main-wrapper is disabled, and you can see a gap (a Blog background, in fact) between your posts...

FIX
To align your sidebar with the post section, find this part of code:

h2.date-header {
margin:1.5em 0 .5em;

..and change it to:

h2.date-header {
margin:0 0 .5em;

Preview and then Save Template.
thanks to pocket ^^

Photo's border

From this

To this

Find this code

.post img {

change the NUMBER to 0

border: NUMBER px

the border will be GONE! :D

OR if you have a different template and you can't find the code above.

find this code (ctrl+f) :-

post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

padding: 5px;

background: #fff;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

Delete the code in RED.

preview and then save ^^

How to create a 3 column blogger template

From: bloggerbuster

First of all, set your template to Minima (not the stretch template, but any colour will do!) then follow these instructions:

Go to Template -> Edit HTML, leaving the "Expand widget templates" box unchecked.
Now, find this section in the HTML code:

#sidebar-wrapper { width: 220px; float: right; 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 */ }

Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:

#left-sidebar-wrapper { width: 220px; float: float: left; 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 */ }

This will provide the styling for the new sidebar element which we will create next.
Now, you need to find this section further down the page:

<div id='main-wrapper'>

Immedietly before this section, you should paste the following piece of code:

<div id='left-sidebar-wrapper'><b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
Find this section in the HTML code:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width:660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.
You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
Find the following code in your template's HTML and add the code in red:

#main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }

Now, your previewed template should look like this:

7. Finally, save your template and enjoy your new sidebar!

The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.

Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.

Here is a download of the three column Minima template for reference (or if you prefer to use a preconfigured template instead!):

Download 3 column Minima template

How to add back to the top (CCS)

the errors & differences :
the image or text would align in the middle only and only could be found when you scroll until the bottom of the page.

dashboard -> template -> edit html

copy this code below and the paste it below <head> *it can be found at the top of the codes*

<a name="formtop1">

copy this code.

<a href="#formtop1"><img src="direct link" ></a>

paste it before this code below. *it can be found at the end of the codes*

</html>

 ......  is the font style if you want normal font style you do not need to add this code.
<img src="direct link" > this is what you want your picture/ text to be.

it should look like this :-

with image :
<a href="#formtop1"><img src="http://dl10.glitter-graphics.net/pub/79/79730l4d8pj2fyu.gif" ></a>

with text :
<a href="#formtop1">Click here to return to the top of this page</a>

OR
this code:
<a href="#formtop1"><img src="direct link" ></a>
can be added anywhere you like ^^ example : in the end of the posts (:

How to change page title text style

example :-

from this,

to this.

first go to

dashboard -> design -> edit html

find this code (ctrl+f) :-

 ]]></b:skin>

then, copy and paste this code before the code above

.PageList li a {

font-family:Comic Sans MS;

font-size:100%;

font-weight:normal;

}

font-family:Comic Sans MS is the style of the font you want.

font-size:100%; is the font size

font-weight:normal; is the font weight, you can have normal, bold, italic & etc.

● change them as how you want.

preview and then save ^^

How to add back to the top image

dashboard -> design -> edit html

find this code

]]></b:skin>

before it add this code

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Then.

find this code

</body>

before it add this code

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

replace Image-Url with the image you want.

Icons can be found here :-

http://www.myem0.com/

http://www.glitter-graphics.com/

http://www.photobucket.com/

example :

<a href="#" id="backtotop"><img src="http://i269.photobucket.com/albums/jj72/myem0/01/onion-emoticon-031.gif" alt="back to top" /></a>

If you do not success,

find this code

<head>

after it paste this code

&amp;lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script language=&amp;quot;javascript&amp;quot;&amp;gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&amp;lt;/script&amp;gt;

tutorial from : http://www.allblogtools.com/

How to change blogger background

dashboard -> design -> edit html

1. find (ctrl+f) this code: body {

2. copy and paste this code background-image: url(image url); after body {

it should look something like this :-

preview and then save ^^

Add image in front of post title

Design -> Edit html

Find this code below (ctrl+f)

.post h3 {

It should look something like this

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

Add the code below to the code above:-

 .post h3 {
background-image: url(DIRECT LINK);
background-repeat:no-repeat;
border: 0px double #FFFFFF;
margin-bottom: 6px;
padding: 10px 3px 15px 75px;
line-height: 2.0em; 
text-transform:uppercase;
letter-spacing:.1em;
}

Change the DIRECT LINK with the link of the image you want.

Change the padding to align to suit the image you want.

PREVIEW until the image is align beside the title

lastly "SAVE"

Change pages to button

Learn how to change the text pages

to a picture one ^^

Firstly create pages

Dashboard -> Posting -> Edit pages -> New page

create the pages you want and publish ^^

Then go to Dashboard -> Design -> Page Elements

add gadget

insert the code below.

<a href="URLOFPAGE"> <img src="URLOFPICTURE" /> </a>

URLOFPAGE is the link of the pages

URLOFPICTURE is the picture you want to link it to the pages

Picture can be edited by your own and uploaded to photobucket or anywhere as long as you get the link of it.

You can ADD

to make it on the center or left or right of the page

then click "SAVE"

REMOVE the pages tool if you have it in ur Page elements

lastly remember next time you update your pages choose no gadget

How to change favicon

Learn how to change blogger orange favicon to other attractive favicon ^^

Dashboard -> Design -> Edit HTML

Find the following code ctrl+f

<title><data:blog.pageTitle/></title><br/>

ctrl+c to copy

copy and paste this code BELOW the code above

You can replace the URL with the URL of the image you want ^^

Icons can be found here http://ego-box.com/pixels/

❥ Cookie Valley

Saturday 31 July 2010

Each post in separate box

Photo's border

How to create a 3 column blogger template

How to add back to the top (CCS)

How to change page title text style

How to add back to the top image

How to change blogger background

Add image in front of post title

Change pages to button

How to change favicon

Thank you

Want to be one of us?

i am krystal

i am holly

Upgraded blogger tutorials

Classic blogger tutorials

Tips for you

Chat box backgrounds

Freebies

Websites for Help

Grab our button

Blog Archive

Labels

From 01082010

Followers