Blogger Tips And Tricks

Add Related Post Widget to Blogger-For Original Templates 0

Blog101 | 3:54 PM | Css , How2 , Widget

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

4.Copy below code and paste it immediately after the line <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

5.Click on "Save Templates" and refresh your site.

How To Hidden Blogger Header and Replace Image Instead? 0

Blog101 | 2:45 PM | Background , How2 , Tricks

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see header-wrapper code block.It will nearly look like this:

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

Note :- width:800px can be different value.

3.Now add "display:none;" into your header-wrapper code block.Look at below:

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

Done. above code hides your blog header.

4.To use a image instead header,find the below code.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your header title' type='Header'/>
</b:section>
</div>

5.Now paste the below code just after the above code.

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_THE_IMAGE" alt="Home" /></a>

Note : Replace URL_OF_YOUR_BLOG and URL_OF_THE_IMAGE with your content.

6.Click on "Save Templates" and you are done.

How to Add “Save Page as PDF” button to Blogger blog? 0

Blog101 | 2:10 PM | Background , How2 , Tricks

1.First Sign up with Web2PDF.

2.Now Configure your "Save Page as PDF" button and click "Generate the JavaScript" button.

3.Then a Javascript code will be generated. Copy This code.

Now follow these simple steps :

(a)Log in to your dashboard--> layout- -> Edit HTML

(b)Click on "Expand Widget Templates"

(c)Scroll down to where you see this:

<data:post.body/>

(d)Immediately after above line, paste the code which you have generated at the Web2Pdf Online website. It's look like below code:

<!-- START: PDF Online Script -->
<script type="text/javascript">
var authorId = "XXXXXXXX-XXXX-XXXX-XXX-XXXXXXX";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>
<!-- END: PDF Online Script -->

(e)Click on "Save Templates" and Refresh your site.

How To Add Page Popularity and Top popular pages widget? 0

Blog101 | 1:50 PM | Background , How2 , Tricks , Widget

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

<p><data:post.body/></p>

Add Page Popularity Widget

Paste the below code just after <p><data:post.body/></p>.

Add Top popular pages widget

Paste the below code just after <p><data:post.body/></p>.

4.Click on "Save Templates" and you are done.

How To Highlight Author Comment in Blogger blog? 0

Blog101 | 11:21 AM | Background , Css , How2 , Tricks

This tip is very usefull for every blogger.If you like this follow the steps below.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

]]></b:skin>

4.Copy below code and put it before ]]></b:skin>

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

5.Now Scroll down to where you see this:-

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

6.Replace above code with below code.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

7.Click on "Save Templates" and you are done.

Note : You can change "Background color" , "Text color" and "Posotion" of above codes.

How To Change Colours of Blogger Templates? 0

Blog101 | 7:27 AM | Background , How2 , Tricks

How To Change Blogger Header background color
log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#header-wrapper {

Add immediately after that the following line:-

background:your clour;

If You want background colour set to #D3FFCC , above code must change like this.
background:#D3FFCC;

See the example below.

#header-wrapper {
background:#D3FFCC;

Save the template and refresh your site.

How To Change Blogger Main background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

body {
background:$bgcolor;
If you want to set bgcolor to #d3ffcc , replace above code with this.

body {
background-color:#d3ffcc;
Save the template and refresh your site.

How To Change Blogger Post background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#main-wrapper {
If you want to set post color to #d3ffcc , replace above code with this.
#main-wrapper {
background-color:#d3ffcc;
Save the template and refresh your site.

How To Change Blogger Sidebar background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#sidebar-wrapper {
If you want to set sidebar color to #d3ffcc , replace above code with this.

#sidebar-wrapper {
background-color:#d3ffcc;
Save the template and refresh your site.

How To Remove Blogger Navbar? 0

Blog101 | 6:40 AM | Background , How2 , Tricks

This quick tutorial will show you how to remove/hidden blogger navbar from your blog.Follow the steps given below.

#navbar-iframe { height:0px; visibility:hidden; display:none; }

Now save your template and you are done.

How To Move Newer, Home and Older Posts Links to top of Posts? 0

Blog101 | 6:33 AM | Background , How2 , Tricks

These navigation links are only available in the Layout Template.If you have a Classic template you have to upgrade by going to Template---->Customize Design--->Upgrade to get them.

log in to your dashboard--> layout- -> Edit HTML-->check Expand Widget Templates.Now scroll down to where you see this:-

<b:include name='nextprev'/>

If you want to show them only at the top you can Cut these lines to remove to the Windows Clipboard.
or
If you want them both at the top and the bottom then do Copy.

Scroll up to find this code :

<b:includable id='main' var='top'>

<div class='blog-posts'>

Paste the navigation code below the last line of the above code. Save Template and refresh your site.

If you want to customize them further you can change this code below as of your template :

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}
Save Template and refresh your site.

How To Change Blogger Favicon? 0

Blog101 | 6:28 AM | Background , How2

What is favicon? While using IE Firefox or Opera you will see an icon on the tab when u visit a page.This is called favicon.By default blogspot blogs have a favicon which looks ugly.See it here at the top of the post.So how to remove it? Goto Blogger Template>Edit Html There find the title tag which looks like

and immediately after that add the code given below.

<link href='URL-OF-YOUR-FAVICON' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Remember to replace "URL-OF-YOUR-FAVICON" with your icon file's url.

Now save your template and your done.

How To Add Google Analytics in Blogger? 0

Blog101 | 12:40 PM | Google , How2

1.Sign up for a Google Analytics account using your existing google account information.

2.Next step google will ask you for website (your blog URL), account name (wahtever you want), and time zone. Then click "Continue"

3.Input more personal information and click "Continue"

4.Now click "I agree..."

Google will show you a "Tracking Instructions". You will see " Tracking not installed" after Tracking Status, but that's ok, just ignore it and we will fix it later.

5.Copy the Google Analytics tracking code that displayed in the window, then "Continue". Next Page google will link you back to the main page, showing the website that your Google Analytics accout is tracking on.

6.Leave your Google Analytics page alone and,

a.Log in to your dashboard--> layout- -> Edit HTML

b.Scroll down to where you see </body> tag.

c.Now paste your Google Analytics tracking code right above </body> tag.

d.Now save your template.

7.Now go back to Google Analytics main page, click "Edit".

8.You'll be linked to another page, click "Check Status" on the upper right corner of page.

You'll be linked to the "Tracking Code" page, on the "Tracking Status", if it shows "Waiting for data", that means Google Analytics has been installed to blogger successfully!