Saturday, 31 July 2010

Each post in separate box

[prije-poslije.gif]


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 ^^  
Photobucket

Photo's border

From this
To this
Find this code
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 ^^
Photobucket

How to create a 3 column blogger template


First of all, set your template to Minima (not the stretch template, but any colour will do!) then follow these instructions:
  1. Go to Template -> Edit HTML, leaving the "Expand widget templates" box unchecked.
  2. 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.

  3. 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>
  4. 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.
  5. 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; }
  6. 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!):

    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*

    <p><a name="formtop1"></p>
    copy this code.

    <p><a href="#formtop1"><b><img src="direct link" ></b></a></p>
    paste it before this code below. *it can be found at the end of the codes*

    </html>

    <b> ...... </b> 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 :
    <p><a href="#formtop1"><b><img src="http://dl10.glitter-graphics.net/pub/79/79730l4d8pj2fyu.gif" ></b></a></p>

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

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

    How to change page title text style

    example :-
    from this,
    to this. 
    first go to
    dashboard -> design -> edit html
    find this code (ctrl+f) :-
    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 normalbolditalic &amp; 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 :- 

    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)
    It should look something like this
    Add the code below to the code above:-
    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"
    Photobucket

    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.
    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


    <center> CODE </center> 
    <left> CODE </left>
    <right> CODE </right>

    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
    Photobucket

    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


    ctrl+c to copy
    copy and paste this code BELOW the code above


    <link href='http://i214.photobucket.com/albums/cc105/24168/egobox/vf/pixels/icons/8.gif' rel='shortcut icon' type='image/x-icon'/>
    <link href='http://i214.photobucket.com/albums/cc105/24168/egobox/vf/pixels/icons/8.gif' rel='icon' type='image/gif'/>

    You can replace the URL with the URL of the image you want ^^
    Icons can be found here http://ego-box.com/pixels/

    Photobucket

    How to change mouse cursor

    Dashboard -&gt; Design -&gt; Edit html 
    Find the following code ctrl+f
    ctrl+c to copy

    COPY and PASTE this code BELOW the code above. 
    <style>body {cursor:url(http://ego-box.com/cursors/68.ico), url(http://i214.photobucket.com/albums/cc105/24168/egobox/vf/yours/cursors/68.gif), auto;} </style>

    click 'SAVE' and you have a new cursor ^^
    (You can replace the URL which are the text in red with the cursor you want)

    SOME MOUSE CURSOR FOR YOU ^.^


    <style>body {cursor:url(http://dl6.glitter-graphics.net/pub/1973/1973896vk6xnw31c2.gif), url(http://dl6.glitter-graphics.net/pub/1973/1973896vk6xnw31c2.gif), auto;} </style>

    <style>body {cursor:url(http://dl8.glitter-graphics.net/pub/1972/1972038i57q00zegv.gif), url(http://dl8.glitter-graphics.net/pub/1972/1972038i57q00zegv.gif), auto;} </style>


    <style>body {cursor:url(http://dl.glitter-graphics.net/pub/1973/1973901xnes5ui14x.gif), url(http://dl.glitter-graphics.net/pub/1973/1973901xnes5ui14x.gif), auto;} </style>
    Some websites to get cursor ^^

    *if you get ur cursors in ego-box you just have to copy the code from
    <style> .....to.... </style>
    Photobucket