Spiga
Showing posts with label Blogger Hack. Show all posts
Showing posts with label Blogger Hack. Show all posts

Scroll Bar for Blog Post Body

Adding Scrollbar to Blog Post body
once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

 

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;

Set 2 : Search for .post ( by browser Search) and Put the Red Portion in Curly Bracket. { }

 

  .post {
height:200px;
overflow:auto;

}

 

This will give you scrollbars to every post:-

Scrollbars within Blog Post
Sometimes, you may not want to have the scrollbars to all the [...]

This will give you scrollbars to every post:-

 

Scrollbars within Blog Post

 

scrollbarpost

This setting, scrollbars will automatically appear according to your need:-

Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.

For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows

 

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;

Set 2 : Search for </b:link> by Browser search place the below code before it.

.scrollbox {

height:100px;

width:400px;

overflow:auto;

}

Step 3: Save the template.

 

Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode and put the below code where your want to appear scrolling bar.

 

scrollbarpost1

 

<div class=”scrollbox”>TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

 

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox, like this:-

Read More......

Adding Background Image to Post Titles

Code

Dcloud Of Dcblog brought this fantastic thing to us.By this we can put a Image Just behing the Post Title like on his blog.It’s Very Simple,the only thing is that you need to have a superb image to put on their.

You will have to just check hard for the codes to implement as different blogger have different type of coding.

To locate the code which controls the post titles go to your Layout Tab (located in your Customize window) and click the Edit HTML sub tab. The code you are searching for is “.post h6″ (it can be something else also,So try searching) which looks like this

 

 

Now to get the background image in there you have to add the code “background: url()” like this:

 

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}

 

Now Check your blog the image might be partially visible only so add the height attribute(equivalent to the height of the image).

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}
height: 80px;

 

Now Checkout your blog,now you have to add/change the padding codes as you thinkl according to your blog to properly align the title within the image.

Read More......

Add an Image Beside Post Title

Don’t you want your blog look beauty? Maybe you can add several accessories. One of them is adding a small image beside post title, for example : please take a look the image below :
image-title_03
How to adding a small image at the post title? here is the steps.

 

 

Step #1
You must have a small image image, for example like this :
mypencil 

Step #2
Upload your small image to image hosting. For example : you can upload your image to blogger, Yahoo geocities, Google pages, or another free image hosting. If you has been uploading your image, please get the image code. for example : I'm has been upload an image to Blogger and the image code is :


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg


So that the picture can appear at your blog, you must create the code like this :

 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/>

And the image will appear like this :
mypencil


Step #3
Add the image code to your template code. Here are the steps to add image code to your blog.


Or, do you still using old (classic) template? Never mind, bellow is the steps adding image code to classic template :

 

  1. Login to blogger with your ID.
  2. At the dashboard page, click Template.
  3. Click Edit HTML.
  4. Back up your template code (important!).
  5. Find this code :

  6. <BlogItemTitle$>
  7. Replace your image code beside above code :
  8. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/> &nbsp; <BlogItemTitle$>

  9.  

  10. Click Save Settings button.
  11. Done. Now your every post title will appear with your small image.


This is for new blogger template (beta template) :

 

  1. Login to Blogger with your ID.
  2. At the dashboard page, click Layout.
  3. Click Edit HTML.
  4. Back Up your template code (important!).
  5. Please mark the little box beside Expand Widget Template. Wait for a moment

  6. expand-widget
  7. Go to your template code, and find the code like this :

  8. <a expr:href='data:post.url'><data:post.title/></a>
  9. Add your image code like this :
  10. <a expr:href='data:post.url'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/> &#160; <data:post.title/></a>

  11. Click SAVE TEMPLATE button.
  12. Done. Now your every post title will appear with your small image.

All right brothers, see you at my next tutorial.

Read More......

Run Custom Code On Selective Blogger Posts

Often we want to display ads on selective posts. By default, once the ad code has been added to blogger template, it appears on every single blog post. Suppose, we do not want to show ads on About, Contact and Archive pages. Or we want that posts having more than 10 comments should get image banner ads instead of text ads. Suppose you have a multi author blog, and you want that every author runs its own ad code on the post written by them. Or you may want that posts with tag 'Software' display no ad or only display only image ad. How to do all this? Well, here is the solution.

