Teach Me Know: Blogging Tips and Tricks

Showing posts with label Blogging Tips and Tricks. Show all posts

Add Sliding Text, Image to your Blogger Blog (Marquee Code)

In Todays tutorial we are going to use Marquee codes to add Sliding Text, Image to your Blogger Blog. You can make the text, images scroll from right to left, left to right, top to bottom, or bottom to top depending on yours choice.

1. Continuous scrolling text:


<!-- HTML codes by http://teachmeknow.blogspot.com/ -->
<marquee direction="left" bgcolor="#99CCFF">code to simple scrolling text</marquee>
<p><a href="http://teachmeknow.blogspot.com/2010/08/add-sliding-text-image-to-your-blogger.html">Marquee</a></p>

The above Code Result in:

code to simple scrolling text

2. Text bouncing back and forth:

<!-- HTML codes by http://teachmeknow.blogspot.com/ -->
<marquee behavior="alternate" bgcolor="#33FFCC">code to simple scrolling text</marquee>
<p><a href="http://teachmeknow.blogspot.com/2010/08/add-sliding-text-image-to-your-blogger.html">Marquee</a></p>

Above Code Results in:

code to simple scrolling text

3. Text Scrolling Upwards:


<!-- HTML codes by http://teachmeknow.blogspot.com/ -->
<marquee behavior="scroll" direction="up" bgcolor="#33FFCC">code to simple scrolling text</marquee>
<p><a href="http://teachmeknow.blogspot.com/2010/08/add-sliding-text-image-to-your-blogger.html">Marquee</a></p>

Above Code Results in:

code to simple scrolling text

4. Text and Image both Scrolling:


<!-- HTML codes by http://teachmeknow.blogspot.com/ -->
<marquee behavior="scroll"  direction="left">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTz9KEolFnbd9p1ErvI2UDcBG0O2kVbVD2CxCko0J61KBUs44gxx_uCksjgudYOk03ZNOvvTiqaro2MVSTW5jTzrcE4JS1u419Y1fiEm8bSATBpXDfTIDQckFc_WkwRb4w8U9j7ZlPeYEf/s200/BackupTemplateFirst.gif" width="100" height="100" alt="smile" />
<p>Sample text under a <a href="http://teachmeknow.blogspot.com/2010/08/add-sliding-text-image-to-your-blogger.html">Marquee image</a>.</p></marquee>

Above Code Results in:

smile

Sample text under a Marquee image.

Following are Changes you can make to existing Marquee Codes

direction- left, right, up, down
bgcolour- Any color you want for your background: get some color codes from here
behaviour- scroll, alternate

You are Done !!! Happy Blogging

Add Favicon to Blogger Blog

This tutorial is to customize your blog and add your customized Favicon to your blog, Favicon of current Blog is shown below

Add Favicon to Blogger Blog

1. First "Login" to your Blogger account

2. Click on "Design" highlighted in image below

3. Click on "Edit HTML" as shown below

4. Search for the Code Shown below in your blogger code


<Head>

5. Now, place the code shown below just after the code shown in step 4



<link rel="icon" href="http://myfavicon.com/favicon.ico" />

6. Replace "http://myfavicon.com/favicon.ico" with the URL of the image you want as your favicon.

7. Save the Changes to your Blogger Template

8. You are Done !!! Happy Blogging

Add 3 Column footer to Blogger Blog

In today's Tutorial we are going to learn How to add 3 Column footer to Blogger Blog, this tutorial involve a little trick of adding a code to your existing footer section in your template to convert it to 3 column footer template.

Before Starting with our Post don't forget to take back up of your template before editing it.

Add 3 Column footer to Blogger Blog

1. First "Login" to your Blogger account

2. Click on "Design" highlighted in image below

3. Click on "Edit HTML" as shown below

4. Find the following code in your blogger template code


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

5. In most of the templates you will find this above code at bottom of blogger template

6. Now, to add 3 column footer to your blogger template replace the above code with code shown below


<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

7. Save the Changes to your Blogger Template

8. You are Done !!! Happy Blogging

Submit your Blog Sitemap to Google

By following this Tutorial you will be able to submit sitemap of your blogger blog to Google using Google webmaster tools, and this will take less than 5 minutes to finish.

Following are benefits of Submitting your Blog Sitemap to Google Search Engine

Regular indexing of your blog
Regular indexing of your Latest posts
Increase in sites traffic as a result of more indexing

So for whom you are waiting for , Submit your Blog Sitemap to Google by following the steps below:

1. Sign in to Google webmaster tools, Click here to Sign in

2. Now Click on "Add New Site" as shown below.

3. Insert Your Blogs URL Address.

4. Then you will be asked to verify your Blogger blog, select any one whichever you want and verify your Blog.

5. Since you have Verified your Site, Know you are going to Submit your Sitemap by following to left side of your webpage.

6. Below Dashboard goto "Site configuration">>"Sitemaps" >> Now Click on "Submit a Sitemap" as shown below

7. On the Sitemaps page in Webmaster Tools type either atom.xml or rss.xml into the box provided to extend the displayed URL and click on the "Submit Sitemap" button. Images are shown below for your reference

