How To Remove Home & Older/Newer Links

Please follow some simple steps:


1. Log in to your Blogger Account.

2. Click on your “Blog Name”.

3. On Left-Side Menu, Click “Template”.

4. Select “Customize” orange button.

5. Click “Advance” and select “Add CSS” at the end.

6. In the Add Custom CSS paste following CSS code:
#blog-pager { display:none; }


7. Now click on an orange button “Apply to Blog” at the top-right of your screen.

Check your Blog, you’ve done it.

How To Remove Powered By Blogger Tag

Goto Template  > Edit HTML

Find for ]]></b:skin>

Just above it, paste the code given below.

#Attribution1 {display: none;}

All done!

Search In Our Network

Loading



Submit your site to us. Click here to proceed.

How To Remove Showing Posts With Label

Step 1. Go to Dashboard - Template - Edit HTML (if necessary, click on Proceed button)




Step 2. Click somewhere inside the template code, then search - using CTRL+F - this code:

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

After you found it, click on the sideways arrow next to it, to expand the rest of the code.


Screenshot:



Step 3. Below is this code that you need to remove - along with the first one, as well:

<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 this one:

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


Step 5. Save the template.

Was this helpful? Please answer.

How To Submit Sitemap To Googgle

1. Open up your web browser, and type in your Blogger blog’s URL.
At the end of the URL add robots.txt.

For example, if the URL of your blog is http://myblog.blogspot.com, then enter http://myblog.blogspot.com/robots.txt

Some text should now be displayed in your browser. Look for a line that starts with Sitemap:. The URL after that label is the location of your sitemap.

Using the example above, the line would look like:

Sitemap: http://myblog.blogspot.com/feeds/posts/default?orderby=updated

2. Back in Google’s Webmaster Tools, the domain name part of the URL would already be included, so you would just need to specify the feeds/posts/default?orderby=updated portion of the sitemap URL. If other sites are able to accept a sitemap, then you may need to include the entire URL.

How To Backup All Blogs At Once

1. Go to Google Takeout and login with the same Google account which you are using for blogger.

2. Now click on Choose services tab from the top.



3. Click on Blogger from the various services.


4. Press Create Archive button.


5. Once the process is complete, click on Download button.


6. You are done!

How To Highlight Blogger Post/Article Background

1.Write a new post.

2. Now Copy the given code and add to your part of article you want to Highlight in given place in between code.

<div style="width:450px;height:200px;background-color: #F2F2F2;">Ur Desire Text Here</div>

Note:- You can also change the colour width & height.

How To Disable Right-Click

1. Got to your blogger Dashboard and then Click on Layout.

2. Now Click on Add Gadget and select Html/Javascript.

3. Now paste code given below in the pop up window.

<script language=JavaScript>
<!–

var message=”No Copy Paste!“;

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function(“alert(message);return false”)

// –>
</script>

4. Save it and done. Now users will not be able to right click on your website. 

How To Auto Tweet Blog Posts

1. Login to your FeedBurner account.
2. Now choose your blog for which you want to auto tweet on twitter.
3. Click on Publicize Tab > Socialize > Add a Twitter account. See below screenshot.

4. Now enter your username and password to twitter page and click on Authorize app button.

5. Now You are Done!

How To Make Your Blog Mobile Ready

1. Sign into your Blogger Account > Go To Design > Then Edit html
2. Search (Ctrl+f) for the following line (it will be on top side)

<b:include data='blog' name='all-head-content'/> 

3. Paste this code below that line...

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

Now Save the Changes!

How to Remove "Showing posts with label" in archive posts

Step 1. 

Go to Dashboard > Template > Edit HTML
             Expand Widget Template.

Step 2. 

Now find these codes in your template. use (CTRL+F).

<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>

Step 3. 

Now Replace this with this code with following code..

<b:includable id=’status-message’>
<b:if cond=’data:navMessage’>
<div>
</div>
<div style=’clear: both;’/>
</b:if>
</b:includable>

Step 4.

Now Save the template and check if the message has been removed or not by clicking any label of the blog.

How To Show Only Post Title On HomePage

