Customise scroll bar

Upgraded blogger;


1. Design -> Edit HTML
2. Copy and this code

::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;
}
::-Webkit-scrollbar-thumb {
background-Color: #999999 ;
}

3. Paste it above 

]]></b:skin>

Classic blogger; 


1. Template
2. Copy and this code

::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;
}
::-Webkit-scrollbar-thumb {
background-Color: #999999 ;
}

3. Paste it under

<style type="text/css"> 

--------------------------------------------------------------------------------------------------------------------


If you want your scroll bar to have rounded corners add

-moz-border-radius: 5px;
border-radius: 5px;

under ::-Webkit-scrollbar-thumb { 

It should look like this :

::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;}
::-Webkit-scrollbar-thumb {
-moz-border-radius: 5px;
border-radius: 5px;
background-Color: #999999 ;}

--------------------------------------------------------------------------------------------------------------------

If you want to add border you will have to use this code.  (this would include to all your scroll bars)

::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height:  12 px;
display: block;
background-color: #999; border:1px solid #ffffff;}::-webkit-scrollbar-track-piece {
background-color:#999;
}
::-webkit-scrollbar-thumb{
background:#ddd;border:1px solid #ffffff;}::webkit-scrollbar-thumb:vertical {
background:#fff);
border: 0px solid #ffffff;
border-right:none;
}
::webkit-scrollbar-thumb:horizontal {
background:#fff;
border: 0px solid #ffffff;
border-bottom;
}

(Red is where you change the colours of the scroll bar)

Colour codes can be copied from here ; http://justanothertutorial.blogspot.co.uk/2011/11/colour-code.html

How to add scroll back to the top image

Upgraded blogger ; Design -> Page Elements -> Add gadget -> Paste the code given into  "HTML/JavaScript".

Classic blogger ; Template -> Find "</title>" Paste the code given BELOW/UNDER </title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var scrolltotop={
   setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="图画 URL/IMAGE URL" style="filter:alpha(opacity=70); -moz-opacity:0.1; " />',
    controlattrs: {offsetx:40, offsety:70},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
                mainobj.$control.css({width:mainobj.$control.width()})
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

Preview and then save . 

Remember to delete 图画 URL/IMAGE URL and then replace it with your own image ^^

Add image in front of post title (2)

This tutorial is for template from Template Designer.

Design -> Edit html Find this code below (ctrl+f)

h3.post-title {

It should look something like this , delete this code

h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

Add the code below :-

h3.post-title {background-image: url(http://dl7.glitter-graphics.net/pub/1822/1822977ocowzh2qvg.gif);
background-repeat:no-repeat;
border: 0px double #FFFFFF;
margin-bottom: 6px;
font: $(post.title.font);padding: 10px 3px 15px 75px;
line-height: 2.0em;
text-transform:uppercase;
letter-spacing:.1em;
}

Change http://dl7.glitter-graphics.net/pub/1822/1822977ocowzh2qvg.gif with the link of the image you want.
Change the padding to align to suit the image you want.
Change the last padding if the image is far away from the image :)
PREVIEW until the image is align beside the title lastly "SAVE"

Add facebook like in posts.

↑
Example

First step :
Design -> Edit HTML-> in the Expand Widget Template box, tick the small tick box , then use Ctrl + F to find the following code
设计->修改 HTML-> 在扩展窗口小部件模板的小格子打勾, 然后用Ctrl+F寻找以下的code

<div class='post-header-line-1'/> 

If you can not find <div class='post-header-line-1'/>, then find this following code
如果找不到<div class='post-header-line-1'/>，就找以下这一行

<data:post.body/>

Step Two:
Copy the code below then paste it after the first code.
把以下的code放在步骤一的语法之后。

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Red part changes the wording to be displayed. 
红色部分为可更改所要显示的字眼。
Green part change of the font style.
青色部分为可更改的字体。
Blue part controls your button color theme, and you have three options, light, evil, or dark.
蓝色部分控制您的按钮的颜色主题，你有三个选择，light，evil，dark。

Click 【Preview】 to see the effect.
按【预览】查看效果。


Don't forget to save.
不要忘了保存模板。


from : Celestine

Edit pictures for button

this an additional tutorial for change pages to button

how to get the button's image

first get a blank picture without any picture like this :)

you can download it here if you want, just click on it

you can choose any size you want, just resize it. 

using the paint brush tool,

colour the whole picture with the colour you want

then add text to it and also a little picture beside it

example

you can add some border to it too if you like :)

using photoscape :

if you want to change the opacity of the picture just double click it :)

using meituxiuxiu, 美图秀秀 :

some tutorial from 美图秀秀

change the opacity of the picture

饰品调整透明度

change the size of it

饰品调整大小

rotate it

饰品调整角度

save it as a new picture. 

and then upload to one of these website.

Photobucket

Image Shack

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:

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!):

Download 3 column Minima template

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 &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 :- 

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

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

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

<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