Showing posts with label blogger tips. Show all posts
Showing posts with label blogger tips. Show all posts

Add Thumb Up and Down in Blogger

Thumbs up and Thumbs Down is a process to elaborate the visitors view on your post and it give an new look to your website.
Very interesting widget for your blogger which give you a professional look.
If your visitors feel good your article they will thumb up your post or if they do not get impressed , they simply thumb down.
You need to follow some step to add Thumbs Up and Thumbs Down Widget.
Step 1: First of all go to Blogger > Design > Edit HTML.
Step 2: Click the box "Expand Widget Templates" and Search
<data:post.body/>
Step 3: Paste the below code just after above code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'> </div> </b:if>
Note:
If you paste the code before <data:post.body/> your thumb up and thumb down widget can be showed just after the post title if you paste the code just after <data:post.body/> The widget can be displayed at the last of the entire post only at post pages and not on homepage.
Step 4: Now search for <body>  Just above it paste the following code:
<script src="https://sites.google.com/site/funwithcomputer/linktohow/ratings.js"></script>
Step 5: Now save the template and view your blog.

You feel this post is helpful for you then give your precious time for comment and feel free to give suggestion if any.

Read More

How to make Responsive Web Design

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Now everyone want to make their website responsive but they don't want to switch to new theme or templates. Then don't take problem just follow some step and you can make your current theme or template responsive easily.

You must read: Make Responsive adsense ads

How to make Responsive Web Design,responsive web design,responsive,What The Heck Is Responsive Web Design,What is responsive design,

You need to forget the HTML properties like px(pixels) and use em or %(percentage).
Example:
Before responsive we use
<div style="margin-left:25px;">S2P Tech</div>
But after that you need to use
<div style="margin-left:10%">S2PTech</div>
You can see DEMO for better understanding.
Here in this demo i use only % or em. I provide you full coding for you.
<html>
<title>Responsive Tutorial By S2P Tech</title>
<head>
</head>
<body>
<div style=" border:solid; height:20%; background-color:#75A772;">
<center><strong >Header</strong></center>
</div>
<div style=" border:solid; float:left; height:60%;width:20%; background-color:#FF8080;">
<strong ><center>Left SideBar</center></strong>
</div>
<div style=" border:solid; float:right; height:60%; width:20%; background-color:#FF8080;">
<strong ><center>Right SideBar</center></strong>
</div>
<div style=" border:solid; height:60%; background-color:#C2DDE0;">
<strong ><center>Body</center></strong>
</div>
<div style=" border:solid; height:20%; margin-top:0.01em; background-color:#579841;">
<strong ><center>Footer</center></strong>
</div>
</body>
</html>
Read More

Blogger Or Wordpress is better ?

Blogger and WordPress are best and popular blogging platforms today. More and more Internet users are going to use it. But the most confusing part is what to choose and why. So, here’s full comparison of Blogger and WordPress with all pros and cons.



Blogger :

  • Blogger is free blogging platform owned by Google. And the best part of Blogger is it’s completely free. As Well, it also provides free domain with extension blogspot.com. And you can also use your own custom domain with it. It’s extremely easy to setup and manage blogspot blog.
  • Publishing content is really easy with blogger. And you don’t need to backup database or anything. Allow you to display ads like Google Adsense and amazon, etc. As well as it’s completely ad free.
  • There are also some cons of blogger. Like, Maximum of 1GB Storage, No FTP support, Limitation of designing compared to WordPress and many more.

WordPress :

  • WordPress is Most Powerful and popular CMS (Content Management System) of all time. It’s divided in 2 parts : WordPress.com and WordPress.org self-hosted. WordPress.com is a hosted version of WordPress.org Providing free platform with limited features as well paid with premium features. I personally not recommended WordPress.com because most of the themes and plugins not working with free version.
  • WordPress.org is open source free software. Anyone can download WordPress software from wordpress.org and install on their server. It’s completely free and no limitation to use it. But you need to pay your hosting fees to your hosting provider.
  • Self hosted WordPress is very flexible since it’s open source. You can customize it as you want. You own it on your server so you have full control over it. You can use and install any free or premium themes and plugins on it. There are tons of themes and plugins available on web. It’s fully search engine friendly and you can also define your own custom meta tags. And it’s take less than 5 minutes to install it on your server.
Read More

Make your Blogger Templates : Chapter-4

There are many different tags you can use to include specific pieces of data in your template. They will all be formatted as<data:name/> or <data:name1.name2/>, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. photo.url.

This is a master list of all such available data. It is divided into sections by page element, because different types of widgets use different data.

Blogger Design

Globally Available Data
This information applies to the entire page, so you can use it anywhere, unlike other data which can only be used in a specific widget. These should be referenced as part of the overall "blog" data, e.g. as <data:blog.title/>, etc.

  • title: The blog's title.
  • pageType: The type of the current page. One of 'item', 'archive', or 'index'.
  • url: The URL of the current page.
  • homepageUrl: The homepage of the blog.
  • pageTitle: The title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
  • encoding: The encoding to use for the blog, e.g. UTF-8.
  • languageDirection: Either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
  • feedLinks: The autodiscovery feed links for the page header.

