How to create link to scroll to a certain part of the post

How to create link to scroll to a certain part of the post I haven't found a viable solution (for Blogger) anywhere else. So I have invented it by myself. And it does not corrupt the post when you switch between Compose and HTML mode. You can easily create such links that link to a certain part of a post to elaborate on the topic, without leaving/refreshing the page.

Example Scenario:

You may have created a post like a question-answer one. And you want a contents at the top conataining only the questions and the answer is written below the contents. You want your questions to be clickable and when you click them you want to be scrolled to the answer.
===================================================

• What is your name?
• Who are you?

What is your name?     <---- you want a link to scroll down here 

 I am Adnan Shameem.

Who are you?                            <---- and here as well

I am a graphics designer and a programer.
===================================================


The HTML code of the above layout will be like this:
<ul> <li>What is your name?</li> <li>Who are you?</li> </ul> <h4> What is your name?</h4> I am Adnan Shameem. <h4> Who are you?</h4> I am a graphics designer and a programer.

Solution

So what you can do is, create an anchor to set the position where to scroll down to. Edit the HTML of the post and add the code where you want your anchor to be placed (in our case the answer):
<a href="[post_url]#" name="what"></a>
Note: replace [post_url] with the post's url/link to the post

The name="what" means that the anchor name is "what".
The main trick lies in href="[post_url]#". According to this page if you only use the usual anchor code (that is <a name="what"></a>), then when you go back to Compose mode it will be replaced by (<a href="" name="what"></a>) and in the post a weird url will appear. When you link the current page with only a # afterwards (href="[post_url]#"), nothing happens except the browser scrolls to the top of the page. It is like dummy link that does nothing. We specify href="..." part in order to stop blogger from automatically adding href="" to our code. This method is logical cannot be corrupt when you switch between Compose and HTML mode.

Now we can make our url point to anchor "what". All we have to do is create an url and place a hash (#) and then the anchor name. In the compose mode select the text that you want a link of and then create a link with the:
[post_url]#what
Replace [post_url] with the url of the post where the anchor is.

So the final code is:
<ul> <li><a href="[posturl]#what">What is your name?</a></li> <li><a href="[posturl]#who">Who are you?</a></li> </ul> <h4> What is your name?</h4> <a href="[posturl]#" name="what"></a> I am Adnan Shameem. <h4> Who are you?</h4> <a href="[posturl]#" name="who"></a> I am a graphics designer and a programer.

(Replace [posturl] with link of the post you have created.)

See this tip in action: http://lazplanet.blogspot.com/p/faq.html

Read More

Add a Reply Button to Blogger Comments

Blogger’s Comments section is very dull and simple. It is so simple that it doesn't even have a Reply button. WordPress blogs, on the other hand, already have this provision. But don't be disappointed, because now you can add a reply button by a simple hack. To do so just follow the under-mentioned instructions:

Step 1:
Open your template in Notepad and find the following lines:

</dt>
<dd class='comment-body'>

Step 2:
Copy and paste the following code just above these lines:

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=1516418224387311153&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img alt='' title='Reply to Comment' class='icon-action' height='18' src='http://s5.postimage.org/c7on53zar/reply_to_comment.gif' width='42'/></a></span>

Step 3:
Now you must edit the digits marked in red. Otherwise, the Reply button won’t work at all. The digits marked in red should consist your own Blog ID.

Finding your blog ID is simple. Just log into the Dashboard and go to Design tab. Now copy your blog ID from your web browser's address bar:

Step 4:
Upload  your template and you are ready to test your reply button.

Read More

Random Quotes Widget for Blogger Blogs

I wanted to show random quotes on my blog’s sidebar but unfortunately I could not find a single widget for this purpose. Then I found a few Java Scripts on Random Texts and Random Quotes. All of them were not good for the job. Then finally I got a code from www.JavaScriptBank.com which I was able to adapt for Blogger. Let's see how to install and customize it.

Installation

The installation is simple, just take a HTML/JavaScript gadget and copy and paste the following code on it:

<p id="textrotator">(Loading...)</p>

<script language="JavaScript">

function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = '&ldquo; First Quote.&rdquo; - <a href="#">Author</a>';
Quotation[1] = '&ldquo; Second Quote.&rdquo; - <a href="#">Author</a>';

var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];
   
