Blog, CSS, This is a method to easily move the positions of blog gadgets.

You can easily change the position of Blogger gadgets using CSS.

CSS Code:      #BlogSearch1{ margin-top: -10px  }

The part to note is id='BlogSearch1'

Particularly, it is important to distinguish between uppercase and lowercase letters.

We use this id in CSS to make position adjustments.

 

Below is a part of the HTML code when a blog search widget is added.

<b:widget id='BlogSearch1' locked='false' title='BlogSearch widget' type='BlogSearch' version='1'>

    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>

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

 

 

 

I brought another example.

CSS Code:      #Text5{ margin-top: -10px  }

 

Below is a part of the HTML code when a text label widget is added

  <b:widget id='Text5' locked='false' title='Text label widget' type='Text'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings> 

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

 

 

Tip!

We can now apply various things as shown below.

 

margin-top: -10px

margin-top:  30px

 

margin-left: -10px

margin-left:  30px

 

margin-right: -10px

margin-right:  30px

Copyright2021olympithecus