Style Popular Posts Widget cho Blogger (Blogspot)

Bước 1: Đăng nhập Blogger ~> Vào Bố cục ~> Thêm tiện ích bài đăng phổ biến (Popular Posts)
Bước 2: Vào Mẫu ~> Chỉnh sửa HTML
Chèn đoạn code CSS của Style mà bạn thích vào trước thẻ ]]></b:skin>

.PopularPosts ul li a {font: 13px verdana; color: black;}
.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}
.PopularPosts .item-thumbnail img
{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 30px/10px;
-webkit-border-radius: 30px/10px;
border-radius: 30px/10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

Posted By Unknowntháng 10 24, 2017

0

Continue>>

Tạo Breadcrumb đơn giản chuẩn HTML5 cho blogspot

Breadcrumb là một tập hợp các đường link có phân cấp để người dùng biết mình đang ở đâu để từ đó dễ dàng hơn trong việc sử dụng website. Nghe thì có vẻ phức tạp nhưng thực ra nó là cái dòng: Trang chủ » Blogspot Tips » Breadcrumb đơn giản chuẩn HTML5 ngay phía trên tiêu đề bài đăng.

Nếu blog của bạn chưa có Breadcrumb thì bạn nên thêm thành phần này vào ngay vì nó rất có lợi cho SEO và thân thiện với người dùng. Cách làm lại cực kỳ đơn giản.

Bước 1: Vào chỉnh sửa template rồi tìm đến dòng: ]]></b:skin> rồi thêm vào phía trên nó code css sau:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

 Tiếp tục tìm đến mã này:

<b:includable id='main' var='top'>

 Thay thế nó bằng code bên dưới:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb trang bài viết -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Trang chủ</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span>Khác</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb cho trang nhãn và trang tìm kiếm.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Lưu trữ cho <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Bài viết cho nhãn <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Posted By Unknowntháng 10 21, 2017

0

Continue>>

Tạo sitemap tĩnh cho blogspot

Ngoài việc đăng ký sơ đồ web trên google cho blog của bạn thì việc tạo sitemap cho blogspot cũng là cách mang lại 1 cái nhìn tổng thế cho blog của bạn.

Với sitemap được hướng dẫn ở bài này lại có giao diện sắp xếp rất khoa học. Nói chung là đẹp

Hướng dẫn tạo sitemap cực đẹp cho Blogspot

• Truy cập vào trang quản trị Blogger: https://www.blogger.com
• Vào Trang (Page), tiếp tục tạo trang mới cho sitemap (New page)

Chuyển chế độ soạn thảo sang HTML và copy đoạn code bên dưới dán vào

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:normal;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:normal;font-style:italic;}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script>eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 3=F H();2 u=F H();2 w=F H();2 q=F H();2 6=F H();2 y=F H();2 7="L";2 17=1s;2 27=2P;2 E="";2 1a=0;r 1Q(a){r b(){4("A"1H a.1i){2 d=a.1i.A.v;1a=d;D=0;B(2 h=0;h<d;h++){2 n=a.1i.A[h];2 e=n.O.$t;2 m=n.23.$t.1x(0,10);2 j;B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="2c"){j=n.M[g].s;U}}2 o="";B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="1Z"){o=n.M[g].s;U}}2 c="";4("16"1H n){B(2 g=0;g<n.16.v;g++){c=n.16[g].28;2 f=c.1v(";");4(f!=-1){c=c.1x(0,f)}6[D]=c;3[D]=e;q[D]=m;u[D]=j;w[D]=o;4(h<10){y[D]=13}I{y[D]=1s}D=D+1}}}}}b();7="L";P(7);19();17=13;1r();9.x()}r 1O(a){1F(0,0);E=a;K(E)}r 1n(){19();E="";K(E)}r P(d){r c(e,g){2 f=3[e];3[e]=3[g];3[g]=f;2 f=q[e];q[e]=q[g];q[g]=f;2 f=u[e];u[e]=u[g];u[g]=f;2 f=6[e];6[e]=6[g];6[g]=f;2 f=w[e];w[e]=w[g];w[g]=f;2 f=y[e];y[e]=y[g];y[g]=f}B(2 b=0;b<3.v-1;b++){B(2 a=b+1;a<3.v;a++){4(d=="L"){4(3[b]>3[a]){c(b,a)}}4(d=="15"){4(3[b]<3[a]){c(b,a)}}4(d=="1g"){4(q[b]>q[a]){c(b,a)}}4(d=="R"){4(q[b]<q[a]){c(b,a)}}4(d=="1w"){4(6[b]>6[a]){c(b,a)}}}}}r 19(){7="1w";P(7);2 a=0;2 b=0;S(b<3.v){J=6[b];T=a;1p{a=a+1}S(6[a]==J);b=a;1j(T,a);4(b>3.v){U}}}r 1j(d,c){r e(f,h){2 g=3[f];3[f]=3[h];3[h]=g;2 g=q[f];q[f]=q[h];q[h]=g;2 g=u[f];u[f]=u[h];u[h]=g;2 g=6[f];6[f]=6[h];6[h]=g;2 g=w[f];w[f]=w[h];w[h]=g;2 g=y[f];y[f]=y[h];y[h]=g}B(2 b=d;b<c-1;b++){B(2 a=b+1;a<c;a++){4(3[b]>3[a]){e(b,a)}}}}r K(a){2 l=0;2 h="";2 e="25 Z";2 m="11 12 2p 2s 2A";2 d="2L";2 k="11 12 1I 1J 1K";2 c="1L";2 j="";4(7=="L"){m+=" (1N)";k+=" (14 V)"}4(7=="15"){m+=" (1l)";k+=" (14 V)"}4(7=="1g"){m+=" (1l)";k+=" (14 V)"}4(7=="R"){m+=" (1l)";k+=" (1S V)"}4(E!=""){j="11 12 1Y 31"}h+="<1t>";h+="<N>";h+=\'<5 8="i-W-1b">\';h+=\'<a s="1c:1o();" O="\'+m+\'">\'+e+"</a>";h+="</5>";h+=\'<5 8="i-W-1d">\';h+=\'<a s="1c:1q();" O="\'+k+\'">\'+d+"</a>";h+="</5>";h+=\'<5 8="i-W-1e">\';h+=\'<a s="1c:1n();" O="\'+j+\'">\'+c+"</a>";h+="</5>";h+=\'<5 8="i-W-1f">\';h+="X 1M";h+="</5>";h+="</N>";B(2 g=0;g<3.v;g++){4(a==""){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}I{z=6[g].1v(a);4(z!=-1){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}}}h+="</1t>";4(l==3.v){2 f=\'<C 8="i-1u">1h 1R \'+3.v+" Z<G/></C>"}I{2 f=\'<C 8="i-1u">1h \'+l+" 1T 1U 1V \'";f+=E+"\' 1W "+3.v+" 1X Z<G/></C>"}2 b=9.Y("i");b.1k=f+h}r 1r(){2 a=0;2 b=0;S(b<3.v){J=6[b];9.x("<p/>");9.x(\'<C 8="20"><a s="/21/22/\'+J+\'">\'+J+"</a></C><1y 8=\'24\'>");T=a;1p{9.x("<1z>");9.x(\'<a s="\'+u[a]+\'">\'+3[a]+"</a>");4(y[a]==13){9.x(\' - <C 8="F">26!</C>\')}9.x("</1z>");a=a+1}S(6[a]==J);b=a;9.x("</1y>");1j(T,a);4(b>3.v){U}}}r 1o(){4(7=="L"){7="15"}I{7="L"}P(7);K(E)}r 1q(){4(7=="R"){7="1g"}I{7="R"}P(7);K(E)}r 1A(){4(17){K(E);2 a=9.Y("1B")}I{29("2a 2b... 1C 2d 2e")}}r 2f(){2 a=9.Y("i");a.1k="";2 b=9.Y("1B");b.1k=\'<a s="#" 2g="1F(0,0); 1A(); 2h.2i(\\\'i-2j\\\',\\\'2k\\\');">?? 1h 2l 2m</a> <2n 2o="1D://2q.2r.1E/2t.2u"/>\'}r 2v(){B(2 a=0;a<1a;a++){9.x("<G>");9.x(\'2w 2x : <a s="\'+u[a]+\'">\'+3[a]+"</a><G>");9.x(\'X 2y : <a s="\'+w[a]+\'">\'+3[a]+"</a><G>");9.x("<G>")}};9.x("<C 2z=\'Q-2B:2C;2D:2E;Q-2F:2G;2H:2I 2J 0 0;\'><a O=\'2K 1C 1G 2M 2N - 2O 1G 1m.2Q.2R\' s=\'1D://1m.2S-2T.1E\' 2U=\'2V\' 18=\'2W\'><Q 2X=\'#2Y\'>2Z 30 1P!</Q></a></C>");',62,188,'||var|postTitle|if|td|postLabels|sortBy|class|document|||||||||toc||||||||postDate|function|href||postUrl|length|postMp3|write|postBaru||entry|for|span|ii|postFilter|new|br|Array|else|temp1|displayToc|titleasc|link|tr|title|sortPosts|font|datenewest|while|firsti|break|first|header|Download|getElementById|Artikel||Klik|untuk|true|newest|titledesc|category|tocLoaded|rel|sortlabel|numberfeed|col1|javascript|col2|col3|col4|dateoldest|Menampilkan|feed|sortPosts2|innerHTML|ascending|www|allPosts|toggleTitleSort|do|toggleDateSort|displayToc2|false|table|note|lastIndexOf|orderlabel|substring|ol|li|showToc|toclink|TOC|http|com|scroll|by|in|Sortir|bedasarkan|tanggal|Kategori|MP3|descending|filterPosts|widget|loadtoc|Semua|oldest|artikel|dengan|kategori|dari|Total|menampilkan|enclosure|labl|search|label|published|postname|Judul|New|numChars|term|alert|Just|wait|alternate|is|loading|hideToc|onclick|Effect|toggle|result|blind|Daftar|Isi|img|src|sortir|radiorodja|googlepages|berdasarkan|new_1|gif|looptemp2|Post|Link|mp3|style|judul|size|0px|float|right|family|arial|margin|20px|5px|Blogger|Tanggal|Abu|Farhan|Style|250|intert3chmedia|net|abu|farhan|target|_blank|nofollow|color|ff5f00|Grab|this|semua'.split('|'),0,{}))</script>
<script src="http://vina4all.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

- Thay đổi link http://vina4all.blogspot.com màu đỏ thành link blog của bạn nhé. Ngoài ra các bạn có thể xem link demo ngay tại blog của mình nhé

http://vina4all.blogspot.com/p/sitemap.html

- Các mã màu mình đánh dấu bên dưới là màu nền của tên nhãn và template design

Posted By Unknowntháng 5 21, 2017

0

Continue>>

Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot

Có nhiều trường hợp xảy ra thường là nội dung khung bài viết hay phần trích dẫn code
Đoạn văn bản quá dài hoặc đường dẫn quá dài làm cho bài viết bị tràn ra ngoài khung. Trường hợp này thường là do copy bài viết tự một website khác dán vào bài viết, để khắc phục lỗi Text bị tràn ra khỏi khùng bạn làm như sau:

1. Đăng nhập vào phần quản trị => vào mục chỉnh sửa mẫu (template edit html)
2. Thêm đoạn vào trước thẻ  ]]></b:skin> đoạn CSS sau:

.post{word-wrap:break-word;}

 3.Trường hợp code khung trích dẫn quá dài ta làm như sau:

 blockquote{word-wrap:break-word}

Posted By Unknowntháng 5 19, 2017

0

Continue>>

Cách sửa lỗi H1: Zero that is really bad cho blogspot

1.  Đăng nhập vào Mẫu - Chỉnh sửa HTML
2.  Nhấn Ctrl + F và tìm code sau:  <div id="header-inner">

 Nhấn Enter lần nữa bạn sẽ thấy đoạn code như bên dưới

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId
+&quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width'
style='display: block'/></a>
</div>

3.  Sau đó ta thêm thẻ <h1> vào ta được code sau:

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId
+&quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width'
style='display: block'/></h1></a>
</div>

4. Cuối cùng là save lại và quay lại trang checkseo để kiểm tra nhé. Chúc thành công!

Posted By Unknowntháng 5 19, 2017

0

Continue>>