Page Header
This is a simple widget with just two pieces of data. They can be referenced simply as<data:title/> and <data:description/>.

  • title: The blog's title.
  • description: The blog's description.

Blog Posts
This is the central part of any blog, and the most complex. You should definitely consider simply making modifications to one of the default templates before writing a blog posts widget from scratch. But however you want to do it, here's all the data available in this widget.
feedLinks: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
        o  url: The feed URL.
        o  name: The feed name (i.e. 'Posts' or 'Comments').
        o  feedType: The type of feed (Atom or RSS).
        o  mimeType: The mime type of the feed.
olderPageUrl: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
olderPageTitle: Title of the link to the older page of posts.
newerPageUrl: The newer equivalent of olderPageUrl.
newerPageTitle: The newer equivalent of olderPageTitle.
commentLabel: The phrase to use to show the number of comments, e.g. "comments."
authorLabel: The phrase to use to indicate who wrote the post, e.g. "posted by."
timestampLabel: The phrase to use to indicate when the post was written, e.g. "posted at."
postLabelsLabel: Phrase to introduce the list of post labels, e.g. "labels for this post."
backlinksLabel: Phrase to describe backlinks to this post, e.g. "links to this post."
posts: A list of all posts for this page. Each post contains the following:
       o  dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.
       o  id: The numeric post ID.
       o  title: The post's title.
       o  body: The content of the post.
       o  author: The display name of the post author.
       o  url: The permalink of this post.
       o  timestamp: The post's timestamp. Unlike dateHeader, this exists for every post.
       o  labels: The list of the post's labels. Each label contains the following:
           name: The label text.
           url: The URL of the page that lists all posts in this blog with this label.
           isLast: True or false. Whether this label is the last one in the list (useful for placing commas).
      o  allowComments: 'True' if this post allows comments.
      o  numComments: The number of comments on this post.
      o  showBacklinks: Whether to show backlinks for this post.
      o  numBacklinks: Number of backlinks for this post.
      o  addCommentUrl: The URL of the 'add a comment' form for this post.
      o  emailPostUrl: The URL of the 'email this post' form for this post.
      o  editUrl: The URL of the edit form for this post.
      o  feedLinks: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
          url: The feed URL.
          name: The feed name (e.g. 'Posts' or 'Comments').
          feedType: The type of feed (Atom or RSS).
         mimeType: The mime type of the feed.
     o  comments: A list of all comments for this post (on item pages only). Each contains the following:
         id: The numeric ID of the comment.
         body: The body of the comment.
         timestamp: The time the comment was created.
         author: The display name of the comment's author, or 'Anonymous'.
         authorUrl: URL of the comment author's profile, if the comment is not anonymous.
         deleteUrl: The URL for deleting this comment.
         isDeleted: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)
.
Blog Archives
The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.
title: The title of the widget.
style: One of 'MENU', 'FLAT', or 'HIERARCHY'.
data: A list of each archive unit, each of which contains:
       o  name: The name of this archive interval, e.g. "August 2006."
       o  url: The link to the page containing posts from this interval.
       o  post-count: How many posts there are in this interval.
.
Profile Widget
For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as<data:photo.url/>.
title: The title of the widget.
userUrl: The author's profile URL.
location: The location from the author's profile.
aboutme: The "About Me" information from the profile.
displayname: The author's display name.
photo: The user's profile photo, made up of the following:
        o  url: The photo URL.
        o  width: The photo's width, in pixels.
        o  height: The photo's height, in pixels.
        o  alt: The "alt" text for the photo.
On team blogs, the profile widget contains less information about more authors, as follows.
title: The title of the widget.
authors: The list of all authors, each of which contains the following:
        o  displayname: The author's display name.
        o  userURL: The author's profile URL.
If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>
.
Text / HTML / JavaScript Widget
The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.
title: The widget's title.
content: The content of the widget.
.
Feed Widget
A feed widget's content is dynamically loaded using Google AJAX API after blog is rendered in a browser. It can be styled only using CSS.
title: The widget's title.
feedUrl: The URL of the feed.
.
Picture Widget
A picture widget contains a single image, and provides all the relevant data for that image.
title: The title of the widget.
sourceUrl: The URL of the image.
width: The image's width, in pixels.
height: The image's height, in pixels.
caption: The image caption.
.
Labels Widget
The labels widget includes a list of all labels that are in use on the blog.
title: The widget title.
labels: The list of labels, each of which contains:
        o  name: The text of the label.
        o  count: How many posts have this label.
        o  url: A link to a page displaying posts with this label.
.
List Widget
The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.
title: The widget title.
items: The list of items.
.
Link List Widget
A slightly fancier list, where each item has two parts to it: the text and the link.
title: The widget title.
links: The list of links, each of which contains:
        o  name: The link's text.
        o  target: The link's URL.
.
Logo Widget
It doesn't get any simpler than this one. Just one piece of data here.
fullButton: The URL of the Blogger button you've selected


Read More

Make your Blogger Templates : Chapter-3

There are many Widget Tags for Layouts.Here you will learn that how can you put widget in blogger, if you are working in the "Expand Widget Templates" mode of the Edit HTML page. I will teach you step by step.

The first thing to do is to add a closing tag. So this:
<b:widget [...attributes...] />
becomes this:
<b:widget [...attributes...]>
</b:widget>
Now with that out of the way, let's talk about what you can put between those tags.


