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

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

seo Larger, brand-friendly ad sizes available in AdSense: 300x600 2013

Seo Master present to you:
Larger, brand-friendly ad sizes available in AdSense: 300x600

As screens grow and web content continues to become richer, the format and capabilities of ad units continue to evolve as well. One of the top requests from publishers in the last year has been to add larger ad sizes to our network, and today we’re excited to announce that the popular 300x600 unit will soon be available in your AdSense account.


The 300x600 unit, sometimes referred to as a half page unit, provides a larger space for advertisers to get their message across and can offer users rich engagement. As mentioned in our recently released Display Business Trends, the 300x600 is one of the fastest growing sizes by impressions and is indicative of a trend where publishers are offering more visually impactful ad sizes that are preferred by brand advertisers. Because this unit is new to our network, you’ll currently see a large number of text ads in these placements. Over time we’ll continue to build a wide range of text and display ad inventory eligible to appear in this full slot as well.

As with all ad sizes, it’s important to carefully consider the placement of ad units to ensure both users and advertisers have a great experience with your site. If you’d like more information on the performance of potential placements, check out our heat map in the AdSense Help Center.

If you have feedback about the 300x600 ad unit, feel free to leave a comment on our AdSense +page and discuss your thoughts with other publishers.

Source: http://adsense.blogspot.com

2013, By: Seo Master

seo The Blogger Template Designer 2013

Seo Master present to you:
Add descriptions to LabelsWe’ve added a fair bit to Blogger over the years, but one thing that’s been constant for some time has been our collection of templates. While a number of talented designers around the web have offered their own fresh and interesting designs that you can apply to your Blogger blog, our stock set has grown a bit stale, and you’ve noticed. You let us know — in the forums, on Twitter, sitting next to us on airplanes, even from across the counter at a Harvard Square stationary store, and we’ve been listening.

Today we’re taking a big first step in improving not just our template designs, but all the ways that you can customize the look and layout of your blog. We even made a video with jaunty music to show it off:


Here’s what we’re launching today to Blogger in Draft:
  • 15 new, highly-customizable templates from our design team, split into four families: Simple, Picture Window, Awesome Inc, and Watermark
  • One-, two-, and three-column layouts for each template, with complete control over the size and arrangement of the columns
  • Hundreds of background images and patterns from iStockphoto, the leading microstock image marketplace

Try it Now

Go to http://draft.blogger.com/ to log in to Blogger in Draft. (If you’ve never been there before, Blogger in Draft is just like regular Blogger, except with new, in-development features like this one.) Click on your blog’s “Layout” link to go to the Layout tab. The link to the Template Designer is at the end of the row of sub-tabs.


You can use the live preview to see your new template without affecting your blog. When you find a new look that you’re happy with, just click the “Apply to Blog” button to publish it to the worldNote: You can backup your existing template ahead of time by going to Layout > Edit HTML. We recommend this if you have a customized blog design that you might want to go back to.

Classic template blogs: If you have a “Template” link or tab instead of “Layout,” you’ll first need to switch from Classic to Layouts before you can try out the Template Designer. Go to Classic > Customize Design and follow the instructions there. You’ll need to switch to one of our old templates first, but then you’ll be able to use the Template Designer to pick a new one.


Tips from the Blogger Team
  • Get your links to match a background image quickly by using the Background panel’s “Main color theme” to adjust all of your blog’s colors at once. This works particularly well with Simple’s second design.
  • With a three-column footer, you can fit in several gadgets to interest your readers after they’re done reading your post. For inspiration, read Derek Powazek’s post, “Embrace your bottom!
  • If you’re using our new Pages feature, put the Page List gadget in the wide section at the top of your blog. We’ve added unique tab designs to all of the new templates.
  • Many of the patterns in the background image picker are semi-transparent, to let your blog’s background color show through. Look for the “transparency page curl” to see which patterns these are.
  • The Attribution gadget (added to the footer by all new templates) is there to give credit not just to the designer and artist of the background image, but to you as well. Edit its settings by clicking “Edit” on Layout > Page Elements to add your own authorship or copyright information.


Get Involved
  • Show off your new design on Twitter by tweeting your blog’s URL with the hashtag #newbloggertemplate. We’ll be looking for creative designs to feature in upcoming blog posts or as Blogs of Note.
  • We’re taking feature requests. Let us know what else you’d like to see with our Google Moderator page.(And don’t worry: uploading your own background image is already filed and at the top of our list!)
  • To report bugs or discuss the Template Designer in more detail, start a thread on our discussion forum. Include “Template Designer” in the subject so we’ll be sure to see it.
  • Do you design templates for Blogger? Join our template designer group for documentation and discussion on working with the new templates, as well as details on how to get your designs into the Template Designer.
Over the coming weeks and months we’ll be adding new features, templates, and images guided by the feedback we hear from you.


Miscellaneous Notes
  • The Template Designer is not supported on Internet Explorer 6, nor, for that matter, are the new templates. While we’ve made an effort to ensure that they’ll still be readable, the new designs are not going to look particularly attractive on IE6. We strongly encourage the very small number of bloggers and readers still using IE6 to upgrade to a more modern browser. For more information about browsers, visit Google’s What Browser? site.
  • The rounded corners and drop shadows used in several of the templates may not be visible in older versions of some browsers. Opera users will need to wait for Opera 10.5, currently in public pre-alpha release. IE7 and 8 users will not see these effects within the Template Designer, but will see most of them on the live blog itself.
  • From within the Template Designer you can only move gadgets around, you can’t add, delete, or change their settings. Those features are still on the Layout > Page Elements page.
  • Some gadgets, such as Poll, Reactions, or third-party Google Gadgets will not reflect color changes in the live preview but will after the template is applied. Others, such as Followers and AdSense, will not change colors automatically at all. It may be easiest to remove and re-add these gadgets to refresh their palettes, though you could also tweak the colors by hand by editing their settings.
  • Customizations to widget templates will be cleared when applying a new template to preserve the new layout. If you have made changes to your widget templates, save them first by going to Layout > Edit HTML and clicking “Download Full Template.” You’ll be able to copy them back in as needed after you apply your new template.
2013, By: Seo Master

seo Recommended Post Slide out for Blogger 2013

Seo Master present to you:
Recommended Post Slide out for Blogger
How to add the Recommended Post Slide out Widget, You know those popup messages that slide out from the bottom right corner once you’ve almost reached the bottom of the page? Well, they used to be available only on WordPress but not anymore; now Blogger users can enjoy it too! The Recommended Post slide Out Widget is an invitation to the reader to read any other post once he has read one of your blog entries.

Demo of the Slide Out

Scroll down to the bottom of the post and you should see the Recommended Slide Out.

image

Add the Recommended Post Slide out Widget

To add the widget to your blog, you can use this one click installer.


Customizing the Recommended Slide out

1. End Of Post marker – The slide comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id bpslidein_place_holder
e.g.: <div id='bpslidein_place_holder'></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template.
In your template Find,(You will have to expand the Widget Templates)
<div class='post-footer-line post-footer-line-1'>
or
<p class='post-footer-line post-footer-line-1'>
or
<data:post.body/>
Immediately below any of these, add the following snippet and save our template
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>
Now when the reader scrolls down to this div, the slide will open up.
2. Customizing the Look and Feel of the Slide out.
You can obviously style the Recommended Slide out. But before you do that, you have to add this variable definition to your template
<script>var bpslidein_custom_css=true;</script>
This should be added somewhere above the Slide Out Widget. If this variable is not set, a default StyleSheet will be used to spice up the Recommended Slide out.
Once this variable is set to true, you can add your own CSS definitions. You can add your CSS at Template Designer > Advanced Add CSS
This is the default set of Style definitions applied to the Widget. You can modify them and use it.
#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}
3. Other Stuff that you can edit
You can edit the Title of the Widget and the Loading text by editing the Widget Content.
2013, By: Seo Master

seo Create Breadcrumbs On Blogger - Breadcrumb for Blogger 2013

Seo Master present to you:
Create Breadcrumbs On Blogger - Breadcrumb for BloggerHow to create breadcrumbs for blogger? How to Make Breadcrumbs Menu ?
Breadcrumb for Blogger Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

The trails like Home » Label » Post Name are the breadcrumbs.

Here is a screenshot of a Breadcrumb Trail



Now that you know what a breadcrumb is , let us get into the details of adding the same to your Blogger Blog.

1. Go to Template > Edit HTML and  check the check box which says Expand the Widget Templates.
2. Now in the Template, Find
<b:include data='top' name='status-message'/>
and immediately above that, paste this line of code
<b:include data='posts' name='breadcrumb'/>
3. Now find
<b:includable id='main' var='top'>
If you find two occurrences of this, then locate the second one(locate the only one otherwise) and immediately above that paste this code snippet
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove those 2 green lines of code.
4. Save the Template
5. If you want to make the breadcrumb smaller then go to Template Designer >Advanced > Add CSS and add the following Snippet there and Apply the changes
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Now you should have a working breadcrumb navigation on your system. The original breadcrumb idea is based on Hoctro's Code from HOCTRO  breadcrumb hack. It has been modified to accommodate Search Pages, Label Pages and Archives.The post breadcrumb uses RDF breadcrumb Markup to assist you in displaying breadcrumbs in Google Search Results.
2013, By: Seo Master

seo SEO - Optimize Meta Description 2013

Seo Master present to you:
Blogger SEO - Optimize Meta Description
Blogger SEO - Optimize Meta Description for blogger - SEO Meta Description Optimization Blogspot.

WHAT IS META DESCRIPTION

If you use Blogger custom templates, most likely you might have seen/added meta description tag in the head of your template;



<meta name="description" content="Template, tutorials, and articles to help Blogger users build a better Blogger blog" />
You can see the <meta> tag defines a description of a page. Search engines will use the text inside content attribute, in this case "Template, tutorials, and articles to help Blogger users build a better Blogger blog", as metadata when indexing that page. However don't get wrong here: Google itself doesn't use meta description tag to rank your pages. The only thing the metadata does is show up under the page title in search results.


META DESCRIPTION AND SEO

It does make sense but nothing to do with rankings. Aside showing the most relevant results for particular keywords, Google aims telling a searcher what the content is about on a web page. Providing a summary of the page on the SERPs supposes to help the searcher saving his time looking for the right information. Here meta description tags will play their role.

There are a lot of webmasters that misuse meta description tags to spam the SERPs. To promote their brands or services. They start stuffing keywords in the description to feed web crawlers and hope winning content relevancy. So basically meta description tags have been ignored when Google has started looking at the actual content of the web pages.
If the meta description is not present, search engines will display 150-character summary from any parts of the page content. I also noticed a few times that the summary came from visitor's comment.

Furthermore nowadays most social media sharing tools also will pick up meta description tag (if available) as a snippet - A very brief and concise summary (1-2 sentences) of your page's content. If not there, they will grab your contents directly.


INCREASE TRAFFIC WITH META DESCRIPTION

So why we should optimize this web feature?. Because having a page ranked on SERP isn't going to get you anywhere if no one clicks on it.

Meta descriptions for your web pages can improve the chances of your site being clicked on.
2013, By: Seo Master
Powered by Blogger.