Easy HTML Tricks for Blogging: trick

Showing posts with label trick. Show all posts

Spoiler with CSS and Javascript

here some tip, that i've been trying this trick form this page

Choose the web language that you have learned : This is the choice

XHTML
CSS
PHP
Back To

the css and javascript here :

<style>
#layer1 { visibility : visible; position : relative; } #layer2 { visibility : hidden; position : absolute; }
a.info { position:relative; z-index:24; background-color:#ddd; color:#000; text-decoration:none } a.info:hover {z-index:25; background-color:#ff0} a.info span{display: none} a.info:hover span { display:block; position:absolute; top:2em; left:2em; width:10em; border:1px solid #0cf; background-color:#555; color:#fff; } </style>
<script> function afficher() { document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative'; document.getElementById('layer3').style.visibility='hidden';}function fermer() { document.getElementById('layer2').style.visibility ='hidden'; document.getElementById('layer2').style.position ='absolute'; document.getElementById('layer3').style.visibility='visible'; } </script>

Tricky Domain Names Search For Better Keyword

Many business owners and Internet entrepreneurs rush in by registering a domain without too much thinking or doing enough research about the domain name they bought. While we should note that a domain name isn’t the most important factor in the success of your website and how high it will rank on Google, it is important enough that you should look into it and optimize the name to suit your business as best as possible.

We sometimes difficult to find a good name for seo, so that we can use as our domain name, be it bebayar or free, from the little research I have done, most of us are too eager to use the dash (-) as an alternative of domain we want. For example thegreatest.com already been registered, then usually we will try to find the-greatest.com to try our luck to register the domain, with the intention of "force" what we want.
And, usually we forget that it is more acceptable to use points rather than using a dash (-) so in the example above is the.greatest.com, I guess it would be easier to get, try it! good luck and prayer. So, actually it is more frequently encountered when we look for a domain that is free, such as blogspot.com.
And one more fact that the dot in everyday conversations easier to say. And not the dash could have another meaning or if spoken often said to be "minus" LOL.

One thing more, Use this powerful tool to narrow down the important keywords for you business. You can use these keywords to come up with an interesting domain name that is pretty straightforward. Maybe somethings like “BestHomeInsuranceUK.com” if your service is region specific? Sure it may sound too common at first, but with enough brainstorming you can get something rather unique that is based on your keywords.

Using Javascript Encryption and Decryption to Hide Secret Message

How to make blogger post private?
How to encrypt blogger post?
How to create blog post with password?

First, please proceed to http://www.vincentcheung.ca/jsencryption/instructions.html.

Go to Dashboard > Design > Edit HTML.

Then add the JavaScript decryption code after the <head> tag in the HTML code of your blog. Copy and paste the following code:

Then proceed to http://www.vincentcheung.ca/jsencryption/.

You'll see this page.

form empty

Then type for secret key at the "Key" area and the secret message at the "Plain Text" area.

filled form

After doing so, hit the Encrypt button under the "Plain Text" area.

Then scroll down a little and you'll see the "HTML Code" area. Highlight, copy and paste the HTML code into your POST EDITOR.

And that's it!

Here's the result of the example shown. The secret key is "password". Go and click on it.

Show encrypted text

Split blogger header into two columns

We can add gadget next to header by splitting header section into two columns on blogger.It is easy to split blogger header into 2 columns.By dividing gadgets into 2 columns, We can add any blogger gadget next to blogger header.

Follow below steps to split blogger header into 2 columns

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit HTML

step 4 : *Do customization as below*
* search below code*
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your title name (Header)'
type='Header'>
</b:section>

*add below code just after above code*

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Again search *]]></b:skin> , *and add below code just above* ]]></b:skin>*

#header, body#layout #header {width:45%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:40%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

And again add below code just above *]]> </b:template-skin*>

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

step 5 : click on save template.

Now go to blogger and click on layout , now you can see two column
header section on your blogger layout.

well ... in some cases... you must add the widget manually.. because some error occured when you save the layout..

Remove Blogger Nav bar Completely

Blogger has got a default Navigation Bar. This navigation bar is hidden in most of the third party templates. Instead of hiding the nav bar using CSS, we can completely remove it.
To do that
1. Login to your Blogger account and navigate to Layout > Edit HTML
2. In the Template Code find <body> and just above that add the following Code.

<!--<body>-->

3. Now Save the Template and you will see a confirmation about deleting the Navbar Widget. Confirm the Deletion by Clicking on the Delete Widgets Button

4.Now your Nav bar is completely removed from your Blog.

Advantages of this Method

You will be completely removing the nav bar and not hiding it. The nav bar iframe codes wont be present in your blog’s HTML source and so the blog would be more Search Engine Friendly and your blog will have a more valid XHTML code..

Disadvantages of this Method

You will no longer see the Quick Edit pencil

or wrench links

on your blog even if you are logged in. This is not a a big deal. You can Edit the Widgets from the Layout > Page Elements Page. You wont see the Comment Delete icon near your comments even if you are logged in.But you can definitely manage the comments from the Blogger Comment Tab.It would also be a good idea to completely remove the Quick Edit and Wrench Links from Blogger

How to Get back the Nav Bar?

If you followed this method to remove the nav bar and now want to get it back, then delete the extra code that you added. i.e remove the code from step 2, that you added into your template and Save the Template.

Official Sharing Buttons on Blogger

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).
You are still reading. So i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.
Then don’t wait. Just follow these simple steps

Login to Your Blogger Dashboard
Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option
You can Drag and Drop the Share buttons and place it where you want.
Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates” Option and locate
```
<p class='post-footer-line post-footer-line-3'>
```
Or if that is not there then find
```
<div class='post-footer-line post-footer-line-3'>
```
Or if that is not there then find
```
<data:post.body/>
```
and place the following code just below any of these lines[whichever is present in your template].
```
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
```
and Save your template.

Optional Tweaks

Show the Sharing Buttons on Post pages only - Find the Following Code in your template

<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>

and wrap it within conditional tags as

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
</b:if>

Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template
```
.sb-blog{display:none}
```
sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or buzz buttons, then it might look a little bad as these have rounded edges,
How to add the text “Share this:” before the Share Buttons? – This was one of the questions asked in the comments.So here is how to do it.Go to Design > Edit HTML and “Expand Widget Templates”.Look for
```
<b:if cond='data:post.sharePostUrl'>
```
Just below that add
```
<table border='0'><tr><td><b>Share this : </b></td><td>
```
Now Look for the first occurrence of
```
</b:if>
```
that comes after that. Just above that add
```
</td></tr></table>
```

Display Short URLs for Blogger Posts with Bit.ly

Having a Shorter Version of your Blog Post’s URL is much useful especially when sharing links with others. For example Take a look at this Link http://bit.ly/aJMJNI . If you visit that link, you will end up right back here. This URL shortening was done with the Help of the Bit.ly API. Bit.ly is one of the most reliable URL shortening services on the Web. Wordpress has got its own URL shortener namely WP.me. If you are interested in providing Short Sharable URLs of your Blogger Posts to your readers, then read on. Demo is present on the post page.

Template Tweaking to Add the Short URLs

Login to your Blogger Dashboard and navigate to Design > Edit HTML
Click on the Check Box which says “Expand Widget Templates.

Locate

</head>

and add the following JavaScript Snippet just above that

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>

Now Locate

<p class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<div class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<data:post.body/>

and place the following code just below any of these lines[whichever is present in your template].

<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
</script>

Save the changes and now you should See a Sharable Short URL below each of your posts .If you want to tweak further, then read on.

Optional Tweaks

1.Styling the Share Link
Locate the following line in your template

]]></b:skin>

and just above that line add

#bp_shorturl {
color:#666;
font-size:11px
}
#bp_shorturl input {
color:#999;
border:inset 1px #CDCDCD;
padding:1px 5px;
}

and save.
2. Display the Short Link on Post Pages Only
If you want to restrict the Short URLs to your post pages, then wrap the codes mentioned in Steps 1 and 4 within Conditional tags like :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>
</b:if>

and

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
</script>
</b:if>

3. If you have your own Bit.Ly Login and API key, then you can replace them in the code of Step 1(tweettrackjs and R_7e9987b2fd13d7e4e881f9cbb168f523). Its free to signup and it is advised to use your own login and API because too many API calls on the same login can create an undefined error

Replace Page List Menu Gadget with a Link List

The Default Blogger Templates(which can be customized using the Designer) are all made to use the “Blog Pages” as your Blog’s Top Navigation Menu. This is done using a Page List Gadget. But , you might want to setup your own menu with Custom Links. In that case, you can replace the Page List Gadget with a Link List. This tutorial guides you on how you can replace the Page List with a Link List without loosing the Menu Styling(and the highlighted active links)..

How do i add non-page links to my Menu

This is a frequently asked question on the Blogger Help Forum. The solution is simple, if you want to display anything other than page links on your Menu, then you will have to use a Link List Gadget instead of using a Page List. If you are using one of the Default Blogger Templates, and if you have added a Page List Gadget below the header, you will be using "Page" links as the Navigation Menu. To change this to a Link list, follow these simple steps.
1. Login to your Blogger Account and navigate to the Design > Edit HTML tab. Do NOT check the “Expand Widget Templates” Option.
2. Now look for(Ctrl + F)
<b:widget id='PageList
and you will find some line like

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>

3. Replace this line by the following Code

<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
   <ul>
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <li class='selected'>
     <a expr:href='data:blog.homepageUrl'>Home</a>
     </li>
     <b:else/>
     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
     </b:if>
     <b:loop values='data:links' var='link'>
       <b:if cond='data:blog.url == data:link.target'>
       <li class='selected'>
       <a expr:href='data:link.target'><data:link.name/></a>
       </li>
       <b:else/>
       <li><a expr:href='data:link.target'><data:link.name/></a>
       </li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Save the Template.
5. Now you can manually add links to the Menu by using the Quick Edit Wrench Button

.

The Styling of the Gadget will be preserved and the Active links will be highlighted.

Render Blogger Blog in IE using Google Chrome Frame

How can i Render my Blogger Blog using the Chrome Frame?

1. Log in to your Blogger account
2. Go to Design > Edit HTML tab.
3. Look for <head> and immediately below it paste the following line of code.

<meta http-equiv='X-UA-Compatible' content='chrome=1'/>

4. Save the Template
Now if anyone visits your Blog using Internet Explorer and if he/she has already installed the Google Chrome Frame on his/her PC, then your Blog will be rendered using GCF

Advantages of adding this one line code

1. Better and Faster Rendering (if GCF is installed on the visitors PC)
2. Normal rendering (if GCF is not installed) – No the user won’t be prompted to install the Chrome Frame(unless you add some extra scripts to do that).

How can i prompt the visitor to install the Chrome Frame?

If you want, you can prompt IE users( who have not installed GCF) to install GCF. This is optional . To prompt users, Follow these steps.
1. Once again Login to your Blogger Account
2. Go to Design > Edit HTML
3. Look for </head> and just above that add the following code snippet

<!--[if IE]>
<style type='text/css'>

      .chromeFrameOverlayContent{top:10px;margin-top:10px;}
   /* 
    CSS rules to use for styling the overlay:
      .chromeFrameOverlayContent iframe
      .chromeFrameOverlayCloseBar
      .chromeFrameOverlayUnderlay
   */
}
</style>
<script>
//<![CDATA[
     // The conditional statement ensures that this code will only execute in IE,
     // Therefore we can use the IE-specific attachEvent without worry
     window.attachEvent("onload", function() {
       CFInstall.check({
         mode: "overlay"
       });
     });
//]]>
</script>
<![endif]-->

4. Save the Template. Now the IE user will be prompted to install the Chrome Frame(if he hasn’t got it already). This prompt will appear only once(stored in cookie).

Add Numbered Page Navigation Widget To Blogger Blog

One of the important features of a good blog or site is that it is very easy for the blog visitors to navigate throughout the site. A site which is structured in such a way that the visitors have to take efforts to move from one page to another is seen as a poorly designed site.

Having proper navigation is important as it also helps to increase the page views for your blog. Blogger users are aware of the Newer Posts and Older Posts links at the bottom of the blog.

It is pretty irritating at times for visitors when they want to check posts that are present on the 5th or 11th page. They have to click on the Older page link 5 or 11 times. It is obvious that in such a situation many visitors wont even try to go that far and may visit another blog. This results in less Page Views for your blog. Here is what Lauren of Nymfont has to say about the default links.

Sweet, I think I am going to try to implement numbered pagniation in my blog right now then! "Older" "home" and "newer" links are such a "Blogger-blog" dead giveaway!

That's why Numbered Page Navigation widget is important for Blogger/Blogspot blogs. This makes life easier for the blog visitors and at time for the blog owners as well. There are many wonderful bloggers who have created Numbered Page Navigation widgets for blogger blog. But I found the one created by Anshul Dudeja the best. I am using the widget created by him on this blog and its wonderful.

He has posted a simple and easy tutorial to add a Numbered Page Navigation to your Blogger blog. It has two parts and proper instructions have been given so that you wont have any problem while adding it to your blog. Check the Numbered Page Navigation tutorial by Anshul.

If you are facing any problems, then you can use the comments section and I will try to solve your problem. I hope that you will love the Numbered Pagination widget.

Building Traffic with Auction Sites Strategies

The huge size of the market

EBay occupies a virtual space, thus it is not fettered by space constrictions. Innumerable number of sellers and customers interact within that unlimited virtual space. So the scope of the market is limitless. If you put your product up for sale on EBay, you will attract more customers than you ever can in a traditional business.

eBay can generate customers and sellers

since the number of buyers and sellers who operate on EBay is infinite, the possibilities which such a market has to offer attracts more and more bidders, which in turn acts as an incentive for more and more sellers. In the next couple of years, the estimated membership of EBay will be phenomenal.

Geographic distance

Geographic distance is rendered insignificant each business has a market, and that market is located in a geographical territory. In order to expand the territorial limits of that market the business has to invest money. With EBay a seller can sell his good to a person situated in another continent, by just clicking his mouse.

Time limits do not apply

Since customers and sellers are often situated in different time zones, EBay auctions operate round the clock. This feature also increase the customer-ship of a product,

Buyers are ecstatic

Bidding at an auction site is not really much different from gambling. Often bidders get carried away and thus the product is ultimately sold for a price much higher than it would fetch at an ordinary over the counter deal.

eBay auction is not capital intensive

Often people complain that the cost of operating in eBay is very dear. But this is only true if you are trying to sell the wrong products. Compared to the kind of customer base your products will get at eBay, the investment is really dirt cheap.

Benefits of online auction

Online auctions provide many benefits to both the business firms and the potential clientele. Certain goods and collectors items are available for cheaper at online auctions.

Auction ID

Your auction ID should match your web address this is important. Then every transaction you make, will be marked by your ID. Before transportation, remember to provide your contact details, a note of thanks and papers required, etc.

About me

Most auction sites have an About ME section where you can provide relevant information about yourself and links to your site.

Follow the rules

Auction sites have strictures regarding what information or links you can provide and what you cannot. Remember to abide by those.

Make allies

Strike up a friendship with other sellers whose products might complement yours, provide them with discounts and offers.

Advertisements

Your auction details should contain ample keywords relevant to the topic. In that way, a search will provide links to your site. Advertise your products well.

Traffic

The more customer traffic your site attracts the more profit you may earn in the long run by involving them in various deals and making sales. You can even earn money (about 5 cents) for every person who visits the auction.

Keywords optimization

Usage of keywords is essential, and the keywords used to search for your product should be used in your title and your subtitles so that more customers view your page.

Cross promotion

Cross promotion of products means linking the traffic of one product with another to increase page visitors and thus potential customers. Buyers on EBay are always on the look out for more and more products to buy.

Attractive catch phrases

Sprinkle your advertisement and content with catchphrases like free, amazing, extraordinary, superb, proven, certified etc copywriting skills come in handy.

Interactive forums

At various forums you can use the link to your page as a signature.

Digg.com

If the content of what you submit is enjoyable then it will be more popular. This is a last resort if your auction is a joke.

Bidd.buds

It is a community on EBay which allows you to display a picture of your product.

Articles

Articles containing your product details and links to your page may prove useful in attracting visitors if distributed properly.

Reports

You can include links to your eBay store in your report on eBay.

Tell a Friend Script

It is a basic programming script which enables a visitor to your page to forward the media on your page to his acquaintances.

Attachment forwarding

The person who wants to send the media to a friend can do so by entering his own and the recipient’s email address and then forwarding the media as an attachment. The recipient won’t think it to be spam.

The strategy of Tell a friend script

It is a convenient marketing strategy, as chances of your mail being blocked are slim.

Recurring forwards

When the recipient views the media through the email, he is also introduced to the company’s profile, and a description of its goods and services. He in turn can forward it to someone else.

Spreading the word

In this way more and more people will get to know about your company and your product and also pass on the information and links to your store to others. The customer base will increase rapidly.

No major skills required

In order to get this script you do not need any major skills in programming at all.

Just a click

Many sites on the internet offer tell a friend scripts and you just need to click on them to know all you need about conditions which might apply to the usage of this script and other details.

It’s affordable!

Tell a friend script is a cheap and easy method to ensure that the traffic to your store increases almost magically. Add to this a little out of the box thinking and your product will be sure to attract a lot of interest, thus your profit will increase too.

Steady results

However the increase may not be immediate, so you will have to be patient, it might take some time for your media to achieve the expected circulation, which it will, sooner or later.

Adding javascript to Blogger posts

First off: ~~Blogger does not let you post <script> tags to your blog.~~ (Edit: It does, at least in non-beta, though it warns you about doing so, probably assuming it wasn't done intentionally.) Which is annoying, but perhaps a design choice to prevent code from executing outside of the context of the blog when syndicated through the blog's Atom feed. Or just plain imposing "this should not be in a blog" opinions on bloggers. Whichever.

I'm a bit surprised, though, as we can still use onclick handlers and the like, which I have put to good use once in a while in previous articles to make small in-page utilities and more helpful self-configurable tutorials. Anyway, we can fortunately put javascript code in our blog templates, so for most purposes there are ways of getting around this small annoyance.

A while ago, I was experimenting with posting plain javascript code in Blogger posts with a template that would let external pages include the result as script tags. Not a unique thought, apparently, as Stephane Hamel has institutionalized the practice. And quite cleverly too, using the year part of the post date (minus 2000) for script major version, month number for minors, and page title for script name. Version 1.1 of the Hello World example, thus maps to http://code67.blogspot.com/2001/01/hello-world.html.

The scheme doesn't allow for .0 minors, though; I would have gone for subtracting one from the month number had I devised the system. (Maybe Stephane likes RCS revision numbers, starting at 1.1. ;-)

If you want to do a less elaborate version for inlining code in a blog post, and just want to put the code in the post you are currently writing, rather than pulling it in from an external URL, I would suggest another solution though. Put this block in your blog template:

<script type="text/javascript">
var c = document.getElementsByTagName('code'), s, i;
var junk = /^\s*\46lt;\133\133CDATA\133|]]\46gt;\s*$/g;
for( i=0; i<c.length; i++ )
{
  s = c[i].getAttribute('style') || '';
  if( s.match( /display[\s:]+none/i ) )
    eval( c[i].innerHTML.replace( junk, '' ) );
}
</script>

(ideally in some function run when the onload event has fired) and it will let you use a <code style="display:none"> <[[CDATA[ your javascript code here ]]></code> sections as if they were really <script type="text/javascrtipt"> //<[[CDATA[ your javascript code here //]]></script> tags. They will of course not show up visibly in your feed, nor do any harm there, either.

Make Your Blog Compatible Blogger Blog With Mobile Phones

If you are using a Blogger Layout Template,this tutorial will helpful for you.But if your template is a blogger template,created by using Blogger Template Designer, usually this feature has already added to your template.This will really helpful to increase the number of mobile visitors of your blog.

Now follow the simple steps given below to ready your blogger blog for mobile phones.

1.Login to your blogger Dashboard--> Design- -> Edit HTML

2.Scroll down to where you see below code:

<b:include data='blog' name='all-head-content'/>

3.Now copy below code and paste it just before the above line.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

4.Now save your template and you are done.