------------------------------------------------------------------------------------------------------------------------------

 

Display Author's Own Ad Code On His Post

Suppose, there is a multi-author blogger blog owned by Alex, Peter and Melinda. They all have Adsense accounts and want to display their own ad code on the posts written by them. How to achieve this? Let's see...
The following code will run each author's own ad code on the post written by them. In this example, the ad will appear at the end of post body. If you want to display the ad just below the post title shift the if...else section above the <data:post.body/> line.

 

<data:post.body/>
<b:if cond='data:post.author == &quot;Alex&quot;'>
/* Put Alex's Adsense Code or Custom HTML/JavaScript here */
<b:else/>
<b:if cond='data:post.author == &quot;Peter&quot;'>
/* Put Peter's Adsense Code or Custom HTML/JavaScript here */
<b:else/>
/* Put Melinda's Adsense Code or Custom HTML/JavaScript here */
</b:if>
</b:if>

 

------------------------------------------------------------------------------------------------------------------------------

Run Custom Code On Selective Posts

 

Let's take one more example. Suppose, we decide not to show any ad on About, Contact and Archive pages. Or we may decide to run some custom code instead of Adsense ad on these pages. To achieve this, our template code must identify the correct page while reader is opening it in the browser. How to achieve this? Let's see...
Every post in blogger has a unique post ID associated with it. This post ID is generated when the post is published. Drafts do not have any post ID associated with them. First open your post in blogger editor, in our example, it's Contact page. Now see the URL in your browser's address bar. You will find the post ID at the end of the URL, as shown in the image below.

blogger-post-id

Copy this code in notepad and close the post. Now add the following code in your template.

 

Note: Replace xxxxxxxxxxxxxxxxxxx with your post ID

 

<data:post.body/>
<b:if cond='data:post.id == &quot;xxxxxxxxxxxxxxxxxxx&quot;'>
/* Put Custom HTML/Javascript Code here */
<b:else/>
/* Put Regular Adsense Code here or leave it blank to show no ad */
</b:if>

------------------------------------------------------------------------------------------------------------------------------

 

Run Custom Code on the Basis of Comments

 

Here is one more possibility. Let's say, a blogger may want to run custom code on posts having no comments or having more than 5 comments. On the other hand, he may want that posts having comments between 1 to 5 display regular Adsense ads. How to achieve this? Let's see...


Possibilities and combination's can be infinite. I just took an example to explain the trick.

 

<data:post.body/>
<b:if cond='data:post.numComments == 0'>
/* Put Custom HTML/Javascript Code here */
<b:else/>
<b:if cond='data:post.numComments &gt; 5'>
/* Put Custom HTML/Javascript Code here */
<b:else/>
/* Put Regular Adsense Code here or leave it blank to show no ad */
</b:if>
</b:if>

 

------------------------------------------------------------------------------------------------------------------------------

 

Run Add On Custom Code Based On Post Tags (Categories)

Here is one more example. Suppose, you want to run custom code on all those posts having 'Software' tag (Category) associated with them, in addtion to your regular Adsense code. How to achieve this? Let's see...

 

Note: Replace Software with your Tag (Category)

 

<data:post.body/>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Software&quot;'>
/* Put Custom HTML/Javascript Code here */
<b:else/>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
/* Put Regular Adsense Code here or leave it blank to show no ad */

 

NOTE: You can shift these codes to appropriate place in the template according to your needs.

Read More......

AJAX Labels Reloaded

