The Parts Of The Blogger Template.

Since some of us not really familiar of which are the right place to put html or adjusting the width,height,padding,margin border and more. So i found a great way to look up to in case you forgot the parts of a blogger template. So look closely to see what I'm talking about.I hope you find it useful my post.Enjoy tweaking!!!

Example Below

How To Put Bookmarks Under Blogger Post.

I found a new way to put a bookmark under each post in blogger. And i think this is pretty neat.All you have to do are the following guides below.

Example

1. log in to your blogger account.
2.Click layout and edit html.
3.Check the expand widget.
4.Click Ctrl and F and paste the code below
<div class="'post-footer'">
and copy the code below and put it under the code in step 4 .Enjoy!!!

<p class="'post-footer-line"><br /> <div align="'left'"><a href="'" pub="4QVQQ2TM5XDPAYVN&url=" title="" target="'_blank'" title="'Bookmark"><img alt="'AddThis" height="'16'" src="'http://s5.addthis.com/button1-bm.gif'" style="'border:" width="'125'/" /></a></div><!-- AddThis Bookmark Post Button END --></p>

How To Add Background Image To Your Text Or Code.

Ohh i keep looking the code below so that i can add background in my post or codes.I forgot to share it with your guys on how.I just save it in my PC encase i need it.Your visitors can copy it right the code even though it has a background in it.Enjoy!!!

How To Add Background of your text or codes so your tutorial can be easily right click and copy the code like this.

Heres the code:

<SPAN STYLE="background-image: url(Your Background.jpg)">Text On Background</SPAN>

How To Index Blog With Google and Yahoo Search.

Today I'm going to share on how to index your blog to the top search engines like Google and Yahoo search.Since it's free to submit or add your blog.Advantages are blog traffic and a huge chance of your google adsense earnings.

• Google Webmaster Tool - If you want your blog to be seen in google search this is the tool you need.Since google is the number search engine in the world.Carefully follow the instruction provided in the site.
• Yahoo Submit - Is another way to add your blog on yahoo index or yahoo search.You can add badge to monitor how many visitor from yahoo search to your respective blogs.
  

• And the third part which i haven't mention above is adding Meta Tags.Follow the instructions.

Main Code:
<meta content='BLOG DISCRIPTION' name='description'/>
<meta content='KEYWORDS OF YOUR CONTENT' name='keywords'/>
<meta content='AUTHOR'S NAME' name='author'/>

Instructions:
Add the main code under <title><data:blog.pageTitle/></title>.
Change the description,keywords and author's name and save.And that's it!!!.Enjoy!!!

It should look like the example below.Good Luck.

Scroll Boxes Codes.

Another set of scroll box styles.Enjoy!!!
~Simple Scroll Box~

<div style="height:100px; width:200px; overflow:auto;">content here</div>
~Scroll Box W/ Styles~

<div style="height:100px; width:200px; overflow:auto; color:yellow;background-color: black; border:3px solid red;">content here</div>
~Scroll Boxes Together~

<div style="height:100px; width:200px; overflow:auto;float:left;">content here</div><div style="height:100px; width:200px; overflow:auto;float:left;">content here</div>

How To Put Bookmark Under Blogger Post.

Copy the code below and follow the instructions.