setTimeout('rotateEvery('+sec+')', sec*1000);
}
rotateEvery(2);

</script>
<span style='font-size:75%;float:right;'>Powered by <a href='http://inkoflife.blogspot.com/'>Ink of Life</a></span>

Save it and you are done. In case, you are new on Blogger and don’t know how to add a gadget then follow the undermentioned procedures:

1. Log into the blogger Dashboard

2. Click on the Design tab

3. Click on Add a Gadget in your desired location (on click a new window will appear)

4. From the new window Select HTML/JavaScript

5. Give a Title of the Gadget if you wish, such as: Random Quotes

6. Paste Random Quotes Widget code under Content section

7. Click Save

Customization

Changing Quotes

Write your quote in the place marked in red and the author's name in the place marked in green:

Number of Quotes

You can add as many quotes as you wish. By default I have provided provision for two quotes. You can include more quotes in the following way:

Adding Hyperlink

You can add a link to your individual quotes with related pages. To do so just replace the # with the desired link:

 

That means after addition of the link your code will look like something like this:

Changing Duration

By default the duration is set to 2 seconds. For example:

You can increase or decrease the timing if you wish. For Example in the following example I have set the duration to 12 seconds:

Some Issues

By chance your quote contains any apostrophe then replace it with this code:

Read More

How to Make Categories in Blogger

Like Wordpress Blogger does not have any features to categorize your contents automatically. But if you still insist to categorize your posts then you have to do it by using Labels gadget. In order to use the Labels gadget you have to follow these steps:

Step1.

Go to Blogger’s Dashboard. Select the Layout tab. If you find that the Labels gadget is not listed in Layout, then include it by clicking Add a Gadget link. A customization window will appear. Modify it according to your demand (for instance, you can determine whether you want to show all the labels or a selected few). You can add this gadget any where you wish for example in the navbar area, sidebar, or footer depending on the system of your template.

Step2.

Edit your post’s labels according to your grouping. For example, if you want to put a particular post under a category named “Pets”, then simply label it as pets. Try to be careful when labeling your posts. If you fail to enter the label accurately then the post will not appear under the desired category. That means the label you put should match with name of the targeted category. Any alteration of the labels may prove disastrous.

Read More

How to Use Custom Themes in Blogger

Blogger provides its own collection of templates to embellish your blog, but the choice is relatively scanty in number. But you can customize your blog with a stylish third party theme/template. In order to do this you have to follow several simple steps:

Step 1.

Download your preferred template. Over the internet a number of websites, including the following share free Blogger templates:

http://bloggerblogtemplates.com

http://bloggertemplatesblog.com

http://chethstudios.blogspot.com

http://templatesparanovoblogger.blogspot.com

http://www.instantshift.com 

Step 2.

Usually templates are distributed in compressed file format (winzip, winrar, etc.). Make sure that you have extracted the XML template.

Step 3.

Log in to your Blogger dashboard and go to Layout > Edit HTML

Step 4.

Make certain that you have backed up the old template for its future restoration. In order to do this, click on the download full template link and save the file as .XML format to your hard drive.

Step 5.

Beneath the download full template click the Browse button and locate the XML file of your theme. Press upload.

Step6.

When the upload is being completed, the HTML of your new template will now appear in the textbox below. Then click the button entitled Confirm and Save. Now view your blog and enjoy the new custom look.

Note: In some cases you may have to upload few images and java script files to third party file sharing hosts (such as http://www.postimage.org, http://www.hotlinkfiles.com, http://yourjavascript.com ) and enter their paths in the XML file. In such cases please don’t install the template until you have read the instruction provided by the theme designer.

Read More