8. After doing all steps peerfectly you will be directed to a page will then display a message indicating that your sitemap submission is pending.

9. It will be Approved within 24 hours .

10. Since you have your sitemap in place you can look forward to increased traffic as more visitors will now be able to find your Blog on Google Search Engine.

You are Done !!! Happy Blogging.

Add Paypal Donate button to Blogger

If you are planning to insert a PayPal donation box on your blog’s sidebar or any other place then follow the below mentioned steps. PayPal Donation button looks as image shown on right side.

1. Sign in to your PayPal account or Create yourself a new PayPal account

2. After Signing in Click on "Merchant Services" Tab

3. Now Click on "Donations" which is displayed on right hand side in List of Key features.

4. Fill up the Form in Donation Page and Select the PayPal button style, then Click on "Create Button Now"

5. After Clicking on "Create Button Now" you will be redirected to paypal donation button code page.Copy the code and Paste it to your blog.

You are Done !!! Happy Blogging.

How to Recover (Undelete, Restore) a Deleted Blog

In Today's Tutorial we are going to learn "How to Recover (Undelete, Restore) a Deleted Blogg in Blogger Blogspot". Follow the Instruction as shown below.

1. First "Login" to your Blogger account

2. You will be Redirected to Dashboard of your Blog.

3. Now, to recover a deleted blog Click on "Show all" as shown in image below

4. Then the whole list of blogs, including the deleted blog, will be displayed as shown below

5. Just Click on "Undelete this blog" which you want to recover and you are done !!! Happy Blogging

How to Delete a Blog in Blogger Blogspot

In Today's Tutorial we are going to learn How to delete a Blog in Blogger Blogspot. This may be the most of the easiest Tutorial you can ever find on this Blog or on Web.

1. First "Login" to your Blogger account

2. Select the Blog which you want to Delete

3. Now Click on "Settings" as Shown below

4. Click on "Delete Blog" to delete the blog as Shown below

5. After Clicking on "Delete Blog" you will be directed to page as shown below

6. Now Simply click on "DELETE THIS BLOG"

IMPORTANT NOTICE:

You Can Even Recover Your Deleted blog which is shown in following post:

"How to Recover a Deleted Blog"

You are Done !!! Happy Blogging

Change width of blogger template

Many times when we find a new Blogger Template, and we decide to try it in our blog but later you find that the width of the template is not as you were looking for and drop that template and start looking for new blogger templates. Now this Tutorial is for this kind of blogger who want to Change width of blogger template.

MOST IMPORTANT: Take Back up your current Blogger Template
Basically I am showing you this article considering a Standard 2 Column Blogger Template say Minima Template. It contains 5 things and we are going to increase width of each component in given order.

Outer Wrapper
Header Wrapper
Post column
Sidebar column
Footer

1. First "Login" to your Blogger account

2. Go to "Design" > "Edit HTML"

3. Find Header section and change Header Wrapper width to 820px (Search using CTRL+F) and change as shown below

4. Similarly goto the Outer Wrapper section and change the width to 850px as shown below

5. Change the Outer Wrapper "Text-Align" to "left" as shown below

6. Goto the Main Wrapper( Post column) section and change the width to 550px as shown below

7. Change the Main Wrapper "float" to "left" as shown below

8. Goto the Sidebar Wrapper and change the width to 270px as shown below

9. Edit the Sidebar Wrapper "float" to "right".

10. Now Finally, Goto Footer Section and Change its width to 850 px as shown below

11. Save the template and you are done.

Following changes we have made to our blogger template

Outer wrapper- 850px
Header- 820px
Main column- 550px
Sidebar- 270px
Footer- 850px

You can play with templates by increasing and decreasing the width of the templates make sure that main column width + sidebar column width should not exceed outer wrapper width. Footer width can be same as outer wrapper width.

You are Done !!! Happy Blogging

Source: Blog

How to use pages in blogger

I have been blogging since last 1 year and recently blogger have introduced a new idea of adding "Pages" in your blogspot blog as present in Wordpress. With Blogger Pages you can create a static pages that are linked to your blog. You can create pages like CONTACT US, EMAIL, ABOUT US, and many more upto maximum of 10 pages. Firstly I was quiet confused with this new pages, but after reading several posts on various tech websites and blog's, I got complete knowledge about it and I want to share these valuable information with you.

Simple step to create new pages in your blog

1. First "Login" to your Blogger account

2. Go to "Posting" >>"Edit Pages" >>"NEW PAGE"

Here you can add various page title like CONTACT US or ABOUT US or EMAIL etc. After naming title write the content you want to display for the page you have created, say you have created a pages named CONTACT US, Then in CONTACT US you can write about your Email address, contact number, and that all stuff you want to display on CONTACT US page. When visitors visit your Homepage they will get to see various Page Tabs you have created in your blog as similar to shown in the image below

IMPORTANT NOTICE:

Note that you will not need to make a "Home" Page because that is automatically added when you add the Pages widget.

You are Done !!! Happy Blogging