Includes

Blogger Design

Widget content is contained in "includable" sections, which have this format:
<b:includable id='main' var='thiswidget'>
    [insert whatever content you want here]
</b:includable>
The attributes are as follows:
  • id: (Required) A unique identifier made up of letters and numbers.
  • var: (Optional) An identifier made up of letters and numbers, for referencing data within this section. (See the data section below.)
Each widget must have one includable with id='main'. This will usually contain most or all of the content that will display for this widget, and in many cases it will be all you need.
If you make more includables with different IDs, they will not be displayed automatically. However, if you make an includable with id='new', then you can reference it in your main includable with
  <b:include name='new' /> and it will display that way.

The attributes for the b:include tag are as follows:
  • name: (Required) An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
  • data: (Optional) An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.
Here is a simple example demonstrating the use of b:includable and b:include. Loops and data are described later in this article. The main thing to understand here is how the "main" section includes the "post" section within it. It passes along a post that it calls "i" and the included section references it as its var "p", then prints the title.
<b:includable id='main'>
   <b:loop var='i' values='posts'>
      <b:include name='post' data='i'/>
   </b:loop>
</b:includable>


<b:includable id='post' var='p'>
   Title: <data:p.title/>
</b:includable>
Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)
Data
The data: tag is arguably one of the most important ones, since it's the avenue that brings in all of your actual content. Some examples of this tag are:

<data:title/>
or
<data:photo.url/>
The first example is simplest, and will work in most widgets, since most widgets have titles. All it does is print out the title of the widget. The second example shows a more complex variable, from which we select a particular component. A photo, say in the context of a profile widget, may have components such as url, height, and width. Using the "." notation indicates that we want the URL for this photo, rather than a URL from something else.
There is a great deal of data that you can access with the data: tag, and it varies depending on which widget you're working with. We've got a comprehensive list to help you find the data you need.


Loops
The b:loop tag lets you repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc. The general format for using loops is this:
<b:loop var='identifier' values='set-of-data'>
   [repeated content goes here]
</b:loop>
The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, each time through the loop. A common convention is to simply call this "i". The set of data you specify for the values can be any piece of data described in the data tags article as being a list of items. For instance, in the blog posts widget,posts is a list. Code like the following will loop through each post, printing out the title for each one, with header tags around it.
<b:loop var='i' values='data:posts'>
   <h2><data:i.title/></h2>
</b:loop>
Notice how "i" takes on the value of each post in turn, so you can get the title from each one.


If / Else
You can use the b:if and b:else tags to display content in some places but not others. The general format is this:
<b:if cond='condition'>
   [content to display if condition is true]
<b:else/>
   [content to display if condition is false]
</b:if>
The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.
For "condition" you can put in anything that evaluates to either true or false. Some data tags are simply true/false values on their own, e.g. allowComments on a post. With other pieces of data, you can compare them with specific values to get a true or false. Here are some examples:
<b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.
<b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).
<b:if cond='data:displayname != "Fred"'> True if this is not Fred's display name.
<b:if cond='data:post.numComments > 1'> True if the current post has more than one comment.

Read More: 
Read More

Make your Blogger Templates : Chapter-2

Blogger Design


A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. A widget in blogger is represented by a tag.The actual data for any given widget is stored in the Blogger database and only accessed when the widget needs to be displayed. Some examples of widgets (one for a page header and one for a list) are:
<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>
A widget may have the following attributes:
  • id - (Required) May contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
  • type - (Required) Indicates what kind of a widget it is, and should be one of the valid widget types listed below.
  • locked - (Optional) Can be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
  • title - (Optional) A display title for the widget. If none is specified, a default title such as 'List1' will be used.
  • pageType - (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of thier pageType.)
  • mobile - (Optional) Can be 'yes', 'no,' or ‘only’ with 'default' as the default. This decides if the widget will be displayed on mobile or not. Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is 'default.'
The types of widgets you can specify are:
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar
Each widget can also be written out in an expanded form, detailing the complete layout and contents for that widget.
Read More:

Read More

Make your Blogger Templates : Chapter-1

Design a blogger template is not a big deal.You can design a good and intractive templates for your blog.
You must have knowledge of :
  • HTML
  • CSS
  • JavaScript
It's not mean that you should be expert.But Must have basic knowledge of above mentioned languages.
Now you are ready to make a blogger template.Before this, I want to share some line of codes with you.Before it,You can not make a blogger template.

Blogger Design