1. Log in to your blogger account.Go to layout and edit html.Check the expand widget template.
2. Find the line <p class=’post-footer-line post-footer-line-3′/>.
3. Select all the code below and paste the code under it after the line above.
   
   
   <div>
   <a rel="nofollow" expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"' target='_blank'><img alt='Ma.gnolia' border='0' src='http://files.bloggerplugins.org/icon_sb_mag.gif'/></a>
   <a rel="nofollow" expr:href='"http://digg.com/submit?phase=3&url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' target='_blank'><img alt='DiggIt!' src='http://files.bloggerplugins.org/icon_sb_dig.gif'/></a> <a rel="nofollow" expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Del.icio.us' src='http://files.bloggerplugins.org/icon_sb_del.gif'/></a> <a rel="nofollow" expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' target='_blank'><img alt='Blinklist' src='http://files.bloggerplugins.org/icon_sb_bli.gif'/></a> <a rel="nofollow" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' target='_blank'><img alt='Yahoo' src='http://files.bloggerplugins.org/icon_sb_yah.gif'/></a> <a rel="nofollow" expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' target='_blank'><img alt='Furl' src='http://files.bloggerplugins.org/icon_sb_fur.gif'/></a> <a rel="nofollow" expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' target='_blank'><img alt='Technorati' src='http://files.bloggerplugins.org/icon_sb_tec.gif'/></a> <a rel="nofollow" expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank'><img alt='Simpy' src='http://files.bloggerplugins.org/icon_sb_sim.gif'/></a> <a rel="nofollow" expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' target='_blank'><img alt='Spurl' src='http://files.bloggerplugins.org/icon_sb_spu.gif'/></a> <a rel="nofollow" expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",17);"' target='_blank'><img alt='Reddit' src='http://files.bloggerplugins.org/icon_sb_red.gif'/></a> <a rel="nofollow" expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' target='_blank'><img alt='Google' src='http://files.bloggerplugins.org/icon_sb_goo.gif'/></a>
   </div>
   
   
4. Save template and your done.Enjoy!!!
   
   

Drive More Traffic.

Another ways to drive traffic to your site is by sending your blog to increase blog traffic.
http://www.lobolinks.com/
http://www.sunsteam.com/
http://www.wowdirectory.com/
http://www.unleasheddirectory.com/
http://askwebdirectory.com/
http://www.elib.org/
http://www.warpdirectory.com/
http://www.7directory.org/
http://www.directorybox.com/
http://www.selectindex.com/
http://www.apahcinc.org/
http://www.squareseek.com/
http://www.alikedirectory.com/
http://www.directorysurfer.com/
http://www.dirflux.com/
http://www.webbusinesslink.com/
http://www.nextdir.com/
http://links-to-us.com/
http://www.index-it.net/
http://www.definiteweb.net/
http://www.sevenseek.com/
http://www.wizdirectory.com/

How To Put Scrollbar To Your Blog List Part 2.

I found a better way to put scrollbar to your blog list.The difference between my first tutorial which shown here is the header will not be scrolled together with your blog list links anymore.Make sure you got the right widget id name before you proceed to the main code.

Main Code:
# Widget Id Name ul{
height:200px;
overflow:auto;
}
Example:
<b:widget id='BlogList1' locked='false' title='Friendly Bloggers' type='HTML'/>
So it should look like the code below.
# BlogList1 ul{
height:200px;
overflow:auto;
}
When the code is all set. Find the line /*----Sidebar-----*/and simply paste the code under it.Preview first before saving to avoid possible errors.Enjoy!!!

Falling Effects For Blogger Beta.

Another falling effects for your blogger and this time is hearts and stars.This fit to those who have a white backgrounds.I paste the code on the top of my header.So it's up to you where you want to put it.Here's the site that i been talking about Falling Objects Selections.Enjoy!!!!

How To Put Snow Effect In Blogger.

First log in to your blogger account.

2nd go to layout and add gadget.

3rd selet Html/Javascript and paste the code below.

4th put the gadget on top of the header and save.Enjoy!!!

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">

/***********************************************
* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/

</script>

How To Put Recent Post Widget.

Example
I found a very useful widgets for your blog.It's just a click of button and your done.Find the right widget for your blog here Widget Selections.The example can be found in the sidebars.The "Top Commentators" and "Recent Post".Enjoy!!!

How To Resize Images.

I happen to put a picture in my other profile and it sucks because it cuts half of my picture.So I'm going to share this code to help you adjust your pictures using the location or direct link. Here's the trick.

Main Code.

<IMG SRC="Image Link" WIDTH="80" HEIGHT="100" BORDER="1">

Example:



<IMG SRC="http://i449.photobucket.com/albums/qq211/she-la01/angelina-jolie-1024x768-31752.jpg" WIDTH="200" HEIGHT="200" BORDER="1">