The AJAX Labels is back with more features! I was planning to release this with my new template, but the template design is slipping beyond schedule.
Note: If you want to integrate AJAX Labels with Phydeaux3's Label Clouds, read this post and come back here.
Some of the new features are:

  • Built-in navigation system.
  • More user customizability. (You don't even need to know coding for that!)
  • Support for Unicode Categories in IE.
  • More user-friendly installation. (Code to be copied/modified in template is reduced)


The installation of this hack afresh would be easy. But upgrading from my previous version is a bit knotty. Anyway, I will explain both. If you get stuck, feel free to comment and I'll be there to help. FRESH INSTALLATION Click here for Up gradation instructions. If you already have AJAX Labels installed, you can directly jump to up gradation instructions. Like the first version, this one too needs the Prototype JS framework. You can either store it in a location of your preference, or use the location that I've given below. First of all, back up your template. It is always a good idea to back up your template, so that you can revert if you mess things up. 1. Click Page Layout->Edit HTML. Check the box saying "Expand Widget Templates" Look for the </head> tag in your template. Insert the following code just above that.


<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "Subscribe to";
var catLabel = "Sorted into:";
var closeLabel = "Click to close";
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

Note: You can avoid the prototype script addition line if you already have added the prototype.js script to your template (It is quite likely, if you have added some hack to your blog). If you don't understand what I'm saying, never mind. Now the customization part. See the snippets in red above. Those are the stuff which you can customise. Just above that I have written comments on what each represent. To customize them, you just need to modify them to the appropriate value. For example, if you want to change the close button text from "Click to close" to, say, "[X]", then simply change "Click to close" in the red area to "[X]". Navigation Feature: The navigation feature allows pagination of the results. So you can view all the results in several pages. maxresults and navFlag together determine how it is shown. navFlag is the parameter saying whether you want this feature or not. The number of results shown per page will be decided by maxresults. The number of pages will be calculated automatically. Eg: Lets say, you have 13 posts with a particular label in your blog. Case 1: maxresults=5 and navFlag=1 You will have 3 pages (peekaboo blocks) with 5 results each. There will be a navbar which will let you go to any of those 3 pages. Case 2: maxresults=5 and navFlag=0 You will have a single page with 5 recently updated posts with the particular label. You won't be able to view other results Case 3: maxresults=20 and navFlag=1 You will have a single page with 13 results (Because 13 is less than 20). If you know CSS, you can modify the look of your result block as well. 2. Locate the following code in your template:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

  Replace it with this:

<b:loop values='data:post.labels' var='label'>

<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>



3. Optional:If you have the labels widget in your template.

Locate the following code in your template:



<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>



Replace it with this:

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat


(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>


4. Click on the button below.


<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preserve28e29bc50e8543bdbc285c3b47ad246c" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preservee463285a218e49dfabc9efcfc5e8ae87" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div></div>This will take you to an Add Widget Screen. Select your blog and click on Add widget. 5. Save your template. That was a breeze, wasn't it? UPGRADATION Caution! If you are installing AJAX Labels for the first time, don't proceed any further. You are already finished with your installation. This section is only for upgrading from the previous version. 1. Back up your template first. (Be pessimistic in these matters ;) ) 2. Go to Edit HTML. Look for my previous installation of Javascript. It is very easy to find. It is enclosed within <!-- Begin Categories --> and <!-- End Categories --> Delete that entire portion. 3. Now check Step 1 of the FRESH INSTALLATION section. Follow that step and come back here. 4. Search for the following snippet in your template. '"javascript:getCat(\"" + data:label.name + "\")"' There will be two places where this occurs. Replace both places with this '"javascript:getCat(\"" + data:label.name + "\",null)"' 5. Save your template and go to page layout screen and delete the HTML/Javascript widget you had created when you installed the previous version. 6. Go to step 4 of FRESH INSTALLATION section. Follow that step and come back here. 7. Save your template and you are done. There! That was not very difficult. ACKNOWLEDGEMENTS Tsung-Kai Chen - For his several comments and the bugs he found in the previous version. Bahram - For the heads up on the Unicode Category issue in IE. Update 1: The code had minor syntax errors (due to wrong copy paste)because of which the hack was not working. Problem is fixed now. Reinstalling the hack will make it work. Update 2: Drat! Another silly mistake. The Close button was not working. I've fixed this. Just delete the widget and add it again (Step 4) . You don't have to redo any other steps. Update 3: Arrgh!! Another bug. I have made the corrections. You will have to redo Steps 2, 3 and 4. This will remove support for the rel-tag microformat. I will release an update if I find a way to work around that.

Read More......

Javascript Redirect Traffic from Blogspot to WordPress Site

Ok. So you’ve had a blogspot blog for a little while and you’ve decided you want a WordPress site. How do you redirect traffic from the old site to the new site and lose as little traffic as possible in the process.

First.  Use the import feature available in WordPress.  From your Daskboard, look for Tools > Import

Second.  Add some javascript code to your blogger template. Update the vars blogTitle and wordPressUrl to match your blogspot blog.


<script>
var blogTitle = 'Flexing My Kerkness';
var wordPressUrl = 'http://kerkness.ca';

if( document.title == blogTitle ){
window.location = wordPressUrl;
} else {
var newUrl = str_replace( document.title, blogTitle+’: ‘, ” );
window.location = wordPressUrl + ‘/?s=’ + newUrl;
}
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
</script>

Basically what this script does is redirects from your blogger site to your new domain while conducting a search based on the title of page being requested.

For example. If you had a post called “How to change outboard motor oil” on blogger. When you try and access the blogspot url for that post you will be directed to the new wordpress domain and you will search for posts matching “How to change outboard motor oil”. If that post was imported into word press and you haven’t changed the title. Users will be shown a link to the post on your new site. Also they may find any new or relevant content you’ve posted since making the change to WordPress.

Read More......

Show Limited Number of Labels in Widget.

As you write more and more posts you will keep adding labels to them to categorize your posts. You can add more than one label to any single post. Labels are useful as they serve as keywords channelling traffic to your posts through search engines like Technorati.

However the list of labels in your blog can get to be very long stretching your sidebar until y

our blog post looks like a flag on top of a long sidebar. To prevent this you can modify the code of your Labels widget to show only the topmost labels in your blog..............


LIMIT LABEL NUMBER


To limit the number of labels shown in your Labels sidebar widget login at Blogger.com and click 'Layout' link on Dashboard. The Page Elements subtab of Template tab will open. If you do not have a Labels widget in the sidebar Add a Labels Page Element to it.

After the Labels widget is added click on Edit Html subtab of Template tab. This will open the Template code box on the Edit Html subtab. Click the Expand Widgets Template checkbox on top of the Template code box to put a check mark in it. The Template code box will show the expanded widgets templates.

Scroll down in the Template code box to locate the code for the Labels widget. This will look like this :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>







REPLACE THE WHOLE ABOVE CODE WITH THE CODE BELOW :










<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<ul>
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; 2) {
document.write(&quot;<li><a expr:href='data:label.url + "?max-results=100"'
rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
}
</b:loop>
</script>
</ul>
<b:include name='quickedit'/>
</b:includable>
</b:widget>



The code above will only show labels with more than two posts. To increase number of labels increase the number two in this code :







if (<data:label.count/> &gt; 2) {

 

Read More......

How to Hide Navbar (Navigation Bar)

Navbar (Navigation Bar) is facility of blogger.com. But many blogger want to hide this navbar because it will make their blog layout look better without a box (navbar) above it. The Question "is this break TOS (Term Of Service) of blogger.com?" I don't know, but so far is good, there are many blogger hide their navbar but no reaction from blogger.com. So? do you want to hide Your blog navbar? if you want here's the trick to hide blogger navbar:


1. Login to Blogger then click "Layout --> Edit HTML".
2. Copy the code below and insert into your <head> tag.

#navbar-iframe {
display: none !important;
}


3. for example put like this

-----------------------------------------------
Blogger Template Style
Name: xxx
Designer: xxx
URL: http://trick-blog.blogspot.com
Date: January 2008
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}