If you want to show only your blogger post title on your home page?Then follow the steps below:

1. Login to your Blogger Dashboard > Layout > Edit HTML
2. Scroll down to where you see </head> tag .
3. Copy below code and paste it just before the </head> tag .

<style type='text/css'>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>
</b:if>

</style>





4.Now Save your template.

5.Go to Layout-->Page Elements.Click on "Edit" link of Blog Posts Section.




6.Enter the value for "Number of posts on main page:" as your choice and click on save.

Add a Floating "Go to Top" Button

Back to Top button or link is a link that sends your viewer to the top of page once clicked. This will help your readers navigate better, especially so if you have long pages. This link is usually located at the bottom of page or in the footer area.

What I am going explain in this article is slightly different. The function is the same yet the location of the link/button is different. As the name suggests, we are making a floating (or is it static) button. The button will float at the bottom of your screen. It will stay there even if you scroll the page, and can be seen at all times. We will do this using only a short HTML code, with a little inline styling.

Note: This trick will not work in older versions of Internet Explorer. The button will appear nonetheless, but at the center bottom of your page, and it doesn’t float.

Here are the steps:

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Insert the following code immediately before the </body> tag in your HTML. 
   
   view sourceprint?

   1	<a style="position: fixed; bottom:5px;left:5px;" href="#"title="Back to Top"><img style="border: none;"src="YourButtonUrl"/></a>

   Replace YourButtonUrl with the link to your button or icon.
5. If you prefer to use text instead of an image, use this code: 
   
   view sourceprint?

   1	<a style="position: fixed; bottom:5px;left:5px;" href="#"title="Click to go to top">YourTextHere</a>

   Replace YourText with your own wording.
6. You can change the location of the button / link by changing the values of this code:
   bottom:5px; left:5px;

Show Only Post Titles

This hack will show only post titles on archive and label pages of your blog. Your homepage is unaffected.

1. Login to your to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
5. In the code window, look for this line: 
   

   <b:include data='post' name='post'/>

6. Now replace that line with the code below (just copy & paste): 
   

   <!--Label and archive page title only hack-->
   <b:if cond='data:blog.searchLabel'>
   <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
   <b:else/> 
   <b:if cond='data:blog.pageType == "archive"'> 
   <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
   <b:else/> 
   <b:include data='post' name='post'/> 
   </b:if> 
   </b:if>
   <!--BloggerSentral.com-->

   Updates 
   Mar 2011: Revised entire code to prevent the hack from being applied to homepage's “Older posts”. You can see the old code below. 
   Mar 2010: Revised code to prevent the hack from being applied to Blogger (static) Pages.
   
   The old code (for reference only). Click “Show source” to view.  
   

   <!--Title only hack-->
   <b:if cond='data:blog.url != data:blog.homepageUrl'> 
   <b:if cond='data:blog.pageType != "item"'> 
   <b:if cond='data:blog.pageType != "static_page"'> 
   <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
   <b:else/> 
   <b:include data='post' name='post'/> 
   </b:if> 
   <b:else/> 
   <b:include data='post' name='post'/> 
   </b:if>
   <b:else/> 
   <b:include data='post' name='post'/> 
   </b:if>
   <!--BloggerSentral.blogspot.com-->

7. Click Save Template.
8. Here is the result for a label page, tested on this blog:
9. To change the look of the titles, you have two options:
   • Use inline styling by inserting style attribute after <h3 in lines 3 and 6, like in this example :

     <h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 

   • Add a separate element definition in CSS, like this: 

     .title-only { 
     /* add styling codes here here */ 
     }

     And place the it before ]]></b:skin> line in your HTML.
10. Finish and enjoy!

Change Size of Columns of Blogger

This tutorial is good for regular layout templates, if your template is built using Template Designer, read Template Designer: How to change column width.

But before we dive in I want to explain a little bit about what constitutes a basic Blogger layout template.

Look at the diagram above and think boxes. Yup, think of the sections as boxes, with specific widths and expandable length.

The biggest box in a layout is outer-wrapper. Inside outer-wrapper are smaller boxes, and inside these smaller boxes lie the elements. The relationships:

