Archive for 2013

Template selection in Blogger


Blogger provide Simple Template,Dynamic Views Template,Picture Window Template, Awesome Inc.Template,WatermarkTemplate,EtherealTemplate,TravelTemplate,

Simple Template




Dynamic Views Template



Picture Window Template


Awesome Inc Template


Watermark Template



Ethereal Template



Travel Template


What is the use of URL


URL is the address of your blog or website
When you start thinking of doing a business,Tutorials through internet,first thing which you think about is your web site domain name
Many people think it is important to have keywords in a domain. Keywords in the domain name are usually important, but it usually can be done while keeping the domain name short, memorable, and free of hyphens.


Remember following points

  • Why do you want to build your website or blog?
  • Who is your target audience?
  • What they need from you?
  • What you intend to sell to them. Is it a tangible item or just text content?

How To Create Post in Blogger

Step 1:

Click 'New Post'






















Step 2

If you dont know HTML Click 'Compose'

























If you know HTML Click 'HTML'



















Step 3:

Now you create Post
  • 1st Step Enter Your Blog Post Title
  • 2nd Step Write Your Post
  • 3rd Step Click 'Publish Button'

















Step 4:

Now View Your Post

















What is the use of Title in Blogger

The Title is very important of your blog.Title reach your blog to visitors. Without Title in your blog or website you can not view your blog in Search Engine.
Example
When i was create my demo blog i had given Title "Blogger Panel Lab"






How is the Title Work in browser ?











How is Title Work in Search Engine ?













Change the Date Header Format Format in Format Panel










1. Change the Date Header Format Format in Format Panel
Dashboard ›› Settings ›› Language and formatting ›› Date Header Format










2.Or Change the Timestamp Format in Format Panel
Dashboard ›› Settings ›› Language and formatting ›› Timestamp Format


















Done

How To Install New Template In Blogger

Firstly Download a Template From Internet. You Have Get a Zip File. Please Extract It And You Will Find a .xml File. Extract This .xml File On Your Computer/Laptop Desktop.

Step 1:

Go To Your Blogger Dashboard.










Step 2:

Then a Popup Will Be Shown This Type

Then Click On Backup/Restore Button








Before Install download old template


Click On Choose File Button.


Select the Xml File On Your Desktop.


Then Click On Upload Button.

How To Create Expandable Post Summaries in Blogger

Expandable post summaries can actually provide your blog a professional look and much more exposure to your content. When I applied Expandable post summaries in my blog, my page views increased by almost 50-60 percent on that very day.The more exposure to my content also resulted in getting more returning visitors and hence increasing faith in my readers towards my content.

Expandable post summaries are easy to implement and can provide your homepage a better professional look along with more exposure to your posts. Also expandable post summaries help in optimized use of bandwidth as only required piece of text or images get displayed and not the whole large post as you can see on my blog. With several advantages of expandable post summaries explained here now we can actually start with the implementation of expandable post summaries in blogger tutorial :
How to create expandable post summaries in Blogger or blogspot blogs ?

Step 1


Go to Dashboard >> Template >> Edit HTML















Step 2


Click Blogger Code Editor and Press CTRL + F








Step 3


Type or Paste following code inside the search box then hit enter


]]></b:skin>


or




</head>



Paste the following code in between above ]]></b:skin>



<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>



Screen Shot











Step 4


Now again press Ctrl + F and search for <data:post.body/>

paste the following piece of code after <data:post.body/>

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>



Example Image




Step 5


Save the template






Step 6


Go to Dashboard >>Post
























The final piece that we need is a little bit of code in your actual post. Each post that you want to use this feature on will need this code:
<span class="fullpost"></span>
You'll enter the summary text outside the span tags and the remainder inside.
Here is the beginning of my post.<span class="fullpost">And here is the rest of it</span>


Additional Helpful Points :
If you want to write every post as expandable post summaries without writing everytime you write a new post. Just follow the simple steps :
STEP 1 : Go to Settings tab , then under the settings tab go to Formatting tab.

STEP 2 : Under the Formatting tab, search for Post Template

STEP 3 : In the Post Template section you will find a textbox, in the textbox just write

<span class="fullpost"></span>

and you will never need to write this code again. It will automatically be shown on every new post you are going to write. If you have any problem regarding this post just write it in the comment box below.

How To Create Page/Static Pages In Blogger

What are Blogger static pages?
Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on stand-alone pages that are linked from your blog. The static pages basically are the same as post pages, but there are several things that make them different. One of the differences is that static pages don't appear in the home page, don't have a label, and are not indexed as archive pages.
How to Create Static Pages in Blogger.

 Step 1:- Dashboard >> Click on Pages
















Step 2:-

Click on New Page - Blank Page


Step 3:-

 Type the title and write the page's content.

Step 4:-

 Before publishing it, click on Preview to see how it will appear on your blog.


Step 5:-

 When you have finished the editing, click on Publish button.

 Step 6:-

 1.Keep it as nav menu below header -Top tabs
2.Display the page in your blog's sidebar -Side Links 3.Add the page's link manually to your template - Don't Show


Step 7:-



And now you're done! Now you have owned the static page. If you want another static page, just repeat the steps above.

Remove Showing Posts With Label In Blogger


For any default Blogger layout, the "Showing posts with label" message shows up above the posts whenever you click on a label link. As it's a pretty useless and annoying message, many people like to have it removed. If that is your wish, just follow the tutorial below:
Now Removing "Showing post with label...show all posts"

Step 1


Go to Dashboard >> Template >> Edit HTML

Step 2


Now find (CTRL+F) below code in the template:

<b:includable id='status-message'>

After you will see below screenshot
















Step 3.


Delete Below code
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Screenshot












Step 4.


Replace it with below code
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

How To Remove Blogger Picture/Image Shadow And Border

If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below)











Step 1:


Go to Dashboard >> Template >>Customise

















Step 2:

Advanced >>  Add CSS









Step 3:

Paste the following code
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}



Step 4:

Apply to Blog.
Subscribe to: Posts (Atom)