/* Variable definitions
====================

4. Save your setting, and open your blog, You will have no navbar in your blog page

CONGRATULATION!!!!!

Read More......

Highlight Author Comment in Blogspot Blog

This trick is to give a Highlight Author Comment . This will make the blog's owner comments looks different from the visitors comments. It's very usefull and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.

 

 

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget to backup your template first.


2. Check the "Expand Widget Templates" box.


3. Copy this script and put it before ]]></b:skin> or copy to your CSS area.

 

.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*/
}

 

4. Then find this 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>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

 

5. The red color text is the code that you have to add to your script. The position must be right.

6. And then save your template.

* You have to login into your blogger account before to give comments.

Read More......

Show Related Posts of Blogger Blog

The advantage of showing related article to your post is it will help your readers find more information related to the topics. This is base on label or category. This is usually put to the end of the article. After your visitors finish read your article, they will find some links that related to the post base on label or category.

 

Here's the tutorial to create "related article to your blogspot blog":

 

These are following steps to do this.

 

1. Login to Blogger
2. Go to "Layout-->Edit HTML"
3. Click on "Expand Widgets Template" checkbox.
4. Then download THIS SCRIPT from HERE.
5. Open it then copy the scripts.
6. Paste the script after this code : <data:post.body/>. If you have "Read more widget" you will find two codes. Put it under the first code.
7. Save your template.
Good Luck...

