Go to edit html , choose the desired place where you keep the New widget and just paste the given code below.
CODE to create new widget :
<!-- New widgets container Start -->
<b:section class='slider' id='slider' maxwidgets='4' name='slider' showaddelement='yes'/>
<!-- New widgets container End -->
<b:section class='slider' id='slider' maxwidgets='4' name='slider' showaddelement='yes'/>
<!-- New widgets container End -->
NOTE:
- In the above code "slider" is the widget id name, you may change the id name as per your desire requirement but be remember the widget id name always be unique as only one widget id are allowed in one template.
styling for "widget ID " using CSS :
#slider { margin:0 auto; background:#eee; }
styling for "widget class" using css :
.slider .widget { margin:0px 0px 0px 0px; background:#eee; }
NOTE:
- The "Widget ID " styling applied on whole widget structure. some styling like margin,height applied on both template layout and blog view segments.
- The "Widget class " styling applied on widget inner add on gadget .
Remove widget margin from bloggers mobile template:
html .header-outer { margin: 0 px; }
html .main-outer { margin: 0px;}
aaa
html .main-outer { margin: 0px;}