Do you need help?

Ardan’s Blog Talk needs some ideas for what to include here.
Have you ever wondered if it was possible to do something
in Blogger? Not sure if it can be done. Post a comment here and
We will see if it is possible or if there is a work around for it.

Showing a blog within a post: Part 2

If anyone is interested the blog inside a post from the previous post
was done using an iframe easy enough, however it has a problem.
The iframe has a zoom setting which works in some browsers and
not others so although it can be done it does not look
the same in Internet Explore and Firefox.

Firefox does not seem to support the zoom setting.
To see what I am talking about you need to look at it in both browsers.
It does not look too bad though if your main content is to one side
of the blog and you set the width of the iframe to show it.

If anyone would like to see the code that achieved this,
leave a comment otherwise there is not much use in me showing it.

Showing a blog within a post: Example

Hi all,
Ever wanted to promote another blog, maybe your own or someone elses.
Easy enough to take a screen dumpand have a stactic picture, wouldn't
it be great though if you could show the actual blog?
Still working on this. Need to change zoom, maybe a problem with browsers.

Part 4 Custom Menu Blogger

Now for the final part of the tutorial.

• Once you have as many links as required, place them in a 'div'.

This is shown in the Image highlighted blue. The name can be any thing
other than a reserved html or css word. myMenu will be safe.

• Don't forget to close the div which is the second highlighted bit.
• Now for the style highlighted red.

position: absolute;  tells the browser where to place the menu in the window.
top:50px; tells the browser to drop it down 50 pixels from the top,
this could also be a percentage say 2% or whatever.
left:380px; tells the browser to place the menu 380 pixels
in from the left hand side of the screen. May also be a percentage.
Don't forget to put this all inside curly braces(next to the 'P' on the keyboard.

 

• You are better off making all your code up in notepad then copy and pasting it into a new gadget.

• Use the HTML/ Javascript  gadget by clicking add a gadget in your blogs layout window.
• Save and test.
• The numbers used for top and left may need to be changed to see where it looks best.
• Check in as many browsers as you can. Firefox and Internet Explorer will display it differently.
• Good luck. Post a comment if you need help. There are ways to have it display the same in both browsers however a little more detailed.

Part 3 Custom Menu Blogger

Now to create the pages

• Pages are basically just one long post.

• Once you have created the post open it in its own window by clicking the post heading

• Now copy and paste the URL into the text document you created in part 2.

The URL in this case could be to any  however, I am doing tutorial mainly for your own blog/s.

• This is what I have in my text document for 1 image + 1URL

• Next remove the parts highlighted red. The image part is what we need.

• Next combine the URL and Image tag to get the link.
• Adding what I have added in blue highlight.

Part 2 Custom Menu Blogger

• Create a new post 

• Upload the button images to the post

• Do not publish this post , it only ever needs to be a draft

• These are the 3 images I have used

• Click on Edit HTML
• Now you will see the HTML code for the 3 buttons

 I have highlighted them here so you can see the code for
each image.

 
 

• Copy and Paste your code into a text editor

Note: Notepad will do fine here, do not paste to Microsoft
Office Word. Word adds its own formatting you don't need.

• Save the text document for later use.
• Next steps coming soon in Part 3

Part 1 Custom Menu Blogger :Create Buttons

Buttons created in Photoshop however any image editing program
can be used to make your own buttons.

Custom Menu for Blogger

Today I have created a custom menu for my blog, the red buttons at the top of the page.
Colors could maybe be a little better. However I, will change them soon as I do the tutorial.
It seems to work ok; therefore I will start a tutorial in parts, because there are quite a few steps in it.

Photo to a drawing

Horizontal Lines

Horizontal rule, is the tag given to them by W3C (World Wide Web Consortium) the body which governs web standards. They are simple to use however once again be careful using them due to cross browser compatibility or should I say incompatibility. Another alternative again is to do it with a graphic.

The graphic used here can be copied and pasted down the page in as many places as you require it. Question is could you copy my one and paste it? The answer is sadly no, not due to any copyright law etc, it is that mine has had its matte color set to blend in with my background.

Therefore on a black background it would have a white border as below.

In that case you would need this one, which now does not look good.

With this being the proper result you had wished for.

Blog SEO Myth or reality?

Search Engine Optimization:

There are many blogs and websites that will offer you what they call sound information on search engine optimization. As far as I can see, there is no quick formula. It is a very long and frustrating process that never seems to end.

---

One comment I will offer though is it seems to be easier with a blog than a website. As a web designer I have created many websites, only to find all advice of SEO, although thorough does not work. Many sites will offer to do it all for you. However, they walk a very thin line between getting your site to number one in the search engines and having it banned.

---

Weaved into many pages is key words that are mentioned hundreds if not thousands of times on a single page. This is done in many cases by making the text the same colour as the background. This, furthermore, if detected by Google is classed as keyword stuffing or spamming and will have you removed from the search engine, if lucky you may be able to resubmit the site or page again after a period of suspension.

---

Links are written about in many articles, mentioned are both in-links and out-links. All of this sounds nice, if achievable though in many cases apart from spamming people begging them for a link exchange it is better to write worthwhile content and hope people pick up on your article and link to it.
Submitting your blog to search engines may work, once they are eventually listed, some search engines are better than others.

---

Google is quite quick to list blogs, especially if they are done with their free service Blogger. Google though is slower in listing most websites, with a month or two if not longer. Generally having a site made with the open source content management system Joomla will list quickly and will only start to slip down the search engine listing as you implement different SEO advice, modules and components.
Yahoo is ridiculously slow in listing anything, web sites taking anywhere from 6 weeks to 3 months.

