Friday, October 31, 2008

Wrap Images by TEXT can Snatch the User Attention, Catch the Eye Instantly and Prompt user to Read whole article


Images are the main part of any web site that is grabbing user attention instantly also it’s the part which indicates the consistency of a page. In blogger platform I noticed it is very powerful if we use image with warped text as a main picture. Warped text can add extra vivid and getting user attention instantly. In my site almost I preferred to put images at left side and warp image’s right and bottom structure. I think this is the best structure for placing an image in a web page and most web sites are usually using this pattern for place images.

I have hosted all my images at my “photobucket” account and linking them from here. Warping text around an image is a quite easy task.

Adjusting Blogger Settings for Warping Images:

First we need to adjust blogger setting for getting capability of warping images with text.
  • Go to Blogger Account and then click on the settings tab.
  • Within the setting click Formatting tab and under it check weather” Enable float alignment” Is set as yes or no. If it is no then change it to yes and apply the settings and save.


After adjusting the blogger settings we need to host image/s at an image hosting site first. As I mentioned earlier I have hosted all my site images at photobucket.com. After uploading get the direct link for it.
(Ex: http://photobucket/......../image.jpg)

[It’s not essential to host images at photobucket, I refer photobucket for explanation purpose only]

Place the Image URL in below code and place it in the blog post where you need to place an image in the post.
<img style="margin: 0px 10px 10px 0px; float: left;" src="Image URL" alt="" border="1" />

Above code will align your images for left side and warp text like in my site images. Instead of giving the code examples for every occasion I'll explain the part of this code so you'll be able to adjust the placement of your images without refereeing my site occasionally.

Margin: 0px 10px 10px 0px = This is the part of code that is define the margin area around the image. In sequence it is define the UPPER RIGHT BOTTEM LEFFT margins of the image. In this code I have define Right and bottom image margins are as 10px and 10px.

Float: left = this is referring for adjusting the place of images. We can define either left or right for images, as well as center is also can use for float value.

src = this is the part which is link to our image, in here we should put the direct link for image

alt = We can leave this as a blank also. But search engines are normally read this for define about the picture and site content when indexing the page. Place a small text about picture here.

border = Normally when define a border for an image it shows as black color.

Please comment if this is useful and any doubts questions you have regarding this.

Tuesday, October 14, 2008

Two Good Alternatives to Banned Digg Users CONSIDERING Happy Driven Traffic and Beauty of a Site

banned digg alternatives
Before begin with this I have to tell you a bad news just I have get knowing before several days. My site was get banned on digg. First I thought to have an explanation from digg stuff but after I have Google about banned sites on digg thought just give up my idea and fully move to another performing site same like digg. Even digg staff not gave me a prior warning or anything. Just they have banned my site only. Seems it’s just easy to getting banned form digg than cling with it.

But I’m not worried and got surprise after seeing many major sites are already got banned before me. John Chow one of my most preferred site already got banned and Digital Point very famous forum had faced same incident.

Here is the reply Mr.John gets from digg staff for his appeal.

When submitted stories are consistently reported as spam and users complain via our feedback email about submission spam, we ban the domain. The domain will not be unbanned. The domain would consistently get reported as spam otherwise. Please review our FAQ (digg.com/faq) for more information.
–digg support

You can see a full list of banned digg sites by just search on Google. Seems it is widely spread and very common.

Let’s disregard all bad things what I had to face and will begin with our long step for fortune. Reddit and yahoo Buzz sites which I was found good solution for banned site authors at digg. Hope these are performing well like digg. Perhaps you will be happy after seen this articles just I came to know about this huge list yesterday. All the digg style sites are listed here. It seems now I don’t need to worry eh :)


Problems I had faced after banned.

When I heard that my site was getting banned on digg mainly I had faced two main problems. One is the structure of my site and second one is about the traffic. Digg is a one of major player for free site traffic. While I creating this theme for the site I have concentrate and built it as suitable for digg button and use it for adding extra beauty to my site. At first heard about banned I got shook and thought my whole efforts are submerge.


The way I face for these crises.

First I thought to rebuilt my theme and then though to find out any alternative for the case. Mainly I had focused about my site beauty. Literally I targeted on digg traffic so I have built my site far most compatible look for digg button and I have place it left to the every post at the place now “yahoo buzz me” button situated.


Reddit a major digg style site has capability of building traffic like digg. There are three main Redd style buttons can place on any site as preferred and considering about beauty of a site. Procedure is same like digg so don’t need to waste time on searching about optimizations for getting more redds to stories and being front page of Reddit home.

Basically reddit button can add at six major places “placing digg button on six major places at blogger site” (May you need to read my prior article about placing digg button on a blog). The process is same like placing the digg button in a site but the code for reddit is should be different.

Three major reddit buttons and codes.

<div style='float:left; margin-right:10px;'>
<script type="text/javascript" src="http://www.reddit.com/button.js?t=1"></script>
</div>

<div style='float:left; margin-right:10px;'>
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
</div>

<div style='float:left; margin-right:10px;'>
<script type="text/javascript" src="http://www.reddit.com/button.js?t=3"></script>
</div>


Photobucket Alternatively stumble upon is also best for getting traffic but as my experience it is taking some period of time for best performance.


Yahoo buzz another service that is very own to yahoo team and I have solved problem that I had with site structure. Now it is standing on my site left to the every post topic.

Yahoo buzz me button code:

<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><data:post.url/></script>

There are many sizes with this button, http://buzz.yahoo.com/buttons grab the full list of button codes for all other sizes.

Placing social media buttons already covered with “Add Digg Button at Six major places in blogger” you can replace Reddit or buzz me button codes with digg button code and place them upon your site as you most preferred.

digg code

Replace Reddit or buzz me button code with digg code and please followed the instructions I had discussed at my prior post
.

Thursday, October 2, 2008

Add Digg Button at Six major places in blogger

Add digg button blogger blogspot.com blog
Adding Digg button to BlogSpot sites is already discussed in many blogger help sites and forums. But still I’m thinking there is something left to discuss to me regarding the above topic. Actually many bogger helpers discussed only placing the digg button around the page body (content) , Still I couldn’t find a source for placing digg button ambient the post title. So I though to write full detailed “Adding digg button to a blogger site” articles besides just writing only placing digg button around the post title. As I figure out the most impressive place for adding digg button is near the post title. Because it is more visible to site visitors if it there, thus there is more chance to getting diggs for your stories.

Before begin with this fully covered article you should have registered with digg.com other than you can’t digg your articles first. :)

Through out this post I’ll discuss about placing Digg button in 6 major places with small alternatives of its main code snippet. Actually this is not a hard process for implement. We are doing only small alternative for the code as said prior sentence and placing the big code in 3 different places in template file until we encounter the most suitable and preferred place to display a digg button in our site.

For going through this post I should have chosen any good colored and vivid digg button, so I have decided to choose Big Yellow color digg button for purpose of demonstrate the guidance I have discussed here.

There are many reasons for choosing Big Yellow color digg button. Mainly it is the most popular digg button among the digg community and many SEO experts and traffic builders are highly recommend this button for up your site posts to front page of digg site.

My opinion is about our Big yellow friend is, it’s adding extra beauty to our sites and other thing is this would be help for getting more diggs other than using unpopular digg structure. Because peoples are who used digg now more desire to digg through this button and it is powerful enough for catching human’s eyes instantly.

Placing digg button is (Yellow button) simply. It’s just a java snippet that can place on a site. Let’s take a look at brief details about placing digg button on a site and about changes we need to do to the code for make it compatible to use on blogger platform. As we know placing Java codes between the posts in blogger can’t implement the code task at all. So instead of placing code in blogger post we are going to edit xml file of your template.


Placing Digg Button left to the post title:

Digg button left post title

For place digg button left to post title is more powerful than placing it any other area. So I’m starting with revealing details about placing digg in that area.

1) First go to your blogger account and then click on “Layout tab”

layout tab

2) And then click on “Edit HTML” tab in new page.

Edit HTML tab

Now we are on the Template editing page and we need to backup our exciting template for avoiding any mistakes that can happen in template editing, this step is crucial, whenever you editing your template it’s good to remind for backup it first.

Edit template blogger site

3) Then check the Expand Widget Templates box as I showed in the above picture and find the code :

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

4) And place the digg code right upper of the code we searched.

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

5) After placing it should looked as below

digg code placed

Here is the brief description about the main parts of the code, after know the exact details you can modified the code and place it more places than I discussed here.

2 main part

The part of “float:left” is implementing the direction of the button, either right or left is defined by this. And the part of “margin-right:10px;” define the size of button margin. In here I have set it to 10, if you prefer you can change it for more desired value.


Placing Digg Button right to the post title:

Digg button Right to post title

Now this should be very easy if you read my prior explanation and understood it carefully. For place the digg button at the right of the post title is can implement by changing the “float:left” to “float:right” . This will define the direction of the button to right side of the topic.

Also at this point you should define the margin of the button and the direction of margin. Change the “margin-right:10px” to “margin-left:10px” and your are done.

Now first part of your code should something like this.
“ <div style='float:right; margin-left:10px;'> "


Placing Digg Button left below between post title and content:

I have seen many blogger help articles already discussed about this and covered full details but if I’m not writing even small part about the process of implementing this it would be deficiency.

First you need to find the code “<div class='post-body'> “ and place the code

“ <div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div> “

right upper to it.

Now it should looks like this.

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>
<div class='post-body'>


Placing Digg Button right below between post title and content:

Now might I don’t want to discussed about this here. But I’ll place the code for peoples who are very beginners for blogger and coding.

This can implement by change the first line of above coding and place the full code at same position without change anything other than firs line.

Find the “ <div class='post-body'> “ ( might you have already find this ) and place the code

“ <div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div> “

right upper of it (as above explanation).


Placing Digg Button right end of the content:

May be you need to place digg button end of your ever post this is also very succeed place for getting more diggs because every person who read your articles throughout may seen your big yellow button and can digg your story if it more interesting.

First you need to find the code

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

And place our popular digg code right below of it. After you place it should looked something like below.

<div style='clear: both;'/>
</div>
<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>


Placing Digg Button left end of the content:

Now this should be so very easy and if you read and understood every point of my articles. There’s nothing to discussed, so here is the code for that.

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

(Search the above code and place the below digg script after it)

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

Still I haven’t seen this any article that goes beneath about placing digg icon on blogger page and far this is the easiest and for place a digg button on your BlogSpot site. Even though only placing digg button not enough as there are many popular social sites came around. I though to discussed about all other social bookmarking site trough another day form another post. Until that comment your thoughts and may better tricks that you know than I have discussed here. Happy commenting ...
.