Page Elements Tags for Layouts
The <body> section of a Layouts template is made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, footer, etc. A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template.
Each section in your template has an opening and a closing tag, looking something like this:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> 
</b:section>
A <b:section> tag can have the following attributes:

  • id - (Required) A unique name, with letters and numbers only.
  • class - (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
  • maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
  • showaddelement - (Optional) Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.
  • growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.
A section can contain widgets; it can't contain other sections or other code. If you need to insert extra code between or around certain widgets within a section, you'll need to split the section into two or more new sections.

Read More:
Make your Blogger Templates : Chapter-2
Make your Blogger Templates : Chapter-3




Read More

25 Quick SEO Tips And Tricks To Start Your Blog

You may have heard many people say that blogging is easy. But is it really? There are plenty of bloggers these days; however, not all of them are getting considerable amount of traffic. In fact, some of them only have a few visitors.

WHY?
The main reason for this is that they do not rank well in search engine result pages (SERPs). As a result, they have less visibility on the Web. This further means that their target audience cannot spot them easily. <
What should be the best thing to do then?
If you are one of the following:
  •  Planning to start a blog site
  •  Already blogging but not getting enough readers
  •  Already a successful blogger but wants to hone skills
Find out how you can boost (or further increase) your ranking in SERPs through these…

SEARCH ENGINE OPTIMIZATION STRATEGIES
1. Register your domain name
By doing this, you are off to a good start because you can take advantage of essential blogging features. What is more, you can advertise easily. Of course, do not forget to find an established and dependable Web hosting company.

2. Perform keyword research and analysis
Always find out which terms are most relevant to your blog theme or topics. To help you with this, you need to…

3. Utilize keyword tools
Some of these are free, while others are paid. Whichever you prefer most (while keeping in mind that you need to spend to enhance your online presence), remember that you require tools capable of providing you with fresh and trend-related words.

4. Include keywords in your content
When you put this strategy into practice, consider the following aspects:
  •  Put the primary keyword at the beginning of the page title.
  •  Use popular modifiers (i.e. adjectives, promotional words, places, etc.) for variation.
  •  Use related terms and phrases throughout the article body but make sure your writing style still comes out natural.
5. Get inspiration from YouTube
The video-sharing site has a list of the latest, most favorite, most discussed, and most popular videos. Plenty of these may not be relevant to your theme; however, you can surely find some that you can use as inspiration for your next topics.
Additionally, you can…


6. Use a meme tracker
If you are not familiar with memes, these are videos, images, catch phrases, etc. passed from one Web user to another. You can find out which ones are stirring the latest buzz by using tools that help monitor reader responses.
Moreover, you can…

7. Obtain ideas from social news sites
You can discover trending topics by checking out bookmarkers like Digg, StumbleUpon, and Del.icio.us.
Do not forget to…

8. Check out your competitors’ blogs
Look into other sites within your niche and determine which ones get more readers. Then, find out why many readers link to and talk about them.
With tips 5-8, you can…

9. Come up with fresh ideas
It will be easy for you to write interesting and buzz-worthy posts once you know which topics are trending online.
Do not just settle on appealing content, you should also…

10. Write attention-grabbing headlines
Descriptive, emotionally captivating, and eye-catching – these are what your titles should be, so you can provide a great start to your stories. As a result, plenty of people are more likely to choose your site when they see it in SERPs. Great titles can be in the form of:
  •  Questions
  •  Solutions to problems
11. Highlight your most-read posts on your homepage
By doing this, you can lead new visitors to your top content without asking them to click on several links. Additionally, it lets them have an idea of your blog site theme and initial points of reference without repeating topic ideas.

12. Create categories
When you do, the pages within each group will rank in SERPs for their keywords or tags. As a note, avoid using the same category titles as page tags to keep them from overlapping.

13. Link to previous, succeeding, and related posts
Doing this allows search engines to crawl your site properly and index relevant content. It also helps your readers to spot related topics.

14. Put your post title first
Several content management systems put site names before the post names. To let your articles rank individually, you have to place the page title first.

15. Use web analytics
Through this tool, you will know the following:
  •  Readers linking to your site
  •  Your posts with most links
  •  Search terms used to find your blog
In return, you can guarantee these aspects:
  •  Create link-worthy topics your target audience will like
  •  Come up with topics that rank well in SERPs
16. Stand out
Write stories that you know will get people talking. If you have to stir controversy, why not, right? Some bloggers have earned money and exposure for doing so. Then again, you have to prepare yourself for any negative comeback, which may come your way.

17. Prove your credibility
Here is one tip, which you do not hear that much, about proving you are credible – provide your site with a professional yet attractive custom design and format. Why? Given that you spend time and money on it, it shows that you are truly passionate about your blog.


18. Link to other blog sites
Choose blogs that have the same interests or biases as you. On the other hand, you can mention particular posts and explain your reasons for approving or disapproving the writers’ views.

19. Advertise
By this, it means that you have to set aside money for tools like pay-per-click, AdWords, social bookmarking submissions, and reviews.

20. Take advantage of “push marketing”
It involves using strategies that encourages your target audience to relay your message through word of mouth or sharing.

21. Encourage interaction
You can organize contests or polls on your site to attract more readers. You can also start conversations or ask for opinions on the hottest issues to promote active participation.
When you are able to obtain the interest of several users, the next step is to…

22. Publicize
Display any proof of your accomplishments such as the number of subscribers (especially if you have hundreds) or positive comments from other readers.

23. Be consistent
You will earn greater trust when you have strong beliefs and unswerving biases. As a result, other people will want to share your viewpoints.
24. Submit to general directories
When your blog links appear on leading sites, search engines will consider your site credible and worthy of high ranking.

25. Build exposure and credit
The more users look up on you, the more you will obtain Google’s (and other search engines) vote of confidence.

IN CONCLUSION
After going through the SEO tips, you have probably noticed that some of them require expertise. Then again, you have nothing to worry about. Just think about it, you do not acquire success within a day of blogging. The more you get the hang of it, the easier it will be for you to get that top position in SERPs.
Read More

How to increase width of Post section in Blogger

Increase width of  Post section in Blogger
This is a easy little fix. You have to make two little changes in your CSS style sheet.
Look for this piece of code:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Then make changes to the width. Add the same amount of to each area like this:
#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Here I added 200px to each area. All that is left to do is save your work!

Related Post: How to Add Extra Sidebar in Blogger?

Read More

How To add extra sidebar in Blogger:

How To add extra sidebar in Blogger:

Follow these steps to get extra sidebar in Blogger:

  • Login to Blogger account.
  • Go to Dashboard>Design>Edit HTML.
  • First Back up your Template.
  • Then follow the instructions given below.
I divide entire code in to section: (1) CSS (2) HTML

Add sidebar in blogger

  1. Firstly concentrate on change to CSS:
#sidebar-wrapper {
                   width: 220px;
                   float: $endSide;
                   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
                   overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
                 }
