Blog Design 2015

I do not own any image sources in blog design, all are get from other sides.

This is the first one I merge them together but I don't like it overall.

Want to easy fit the full size of the picture you want? And can archive below 300kb?

Use this method and see....

1. Open any image editor software

2. New > 20 in x 10 in > 100 pi

3. Place the image you want. The canvas is overall more on horizontal size, eg : 1920 x 1080 pixel

4. Save as, if your image contains a lot high quality effect or colours may need to lower down the quality, especially for illustration. Jpeg always the best.

2nd Choice.

Btw, I choose this one. The illustration is awesome and all credit to the artist.

The Original.

The Head.

My cursor.

Body

Foot.

Overall, I adjust the colours only.


(Updated on 9/4/2015)
For Easy Scrolling from top to bot/ bot to top.
Up/Down Buttons (CSS Links)

eg:
 /* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmra8rKs7Xq7hqjeKdfe4DeauExZkN8UqEmM6WCLXc0agWBKzqIOiP1-KSyqXte9uq6OWUki4cnQq1_N-dz7tcAqVaFfVevTcLgDf8eQdchhI1Dp0FXwmkgtmW8ib8zmrmTPcgFIVsF8/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgppt1jtLEd_9AFLdfQkN_iwYF5igKbWk94CMFU5M3joMxK051i_71fm_RHL5LRqBj61qiD-MqX5YHkJ0lxO3TXLkJx20cjnYTmN9giuqqyBIph-vAMKVInorQTw1OP8UC34pnqNc5zPew/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

_____
You can change the links with the picture(buttons) you want.
Sources: Google Search.