How to enable widget function to elements in your blogspot

Many peoples ask me how to insert widgets in elements in blogspot such as sidebar ,main post ,or header in a template . They can't add widgets from Page elements because they see no "Add a widget" link . It mean template is not widget ready .
How to enable widgets function to all element in your blog ? and you can insert widgets in any place you like ?
I explained this in comments for template Simplex Darkness ,and now I write it down here as a tip for any template .
It's very simple .You can see in template files, widget is covered by this tags :
<b:section id='section_id' preferred='yes'>
widget 1
widget 2
widget 3
</b:section>

To enable widget function to a element in blog ,you can add this
<b:section id='section_id' preferred='yes'>
</b:section>

in template file ,where you want to insert widget . For example ,in header, the layout tags of header like this :
<div id="header">
......
content of header
.........
</div>

to insert widget in header ,just insert code above between <div id="header"> and </div> like this

<div id="header">
......
content of header
.........
<b:section id='section_id' preferred='yes'>
</b:section>

</div>

now you can insert widgets in header . The same to other elements such as sidebar or main post ,or footer ...

pay attention to the code
<b:section id='section_id' preferred='yes'>
</b:section>

section_id
is id of section ,it must be unique .
preferred='yes' : mean it will show " Add a widget " link in Page elements . If you set this value 'no' . You will see no link "Add a widget" in Page elements .

Hope this helpful to you

huy signaturesenyumkenyit

Share this post

Advertisement

2 comments

  1. brother nhamngahanh,

    I have tried on the header and it shows the link "add widget". I need one more help brother.

    How do we want to divide the header into two sections: Left and Right. I want to use it for:
    Left = my logo
    Right = my banner

    Kindest Regards,

    Budiarno

    NB:
    I subscribe to your RSS Feed lately but this post does not show in my email inbox. What happens bro nhamngahanh?

    ReplyDelete
  2. @Budiarno : You just add two div elements in your header and format it with css attribute float ,one float:left and one float:right
    That's all .
    For example
    <style>
    #logo {
    float:left
    }
    #banner {
    float:right
    }
    </style>
    <div id="logo">
    your logo
    </div>
    <div id="banner">
    your banner
    </div>

    For RSS Feed ,I don't know why you don't receive any mail from me ,did you active the subscribe mail ? When you subscribe by mail ,there's a mail sent to you for confirming service and you must click on the link in this mail for confirming .
    If you did,please choose subscribe one more time . May be some errors occurred in Feedburner system so your register wasn't complete .
    thanks for commenting

    ReplyDelete