• header-wrapper –contains header, with header picture etc.
• main-wrapper –contains main section. Inside main we have blog posts.
• sidebar-wrappers –contains sidebars, with widgets etc.
• footer-wrapper –contains footer.

To increase the width of a box, you have make sure whether the outer box can accommodate the increase. Otherwise you have to increase the outer box width too.

Now that you understand the concept, let’s go to where the action is, in the CSS (Cascading Style Sheet) section of your template code. What you will find is usually like this:

#header-wrapper { 
width:660px; 
margin:0 auto 10px; 
border:1px solid $bordercolor; 
} 
------------------------------

#outer-wrapper { 
width: 660px; 
margin:0 auto; 
padding:10px; 
} 
------------------------------

#main-wrapper { 
width: 410px; 
} 
------------------------------

#sidebar-wrapper { 
width: 220px; 
} 
------------------------------

#footer { 
width:660px;
}

Actually there are more codes inside the curly braces, but I only show you the codes that matter –width, margin and padding.

Let’s say for example you want to increase your blog post (main-wrapper) width by 100px and the sidebar by 50px. Below are the steps you need to take to ensure a success.

1. Change the width of main-wrapper from 410px to (410+100)px = 510px.
2. Do the same for sidebar, except adding only 50px. The new sidebar width should be 270px.
3. Ask yourself what is the outer box for main-wrapper and sidebar? Looking at the diagram, the answer is of course outer-wrapper.
4. Increase the width of outer-wrapper by the total amount. So you should add (100+50)px to 660px. The new width is 810px.
5. That’s it!

Expected questions, issues:

• What happens if I forget to increase the outer-wrapper width? Your main section will push the sidebar to the bottom (below main section).
• How about margin, padding and border? Another analogy, if you were to gift-wrap the sidebar box, then the width is the width of the box measured from the outside, padding is (the thickness of) the box wall, border is (the thickness of) the wrapping paper and margin is a distance to other boxes’ wall. So essentially you have to take all these properties into consideration if you make major changes in your layout dimensions. But if you are only changing the width, you can disregard them.
• Background image problem -some templates use images as borders. Rounders series use background images to simulate rounded corners. These image widths are fixed, it won’t change with your blog width. If you want to keep the rounded corners, you have to download the images, edit, upload into a web host and relink them. Or you can simply remove the them by deleting their links in your template.

Play Music or Video

With Yahoo! Web Player, adding a music/video player and playing it in your blog has never been easier. You don’t need any trick to add this player, what you is only one line of code!

Yahoo Web Player is easy on your blog readers too because they won’t have to download or install anything. And they will have total control over the audio playback –when to start/stop, which file to play etc. The player supports MP3, WMA, WAV audio formats, and Yahoo! Video and YouTube video formats.

Visitors can start enjoying music and video in your blog in just three steps:

Step 1: Upload audio file to a web host

Just like the pictures or graphics used in your blog, your audio or video file must be hosted somewhere on the web, and the host must allow direct linking. Once uploaded, get the link to the file and use it in your blog.

Step 2: Adding audio/video link

Add the link to your file into your post, sidebar, footer or any part of your blog. The HTML format for the link is similar to that of a normal link. For example, below is the HTML code for the Yahoo! sample audio link in this article.

<a href="http://sites.google.com/site/bloggersentral/file-storage/GetaranJiwa.mp3">Sample audio 1</a>

Step 3: Adding Yahoo Web player code to Blogger

Copy and paste this code into your blog.

<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

You can place the code:

• In a HTML/Javascript gadget or
• Inside your template –insert it right before </body> tag or
• If you want to use the player just once (like what I am doing in this tutorial), place it in the post together with the audio/video links.

Once the web player code is added, it will scan your entire page for audio and video links, and then generates a playlist. I’ve added two audio and a video links below. Notice a play button in front of each link. They are added automatically by Yahoo! Web Player. Click either one to play.

Sample audio 1
Sample audio 2
Tron (Yahoo! Movie)

During the playback the player console pops up and floats on bottom left of your screen. The console can be minimized so it won’t take up your readers’ screen space.