Adjust Blogger Title Tags to Improve SEO

Todays Tutorial deals with How to gain Maximum Traffic, That is improving SEO (Search Engine Optimization) of your blog to get higher Traffic on your Blog by optimising your page title for various search engines like Google, Yahoo.

By default Blogger (Blogspot) blog does not have search engine optimised title tags. Blogger assigns title tags which contain the the Title of the post following the Name of the blog . But this type of title tags are not search engine friendly.

By simply reversing the position of the blog name and page title significant improvement can be gained in SEO resulting in higher blogger Traffic.

Follow the Steps for SEO optimization of your Blogger Blog:

1. First "Login" to your Blogger account

2. Go to "Design" > "Edit HTML" and search for the code shown below.


<title><data:blog.pageTitle/></title>

3. Now Replace the above code with the code shown below


<b:if cond='data:blog.pageType == &ampquot;item&ampquot;'>
<title><data:blog.pageName/> |
<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

4. Click on Save Template and then View Blog

5. If you are having any problem when trying to Insert and unable to Save the above code (Step .4), then the another code shown below might work for your blog


<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> |
<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Now enjoy your SEO optimized Blog Title Tag. Be prepared to Welcome high traffic on your Blog.

IMPORTANT TIPS

Don't forget to take back up of your template before editing it

You are Done !!! Happy Blogging

Backup your Blogger Template

Before playing with your Blogger Template the most important step to be taken is to Get a Back up file downloaded or else you might end up facing a great trouble. Read the instruction below to backup your valuable blogger template.

1. First "Login" to your Blogger account

2. Click on "Design"

3. Click on "Edit HTML"

4. Finally, Click on "Download Full Template"

5. Save the XML File on your computer.

IMPORTANT TIPS:

You can use that XML file to restore your blogger template if you ended wrongly while Editing your blogger template.

You are Done !!! Happy Blogging

Remove Date and Author from Blogger post

Today I am going to write a Very Simple post, This post is specially Dedicated to begginers. This post is for those guys who want to "Remove date from the Blogger post" or "Remove Authors name from Blogger post". Both of these tasks can be done at the same time and is simple to do.

In the Image shown below there is date Stamp in blogger post, now we are going to remove this Date time Stamp along with many other components in very few Steps

1. First "Login" to your Blogger account

2. Go to "Design" > "Edit " in Blog Posts as shown in image below

3. Now select the Items you want to show in your Blogger post and Check the Boxes as shown below

4. Save the Changes.

You are Done !!! Happy Blogging

Display Code in Blogger Post

In my previous post Adding Meta Tags to Blogger. I was quiet struggling to insert a code in the blog post , But after several Trial and Error methods finally I suceeded in inserting code in my blogger post and want to share this valuable but simple trick with all my blog readers.

1. Go to "Design" > "Edit HTML" and search for the "css" section
2. Now Copy and Paste the code shown below in css section of your blog .


.postCode{
background:lightyellow none repeat scroll 0 0;
border:1px inset orange;
height:150px;
margin:10px;
overflow:auto;
padding:6px;
text-align:left;
}

3. Save the Changes done.

4. Now whenever you want to insert code in your post use following format:

<pre class="postCode">
YOUR CODE
</pre>

5. Don't forget to encode the code which you want to display in blog post CLICK HERE

6. After Encoding the Code Goto Step 4

IMPORTANT TIPS

Don't forget to take back up of your template before editing it

You are Done !!! Happy Blogging

Adding Meta Tags to Blogger

Meta tags are very important for the SEO of the blog. Meta tags help search engine crawlers know about the content of the blog,website or post. Now I will Explain the tutorial of Adding Meta Tags to Blogger.

How to add meta tags to blogger

1. Go to "Design" > "Edit HTML" and search for the code shown below using keyboard buttons CTRL+F


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

2. Now Add this Code just after the above code:

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>

Changes to do in above Code:

DESCRIPTION HERE: Write about your blog description
KEYWORDS HERE: Write the keywords of your blog
AUTHOR NAME HERE: Write the Your name

3. Don't forget to save the changes.

Important Tips:

Don't repeat the keywords more than 3 times.
Don't forget to take back up of your template before editing it

You are Done !!! Happy Blogging.

Teach Me Know

Pages

Add Sliding Text, Image to your Blogger Blog (Marquee Code)

Add Favicon to Blogger Blog

Add 3 Column footer to Blogger Blog

Submit your Blog Sitemap to Google

Add Paypal Donate button to Blogger

How to Recover (Undelete, Restore) a Deleted Blog

How to Delete a Blog in Blogger Blogspot

Change width of blogger template

How to use pages in blogger

Adjust Blogger Title Tags to Improve SEO

Backup your Blogger Template

Remove Date and Author from Blogger post

Display Code in Blogger Post

Adding Meta Tags to Blogger

How to add meta tags to blogger

Any Query related to any Post please feel free to comment on it so that I can Improve and provide you with better blog

Categories

Blog Archive

Subscribe for free

Money making Resources

Recommended Blogs !

Recent Comments

Labels