Showing posts with label Blogger Hacks. Show all posts
Showing posts with label Blogger Hacks. Show all posts

How to Create Read More

If you post an articel to your blog it will displayed on a main page, if you have a long post content, your blog will opened more long time. But it can be tricked with a script to short your post or only abstraction post will dispaled on a main page, and the full post will replaced by "Read More" link. Here's the trick to create "Readmore"

1. You have to Login to blogger, then chose Layouts --> Edit HTML
2. Click on "Expand Widgets Template" checkbox.
3. Find the code below in your HTML Codes. ( the short way to find is by copy the code below then press "Ctrl + F" then paste in the box)
<div class="post-header-line-1">
<div class="post-body">
</div>
</div>

or
<div class='post-header-line-1'/>
<div class='post-body entry-content'>

4. If you have found it, put the code below under the above code.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Under the code, you will find code like this <p><data:post.body/></p> you have to put the code below under it.
<a expr:href='data:post.url'>Read More......</a>
</b:if>
6. You can change the "Read More" text with other.
7. Save your job.
8. Go to Setting --> Formatting Tab menu
9. At the lower page you will found "text area" box beside text "Post Template"
10. Put the code below to the box

<span class="fullpost">

11. Then click Save the setting.
12. If you want to post, put your short post or description above this code <span class="fullpost">, and the next or full post put between <span class="fullpost"> and </span> code.

GOOD LUCK!!!!!

Highlight Author Comment in Blogger / Blogspot

This is a blogger trick that will make highlight the author's comment and make the author's comment different from the readers....
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 Orange 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

Adsense Below Blogger post title

Many bloggers are wondering and trying to find that How to add Adsense below the blogger post title???
So i am now showing you the easiest way on how to add Adsense below post title in Blogger....


As you know that Google earnings depends upon your blog traffic and ad placement. One important place for adding adsense is below the post title.... There is more possibility to get clicks.

First of all login to your google adsense account and generate ad code

Now copy that code and put it in the box below and parse it..

Now Copy the parsed code
Login to blogger
-> Layout->>Edit HTML ->> expand the widget template
and find this code



<data:post.body/>
Replace it with the following


 <!-- http://blogger-new-widgets.blogspot.com Adsense Above Posts start -->
<b:if cond='data:blog.pageType == "item"'>
Put your parsed adsense code here
<br/>
</b:if>
<!-- http://blogger-new-widgets.blogspot.com Adsense Above Posts End -->
<data:post.body/>


You will see your ad appearing below the post title... ( this ad wont on Homepage and label pages )

happy earnings while enjoying blogging

If you like this post or you want to ask any question then please leave a comment
Thanks

Highlight Author's Comment in Blogger


This is a nice way to make your ( author's ) Comment different from all other comment that your readers left. Its is a very Interesting and useful Blogger tip..



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 orange color text is the code that you have to add to your script. The position must be right.
6. And then save your template


More about blogger tips

Adsense ads in Blogger post body



Using Blogger Feature:

You can use Blogger's own feature of putting ads in between posts...
Go to Layout -> Page Elements... you would see "Blog posts" click the edit link at the bottom right corner.



You would need a Google Adsense . You will be assigned a publisher identity number which shall appear in all your adsense codes.....
Tick the "Show Ads Between Posts" .You can select whether to show ads after every post or after several posts.
Save and refresh your blog to see the ads...

More ad Locations:



Go to Adsense For Content
Make Ad of your choice
You would get a Adsense Code





Changing the Adsense Code:

You Should replace some character

< with &lt;
> with &gt;
" with &quot;


Your Adsense code should appear like this...

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-0000000000000000&quot;;
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = &quot;336x280_as&amp;amp;quot;;
google_ad_type = &quot;text&quot;;
google_ad_channel = &quot;&quot;;
google_color_border = &quot;FFFFFF&quot;;
google_color_bg = &quot;FFFFFF&quot;;
google_color_link = &quot;000000&quot;;
google_color_text = &quot;000000&quot;;
google_color_url = &quot;000000&quot;;
//--&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;


Insert Code Into Template:

Go to Blogger Account and Layout -> Edit HTML
"Expand Widget Templates"

First Download your template before making any changes...

Now search for "post.body" you should see these lines
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


If you want the ads to appear between your post title and post body, add the following code above the orange lines and if you want you your adsense code immediately after every individual post, add the following post below the orange lines.
The code to add is


 <div style='float:left; margin-left:30px'>
AdSense Code
</div>
Keep blogging!!!
if you like this post then please leave a comment or subscribe via RSS or Email.

What's the reason for blogging??????

As i am blogging now i have a reason for blogging and that's i wana share my knowledge and help all my friends.... I am passionate about blogging and i love to share whatever knowledge i have about.....
These are my reason for blogging....
  1. Share Whatever You Want: Blog have flexibility, I can share anything with my readers, any knowledge i got, any experience i have about, Share pics i have interesting, videos which are helpful and interesting etc etc.....
  2. Blogs are easy to use: Blog are very easy to use nothing you have to learn about, Just make an account, Start blogging!!!!!
  3. More Friendships: Blogs are a great way to make communications to your visitors, When they leave comment or leave a chat box message....
  4. Get Revenue: It sounds great ahaaaan? When you are blogging for your interest and hobby and someone pays you? Yes by advertising on your blog you can earn a decent earnings, If you are having great content and useful content on your blog... then join PPC Ads like GOOGLE ADSENSE etc and start earnings
If you start blogging with a solid reason you would be able to be a Great Blogger.....

Blogger For Beginners

Keep Blogging
If you like this post then please leave a comment or subscribe to this blog via RSS or Email
Thanks

To Hide The Blogger Nav Bar

1- Log in to blogger

2- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

3- paste this CSS definition

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


Just Below this



-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: http://www.stopdesign.com/
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */



It Should Look like this


-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: http://www.stopdesign.com/
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}

Add Digg button to Blogger

This is the step by step guide to show you how to add a Digg button to your Blog....
Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.

Automatic Count and Vote Button

Before you do that though, you would want to take note of the following:-

1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the "Download Template" link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-

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


If you want the button to show at the top right corner of your post, replace the above code with this.

<div style='float:right; margin-left:10px;'><script type='text/javascript'>digg_url="<data:post.url/>";</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div><p><data:post.body/></p>


This is what you get:-


Please leave a comment if you like this post or subscribe to this blog via RSS or Email.

Adding Blogger Search Box

Hi Friends...
This post is about adding a Blogger blog search box to your blog. Although Google Blogger have a Nav Bar at the top of blogs.... But if you want to add another search Box ( blogger search box) to the area of your then let me show you

Go to your Blogger account->Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-


<p align="left"><form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"><strong>NAME OF YOUR BLOG<br/></strong><input id="b-query" maxlength="255" name="q" size="20" type="text"/><input id="b-searchbtn" value="Search" type="submit"/></form></p>

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size="20" and value="Hit" will give you this:-


Search Here



Whereas a width size="30" and value="Go" will give you this:-


search here

The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.


Please leave a comment if you like this post or subscribe to this blog via RSS or Email.