Bloggerwalk a way to create your blog earn online money with adding gadget tools tips and blogging: Tutorial

Showing posts with label Tutorial. Show all posts

Showing posts with label Tutorial. Show all posts

Widgets in HomePage Only or Post Page Only

Show Widget

This tutorial explains how to show the Blogger widgets( like links,adsense ads,etc) on your blogspot blog Homepage Only or Post Page Only or even item page only:

Usually, by default.. when we add a widget item like link units, profile, Archives, Adsense ads,Pictures,etc in Blogger blog , it will be displayed in every page of the blog including the homepage, Permalink pages,etc. In this blog there are so many widgets all over the page and every widgets are desplaying on every pages. But, what if you want to display a specific widget like a blog link,ads in only the homepage and not in the post pages and viceversa? If you want to do so, then revise the following codes for a short notice...

Tutorial, Widgets in HomePage Only or Post Page Only |

Big First Letter in Blogger Blog Posts

If you want to decorate your blog posts in Blogger.Com blogs, Well, you can do it in different ways. You can add images to every post, you can add beautiful block quotes or you can use interesting pull quotes! But, ever noticed the ‘Big first letters’ in some of the popular blogs? This simple style helps in drawing the attention of your blog readers. Now, I will tell you how to add this style in your every blogspot posts.

You need to add a simple code to your blog template. If you are using a custom template, make sure you have access to the css code. And always backup your original Blogger template, before making the changes.

Follow these steps to add a ‘Big First Letter in Your Blog Post’:

Log in to your Blogger.Com account.

Go to the ‘Template‘ tab of your blog and click ‘Edit HTML‘.

Backup your existing template by clicking ‘Download Full Template‘ link.

Look your template codes in the ‘Edit Template‘ section and find the following code:

.post img {
or
.post-body img {

In Firefox, you can find it easily by pressing Ctrl+F and putting the code in the ‘find box’.

This code may have two to three lines with padding, border etc. Look for the end of this code. It ends with a } symbol. And add the following code below that symbol:

.post t { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

or

.post-body t { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

You can change the values of color, font-size etc. to suit your blog. (example: color:#FF0099)

Now save your template by pressing the ‘Save Template‘ button.

It is almost done. From now on, you need to put the first letter of your blog post inside the <t></t> tags. Mind it, it should be done in ‘Edit Html’ view of your blog editor. It will show a big first letter in your blog post.

To make it easier, you can add <t></t> in your post template. Go to Blogger Settings> Formatting and insert <t></t> in the Post Template and save the settings.

That’s it! Go and create a new post in blogger. You will see <t></t> in the HTML view of the post editor. Simply place the first letter of your blog post within the <t></t> tags and continue writing as usual. Publish your post and you will see a beautiful ‘big first letter’ in your blog post.

Tutorial |

How To Shape Summary Post

Today i just shape my blog with a hack called summary post which indicates that it will automatically summarise all the post according words. so you can show more post with little information in it so that you can put "read More" link in order to show the full post on the next page or the content page.

Step 1: Find the code below

</head>.

Step 2: Pase the code before the above one.

<script src='http://quiterandom.com/js/summary/summary-posts.js' type='text/javascript'/>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

Step 3: Replace red colored text with your direct file link
Step 4: Find the following code again

<data:post.body/>

Step 5: Repalce the above code with below

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='readmore' expr:href='data:post.url'>Read more Â»</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Step 6: Save the template
Step 7: Download The five From the following link

Tutorial |

Creating a blog

Creating first blog with blogger.com is quite simple and easy to make your first blog. But You will need gmail id first to deal with any google's product. However, if you are new in this business if you know what i mean, then you will need some asists to make it happen. So, here are some tips and steps waiting to be followed.

Step 1: Go to blogger.com first

Sing in with your gmail account. if you dont have any create from here

Step-2: Input your blog Title (e.g. Blogger Walk) , domain name (e.g. bloggerwalk) and capcha.

Click continue

Step 3: Choose your template and finish to have your first blog.

So good luck you have jusy created your first blog and now you will pay attention for next 2 weeks and make your site like this one.

Tutorial |

Place ads Below each post

To encode adsense ads, first create an adsense ad and then visit centricle website to encode. In centricle web page , you need to paste your adsense code in the text area and then click " Encode ". Copy the encoded code. Now your adsense code is ready to be added to blogger template.

Go To Layout >> Edit HTML >> Click Expand all widgets
Find the following code
<data:post.body/>
Place the following code code right before the above code

Replace the red code wiyh your encode ads
Save it

Tutorial |

Email Subscribe Below each post

Now I just place it in my blog and it is quite easy but more time need to do it. But this is working very good besides, it crates good decoration too. However, If You want to place an email subscribe field for each post like the following image

Tutorial |

Show Related Stories Under Each post

"LinkWithin is a widget that links to related stories from your archive under each story on your blog." I just place it in my blog and if you are interested then please look at the image and it will apear in the bottom of every post.

It is very easy to place it in your blog but you have to go to the website first and have to follow their procedure to have it in your blog.

Tutorial |

Yahoo Smilies for comment

Today I will place yahoo smilies right above the post a comment. So that it will help to make any empressionby using pictures. If you see the picture below and it will be like that. So if you want to try this with me then

Follow my steps

Long in your blogger account
Go to Layout then Edit HTML
Find the following code

<b:if cond='data:post.embedCommentForm'>

Now I will Add the below code after the above code

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

After that, I will find the following code

</body>

Then I will place the below code before the above code

<script src='http://Your Direct link here/smiley.js' type='text/javascript'/><noscript><a href="http://bloggerstop.net" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Save it For now
Now you will need a smiley.js so here is the link down load it and upload it to your hosting site then change the red colored link.
That's It!

Tutorial |

Feed Headline Animator

Create and customize an animated banner that cycles through your feed's five most recent items. It's an easy way to promote your content anywhere you can place a snippet of HTML.

If you want to place it in your blog then follow the steps i tell you

1. Go to your feedburner page and log in your account

2. Then go to Publicize tab

3. Click "Headline Animator" from the felt navigetor

4. Customize it with using the number of fields

5. Save to activate the service.

6. In the next page You will select your blog type for exaple if you use blogger then choose it then click next. and it will be automatically placed in your blog.

Feedburner Help, Tutorial |

Creative Commons

Creative Commons is a non-profit that offers an alternative to full copyright. With a Creative Commons license, you keep your copyright but allow people to copy and distribute your work provided they give you credit — and only on the conditions you specify here. This service attaches the appropriate Creative Commons license in your feed's XML.

If you want to place it in your blog then follow the steps i tell you

1. Go to your feedburner page and log in your account

2. Then go to Publicize tab

3. Click "Creative Commons" from the felt navigetor

4. Customize it according your wish

5. Click Save to activate

Tutorial |

Chicklet Chooser

Chicklet Chooser

Promote your FeedBurner feed directly on your website! Place HTML that Chicklet Chooser automatically generates for you in your site templates to help users easily subscribe to your feed. see the bolow as an example

Subscribe in a reader

If you want to place it in your blog then follow the steps i tell you

1. Go to your feedburner page and log in your account

2. Then go to Publicize tab

3. Click "Chicklet Chooser" from the felt navigetor

4. Choose the new standard feed icon from the list

5. Copy the HTML code for use in your own page templates Or you can directly place this code from here.

Feedburner Help, Tutorial |

Awareness API

Awareness API

The Awareness API allows developers to build applications that can display, analyze and promote your feed's traffic data outside of FeedBurner. Awareness API access for your feed is disabled by default, but you can toggle its activation status here. (Want to build applications that hook into the Awareness API? Full documentation is available.)

1. Go to feedburner log is your account.

2. Then go to Publicize tab

3. Click Awareness API from the felt navigetor

4. Click Activate

Feedburner Help, Tutorial |

Feed count

FeedCount

FeedCount is another cool way to promote your feed. It is a dynamic graphic that always displays your feed's current circulation, as calculated by FeedBurner. Choose its color scheme and an animated or static appearance; it is yours to customize!feednurner then log in you gmail account. here is an example

1. Go to Your feedburner account

2. Then click Publicize tab

3. Now Click FeedCount from the left navigator bar

4. Select your Chicklet style

5.Click Activate to get the code.

6. Now you will place the code in your blog by selecting HTML/Java Script gadget

Feedburner Help, Tutorial |

Email Subscription field for blog posts

Give your biggest fans another way to keep up with your blog or podcast feed by placing an email subscription form on your site.

1. Go to feedburner log is your account.

2. Then go to Publicize tab

3. Click Email Subscriptions from the felt nevigetor

4. Now you customize the forms and copy the code but remeber if you use blogger then select "Use as a widget in blogger"

5. Copy the code then place it in HTML/JAVA gadget

6. Save the gadget.

Now If you want to place it in every single post but not is the home page then follow the steps

6. goto blogger account >> Layout >> Edit HTML click expand widgets

7. Search the below code by Ctrl + F

<data:post.body/>

8. Place the code after the above code with

<b:if cond='data:blog.pageType == "item"'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td><div align='center'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerwalkrssposts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' size='80' style='width:140px' type='text'/>
</p><input name='uri' type='hidden' value='bloggerwalkrssposts'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></div></td>
</tr>
</table></b:if>

9. Save it

Feedburner Help, Tutorial |

How to change your domain name

Today i will change my blog and its easy because google give the authority to change the existent domain to another one anytime it needs. But Try to not do it frequenly bcoz visitor will lose interest to come here again.

Anyway if you want to change your existing domain then follow the steps

1. Log in your account

2.Then go to Sitting

3. click on publish tab

4. Input your desired text in the first field

Tutorial |

How to add three column at the bottom

My blog template doesnt have any bootom section so i am now about to place three column at the blog bottom place. So the steps are as folow

1. Log in blogger account

2. Go to layout then edit HTML

3. Now (Ctrl + F) Search for below codes,

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

4. The we need to replace the red line with the following code,

<div id='footer-column-container'>

<div id='footer2' 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='footer3' 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='footer4' 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 id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

5. Find </b:skin> and place the below codes before it

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

6. And save Your Template.

Now Go to Page elements you can see three column created in your footer above your main footer.

Tutorial |

Flash tags for blog

Today i just placed Flash animated tags in this blog and here is summary of the procedure of placing this tag in your blog and i belive you can do that. its quite easy. just follow the steps

It may not suitable for all XML template so read detail about the template before downloading it.

1. Log in your blogger account

2. Then go to Layout

3. Then click edit HTML but dont click expand widget mode

4. Find the following code by ctrl + F

<b:section class='sidebar' id='sidebar' preferred='yes'>

5. Now Place the below codes after the above line

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&
amp;distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

6. Now preview the blog before saving it. If you know some basic html code then you may change its color text and so on.

Tutorial |

Customize your BlockQuote

Sometimes you may not have a perfect Block Quote Setup in your XML template. If that is so, whenever you want to post ay code then it will not appear exactly. In my openion i have found this problem right before this post. So now i am willing to tell the story behind this concept. To convert html code go to http://www.centricle.com/tools/html-entities/ and convert it then place the code within blockquote.

Please folow the steps
1. Click here to see the image and download it then upload it to any direct file upload website such as photobucket.com

2. Log in your blogger account then layout >> edit HTML

3. Search by Ctrl+F then write blockquote

blockquote {
.....................
}

4. Replace all the code within { } to

blockquote {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: #D1D0C6 url(http://Your-image-directory/quote.gif);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
font-size: 0.9em;
}

5. After that you will paste this code right after the above one

code {
color: #000000;
font-size: 110%;
}

That would be all for this section. If you know some code then you can change the entire outlook of your Block Quote. Happy humping

Tutorial |

Flash Vedio file placement

Today I tried to place You Tube flash vedio in my blog and i think i am success to do so. If you have notice you can see the flash vedio on my blog and i belive that you will do it easily.

Please folow the steps

1. Go to youtube website then search your vedio which is perfect match for your blog.

2. Copy the embed code from youtube website. You can costomise the flash from this website.

3. Then log in you blogger account >> Layout Tab >> Add a gadget. Chosse HTML/JAvaScript.

4. Paste the code in here. Save it.

Youtube embed code is

<object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/vfdoLBni4zA&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/vfdoLBni4zA&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="270"></embed></object>

The red colored text indicates your vedio link and blue is the measurment or size of your flash vedio. you can edit you size and vedio any time you want.

Tutorial |

Howe to upload a template to blogger

My first job is to find out a perfect template from the website for my blog. So i used my favorite blog site Blobberstyle.com and from here i have choose the following template

.

Please folow the steps

1. Download your template from the freee website for example http:///bloggerstyles.com but remember if you choose a template like this one then you have to follow somes instructions which is given in the zip file.

2. Log in your blogger accoount then go to layout section and expand your choice to edit html. From here, you can download your full existing template if you want.

3. Browse your file and click upload. A confirmation will appear but you have to click delete confirm option.

Tutorial |

Subscribe
Tags
Popular