Showing posts with label Blogger templates. Show all posts
Showing posts with label Blogger templates. 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
at 8:30 AM 0 comments
Labels: , , , , , , , ,

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
at 10:37 PM 0 comments
Labels: , , , , , , ,

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
at 9:32 PM 0 comments
Labels: , , , , , , ,

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 Backup 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
at 3:54 PM 2 comments
Labels: , , , , , , , ,
Subscribe to: Posts (Atom)

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