What you will do is copy the whole code, paste it immediately after the existing code, and then rename the element to #sidebar1-wrapper, like this:
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


/* additional sidebar start */
#sidebar1-wrapper {
  width: 220px;
background: salmon;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}/* additional sidebar end */
For proper fitting, it needs to increase the width of Outer-wrapper with the same amount as the new sidebar,which is 220px.So, New Outer-wrapper width should be 220+660=880px.
#outer-wrapper {
                 width: 660px; <------ change to 880px
                 margin:0 auto;
                 padding:10px;
                 text-align:$startSide;
                 font: $bodyfont;
               }
3. Change header-wrapper width
To align header with the newly added sidebar, header-wrapper too need to be increased to 880px.
#header-wrapper {
                  width:660px; <------ change to 880px
                  margin:0 auto 10px;
                  border:1px solid $bordercolor;
                }
Now its time to change the footer width.It should be changed to 880px also.
#footer {
  width:660px;  <------ change to 880px
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
Now I are ready to change in HTML.
Look for the following code in HTML.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
That is the code for the existing sidebar. To copy the sidebar, do the following:
Copy the code and paste it immediately after the existing code.
Rename the div and b section id’s. The div id must be the same as the id in the CSS which is sidebar1-wrapper.
Delete the widgets in the new sidebar code.
The end result should look like this:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


 <!-- additional sidebar start -->
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- additional sidebar end -->
Now you have both CSS and HTML coding for new sidebar.But one of the most important thing is remaining to be complete:
Position of Sidebar:
There are three possible cases are here to discuss.
1. Both sidebars on the right
If you follow above mentioned steps. You will get this arrangement by default.
2.Both sidebars on the left.

To get this arrangement, You have to do some change in CSS. Change the main-wrapper float from $startSide to $endSide and the sidebar-wrapper from $endSide to $startSide.

3. One sidebare on the left and other on the right of the post column(Main column).

In CSS, change the sidebar1-wrapper float from $endSide to $startSide.
In HTML, reposition the sidebar code from after to before the main div code,like this:
<!-- additional sidebar start -->
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- additional sidebar end -->


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
Applying to other templates
The changes above is  for Minima template. For other templates the names of the container elements may be different.
To apply to other templates you need to identify the container elements that correspond to the elements that we changed in Minima. Follow these steps:
Look for elements that have width property (e.g. width:220px;) in CSS.
Once figured out, find the corresponding id (e.g. <div id='sidebar-wrapper'>) inside HTML section.
Note:
Most other templates don't use $startSide and $endSide variables. In that case, just replace $startSide with left and $endSide with right.

Read More

Tips to Make Your Blog Popular


Hello Friends, Today we are discussing about How to Make our Blog Popular and Outstanding , So that  our Blog becomes notable.
Important Note :- I am not going to discuss that Content is king , Make Your Content Interesting , Regularly update your content  and bla! bla!..  because this is the Pre-requisite for all the bloggers  and these points are very general and must to make useful blog and here I share few tips to make your blog popular. This article is beyond all that Today  there are many blogs with Good Content  but there bounce rate is high, why ? The answer is that blog is not theAudience Centered  , it’s  Advertisers Centered and that is the reason they are not getting traffic to their blog.



Useful Tips to Make Blog Popular and Interesting :->
[1] Appearance :- When visitors comes to your website/blog first and the foremost thing they observe on your website is the appearance. You can create smart appearance of your website by considering the following points :
(a) As appearance of your website/blog starts from the header of your blog. So make your blog header intersting by using a smart Logo, smart Tagline – defining the objective or motto of your blog so that your visitors will know that what is your blog all about.
(b) Your theme colors affects  your readers  attention. Don’t use too many  or dark colors on your blog and always try to make it simple and use 2 or 3 colors only and if you ask my personal opinion then I will tell you that even I don’t like the simple blogs . So make intersting color combination on your own by modifying your theme CSS file little bit.
[2] Nice Layout Of Blog :- After reading your blog post then vistors seeks more information, if your blog layout is good , then visitors can easily see you other Latest and Popular Posts as a result it helps you to grab the readers attention again and helps to make blog it famous.
[3] Professinalism :-  Believe me this is the very very important point that many bloggers don’t opt still. Your blog must have some authority. Now the question which comes that how you build authority for your blog.
(a) Show alexa rank of your blog.
(b) Show Google Page rank of your blog.
(c) Always show that “ content is protected “
(d) Always be in your topic of the blog, don’t go beyond the topic of your blog, that makes your blog looks  irrelvant to your audience.
(e) Use of image – I consider this point as a part of professionalism because image not only helps to make your blog outstanding infact they place a very important role in make your blog  authority. You should always use your own created images , don’t use other images. If you need then you must place their source link.
So Friends follow these tips and Make your Blog Popular and Outstanding. If you want to add some more points to make a blog Popular and Interesting then Plz share..

