Iklan

Creating Two Column Page Element Add Gadget Under Column Post

Creating Two Column Page Element Add Gadget Under Column Post

Go Widget - Before I installed the widget recent posts by label or category, I think need to put the widget where? Because the sidebar and footer of my blog is full, I finally took the initiative to create two new gadgets plus page elements under the column posts.

Well on this occasion, God willing, I shall make a tutorial to add two columns added gadget page elements below the post column that I apply this blog.


Okay, please follow the steps below:


1. Login to your account on the dashboard click >> >> >> Edit HTML Template (Do not tick Expand Widget Templates).

2. Then find this code or something similar:

HTML - Go Widget

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>


3. If it can place the following code under the code </ b: section> before </ div>

HTML - Go Widget

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='gowidget-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section class='sidebar' id=' gowidget-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>


Until this point, you can see a preview of the template or the preview but is still located on the left column is not in the center position. For that you need to add again the following CSS code to make both columns are in the middle position.

4. Look for the code]]> </ b: skin> and place the following code before the code]]></ b: skin>

CSS - Go Widget

# gowidget-left {
 width: 45%;
float: left;
}
# gowidget-right {
width: 45%;
float: right;
}


You can still add the CSS code above, for example, add borders etc, please creativity!

5. Do not forget to click preview or save the template to immediately see the results.

If you managed to follow every step described above, the layout of the part you will see the following screen shoot post column as follows:

Thus tutorial add elements added gadget page under the column posts. Hope it is useful!

If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget

Next
Prev Post
Previous
Next Post
Buka Komentar