April 07, 2025
Advertisement

Latest News

  1. jQuery Content Scroller
  2. Banner Rotator jQuery
  3. Unleash Accordion Slider
  4. Parallax Slider
  5. Galleria
  6. Showbiz Pro Teaser
  1. Banner Rotator jQuery
  2. Unleash Accordion Slider
  3. Parallax Slider
  4. Galleria
  5. Showbiz Pro Teaser
  6. KenBurner Slider jQuery

ELECTRIC GUITAR

    "How Blogs we immediately famous and swamped" 1. Start by setting Permalinks This is the earliest s...

Published by Admin

TOP LINE

Free Keyword Research Tools 1. Google Adwords Keyword Research Tool Google adwords external keyword tool is the best t...

Published by Admin

LATEST

Blog is short for web log is a web application that resembles the form of writings (published as a post) on a public web pag...

Published by Admin

TUTORIALS

HIGHLIGHT

Demo Download DZS Content Scroller is a solid, ad [...]

Published by Admin
06 Aug 2013 0 comments

Demo Download  UPDATE COMPLETE, VERSION V 3.0 IS AVAIL [...]

Published by Admin
06 Aug 2013 1 comments

Demo Download ChangeLog: Version [1.1] The Slider is Now responsive [...]

Published by Admin
06 Aug 2013 0 comments

PERFORMANCE

Cara Membuat Recent Comment di Blog : Masuk blogger > Design/Rancangan [...]

Published by Admin
18 Sep 2012 1 comments

Ada pilihan untuk memasukan username, warna background, dan jumlah follower. [...]

Published by Admin
18 Sep 2012 0 comments

Tutorialnya mudah, ikuti langkah-langkah dibawah ini : Cara Pertama : [...]

Published by Admin
14 Sep 2012 0 comments

How to Make a Background Effect In Blog

By Unknown - Friday, September 7, 2012

Some of the techniques are different ways and different styles following:
  1. Colour Background Style
    The color on a background of a widget using the syntax: # color code, and following more:
    #side-wrapper {
    float: left;

    margin: 0px 0px 0px 0px;

    padding: 25px 0px 0px 0px;

    width: 315px;

    background: #ffffff;

    }












    Add the red code as above on the widget you want to add a background color. For color, you can use the color code found on the page menu on this blog, or Online Tool to determine the color code, and do not forget to use the pound sign (#) before code.
  2. Image Background Style
    This is the technique provides images as background in a widget on your blog. Consider the following picture:
    Cara Memberi efek background pada widget blogspot Image Background
 Style
    Well, for the installation of this style, there are some changes to the syntax. Here's more:
    .post-footer {
    display: block;

    margin: 15px 0px 25px 0px;

    padding: 7px 20px 7px 20px;

    text-align: left;

    font: $postfooterTextFont;

    color: #ffffff;

    font-weight: normal;

    line-height: 1.6em;

    text-decoration: none;

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid96US6x2s1peA4sYHNUaq8wFuTZj1NTYGQzodTkP7IDVd_anpl5_T3nVemDLsvn71FiWi4M_J1WJKprXg2k2KOcgJWMbDpq2eRSJIr31_VpBXQiLV0Gh_cEuseJBx8DeY_-V5ZD4Uu-4/s1600/banner+demomaskolis.jpg");

    background-color:#0092dd;

    background-position:top right;

    background-repeat:no-repeat;

    border: 1px solid $postfooterBorderColor;

    }
































    Description:
    • Background Image URL filled image.
    • Background Color filled color coded in accordance with the drawings.
    • Position filled with background image placement position. example :
    •  top-left, bottom-left, top-right, bottom-right, center-right, center-left. Background Repeat filled to the side where the image will be repeated. For up, use repeat-y to: background-repeat: repeat-y; For sideways, use repeat-x to: background-repeat: repeat-x; And if you do not want repeated use no-repeat as early examples.

3.  Hover Image Background Style
Unique style, such as those used for a link. ie change color when the mouse approached, his name HOVER STYLE. This technique can also use the images. For installation, make sure the code. Widget on CSS that will be the background. For example is the following code:

#main .widget {
margin: 0px 0px 0px 0px;

padding: 0px 25px 20px 25px;

}










Above is the code for the main-widget, to the sidebar usually use code:

#sidebar .widget {
margin: 0px;

padding: 0px;

}










Giving this effect very easily. Copy-Paste the entire code of the widget and put it on the bottom, then add: hover at the end of the widget style, and give background on the code above. Learn more:

#main .widget {
margin: 0px 0px 0px 0px;

padding: 0px 25px 20px 25px;

}


#main .widget:hover {

background:#e3e3e3;

}













My friends can modify to suit all tastes.

Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS

0 komentar for "How to Make a Background Effect In Blog"

Leave a Reply

Pages 22123456 »
Advertisement