Read More

Tips and Tricks to Finding the Perfect Domain Name for Your New Blog


Many people seem to spend time discussing what happens after you have a domain name and website ready to go. After all, these issues—management, analytics, advertisers, unique content—are the most complicated parts to owning a website. However, sometimes the easiest aspects of business are actually the most frustrating, and this rings true for owning a website. Finding a domain name that works for your personal or company website is not, contrary to popular belief, all that easy.
                                                                        It seems that most people have a domain name in mind and then move right along to other aspects of planning to own a website. When it comes time to buy the domain name, they realize that it is already taken. This causes a HUGE wrinkle in the perfectly pressed plan, and many wonder where to go next. The questions usually start to surface: Is an abbreviated version okay? Does the extension matter? Did I really even want that domain name in the first place?
How to Make Sure You Have a Great Domain Name
While some people find that the domain name they wanted was taken, others aren’t sure where to begin. In both situations, you will find yourself wondering what makes a good domain name. Your domain name will be associated with your company or with your personal brand forever, so this is not a decision to be taken lightly. While website themes and content can be changed and removed at will, a domain name sticks. If you don’t get it right the first time, you’re stuck re-branding and spending more money on a new domain name. Consider some of the things to keep in mind:
Step #1: Think about the meaning of the potential domain name.
If your company has a specialty, try and put this into your domain name. It is always easiest to create a brand when the name has something to do with the product or service. On that same note, companies succeed because they have great customer service, great content, a great product, etc. The meaning of your domain name is not everything. Try and aim for something connected, but if you’re ready to work a little bit harder getting your name out there, do not let the “meaning” stop you.
Step #2: Consider Length and Accessibility
The general rule of thumb for a domain name is the shorter the better. If your company name is very long and complicated, it might be best to think of an abbreviation or only using the first half of the company name as the domain. You also want to think about the accessibility of the name. It should be easy for customers and clients to remember, so you want to stay away from anything too generic or too jumbled. For example, five random letters put together is not going to be easy to remember—even if it makes sense to you.
Step #3: Check Out the Competition
If you have a domain name in mind, you will want to check to see if that domain name is already taken and successful. It may seem obvious, but many try and switch up extensions on a domain name and then compete with an already profitable website. If it is a great website (well maintained, reader engagement, etc.), you may want to think of a new domain entirely so as not to cause any conflict.
Step #4: Consider the Extension
This is probably the biggest problem that people run into when choosing a domain name. It seems that all of the “good” domain names with a .com at the end are taken. The first thing you will want to do is see if you can buy the .com extension. You can learn more about this here. If this is not possible, it’s time to consider a different extension. The extension absolutely DOES NOT matter when it comes to SEO, but people are more likely to click on a .com over a .net or .biz. Nonetheless, many companies have proven successful with an extension other than .com. I would recommend finding a .com or a .net extension, and if neither are available to keep thinking of a new name.
                                                      Ultimately choosing a domain name is completely up to you. If you follow all of these steps and find a name that works, but you just don’t like, then don’t pick it. Remember that unless you’re willing to pay it, a domain name is stuck with you and your brand for a very long time. Make sure that the domain name makes sense to you, and ask the opinion of others to help you build confidence. Once you’ve settled on a name, don’t second guess yourself. Take pride in the website you have created and get started on the fun stuff!

Read More

How to change the main width of your blog