---

Of the two Google would be the better to be listed on, some advice will say once you are listed on Google, Yahoo will also list you. I have not seen this in any of my dealings.
BlogCatalog, takes approximately 4 days to approve your blog, and if it is not approved they will give you a reason. In many cases, this may be a new blog, and they will say the blog does not yet have enough content. Once approved by BlogCatalog, Google seems quick to list posts in its search queries.
Technorati promotes themselves as the number one place to have your blog listed the crem de la crem of blog listings, so they would have you believe. Recently, they seem to be more like the painstaking experience you get with Yahoo.

---

In concluding this article the only sound advice I can give is be true to yourself and your readers. Take the time initially write worthwhile content, like said the  baseball movie field of dreams ‘if you build it, they will come’ in the movie it is in reference to a baseball field, in blogging though I would say it applies to the content not the blog. Build on your quality of content, almost anyone can create a blog.
Earn your in-links by content not cheating people or buying them.
With Blogging remember readers first, and then come the results!

Ink Drop

The ink drop was just a test to see if it could be done in Blogger.
This was done in Flash however it could almost certainly be done as an animated gif.
Might be a good subject for a video tutorial.

Border: Video Tutorial

This tutorial shows how to place the border in HTML and CSS,
shown with Notepad++ a free program and shows effects in browser.
The tutorial then shows which part of the code to copy and paste into Blogger.
I hope you find it useful.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta placerat nisl, non iaculis arcu semper quis. Morbi quis nunc turpis. Vivamus egestas blandit felis eu interdum. Ut porttitor commodo ligula sit amet feugiat. Nam at nisi dolor, vitae egestas nulla. Phasellus vel erat tellus, et vestibulum est. Cras dapibus facilisis lacus faucibus pretium. Integer facilisis fermentum lorem id

Creating Tooltip Popups in Blogger: Part 2

Download text file here

Important note:
Use this script in Edit HTML only.
If you use it in the blog Compose mode Blogger adds some code.
The last part of the video will show you what happens if you do.

Creating Tooltip Popups in Blogger: Part 1

Sometimes it may be nice to have a popup Tooltip. These are common in Javascript, this is done however without using any Javascript.
The next couple of posts will show you though, how to create them using CSSCascading Style Sheet only.
Note the tooltips shown here are for display purposes only, none of them contain ads.

Drop Capitals in Blogger

aving a cursive text on your page, could look very nice.
The problem however, is that although you may be able to
set the style sheet to show it, the text may not appear the
same on all browsers. This lack of consistency across browsers
is a problem web designer’s deal with regularly.

ntil this problem is solved the best solution for consistent
cursive fonts, is to use an image as I have done here.
Although it may be time consuming, it may be just what your blog
needs to give it that special touch.
A dropped capital letter works in well, say with a poetry blog.

ollowing on from this problem. Blogger spaces the text that
follows away from the image. This is done by the default
style settings. The image padding is set to 1em, in order
for our text to look nice we need to reduce this.
This paragraphy I have left at it's default. As you can see
the paragraph does not look as nice as the previous two.

oving the text closer is achieved by editing the images html settings.
This is the default code for the letter ‘m’.
style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;
Em's can have a value, such as 0.1em, and even a negative value such as -0,2em.
I hope you may find this information useful!

Content edit

You can edit this post!

Top Five Blogs On The Web

1. one
2. two
3. http://ardansblogtalk.blogspot.com/

Changes will not remain when page is refreshed!

Placing a table inside a Blogger post: Video Tutorial

Notes in previous posts on this blog.

Test post used for video tutorial

My Fitness Journal
Monday	Walked 10 kilometers.
Tuesday	Paddled 20 laps of the pool.
Wednesday

Adding a table to a Blogger post

My Fitness Journal
Monday	RanWalked 10 kilometers.
Tuesday	SwamPaddled 20 laps of the pool.
Wednesday

This is the code:

<table>
<thead>
<tr> 
<th colspan="2">My Fitness Journal</th>
</tr>
</thead>  
<tbody>
<tr> 
<td>Monday </td> <td><del>Ran</del><ins>Walked</ins> 10 kilometers.</td> 
</tr>
<tr> 
<td>Tuesday</td> <td><del>Swam</del><ins>Paddled</ins> 20 laps of the pool.</td> 
</tr>
<tr> 
<td>This is where the image date was pasted 
</td> 
</tr>
</tbody>
 </table>
<style>
td
{
padding:1em;
border: 1px solid blue;
}
table
{
border:2px solid red;
}
</style>

Placing Text Near Image: Video Tutorial

Notes:
The first thing needed is to place the text inside an element,
in this case I placed it within a paragraph tag <p>
and gave the p an id, in this case 'move'.

The name here can be almost anything, just remember it, if code is longer.
The p tag needs to be closed and must encompass all the text you wish to move.

The positioning is then done within the style tags with CSS,
explained in an earlier tutorial on this blog.
As seen in the video positioning can be a bit of a hit or miss
and you may require changing it a couple of times.

Problems to watch out for:
In changing the paragraphs position, any further paragraphs will then appear out of place.
Work around this by giving paragraphs a class rather than an id.
Or place all paragraphs within a div tag.

The result of the tutorial is below.

#move
{
position:relative;
top:200px;
left:-60px;
}

Picture of a princess.
This is the text we wish to move closer to the image.