Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

seo Blogger How 2 - Structure of a Blogger Template 2013

Seo Master present to you: Blogger How is Blogger Tutorial Series from How We Blog. In this series, I will guide you step by step building your first blog with Blogger, spread it to the world, and then you can earn money from it.

 Part 2 of this series:

Blogger How 2 - Structure of a Blogger Template


In this article, you will learn how to recognize each section of a blogger template. You will need that when edit html and arrange your widget.

Blogger Template and Its Components

Home page structure:

Look at picture below, this is basic layout for a 2 columns blogger template, every section is marked by a number.
A Blogger template layout
Read more »2013, By: Seo Master

seo Script effect snow for blogger 2013

Seo Master present to you:
Add descriptions to Labels
This is an improved version from previous Code1k.com code, Script effect snow for blogger. This version of snow will fall and left in a period when falling to the bottom of the web page, without delay and without embedded link snowflake image file to avoid image links die. This version is more smooth effect snow will fall and feel simmer as true, on the other hand is no longer embedded image should not be afraid the links die and not depend on the coordinates of the mouse pointer.The code is very suitable to decorate website / Bloggercho Christmas.

DEMO On Blog

Log in to your Blogger account
On your Blogger Dashboard, click on the "Layout" link



This will take you to the "Page Elements" tab. Decide where you want to insert the statistics widget and click on the "Add a Gadget" link accordingly.

Scroll down the list and find "HTML/ Javascript" and click on the "+" button

This will open the "Configure HTML/ Javascript" window. In the title section, please type "Blog Statistics" or "Blog Information" or "Blog Data" or any other title as you may wish
In the content section, please copy & paste the following code:


Code: 
<script type="text/javascript">
//<![CDATA[
var BaoTuyet1k=(function(window,document){this.flakesMax=60;this.flakesMaxActive=60;this.animationInterval=40;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor='#fff';this.snowCharacter='&bull;';this.snowStick=true;this.targetElement=null;this.useMeltEffect=true;this.useTwinkleEffect=false;this.usePositionFixed=false;this.freezeOnBlur=true;this.flakeLeftOffset=0;this.flakeRightOffset=0;this.flakeWidth=5;this.flakeHeight=5;this.vMaxX=2.5;this.vMaxY=2.5;this.zIndex=100000;var s=this,storm=this,i,isIE=navigator.userAgent.match(/msie/i),isIE6=navigator.userAgent.match(/msie 6/i),isWin98=navigator.appVersion.match(/windows 98/i),isMobile=navigator.userAgent.match(/mobile/i),isBackCompatIE=(isIE&&document.compatMode==='BackCompat'),noFixed=(isMobile||isBackCompatIE||isIE6),screenX=null,screenX2=null,screenY=null,scrollY=null,vRndX=null,vRndY=null,windOffset=1,windMultiplier=2,flakeTypes=6,fixedForEverything=false,opacitySupported=(function(){try{document.createElement('div').style.opacity='0.5';}catch(e){return false;}
return true;}()),didInit=false,docFrag=document.createDocumentFragment();this.timers=[];this.flakes=[];this.disabled=false;this.active=false;this.meltFrameCount=20;this.meltFrames=[];this.events=(function(){var old=(!window.addEventListener&&window.attachEvent),slice=Array.prototype.slice,evt={add:(old?'attachEvent':'addEventListener'),remove:(old?'detachEvent':'removeEventListener')};function getArgs(oArgs){var args=slice.call(oArgs),len=args.length;if(old){args[1]='on'+args[1];if(len>3){args.pop();}}else if(len===3){args.push(false);}
return args;}
function apply(args,sType){var element=args.shift(),method=[evt[sType]];if(old){element[method](args[0],args[1]);}else{element[method].apply(element,args);}}
function addEvent(){apply(getArgs(arguments),'add');}
function removeEvent(){apply(getArgs(arguments),'remove');}
return{add:addEvent,remove:removeEvent};}());function rnd(n,min){if(isNaN(min)){min=0;}
return(Math.random()*n)+min;}
function plusMinus(n){return(parseInt(rnd(2),10)===1?n*-1:n);}
this.randomizeWind=function(){var i;vRndX=plusMinus(rnd(s.vMaxX,0.2));vRndY=rnd(s.vMaxY,0.2);if(this.flakes){for(i=0;i<this.flakes.length;i++){if(this.flakes[i].active){this.flakes[i].setVelocities();}}}};this.scrollHandler=function(){var i;scrollY=(s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));if(isNaN(scrollY)){scrollY=0;}
if(!fixedForEverything&&!s.flakeBottom&&s.flakes){for(i=s.flakes.length;i--;){if(s.flakes[i].active===0){s.flakes[i].stick();}}}};this.resizeHandler=function(){if(window.innerWidth||window.innerHeight){screenX=window.innerWidth-(!isIE?16:16)-s.flakeRightOffset;screenY=(s.flakeBottom?s.flakeBottom:window.innerHeight);}else{screenX=(document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;screenY=s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);}
screenX2=parseInt(screenX/2,10);};this.resizeHandlerAlt=function(){screenX=s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;screenY=s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;screenX2=parseInt(screenX/2,10);};this.freeze=function(){var i;if(!s.disabled){s.disabled=1;}else{return false;}
for(i=s.timers.length;i--;){clearInterval(s.timers[i]);}};this.resume=function(){if(s.disabled){s.disabled=0;}else{return false;}
s.timerInit();};this.toggleSnow=function(){if(!s.flakes.length){s.start();}else{s.active=!s.active;if(s.active){s.show();s.resume();}else{s.stop();s.freeze();}}};this.stop=function(){var i;this.freeze();for(i=this.flakes.length;i--;){this.flakes[i].o.style.display='none';}
s.events.remove(window,'scroll',s.scrollHandler);s.events.remove(window,'resize',s.resizeHandler);if(s.freezeOnBlur){if(isIE){s.events.remove(document,'focusout',s.freeze);s.events.remove(document,'focusin',s.resume);}else{s.events.remove(window,'blur',s.freeze);s.events.remove(window,'focus',s.resume);}}};this.show=function(){var i;for(i=this.flakes.length;i--;){this.flakes[i].o.style.display='block';}};this.SnowFlake=function(parent,type,x,y){var s=this,storm=parent;this.type=type;this.x=x||parseInt(rnd(screenX-20),10);this.y=(!isNaN(y)?y:-rnd(screenY)-12);this.vX=null;this.vY=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=storm.meltFrameCount;this.meltFrames=storm.meltFrames;this.meltFrame=0;this.twinkleFrame=0;this.active=1;this.fontSize=(10+(this.type/5)*10);this.o=document.createElement('div');this.o.innerHTML=storm.snowCharacter;this.o.style.color=storm.snowColor;this.o.style.position=(fixedForEverything?'fixed':'absolute');this.o.style.width=storm.flakeWidth+'px';this.o.style.height=storm.flakeHeight+'px';this.o.style.fontFamily='arial,verdana';this.o.style.overflow='hidden';this.o.style.fontWeight='normal';this.o.style.zIndex=storm.zIndex;docFrag.appendChild(this.o);this.refresh=function(){if(isNaN(s.x)||isNaN(s.y)){return false;}
s.o.style.left=s.x+'px';s.o.style.top=s.y+'px';};this.stick=function(){if(noFixed||(storm.targetElement!==document.documentElement&&storm.targetElement!==document.body)){s.o.style.top=(screenY+scrollY-storm.flakeHeight)+'px';}else if(storm.flakeBottom){s.o.style.top=storm.flakeBottom+'px';}else{s.o.style.display='none';s.o.style.top='auto';s.o.style.bottom='0px';s.o.style.position='fixed';s.o.style.display='block';}};this.vCheck=function(){if(s.vX>=0&&s.vX<0.2){s.vX=0.2;}else if(s.vX<0&&s.vX>-0.2){s.vX=-0.2;}
if(s.vY>=0&&s.vY<0.2){s.vY=0.2;}};this.move=function(){var vX=s.vX*windOffset,yDiff;s.x+=vX;s.y+=(s.vY*s.vAmp);if(s.x>=screenX||screenX-s.x<storm.flakeWidth){s.x=0;}else if(vX<0&&s.x-storm.flakeLeftOffset<-storm.flakeWidth){s.x=screenX-storm.flakeWidth-1;}
s.refresh();yDiff=screenY+scrollY-s.y;if(yDiff<storm.flakeHeight){s.active=0;if(storm.snowStick){s.stick();}else{s.recycle();}}else{if(storm.useMeltEffect&&s.active&&s.type<3&&!s.melting&&Math.random()>0.998){s.melting=true;s.melt();}
if(storm.useTwinkleEffect){if(!s.twinkleFrame){if(Math.random()>0.9){s.twinkleFrame=parseInt(Math.random()*20,10);}}else{s.twinkleFrame--;s.o.style.visibility=(s.twinkleFrame&&s.twinkleFrame%2===0?'hidden':'visible');}}}};this.animate=function(){s.move();};this.setVelocities=function(){s.vX=vRndX+rnd(storm.vMaxX*0.12,0.1);s.vY=vRndY+rnd(storm.vMaxY*0.12,0.1);};this.setOpacity=function(o,opacity){if(!opacitySupported){return false;}
o.style.opacity=opacity;};this.melt=function(){if(!storm.useMeltEffect||!s.melting){s.recycle();}else{if(s.meltFrame<s.meltFrameCount){s.meltFrame++;s.setOpacity(s.o,s.meltFrames[s.meltFrame]);s.o.style.fontSize=s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';s.o.style.lineHeight=storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';}else{s.recycle();}}};this.recycle=function(){s.o.style.display='none';s.o.style.position=(fixedForEverything?'fixed':'absolute');s.o.style.bottom='auto';s.setVelocities();s.vCheck();s.meltFrame=0;s.melting=false;s.setOpacity(s.o,1);s.o.style.padding='0px';s.o.style.margin='0px';s.o.style.fontSize=s.fontSize+'px';s.o.style.lineHeight=(storm.flakeHeight+2)+'px';s.o.style.textAlign='center';s.o.style.verticalAlign='baseline';s.x=parseInt(rnd(screenX-storm.flakeWidth-20),10);s.y=parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;s.refresh();s.o.style.display='block';s.active=1;};this.recycle();this.refresh();};this.snow=function(){var active=0,used=0,waiting=0,flake=null,i;for(i=s.flakes.length;i--;){if(s.flakes[i].active===1){s.flakes[i].move();active++;}else if(s.flakes[i].active===0){used++;}else{waiting++;}
if(s.flakes[i].melting){s.flakes[i].melt();}}
if(active<s.flakesMaxActive){flake=s.flakes[parseInt(rnd(s.flakes.length),10)];if(flake.active===0){flake.melting=true;}}};this.mouseMove=function(e){if(!s.followMouse){return true;}
var x=parseInt(e.clientX,10);if(x<screenX2){windOffset=-windMultiplier+(x/screenX2*windMultiplier);}else{x-=screenX2;windOffset=(x/screenX2)*windMultiplier;}};this.createSnow=function(limit,allowInactive){var i;for(i=0;i<limit;i++){s.flakes[s.flakes.length]=new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));if(allowInactive||i>s.flakesMaxActive){s.flakes[s.flakes.length-1].active=-1;}}
storm.targetElement.appendChild(docFrag);};this.timerInit=function(){s.timers=(!isWin98?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);};this.init=function(){var i;for(i=0;i<s.meltFrameCount;i++){s.meltFrames.push(1-(i/s.meltFrameCount));}
s.randomizeWind();s.createSnow(s.flakesMax);s.events.add(window,'resize',s.resizeHandler);s.events.add(window,'scroll',s.scrollHandler);if(s.freezeOnBlur){if(isIE){s.events.add(document,'focusout',s.freeze);s.events.add(document,'focusin',s.resume);}else{s.events.add(window,'blur',s.freeze);s.events.add(window,'focus',s.resume);}}
s.resizeHandler();s.scrollHandler();if(s.followMouse){s.events.add(isIE?document:window,'mousemove',s.mouseMove);}
s.animationInterval=Math.max(20,s.animationInterval);s.timerInit();};this.start=function(bFromOnLoad){if(!didInit){didInit=true;}else if(bFromOnLoad){return true;}
if(typeof s.targetElement==='string'){var targetID=s.targetElement;s.targetElement=document.getElementById(targetID);if(!s.targetElement){throw new Error('BaoTuyet1k: Unable to get targetElement "'+targetID+'"');}}
if(!s.targetElement){s.targetElement=(!isIE?(document.documentElement?document.documentElement:document.body):document.body);}
if(s.targetElement!==document.documentElement&&s.targetElement!==document.body){s.resizeHandler=s.resizeHandlerAlt;}
s.resizeHandler();s.usePositionFixed=(s.usePositionFixed&&!noFixed);fixedForEverything=s.usePositionFixed;if(screenX&&screenY&&!s.disabled){s.init();s.active=true;}};function doDelayedStart(){window.setTimeout(function(){s.start(true);},20);s.events.remove(isIE?document:window,'mousemove',doDelayedStart);}
function doStart(){if(!s.excludeMobile||!isMobile){if(s.freezeOnBlur){s.events.add(isIE?document:window,'mousemove',doDelayedStart);}else{doDelayedStart();}}
s.events.remove(window,'load',doStart);}
s.events.add(window,'load',doStart,false);return this;}(window,document));
//]]>
</script><script type="text/javascript">document.write('\u003c\u0061\u0020\u0068\u0072\u0065\u0066\u003d\u0027\u0068\u0074\u0074\u0070\u003a\u002f\u002f\u0074\u0075\u0074\u006f\u0072\u0069\u0061\u006c\u0064\u0075\u0079\u002e\u0062\u006c\u006f\u0067\u0073\u0070\u006f\u0074\u002e\u0063\u006f\u006d\u002f\u0032\u0030\u0031\u0032\u002f\u0031\u0031\u002f\u0073\u0063\u0072\u0069\u0070\u0074\u002d\u0065\u0066\u0066\u0065\u0063\u0074\u002d\u0073\u006e\u006f\u0077\u002d\u0066\u006f\u0072\u002d\u0062\u006c\u006f\u0067\u0067\u0065\u0072\u002e\u0068\u0074\u006d\u006c\u0027\u003e\u003c\u0069\u006d\u0067\u0020\u0061\u006c\u0074\u003d\u0027\u0053\u006e\u006f\u0077\u002d\u0045\u0066\u0066\u0065\u0063\u0074\u0027\u0020\u0073\u0072\u0063\u003d\u0027\u0068\u0074\u0074\u0070\u003a\u002f\u002f\u0069\u002e\u0069\u006d\u0067\u0075\u0072\u002e\u0063\u006f\u006d\u002f\u0042\u0069\u0054\u0069\u0047\u002e\u0070\u006e\u0067\u0027\u002f\u003e\u003c\u002f\u0061\u003e')</script>

2013, By: Seo Master

seo Blogger How 1 - Register and Start Your First Blogger 2013

Seo Master present to you: Blogger How is Blogger Tutorial Series from How We Blog. In this series, I will guide you step by step building your first blog with Blogger, spread it to the world, and then you can earn money from it.

The first post of this series:

Blogger How 1 - Register and Start Your First Blogger


Blogger (a.k.a Blogspot) is a professional blogging platform by Google. Blogger offers many professional features to its users. With Blogger, you can fully customize template and your post. Blogger is one of the best search engine optimized platform that support by Google itself. Blogger is free, fast and stable for everyone. And that's why I write tutorial about Blogger first (and Wordpress after that).

Register Google Account and Sign In 


You need a Google Account to sign in and use Blogger at http://www.blogger.com. If you don't have one, click Sign Up button at right up corner, then choose your Gmail user name (it will be your Google Account too), fill in all the field then click Next step to finish the registering.
Register a Google Account
Register a Google Account
Read more »2013, By: Seo Master

seo Add +1 to your pages to help your site stand out 2013

Seo Master present to you:
Add +1 to your pages
Add +1 to your pages to help your site stand out, Let visitors recommend your content on Google Search and share it on Google+.

You can add and customize the +1 button to meet the needs of your website, such as modifying the button size and load technique. By adding the +1 button to your website, you allow your users to recommend your content to their circles and drive traffic to your site. The +1 button can also improve the time spent on your site by providing recommendations for further reading.

Use of the +1 button is subject to the Google +1 Button policy.



How To Get Google +1 Buttons For Your Website/ Blogger?


Code:
Demo1: Small (15px)
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Demo2 : Medium (20px)

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>


Demo3: Standard (24px)

<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>


Demo4: Tall (60px)  

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Other:
 http://www.google.com/intl/en/webmasters/+1/button/
 https://developers.google.com/+/plugins/+1button/
2013, By: Seo Master

seo Ad placement options for banner 468x60 2013

Seo Master present to you:
Ad placement options for banner 468x60 How To Apply This Ad placement options for banner for Blogger. Here are tips of Duy Pham, Banner 468x60 pixels is one of the commonly used banner ads on weblog, normally it is placed in the header. To attract attention to your readers will guide insert it in two places in between the first and second article 2 when browsing the index and type at the top of the article while browsing the item type.
How to Add Google Advertisements (Google AdSense) to Your Blogger?
Code:

Step 1 : Create a function to display ads. Find <b:includable cards id='main' var='top'> and prepend it to the code below:

<b:includable id='adsblogger' var='posts'>
 <div style='clear:both'/>
 <div style = 'background: # FFF; padding: 10px 0; text-align: center; line-height : 0 '>
 Code Ads

Replace Code Ads with the address of the website to be advertised address of banner ads. Step 2 : Call the function in the position to insert ads. Adsense Code Converter

In between the first and second article two when browsing index types:
At the top of the article while browsing the item type:

Find <b:include cards data='post' name='post'/> and prepend it to the code below:

<b:if cond='data:blog.pageType == "item"'>
 <b:include data='post' name='adsblogger'/>
</ b: if>
<b:include cards data='post' name='post'/>




Find <b:include cards data='post' name='post'/> and add to it the following code:

<b:include cards data='post' name='post'/>
<b:if cond='data:blog.pageType == "index"'>
 <b:if cond='data:post.isFirstPost == "true"'>
  <b: include data = 'post' name = 'adsblogger' />
 </ b: if>
</ b: if>


Enjoy !
you have done?
2013, By: Seo Master

seo How to Add Adsense Below Post Titles ? 2013

Seo Master present to you:
Insert Adsense ads code in Blogger Posts following will guide the you how to insert quảng cáo code củaGoogle Adsensevào Blogger , how is and apply with a number of quảng cáo khác like Adnet.vn, Bidvertiser ...Google Adsense is the most popular ad network on the planet. A lot of Blogger users also use it. It's an endless discussion where to place these ads on your blog for maximum exposure. The best ad places are around the header or above the posts or below the post titles. You can easily add adsense in your sidebar as a gadget. But Blogger doesn't allows us to directly place the ads below post titles. The ads below post titles have proven to be one of the most successful money making positions.

Before pasting the ad code in Blogger, we must make it compatible with Blogger format. So go to http://duytemplates.tintucmoivn.com/p/adsense-code-converter.html paste the ad code and convert it. You'll find the converted ad code in the bottom box there. Copy the converted ad code.
Open your Blogger account and go to Design then Edit HTML tab and checkExpand Widget Templates option.
Press Ctrl + f & find <data:post.body/> you'll see some code like this:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Paste the converted ad code just before the above code. The result would look something like this:
Code Ads
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Click the PREVIEW button to see the result. Thought you might not see ads below post titles instantly because sometimes Adsense ads take some time to display.
After that save your template by clicking the SAVE TEMPLATE button.

Tip: Make Ads Appear Only on Post Pages

Usually, users don't like to see too many ads on a single page. So, we can hide the ads under post titles on main page. These ads will appear only when users will click the post title and go to the post page. To do that follow the steps above but after step 8 you have the converted ad code. Ad some more code in that converted code so that it should look like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Code Ads
</b:if>

What I did here is that I've added an if condition to make the ads appear only on post pages. After that, follow the steps above to complete the tutorial.
Or
1 / Insert on the top and bottom post title but under the blog title In Design - Edit HTML - Click Expand Widget Templates Find the line (Ctrl + F): <div class='post-header-line-1'/> Insert to just below it the following code:
 <b:if cond='data:blog.pageType == "item"'> <p class='ads'> Adsense code converter </p> </b:if>
2 / Insert into the bottom of each post In Design - Edit HTML - Click Expand Widget Templates Find the line (Ctrl + F): the same code <div class='post-body entry-content'> <p> <data:post.body/> </ p> <div style='clear: both;'/> </ div> 
 Inserted just below it the following code: 
<b:if cond='data:blog.pageType == "item"'> <p class='ads'> Adsense code converter </p> </b:if> 
3 / time advertising to the left of each post In Design - Edit HTML - Click Expand Widget Templates Find the line (Ctrl + F): <div class='post-header-line-1'/> 
Insert to just below it the following code: 
 <b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:left'> Adsense code converter </p> </b:if> 
4 / The right of each ad post In Design - Edit HTML - Click Expand Widget Templates Find the line (Ctrl + F): <div class='post-header-line-1'/> Insert to just below it the following code:
<b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:right'> Adsense code converter </p> </b:if>
Source: http://blogger.lambanghieu.net and http://www.betatemplates.com2013, By: Seo Master

seo 40+ Web Design Mistakes You Should Avoid 2013

Seo Master present to you:
40+ Web Design Mistakes You Should Avoid
There are several lists of web design mistakes around the Internet. Most of them, however, are the “Most common” or “Top 10” mistakes. Every time I crossed one of those lists I would think to myself: “Come on, there must be more than 10 mistakes…”. Then I decided to write down all the web design mistakes that would come into my head; within half an hour I had over thirty of them listed. Afterwards I did some research around the web and the list grew to 43 points.
The next step was to write a short description for each one, and the result is the collection of mistakes that you will find below. Some of the points are common sense, others are quite polemic. Most of them apply to any website though, whether we talk about a business entity or a blog. Enjoy!


1. The user must know what the site is about in seconds: attention is one the most valuable currencies on the Internet. If a visitor can not figure what your site is about in a couple of seconds, he will probably just go somewhere else. Your site must communicate why I should spend my time there, and FAST!

2. Make the content scannable: this is the Internet, not a book, so forget large blocks of text. Probably I will be visiting your site while I work on other stuff so make sure that I can scan through the entire content. Bullet points, headers, subheaders, lists. Anything that will help the reader filter what he is looking for.

3. Do not use fancy fonts that are unreadable: sure there are some fonts that will give a sophisticated look to your website. But are they readable? If your main objective is to deliver a message and get the visitors reading your stuff, then you should make the process comfortable for them.

4. Do not use tiny fonts: the previous point applies here, you want to make sure that readers are comfortable reading your content. My Firefox does have a zooming feature, but if I need to use on your website it will probably be the last time I visit it.

5. Do not open new browser windows: I used to do that on my first websites. The logic was simple, if I open new browser windows for external links the user will never leave my site. WRONG! Let the user control where he wants the links to open. There is a reason why browsers have a huge “Back” button. Do not worry about sending the visitor to another website, he will get back if he wants to (even porn sites are starting to get conscious regarding this point lately…).

6. Do not resize the user’s browser windows: the user should be in control of his browser. If you resize it you will risk to mess things up on his side, and what is worse you might lose your credibility in front of him.

7. Do not require a registration unless it is necessary: lets put this straight, when I browse around the Internet I want to get information, not the other way around. Do not force me to register up and leave my email address and other details unless it is absolutely necessary (i.e. unless what you offer is so good that I will bear with the registration).

8. Never subscribe the visitor for something without his consent: do not automatically subscribe a visitor to newsletters when he registers up on your site. Sending unsolicited emails around is not the best way to make friends.

9. Do not overuse Flash: apart from increasing the load time of your website, excessive usage of Flash might also annoy the visitors. Use it only if you must offer features that are not supported by static pages.

10. Do not play music: on the early years of the Internet web developers always tried to successfully integrate music into websites. Guess what, they failed miserably. Do not use music, period.

11. If you MUST play an audio file let the user start it: some situations might require an audio file. You might need to deliver a speech to the user or your guided tour might have an audio component. That is fine. Just make sure that the user is in control, let him push the “Play” button as opposed to jamming the music on his face right after he enters the website.

12. Do not clutter your website with badges: first of all, badges of networks and communities make a site look very unprofessional. Even if we are talking about awards and recognition badges you should place them on the “About Us” page.

13. Do not use a homepage that just launches the “real” website: the smaller the number of steps required for the user to access your content, the better.

14. Make sure to include contact details: there is nothing worse than a website that has no contact details. This is not bad only for the visitors, but also for yourself. You might lose important feedback along the way.

15. Do not break the “Back” button: this is a very basic principle of usability. Do not break the “Back” button under any circumstance. Opening new browser windows will break it, for instance, and some Javascript links might also break them.

16. Do not use blinking text: unless your visitors are coming straight from 1996, that is.

17. Avoid complex URL structures: a simple, keyword-based URL structure will not only improve your search engine rankings, but it will also make it easier for the reader to identify the content of your pages before visiting them.

18. Use CSS over HTML tables: HTML tables were used to create page layouts. With the advent of CSS, however, there is no reason to stick to them. CSS is faster, more reliable and it offers many more features.

19. Make sure users can search the whole website: there is a reason why search engines revolutionized the Internet. You probably guessed it, because they make it very easy to find the information we are looking for. Do not neglect this on your site.

20. Avoid “drop down” menus: the user should be able to see all the navigation options straight way. Using “drop down” menus might confuse things and hide the information the reader was actually looking for.

21. Use text navigation: text navigation is not only faster but it is also more reliable. Some users, for instance, browse the Internet with images turned off.

22. If you are linking to PDF files disclose it: ever clicked on a link only to see your browser freezing while Acrobat Reader launches to open that (unrequested) PDF file? That is pretty annoying so make sure to explicit links pointing to PDF files so that users can handle them properly.

23. Do not confuse the visitor with many versions: avoid confusing the visitor with too many versions of your website. What bandwidth do I prefer? 56Kbps? 128Kbps? Flash or HTML? Man, just give me the content!

24. Do not blend advertising inside the content: blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor.

25. Use a simple navigation structure: sometimes less is more. This rule usually applies to people and choices. Make sure that your website has a single, clear navigation structure. The last thing you want is to confuse the reader regarding where he should go to find the information he is looking for.

26. Avoid “intros”: do not force the user to watch or read something before he can access to the real content. This is plain annoying, and he will stay only if what you have to offer is really unique.

27. Do not use FrontPage: this point extends to other cheap HTML editors. While they appear to make web design easier, the output will be a poorly crafted code, incompatible with different browsers and with several bugs.

28. Make sure your website is cross-browser compatible: not all browsers are created equal, and not all of them interpret CSS and other languages on the same way. Like it or not, you will need to make your website compatible with the most used browsers on the market, else you will lose readers over the long term.

29. Make sure to include anchor text on links: I confess I used to do that mistake until some time ago. It is easier to tell people to “click here”. But this is not efficient. Make sure to include a relevant anchor text on your links. It will ensure that the reader knows where he is going to if he clicks the link, and it will also create SEO benefits for the external site where the link is pointing.

30. Do not cloak links: apart from having a clear anchor text, the user must also be able to see where the link is pointing on the status bar of his browser. If you cloak your links (either because they are affiliate ones or due to other reasons) your site will lose credibility.

31. Make links visible: the visitor should be able to recognize what is clickable and what is not, easily. Make sure that your links have a contrasting color (the standard blue color is the optimal most of the times). Possibly also make them underlined.

32. Do not underline or color normal text: do not underline normal text unless absolutely necessary. Just as users need to recognize links easily, they should not get the idea that something is clickable when in reality it is not.

33. Make clicked links change color: this point is very important for the usability of your website. Clicked links that change color help the user to locate himself more easily around your site, making sure that he will not end up visiting the same pages unintentionally.

34. Do not use animated GIFs: unless you have advertising banners that require animation, avoid animated GIFs. They make a site look unprofessional and detract the attention from the content.

35. Make sure to use the ALT and TITLE attributes for images: apart from having SEO benefits the ALT and TITLE attributes for images will play an important role for blind users.

36. Do not use harsh colors: if the user is getting a headache after visiting your site for 10 consecutive minutes, you probably should pick a better color scheme. Design the color palette around your objectives (i.e. deliver a mood, let the user focus on the content, etc.).

37. Do not use pop ups: this point refers to pop ups of any kind. Even user requested pop ups are a bad idea given the increasing amount of pop blockers out there.

38. Avoid Javascript links: those links execute a small Javascript when the user clicks on them. Stay away from them since they often create problems for the user.

39. Include functional links on your footer: people are used to scrolling down to the footer of a website if they are not finding a specific information. At the very least you want to include a link to the Homepage and possibly a link to the “Contact Us” page.

40. Avoid long pages: guess what, if the user needs to scroll down forever in order to read your content he will probably just skip it altogether. If that is the case with your website make it shorter and improve the navigation structure.

41. No horizontal scrolling: while some vertical scrolling is tolerable, the same can not be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website fits inside it.

42. No spelling or grammatical mistakes: this is not a web design mistake, but it is one of the most important factors affecting the overall quality of a website. Make sure that your links and texts do not contain spelling or grammatical mistakes.

43. If you use CAPTCHA make sure the letters are readable: several sites use CAPTCHA filters as a method of reducing spam on comments or on registration forms. There is just one problem with it, most of the times the user needs to call his whole family to decipher the letters.
44. Specify the source article: this is very important in SEO friendly with Google, you will not be marked as spamer.

45. Google-friendly sites
Check out our Search Engine Optimization Starter Guide!
Things to do

Our Webmaster Guidelines provide general design, technical, and quality guidelines. Below are more detailed tips for creating a Google-friendly site.

Give visitors the information they're looking for

Provide high-quality content on your pages, especially your homepage. This is the single most important thing to do. If your pages contain useful information, their content will attract many visitors and entice webmasters to link to your site. In creating a helpful, information-rich site, write pages that clearly and accurately describe your topic. Think about the words users would type to find your pages and include those words on your site.

Make sure that other sites link to yours

Links help our crawlers find your site and can give your site greater visibility in our search results. When returning results for a search, Google uses sophisticated text-matching techniques to display pages that are both important and relevant to each search. Google interprets a link from page A to page B as a vote by page A for page B. Votes cast by pages that are themselves "important" weigh more heavily and help to make other pages "important."

Keep in mind that our algorithms can distinguish natural links from unnatural links. Natural links to your site develop as part of the dynamic nature of the web when other sites find your content valuable and think it would be helpful for their visitors. Unnatural links to your site are placed there specifically to make your site look more popular to search engines. Some of these types of links (such as link schemes and doorway pages) are covered in our Webmaster Guidelines.

Only natural links are useful for the indexing and ranking of your site.

Make your site easily accessible

Build your site with a logical link structure. Every page should be reachable from at least one static text link.

Use a text browser, such as Lynx, to examine your site. Most spiders see your site much as Lynx would. If features such as JavaScript, cookies, session IDs, frames, DHTML, or Macromedia Flash keep you from seeing your entire site in a text browser, then spiders may have trouble crawling it.

Things to avoid

Don't fill your page with lists of keywords, attempt to "cloak" pages, or put up "crawler only" pages. If your site contains pages, links, or text that you don't intend visitors to see, Google considers those links and pages deceptive and may ignore your site.

Don't feel obligated to purchase a search engine optimization service. Some companies claim to "guarantee" high ranking for your site in Google's search results. While legitimate consulting firms can improve your site's flow and content, others employ deceptive tactics in an attempt to fool search engines. Be careful; if your domain is affiliated with one of these deceptive services, it could be banned from our index.

Don't use images to display important names, content, or links. Our crawler doesn't recognize text contained in graphics. Use ALT attributes if the main content and keywords on your page can't be formatted in regular HTML.

Don't create multiple copies of a page under different URLs. Many sites offer text-only or printer-friendly versions of pages that contain the same content as the corresponding graphic-rich pages. If your site has identical content that can be reached via different URLs, there are several ways of indicating the canonical (preferred) version of a page. More information about canonicalization.


2013, By: Seo Master

seo Nice Style for Blogger Comment Thread 2013

Seo Master present to you:
Nice Style for Blogger Comment ThreadThis is a default style for Thread Comments Blogger. With this style frame your comment becomes more intuitive when there is a clear distinction between comment and reply comment reply. Reviews of the author has been added ribbon to distinguish them from the other reviewers. This style is designed in accordance with his style has long pursued this: simple , clear and modern . This style is the original design for your template which will later apply Thread Comment as default, hope it fits the style of the majority of blog.




Add the following code before ]]> </ b: skin> in your template.
# Comments {overflow: hidden} 
# comments h4 {display: inline; padding: 10px; line-height: 40px}

# comments h4,. comments. comment-header. comments. comment-thread.inline-thread. comment {position : relative}

# comments h4,. comments. continue a {background: #
0EE506 }
# comments h4,. comments. user a,. comments. continue a {font-size: 16px}

# comments h4,. comments. continue a { font-weight: normal; color: # fff}

# comments h4: after {content: ""; position: absolute; bottom:-10px; left: 10px; border-top: 10px solid #
0EE506 ; border-right: 20px solid transparent; width: 0; height: 0; line-height: 0}
# comments. avatar-image-container img {border: 0}

. comment-thread {color: # 111}

. comment-thread a {color: # 777 }

. comment-thread ol {margin: 0 0 20px}

. comment-thread. comment-content a,. comments. user a,. comments. comments-thread.inline-thread. user a {color: #
0EE506 }
. comments . avatar-image-container. comments. avatar-image-container img {width: 48px; max-width: 48px; height: 48px; max-height: 48px}

. comments. comment-block,. comments. comments-content . comment-replies. comments. comment-replybox-single {margin-left: 60px}

. comments. comment-block,. comments. comments-thread.inline-thread. comment {border: 1px solid # ddd; background: # f9f9f9; padding: 10px}

. comments. comments-content. comment {margin: 15px 0 0; padding: 0; width: 100%; line-height: 1em}

. comments. comments-content. icon.blog-author {position : absolute; top:-12px; right:-12px; margin: 0; background-image:

. Comments-content. Inline-thread {padding: 0 0 0 20px}

. comments. comments-content. comment-replies {margin-top: 0}

. comments. comment-content {padding: 5px 0; line-height: 1.4 I}

. comments. comment-thread.inline-thread {border-left: 1px solid # ddd; background: transparent}

. comments. comment-thread.inline-thread. comment {width: auto}

. comments. comment-thread. inline-thread. comment: after {content: ""; position: absolute; top: 10px; left:-20px; border-top: 1px solid # ddd; width: 10px; height: 0px}

. comments. comment-thread. inline-thread. comment. comment-block {border: 0; background: transparent; padding: 0}

. comments. comments-thread.inline-thread. comment-block {margin-left: 48px}

. comments. comment-thread. inline-thread. user a {font-size: 13px}

. comments. comments-thread.inline-thread. avatar-image-container. comments. comments-thread.inline-thread. avatar-image-container img {width: 36px; max-width: 36px; height: 36px; max-height: 36px}

. comments. continue {border-top: 0; width: 100%}

. comments. continue a {padding: 10px 0; text-align: center }

. comment. continue {display: none}

# comment-editor {width: 103%! important}

. comment-form {width: 100%; max-width: 100%}

0EE506 is the dominant color of this style Thread Comment, you can change it as you wish.
2013, By: Seo Master

seo Add Recent Posts with thumbnail 2013

Seo Master present to you:
Add Recent Posts with thumbnailPost image for Blogger. Add Recent Posts with thumbnail - this is the add-ons that you do not use because I want to see new posts often have a habit of returning home. 
Utility was written just for all the amenities of Posts by can not find more new features are considered. Is there is a recognized feature articles off Reviews, photos support my recent video on Youtube and see photos at Photobucket also stored, the number of articles downloaded from the feed get enough for some articles you want to display to avoid redundancy. These features are already in the utility Related Posts and Random Posts .


Step 1 : Add the following code before ]]> </ b: skin> in your template.
# Recent-posts img {float: left; margin-right: 10px; border: 1px solid # 999; background: # FFF; width: 36px; height: 36px; padding: 3px}
If applied to add high-speed random post to Blogger , you skip this step and replace # random-posts img { img # random-posts, # recent-posts img {sync when you want to edit. Step 2 : Add 1 widget HTML / JavaScript in places to showRecent Posts . Edit Text and paste the following code into the Content section and clickSAVE .


<div id='recent-posts'> 
<script type='text/javaScript'>
var rcp_numposts = 5 ;
var rcp_snippet_length = 150 ;
var rcp_info = ' yes ';
var rcp_comment = 'Reviews';
var rcp_disable = 'Off Comments';
function recent_posts (json) {var dw =''; a = location.href; y = a.indexOf ('? m = 0'); dw + = '<ul>'; for (var i = 0 ; i <rcp_numposts; i + +) {var entry = json.feed.entry [i]; var rcp_posttitle = entry.title. $ t; if ('content'in entry) {var rcp_get_snippet = entry.content. $ t} else {if ('summary'in entry) {var rcp_get_snippet = entry.summary. $ t} else {var rcp_snippet = rcp_get_snippet} else {rcp_get_snippet = rcp_get_snippet.substring (0, rcp_snippet_length); var space = rcp_get_snippet.lastIndexOf (""); rcp_snippet = rcp_get_snippet.substring (0, space) + "...";}; for ( var j = 0; j <entry.link.length; j + +) {if ('thr $ total'in entry) {var rcp_commentsNum = entry.thr $ total. $ t +' '+ rcp_comment} else {rcp_commentsNum = rcp_disable}; if (entry.link [j]. rel == 'alternate') {var rcp_posturl = entry.link [j]. href; if (y! = -1) {rcp_posturl = rcp_posturl + '? m = 0'} var rcp_postdate = entry.published. $ t; if ('media $ thumbnail'in entry) {var alt = "'+ rcp_posttitle +'" src = "'+ rcp_thumb +'" /> '; dw + =' <div> <a href = "'+ rcp_posturl +'" rel = "nofollow" - '+ Rcp_commentsNum +' </ span> ';}; dw + =' <div type = \ "text / javascript \"

Replace 5 with the number of posts you want to display, 150 is the number of characters of the quote post content. If you do not want to display the date information and post comments, please change the yes to any other character.

2013, By: Seo Master

seo Nice Style for Blogger Comment Thread 2013

Seo Master present to you:
Nice Style for Blogger Comment ThreadThis is a default style for Thread Comments Blogger. With this style frame your comment becomes more intuitive when there is a clear distinction between comment and reply comment reply. Reviews of the author has been added ribbon to distinguish them from the other reviewers. This style is designed in accordance with his style has long pursued this: simple , clear and modern . This style is the original design for your template which will later apply Thread Comment as default, hope it fits the style of the majority of blog.


Please comment to see Preview HERE 

Add the following code before ]]> </ b: skin> in your template.
# Comments {overflow: hidden} 
# comments h4 {display: inline; padding: 10px; line-height: 40px}

# comments h4,. comments. comment-header. comments. comment-thread.inline-thread. comment {position : relative}

# comments h4,. comments. continue a {background: #
FFA730 }
# comments h4,. comments. user a,. comments. continue a {font-size: 16px}

# comments h4,. comments. continue a { font-weight: normal; color: # fff}

# comments h4: after {content: ""; position: absolute; bottom:-10px; left: 10px; border-top: 10px solid #
FFA730 ; border-right: 20px solid transparent; width: 0; height: 0; line-height: 0}
# comments. avatar-image-container img {border: 0}
. comment-thread {color: # 111}

. comment-thread a {color: # 777 }

. comment-thread ol {margin: 0 0 20px}

. comment-thread. comment-content a,. comments. user a,. comments. comments-thread.inline-thread. user a {color: #
FFA730 }
. comments . avatar-image-container. comments. avatar-image-container img {width: 48px; max-width: 48px; height: 48px; max-height: 48px}
. comments. comment-block,. comments. comments-content . comment-replies. comments. comment-replybox-single {margin-left: 60px}

. comments. comment-block,. comments. comments-thread.inline-thread. comment {border: 1px solid # ddd; background: # f9f9f9; padding: 10px}

. comments. comments-content. comment {margin: 15px 0 0; padding: 0; width: 100%; line-height: 1em}

. comments. comments-content. icon.blog-author {position : absolute; top:-12px; right:-12px; margin: 0; background-image:

. Comments-content. Inline-thread {padding: 0 0 0 20px}

. comments. comments-content. comment-replies {margin-top: 0}

. comments. comment-content {padding: 5px 0; line-height: 1.4 I}

. comments. comment-thread.inline-thread {border-left: 1px solid # ddd; background: transparent}

. comments. comment-thread.inline-thread. comment {width: auto}

. comments. comment-thread. inline-thread. comment: after {content: ""; position: absolute; top: 10px; left:-20px; border-top: 1px solid # ddd; width: 10px; height: 0px}

. comments. comment-thread. inline-thread. comment. comment-block {border: 0; background: transparent; padding: 0}

. comments. comments-thread.inline-thread. comment-block {margin-left: 48px}

. comments. comment-thread. inline-thread. user a {font-size: 13px}

. comments. comments-thread.inline-thread. avatar-image-container. comments. comments-thread.inline-thread. avatar-image-container img {width: 36px; max-width: 36px; height: 36px; max-height: 36px}

. comments. continue {border-top: 0; width: 100%}

. comments. continue a {padding: 10px 0; text-align: center }

. comment. continue {display: none}

# comment-editor {width: 103%! important}

. comment-form {width: 100%; max-width: 100%}

#FFA730 is the dominant color of this style Thread Comment, you can change it as you wish.


Source: http://blog.duypham.info
2013, By: Seo Master

seo New comments with style Windows 8 2013

Seo Master present to you:
New comments with style Windows 8Windows 8 was officially released in late October and is making a real craze.I'm also not an exception when tempted by the colorful beauty of its simplicity.And the result is the next version of the Recent Comments with style style Messaging on Windows 8.


DEMO




Step 1 : Add the following code before ]]> </ b: skin> in your template.
#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#0EE506}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #0EE506;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}

Step 2: Add 1 widget HTML / Javascript in where you want to display Recent Comments .Edit Text and paste the following code into the Content section and click SAVE .
<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7HRYeelEU_QzlbmxKYZcc2LRoyY16_HSM91-MTdXQVPGGLY5W-IQdISf4St7PnX3EaG3LVIBQrlF_Md2k9snI9JgLp6NtIFe5dB0X9K8GXuiXIIlg4vanoslz0flZF3CdLycQumXwMtg/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>

These advanced features are as in the old version , including the admin reviews and comments of visitors is shown in the opposite direction with d
2013, By: Seo Master

seo Dropdown Menu Colors 2013

Seo Master present to you:
Dropdown Menu Colors A CSS powered Drop Down Menu for Blogger.






Code:

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

#css-menu {
background-attachment: scroll;
background-clip: border-box;
background-color: #FF7E00;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0onU2dXbo63ZHU2XkBcXz_VEOhmbditk5cR4BhEAyb7CcBCbLwsUXBVc7_HWqsiR8Gui7I0DOjUfFV6l0F9lsrWxpBi89pnQu3xZ9LPriMVzq58K0yi6M5d_fGaj4hVFXqa7Z_kp9Fk/s26/bg-nav-foot.jpg");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 46px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.nav {
float: left;
height: 26px;
line-height: 1;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
z-index: 99;
}
.nav a {
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
color: #111111;
display: block;
position: relative;
z-index: 100;
}
.nav li {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: 5px;
margin-top: 0;
}
.nav li a {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
-x-system-font: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL7_pht_NsCzQW5bpWDI03jXLzq2DcjkdIZTK3mtQC9y_2pK0SIb2tREM-qRLRA8JAvuWcbEj79f6kxFpH6F1V3t2EzujIqYN1BmeFnyQoqT6dfNPBfVaKYrJOT-YS7Ff_AklNjHuGGMw/s48/li-right.jpg");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: auto auto;
font-family: Arial,serif;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 15px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 0;
padding-top: 6px;
}
.nav li a span {
color: #FFFFFF;
font-weight: bold;
padding-bottom: 4px;
padding-left: 0;
padding-right: 12px;
padding-top: 5px;
}
.nav li.current-cat a, .nav li.current-cat a, .nav li:hover a, .nav li a:hover {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
-x-system-font: none;
color: #FFFFFF;
font-family: Arial,serif;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 15px;
margin-bottom: 0;
}
.nav li:hover span, .nav li a:hover span {
font-weight: bold;
}
.nav li.current-cat a {
background-attachment: scroll;
background-clip: border-box;
background-color: #111111;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRs9jWJhcoAuKghYYRiSf6eBbTQdDt8TwfYFEebe1heGNaohKdi8dXpGupGyGZcyRZSHj_PiCBB8Y4rF4eBvcV3KmoEm22tMFsmLF2vAeyp-o_z8SbryPtnzw0W7fODCDaToQ0rUF2GA/s101/hnjn.gif");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto auto;
color: #EEEEEE;
height: 16px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: -1px;
padding-left: 10px;
padding-top: 7px;
width: 100px;
}
.nav li.current-cat a span {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYxrY4LHGHUgixLgBCkPvKxQICZErBT7uIWbeDPV2127jZ7cbXQ6pHJTB1KWsFIpFUOutaX5JhUqWWtfoTPuK53laJ_wBPTYldsPjf-z7r8P9cf5m2Juuo2n9jZf5MzOlpLZOvystoHo/s18/hbhjs.png");
background-origin: padding-box;
background-position: 0 center;
background-repeat: no-repeat;
background-size: auto auto;
padding-left: 20px;
}
.nav li.news:hover, .nav li.news:hover ul {
background-color: black;
}
.nav li.news1:hover, .nav li.news1:hover ul {
background-color: #017CB5;
}
.nav li.news1:hover ul li {
border-bottom-color: #014F73;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #038BCA;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news2:hover, .nav li.news2:hover ul {
background-color: #A92267;
}
.nav li.news2:hover ul li {
border-bottom-color: #701544;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #C72B7B;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news3:hover, .nav li.news3:hover ul {
background-color: #0F5594;
}
.nav li.news3:hover ul li {
border-bottom-color: #0A3963;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #166BB7;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news4:hover, .nav li.news4:hover ul {
background-color: #693770;
}
.nav li.news4:hover ul li {
border-bottom-color: #45254A;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #9A52A4;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news5:hover, .nav li.news5:hover ul {
background-color: #3B6A06;
}
.nav li.news5:hover ul li {
border-bottom-color: #264404;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #4D8909;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news6:hover, .nav li.news6:hover ul {
background-color: #46505C;
}
.nav li.news6:hover ul li {
border-bottom-color: #252A30;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #5C6978;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news7:hover, .nav li.news7:hover ul {
background-color: #1B227D;
}
.nav li.news7:hover ul li {
border-bottom-color: #10154B;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #212994;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news8:hover, .nav li.news8:hover ul {
background-color: #9A1313;
}
.nav li.news8:hover ul li {
border-bottom-color: #650D0D;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #B81919;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news9:hover, .nav li.news9:hover ul {
background-color: #A92267;
}
.nav li.news9:hover ul li {
border-bottom-color: #741847;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #C52C7A;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news1:hover ul li.first, .nav li.news2:hover ul li.first, .nav li.news3:hover ul li.first, .nav li.news4:hover ul li.first, .nav li.news5:hover ul li.first, .nav li.news6:hover ul li.first, .nav li.news7:hover ul li.first, .nav li.news8:hover ul li.first, .nav li.news9:hover ul li.first {
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: 0;
}
.nav li.news1:hover ul li.last, .nav li.news2:hover ul li.last, .nav li.news3:hover ul li.last, .nav li.news4:hover ul li.last, .nav li.news5:hover ul li.last, .nav li.news6:hover ul li.last, .nav li.news7:hover ul li.last, .nav li.news8:hover ul li.last, .nav li.news9:hover ul li.last {
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: medium;
}
.nav li a:hover, .nav li a:active {
color: #B80000;
}
.nav li ul {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
left: -999em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
margin-right: 1px;
margin-top: 0;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 0;
padding-top: 5px;
position: absolute;
width: 168px;
z-index: 999999;
}
.nav .last ul {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
margin-bottom: 0;
margin-left: 1px;
margin-right: 1px;
margin-top: 0;
position: absolute;
width: 168px;
z-index: 999;
}
.nav li ul li {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: medium;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: -moz-use-text-color;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: none;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: medium;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: -moz-use-text-color;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: none;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: medium;
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: medium;
clear: both;
margin-left: 0;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
width: 160px;
}
.nav li ul li a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
color: #FFFFFF !important;
font-size: 12px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-transform: none;
}
.nav li:hover ul li a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
font-weight: bold;
}
.nav li:hover, .nav li.hover {
position: static;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul {
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul {
left: auto;
}

HTML
 <div id='css-menu'>
<ul class='nav'>
<li class='current-cat iconhome'><a href='/'><span>Home</span></a></li>
<li class='news1'><a href='#'><span>Css menu 1</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 1.1</a></li>
<li><a href='#'>Submenu 1.2</a></li>
<li><a href='#'>Submenu 1.3</a></li>
<li><a href='#'>Submenu 1.4</a></li>
<li><a href='#'>Submenu 1.5</a></li>
<li class='last'><a href='#'>Submenu 1.6</a></li>
</ul>
</li>
<li class='news2'><a href='#'><span>Css menu 2</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 2.1</a></li>
<li><a href='#'>Submenu 2.2</a></li>
<li><a href='#'>Submenu 2.3</a></li>
<li><a href='#'>Submenu 2.4</a></li>
<li><a href='#'>Submenu 2.5</a></li>
<li class='last'><a href='#'>Submenu 2.6</a></li>
</ul>
</li>
<li class='news3'><a href='#'><span>Css menu 3</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 3.1</a></li>
<li><a href='#'>Submenu 3.2</a></li>
<li><a href='#'>Submenu 3.3</a></li>
<li><a href='#'>Submenu 3.4</a></li>
<li><a href='#'>Submenu 3.5</a></li>
<li class='last'><a href='#'>Submenu 3.6</a></li>
</ul>
</li>
<li class='news4'><a href='#'><span>Css menu 4</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 4.1</a></li>
<li><a href='#'>Submenu 4.2</a></li>
<li><a href='#'>Submenu 4.3</a></li>
<li><a href='#'>Submenu 4.4</a></li>
<li><a href='#'>Submenu 4.5</a></li>
<li class='last'><a href='#'>Submenu 4.6</a></li>
</ul>
</li>
<li class='news5'><a href='#'><span>Tên menu 5 </span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 5.1</a></li>
<li><a href='#'>Submenu 5.2</a></li>
<li><a href='#'>Submenu 5.3</a></li>
<li><a href='#'>Submenu 5.4</a></li>
<li><a href='#'>Submenu 5.5</a></li>
<li class='last'><a href='#'>Submenu 5.6</a></li>
</ul>
</li>
<li class='news6'><a href='#'><span>Css menu 6</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 6.1</a></li>
<li><a href='#'>Submenu 6.2</a></li>
<li><a href='#'>Submenu 6.3</a></li>
<li><a href='#'>Submenu 6.4</a></li>
<li><a href='#'>Submenu 6.5</a></li>
<li class='last'><a href='#'>Submenu 6.6</a></li>
</ul>
</li>
<li class='news7'><a href='#'><span>Css menu 7</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 7.1</a></li>
<li><a href='#'>Submenu 7.2</a></li>
<li><a href='#'>Submenu 7.3</a></li>
<li><a href='#'>Submenu 7.4</a></li>
<li><a href='#'>Submenu 7.5</a></li>
<li class='last'><a href='#'>Submenu 7.6</a></li>
</ul>
</li>
<li class='news8'><a href='#'><span>Css menu 8</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 8.1</a></li>
<li><a href='#'>Submenu 8.2</a></li>
<li><a href='#'>Submenu 8.3</a></li>
<li><a href='#'>Submenu 8.4</a></li>
<li><a href='#'>Submenu 8.5</a></li>
<li class='last'><a href='#'>Submenu 8.6</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div>


2013, By: Seo Master
Powered by Blogger.