Read More......

How I Place Adsense Code in Blogger Post

There is trick to add Google AdSense and other advertising network such as AdBrite ad unit right beside and inside within Blogger post content, so that the ad block will appear wrapped and floated inline to the top left or top right next to the blog text. If you do not like this layout and dislike the prominent location the ads are displayed, there are other places within blog post to put the ad code.

 

blogger-ad-top blogger-ad-beside-right blogger-ad-beside-left
Middle Placement Right Placement Left Placement


Here we start. How we can play this.

 

Step 1. Login to blogger then go to "Edit HTML"


Step 2. Then search for 
]]></b:skin>
and paste the below code just before this.

 

Box 1

/* AdSense*/

/* Made by Souras ( http://www.onlinemoneyxterme.blogspot.com)  */


.adsense_left {
    float:left;
    padding-top: 20px;
    padding-right: 25px;
    padding-bottom: 5px;
    padding-left: 0;
}

 

.adsense_right {
    float:left;
    padding-top: 20px;
    padding-right: 25px;
    padding-bottom: 5px;
    padding-left: 0;
}


.adsense_middle {
    float:left;
    padding-top: 20px;
    padding-right: 25px;
    padding-bottom: 5px;
    padding-left: 0;
}

 

Step 3. Then put ad codes in between the below code

Box 2
<!-- For left alignment -->

<div class='adsense_left'>

Here is your ad code

</div>

 
<!-- For right alignment -->

<div class='adsense_right'>

Here is your ad code

</div>

 
<!-- For middle alignment -->

<div class='adsense_middle'>

Here is your ad code

</div>

 

 

If you don’t want any thing around the code just use the below code with the same procedure.

In this Step 1 and 2 are same as above

Box 3

.topadsense {
    display: block;
    position: absolute;
    top: 35px;
    right: 10px;
}

 

and Step 3 also same.

Box 4

<div class='topadsense'>

Here is your ad code

</div>

Read More......

Page Navigation Hack for Blogger (Blogspot)

Most of the people think that page navigation hack is only for who blogs at Wordpress. But here is the hack for those who use blogger and want to add page navigation to their blog. This hack will show page number instead of text link older posts, as shown in following screenshot

page_navigation

You can see live demo here.

 

Now this involves two things - adding some CSS code and javascript code to your template. All steps are explained below.

 

Steps:
  • Log in to your blogger account and navigate to Layout section. Now go to the Edit HTML tab.
  • Search for line
           ]]></b:skin>
  • Add CSS in this file above that line.
  • Now search for this code or related in your template (no need to expand widgets)
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>

Mods:

In javascript codes in this file, find line…

var pageCount =5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

 

var displayPageNum = 3;

 

Here the digit in red represents number of pages to be listed. Change the digit to list as many pages you want.

That’s it now we have added Page Navigation menu hack to our blog successfully

Your Comments are appreciated..  :-)

Read More......
Add to: Mr. Wong Add to: Webnews Add to: Icio Add to: Oneview Add to: Yigg Add to: Linkarena Add to: Digg Add to: Del.icoi.us Add to: Reddit Add to: Simpy Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Furl Add to: Yahoo Add to: Blogmarks Add to: Diigo Add to: Technorati Add to: Newsvine Add to: Blinkbits Add to: Ma.Gnolia Add to: Smarking Add to: Netvouz Add to: Folkd Add to: Spurl Add to: Google Add to: Blinklist Information