If you are like me, you are constantly changing the layout and design of your blog. Viewing the same design elements can get tiring after a while and sometimes, a change is necessary. One of the simplest design alterations you can make to your blog involves changing the width of your blog post area. Here I will lay out instructions on how to widen or make narrower your post width and you will not need any coding experience to follow them.
Back when blogging was for the most part streamlined (the age of blogger.com), and design options were limited, blogs tended to have very narrow widths. Narrow widths allow for less text per line (causing less of an eye-strain for readers) but also cheapen the overall feel of the site. Wide widths can get the blog more of a professional look but also make it more difficult for the reader because of more text per line. Finding a compromise that fits your site perfectly is the key.
To alter the width of your blog, you first need to open up your style sheet. This will be named style.css in WordPress and can be accessed by clicking on your editor button under the appearance tab in the admin control panel. After you have clicked on the editor button, you should be taken to a screen called “Edit Themes,” and you will see a list of files on your right hand side.
1. Click the Stylesheet (style.css).
2. Sift through the code and look for a comment (will begin and end with a “/*”) that says “posts” or something similar. If you do not see a comment that says “posts” or anything similar, look for a div class or id (will look like div# or div.) that is titled “posts” or anything similar. More likely than not, your blog posts will have their own custom divider with custom styles. It will be easier to find the “post” div if you look for a line of code under it that looks like this: “width: 600px;”. The width will probably be over 300px.
3. Under the post div you just identified (either by looking for a comment or at the name of the div), look for a line of code that specifies width. The value will most likely be measured in pixels (px) and you can change it to your liking.
4. Click the update button at the bottom of the page (which is blue if you are using the default WP admin theme).
5. Preview the changes by clicking the “View Site” button. If the width is not to your liking, change it again in the Stylesheet.
                     If you are having difficulty changing the width after reading this tutorial, please don’t hesitate to ask for help by leaving a comment.

Read More

Top 15 Rewards of Blogging


What do you usually notice when you go online? You may have observed that it is quite commercialized, right? It seems as if almost all of the sites are
promoting or selling something.
Then again, this is not always the case. Some people set up their own websites to provide information on various subjects. On the other hand, several
individuals create blog sites to talk about just anything.
How about you, are you interested in letting other readers know about your passion in life? Or, do you want to market your small business? Well,
whether you wish to spread the news or advertise your services, you can do it through blogging.


But what is blogging and what do you have to do to start?
If you are not too familiar with the term, it is actually short for Web-logging and it involves creating a website where you (as the blogger) can share
any information through article posts. And, with the right combination of optimization techniques, it can rank well in search engine results.
Now, it is not just for personal purposes as you can use it for dynamic means too, such as starting conversations or engaging in affiliate marketing
(wherein you advertise a seller’s goods or services).
Given the fact that it has plenty of uses, it only goes to show that blogging can be very rewarding. In fact, the following are some
of its top benefits:
1. It lets you share your interests
– It does not matter if you are passionate about the environment or fashion, you can write countless posts to let the world know just how enthusiastic
you are about the subject. You can even share your arguments on current issues or news.
2. It can be your platform
– Through it, you can air your beliefs, share your expertise, and promote your products.
3. It allows you to hone your writing abilities
– You skills get better each time you publish an article on your blog site. You can enhance your language and grammar knowledge.
4. It boosts your knowledge
– The fact that you are blogging makes you a great learner because it lets you increase your insight on many topics, especially if your articles come
with research.
5. It permits you to get out of your comfort zone
– Your blog site can be a magic carpet, which takes you to different places. What is more, it lets you break through your shell and express yourself.
6. It is a fantastic place to test your ideas
– You may think that you have far-fetched thoughts but wait until you post a blog about it. Soon, other readers will agree with you and you will
realize that you do not have such crazy ideas.
7. It provides you with many followers
– Once several people agree with you, they will not hesitate to add you to their network. So, do not forget to sign up on social networking sites and
add your articles with social media buttons.
8. It helps you increase your expertise and credibility
– When plenty of readers realize the worth of your articles, many individuals will consider you an authority because of the knowledge you possess.
9. It allows you to help other people
– You can use your blogs to give answers to questions or solutions to problems. How worthwhile is that, right?
10. It lets you begin conversations
– You can begin your own forum to talk about interesting or hot issues.
11. It is a cost-effective marketing tool
– You can spend as low as twenty dollars a month to obtain a domain name and hosting package. Then, you can start earning through your blogs.
12. It lets you build a good brand image
– If you are blogging for business purposes, most of the advantages mentioned on this page helps you create a credible name for your enterprise.
13. It allows you to make money
– When you combine the activity with the latest search engine optimization (SEO) strategies, it can provide you with considerable earnings.
14. It has a wide reach
– Whether you want to express your ideas or advertise to your target market, you have a bigger chance of reaching a wide audience through the World
Wide Web.
15. It allows you to pursue your dream
– Whatever it is that you want to do in life – publish a book, start a business, or get famous – you can make it possible through blogging because of
the benefits above.
                    So, what do you think? Are you ready to reap these rewards? Find out more about setting up your own blog site and you are good to go.

Read More

The Best Blogging Sites and Platforms | Top Blog Sites


Starting a blog can be very easy considering all of the free blogging sites out there. However, choosing between all of the best blogging sites can seem a bit confusing, especially if you are a first time blogger. That is why I have taken the time, after much research and digging, to compile a list of the top 10 best blogging sites.
#1 WordPress
 As far as theme and plugin selection, flexibility and support goes — WordPress trumps all.  Not only does the free, open-source blogging software allow you to blog for free on WordPress.com but you can also download a copy of WordPress (from WordPress.org) and install it on your own website using your own domain (like this website). WordPress is by far the most popular blogging platform and one of the first to be completely user friendly — you do not need any coding experience to operate a WordPress blog. From optimizing your blog’s pages for search engines (for more traffic) to automatically creating share buttons at the bottom of each of your posts: WordPress plugins can do it all. Designing your own WordPress theme is simple and easy and you do not need to be experienced with PHP, although it is recommended that you have a basic understanding of HTML and CSS if you want to alter your templates. Premium themes (paid for) make it possible for you to create entirely custom themes without even knowing one line of HTML/CSS code. You cannot place advertisements for your blog on free blogs hosted at WordPress.com but you can easily place advertisements on blogs that are self-hosted. Support for WordPress at the forums are above par as you will usually get a response for a question within minutes. WordPress is used by top bloggers like Perez Hilton, Darren Rowse, Chris Brogan and Michelle Malkin.


#2 Google Blogger
 Now owned by Google and formerly known as Blogspot, Blogger is probably the most user friendly blogging platform out there. You can set up as many free blogs as you would like from your Google account. Traffic that you get from other blogs at Blogger.com through the next blog button at the top of every Blogger.com blog can sometimes be substantial. You can even monetize your blog with Google AdSense. All you need is an AdSense account (from Google) and you can start earning money from people who click on your ads. Unfortunately there is only 16 templates to choose from (the we-know-better Google likes to keep things simple) but blogger does allow you to edit individual elements on your blog like the header, post section and gadget bar (sidebar) in your admin control panel. Popular blogs hosted at Blogger.com include PostSecret and The Sartorialist.


#3 TypePad
 TypePad is another blogging site that has gained a reputation through its user friendly interface and ease of use. TypePad gives your blog search engine friendly URLs and will automatically optimize your site for better search engine rankings. You can map your own domain to your TypePad blog or you can host your blog through a sub-domain at TypePad.com. The TypePad software also has very good anti-comment spam features. Unfortunately you must pay a fee of $8.95 per month to use TypePad and, even at that price, you are only allowed three blogs. You can have unlimited blogs by purchasing an unlimited or business class account. Popular blogs that use TypePad include: Seth’s blog, Wired Science and The Daily Dish.


#4 Movable Type
 MovableType, written in PERL, is another open source blogging platform developed by the company Six Apart (the former owner of LiveJournal). Similar to WordPress, Movable Type offers a free self-hosted package (MovableType.org) as well as a service for non-developers who would like to host their blog for free (MovableType.com). MovableType users can publish as many blogs as they would like and can even publish standalone content pages (something unique to blog platforms). Like WordPress, you can have multiple user accounts on your MovableType blog. Prominent blogs that use MovableType include: The Huffington Post, Power Line Blog and Boing Boing.


#5 LiveJournal
 LiveJournal, formerly owned by Six Apart and written in PERL, differs from other major blog platforms because of its unique community feel and social networking features. The “friends list” provides a way for people who have LiveJournal accounts to connect with each other and a friends page displays a feed of LiveJournal posts (or “entries”) made by friends. One bad thing about LiveJournal is the fact that you must display advertisements (from LiveJournal) even if you upgrade to a Plus account. Plus users are able to change the display option for the advertisements as well as store and manage photos (not an available option in the free version) and create post polls and surveys. If you would like to go advertisement-free, you need to upgrade to a Paid account ($20 per year) which gives you many more features like creating new syndication accounts and creating a custom journal design with advanced options.


#6 Drupal
 Although Drupal is more a general purpose content management system, people often use it for blogs. The CMS is free and open source but you will need to host the blog on your own website. Drupal has a very large open source community so there are many templates available from contributors and the Drupal development team. Installing Drupal is easy and as simple as downloading the core files, uploading them to your host, creating a MySQL database and then running the install script (similar to WordPress). Drupal also has a wide variety of modules (the equivalent of plugins for WordPress) that allow you to add and alter functionalities on your site such as image galleries, WYSWIG (what you see is what you get) editors and private messaging. The White House NewsBusters and Doose all use the Drupal content management software.


#7 Xanga
 Xanga started as a site for sharing book, music and movie review but has since evolved into a full-force blogging platform. Xanga is free but with the premium/plus versions you are given more publishing and design options, bandwidth and storage space. You can use Xanga on your own domain (as opposed to using a sub-domain of Xanga) and, because Xanga uses domain mapping, your domain will have free WHOIS protection, which means people cannot learn your contact information by doing a WHOIS search on your domain (a service that usually costs $10 per year). As far as user-friendliness goes, creating an Xanga blog is as easy as creating a Facebook or MySpace page — there’s nothing to it!


#8 Textpattern
 Textpattern is another free, easy to use CMS that is relatively little-known. Similar to WordPress and Movable Type, Textpattern is built with PHP and MySQL. A wide variety of plugins and templates are available through the open source community. One unique feature of the Textpattern CMS is the textile tool which, dubbed the “human Web text generator,” converts text input into valid XHTML. Textpattern was designed specifically for people who do not have a strong knowledge of HTML.


#9 Tripod
 Tripod, created by the underdog search engine Lycos, is a web hosting service and content management system for blogs and websites that operate under free, plus or pro accounts. The software is not open source but incredibly stream-lined and easy to use with a wide variety of professionally designed templates to choose from for your blog or website. The free account is only allowed 20GB of disk space, 1GB of monthly bandwidth and you must run ads by Tripod unless you upgrade to a Plus account.


#10 Squarespace
 Similar to Tripod, Squarespace is a hosting service that comes with an easy to use, closed-source content management system for blogs and websites. Despite being at the bottom of my list, Squarespace offers some promising features, including an iphone app to view and edit your site, dozens of professionally designed templates, social media integration and an importation tool if you would like to move your blog from WordPress, TypePad or Blogger. The trial version of Squarespace lasts 14 days and the basic package costs $8 per month. More expensive packages (like the $50 community package) allow more bandwidth usage, disk space, custom URLs and other functionalities.

Read More