How To Place An Element Anywhere In Template

There are lots of badges or logo images available on internet like Google+, Facebook etc which you are interested to add on your blog. As you can see in our blog the placement of like box at left position of horizontal menu. You can adopt many methods to move elements all over the page but if you don't know enough HTML and CSS like languages then obviously this method is for you. You can also modify your Facebook fan box from here.

The tricks describe below is very simple and uses simple CSS properties like position , top and left  you can learn more about this property from here.

How To Move Element In Blogger Template

How To Move Facebook Like Button

First of all get your Facebook like button code from Facebook /  Edit Profile /  Resources / Social Plugins it is advisable you to choose iframe code.


or make your own Facebook like button by following code.

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggingtrick&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=200572536701215' style='border:none; overflow:hidden; width:450px; height:21px;'/>

• Replace bloggertricks with the your Facebook fan page name.

Wrapped the above code in a <div> box like this

<div>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggingtrick&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=200572536701215' style='border:none; overflow:hidden; width:450px; height:21px;'/>
</div> 

Add following inline CSS code to <div> tag.

<div style='position:absolute;left:800px;z-index:5;top:139px; '>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggingtrick&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=200572536701215' style='border:none; overflow:hidden; width:450px; height:21px;'/>
</div> 

Now your code is ready to place in blogger template.

How To Place Facebook Like Button In Header

If you want to place your Facebook like button in header, middle of header or in navigation menu, means at top position of your blog then search for following code in BT.

<div id='outer-wrapper'>

and place your Facebook like button code just below it

<div id='outer-wrapper'>
 
     <div style='position:absolute;left:800px;z-index:5;top:139px; '>

     <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggingtrick&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=200572536701215' style='border:none; overflow:hidden; width:450px; height:21px;'/>

    </div>
.
.
.
.
 

Please Note:-

• Please make necessary changes in left:800px or top139px to best fit on your choice.
• left: specifies the marginal distance from left side and top defines the marginal distance from top side.

In similar way you can also add twitter follower count widget in header or menu bar.

Apart from these widget you can also add logos, small and large images instantly.

This method is not recommended by most of the developer but if you are new to HTML or don't know even a single world then this tricks can be very useful for you.

More Amazing Stuff's

• Horizontal Menu Bar In Google Style
• How To Customize Blogger Comment Form