Tuesday 4 March 2014

Filled Under:

how to design blogger template

                    Blogger is a one of the powerfull platform providing by google.here you not pay or any hosting charges for your domain or blog. and so google blogger flatform is success and perfect platform for blogging.you have to do few coding changes for better results of your blog. in this post i have explain tha how to create custom blogger theme so look this post and implement it for better results. just follw some below step to create a better theme other than,

1.https://www.blogger.com
2.sign in with google username and password
3.Go to your blog left menu open Template -> Edit HTML

IF ELSE Condition
if you want to display specific items on Article page than use the below code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
// Display content on Article Page
<b:else/>
// Display content on Home Page
</b:if>

If you want to display any specific thing on Home page, use following code.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
// Display content on Home Page
</b:if>

Sections
You can add multiple sections with attribute unique ID on sidebar part.

<b:section id='RecentPosts'>
</b:section>
<b:section id='MostPopularPosts'>
</b:section>
<b:section id='BuySellAds'>
</b:section>


You can find out those sections in Layouts part.




By clicking on Add a Gadget you will be find appear popup like below image and you can add a widgets in your blogger theme.


SEO - Search Engine Optimization

Search Engin Optimization is a very important for any blog or website for better search results and get best ranking in google. use below code to get better search results. you need to <title> part using followind code. this code helps to include article title as a page title.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<title>Website Title</title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Expand id="post" part.


Article Title
Replace data:post.title part with following code.this below code help to you to change your blog post title.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h2>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
<b:else/>
<h1>
<data:post.title/>
</h1>
</b:if>

Adsense inside Blog Post
Google adsense is a one of the way to earning money with blogger.if you have adsense code than you can easily earn money with your blog.Blogger is maximum allow three adsense ad inside article part.use the following code about the <data:post.body/> part. Go to Layout part click Blog Post edit and modify your ads.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.includeAd'>
<div>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</div>
</b:if>
</b:if>

<data:post.body/>

Social Buttons

you can Generates social buttons using below code.
// Linkedin Share Button
<script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
// Google Plus Share Button
<div class='g-plus' data-action='share' data-annotation='bubble' expr:data-href='data:post.url'/>
// Twitter Button
<a
 class='twitter-share-button' data-count='horizontal' 
data-via='TwitterUsername' expr:data-text='data:post.title' 
expr:data-url='data:post.url' href='http://twitter.com/share'/>
// Facebook Button
<iframe
 allowTransparency='true' 
expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;
 + data:post.url + 
&quot;&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&quot;'
 frameborder='0' scrolling='no' style='border:none; overflow:hidden; 
width:60px; height:70px'/>

Javascript Support files

include below javascript files within <head> or </body> end tag.

// Linkedin
<script src='http://platform.linkedin.com/in.js' />
// Google Plus
<script src='http://apis.google.com/js/plusone.js' />
// Twiiter
<script src='http://platform.twitter.com/widgets.js'/>
// Facebook
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>


If you have any queries than, please comment here.




1 comments: