Showing posts with label Blogger Tips. Show all posts
Showing posts with label Blogger Tips. Show all posts

Tuesday, 4 March 2014

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.


how to create blog in google blogspot

                            Google blogger is a better platform for blogging. it free and easy to customize to do just few code changes to implement for better results. if in your mind that how to create blog on google blogspot than don't worry here follow few step to create blog on blogspot and spread your knowladge and earning money with google.follow below step to create a new blog,

 



How to create blog on Google Blogger

1.https://www.blogger.com
2.sign in with google username and password
3.click on create a blog.
4.enter blog title, blog address and select blog theme and click on create blog! button.now    your blog ready to use  create post and spread your knowladge and business with your best skill.


Wednesday, 5 February 2014

how to display code in blogger posts

            
               Source Code Formatter for Blogger, Blogspot , Blog & Blogging is a one of the powerfull utility of javascript. JavaScript was developed by "Brendan Eich". javascript is a one of the dynamic computer programming language. and it is mostly used in web browsers.it is implementations allow client side scritps to interact with the user.
here you can easily display code in your blogger page or posts.just follow some step to display any languages code in your blog.

->  This source code formatter allow languages like Javascript, HTML, CSS, C#, PHP,           ASP.net, VB.net, Visual Basic, DOT.net, ASP and other languages.
->  This is a javascript application so don't publish your secrete source code here.


1.go to blogger.com
2.click on Template which are located at left side.
3.click on Edit HTML button.
4.Ctrl+f to find </head> and copy below text and paste this code before finish </head> tag
 
 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>   
  <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>   
  <script type='text/javascript'>  
  SyntaxHighlighter.config.bloggerMode = true;  
  SyntaxHighlighter.all();  
  </script>  
5.Ctrl+f to find <style> and copy below class and paste in the <style> tag.
 
 .codestyle  
  {  
   font-family:arial;  
   font-size:12px;  
   border:1px dashed #CCCCCC;  
   width:99%;  
   height:auto;  
   overflow:auto;  
   background:#f0f0f0;  
   background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggld3aVV9BD8xQZw2TvOTYYLGN10TmkVFNfjk4Tup8f5QLBO9E0Vrd1PgfNVn7gAQFrIMsx9j5oLpCC6l0Jrn2jXwIP2hY6tfAygVL9eMOanQX6zvb_QiOmDkmRBG-MzusvlKXFL_ofClT/s320/codebg.gif);  
   padding:0px;  
   color:#000000;  
   text-align:left;  
   line-height:20px;  
  }  

6.and than click on save template button to save your changes.
7.now go to your post or page whare you want to display code in your blog post or page.
8.click on HTML button whose located below your post or page title textbox.
9.go to this link http://www.easyscript4u.com/demo/codeformatter/ and Paste your code in first box and
  than click Format Source Code button.than your formmeted source code will display in second box copy
  it. you can see your code look like third box.copy below code and paste your formatted code within the
 
 <pre class="codestyle">  
      <code style="color:#000000;word-wrap:normal;">   
        PASTE YOUR FORMMTED CODE HERE.   
      </code>  
  </pre>  

10. now you can see your code in your blog. See Below Example,

 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <title>Easyscript4u.blogspot.in</title>  
 </head>  
 <body>  
      Syntax Highlighter Demo for Blogger and web page By Bhavesh Bodar.   
 </body>  
 </html>