Một tiện ích hay có thể dễ dàng thêm truy cập cho blog của bạn bằng cách tự động gửi bài viết mới nhất của bạn vào email mà độc giả đăng kí.



HƯỚNG DẪN:

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm đến thẻ ]]></b:skin> hoặc thẻ đóng </style> và chèn đoạn code sau lên trên nó và Lưu Mẫu

/* Subscribe Box */
#thinhnd-subscribe{background-color:#2A3744;margin:20px 0 0 0;padding:20px;overflow:hidden}
#thinhnd-subscribe h4{color:#827459;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}
#thinhnd-subscribe .emailfield{margin:auto;text-align:center;}
#thinhnd-subscribe .emailfield form {margin:0;}
#thinhnd-subscribe .emailfield input{padding:10px;color:#bcc4ca;border:1px solid #03A9F4;font-size:13px;margin-bottom:10px}
#thinhnd-subscribe .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}
#thinhnd-subscribe .emailfield .submitbutton{background-color:#03A9F4;color:#fff;margin:0;font-size:13px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;transition:all .3s}
#thinhnd-subscribe .emailfield .submitbutton:active,#thinhnd-subscribe .emailfield .submitbutton:hover{background-color:#e0594f;color:#fff;}

Bước 3: Chèn đoạn code sau vào chỗ bạn muốn Khung Subscribe Box hiển thị

<div id="thinhnd-subscribe">
<h5 style="text-align: center;">
<span style="color: white; font-family: Arial, Helvetica, sans-serif; font-size: large;">THEO DÕI BLOG QUA EMAIL</span></h5>
<div style="text-align: center;">
<span style="color: white; font-family: Arial, Helvetica, sans-serif;">Xác nhận email để hoàn tất đăng kí !</span>
<br/>
<br/>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ThinhNd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Nhập email của bạn...&quot;;}" onfocus="if (this.value == &quot;Nhập email của bạn...&quot;) {this.value = &quot;&quot;;}" type="text" value="Nhập email của bạn..." />
<input name="uri" type="hidden" value="ThinhNd" />
<input name="loc" type="hidden" value="vi_VN" />
<input class="submitbutton" type="submit" value="Đăng Kí" />
</form>
</div>
</div>
<div style="clear: both;">
</div></div>

Thay ThinhNd (chữ in đậm, màu đỏ) thành url feedburner của bạn

Bạn có thể xem hướng dẫn cách  lấy url feedburner cho Blogspot/Blogger tại bài viết: Tạo hộp Theo dõi qua Email cho Blogspot

LỜI KẾT

Trên đây là 3 bước tạo Khung Subscribe Box cực đẹp cho Blogspot giống Thịnh ND đang sử dụng. Chúc bạn thành công. Xin cảm ơn!

Phân trang giúp blog của bạn trông đẹp hơn, hiện đại hơn, điều hướng dễ hơn khiến người đọc có cảm tình với blog của bạn. Vì vậy hôm nay Thịnh ND xin hướng dẫn các bạn Tạo phân trang cho Blogspot - Style 1.



HƯỚNG DẪN:

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn code sau trên thẻ </body>


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var postperpage=10;
var numshowpage=4;
var upPageWord =&#39;&#171; Previous &#39;;
var downPageWord =&#39;Next &#187;&#39;;
var urlactivepage=location.href;
var home_page=&quot;/&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
//]]>
</script>
</b:if>
</b:if>

Bước 3: Tiếp tục chèn đoạn code sau trên ]]></b:skin>


#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link{width:80px;text-align:center;display:inline-block;color:#fff;font:bold 12px Arial;text-transform:none;margin:0;padding:5px 5px;background:#555;border:1px solid #111}
.blog-pager,#blog-pager{clear:both;font:bold 12px Arial;text-align:center;padding:15px 10px}
.showpageNum a,.showpage a{background:#fff;text-decoration:none;white-space:nowrap;color:#222;margin:10px 3px;padding:5px 10px;border:1px solid #999}
.showpageNum a:hover,.showpage a:hover{color:#fff;text-decoration:none;background-color:#444;border:1px solid #000}
.showpageOf{display:none;margin:0}
.showpagePoint{color:#fff;text-decoration:none;background-color:#444;font-size:12px;margin:10px 3px;padding:5px 10px;border:1px solid #000}

Bước 4: Lưu mẫu và kiểm tra
Chúc bạn thành công, cảm ơn bạn đã quan tâm theo dõi

Lại một mẫu trang lỗi 404 đẹp cho Blogger của Đăng Bùi được Thịnh ND chia sẻ lại trong bài viết lần này. Như mình đã nói ở bài trước Trang 404 là một phần theo tôi nghĩ là không thể thiếu, nó là công cụ chuyển hướng tốt nhất cho Blogger/Blogspot giúp website của bạn không còn những đường dẫn do không có bài viết hoặc không còn nữa!






Xem thêm: Chia sẻ trang lỗi 404 cho Blogger - Style 1

HƯỚNG DẪN:

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Thêm đoạn code sau trước </head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
body{background:#000;overflow:hidden}
canvas{display:block}
.promo-content{width:100%;margin-top:60px;z-index:1;position:absolute}
h1.h1cimy{margin-bottom: 10px;font-size:150px;text-align:center;color:#fff}
p.pcimy{font-size:50px;text-align:center;color:#fff;margin:0;position:relative}
p.pacimy{margin-top:20px!important;font-size:50px;text-align:center;color:#fff;margin:0;position:relative}
.acimy{padding:10px 16px;border-radius:3px;text-decoration:none;font-size:25px!important;text-align:center;color:#fff;margin:0;position:relative}
.promo-content .button{background:rgba(0,0,0,0.5)}
.button-outline{border:3px solid #cccccc}
@media screen and (max-width : 768px) {
.promo-content{margin-top:160px}
h1.h1cimy{font-size:170px;}
p.pcimy{font-size:33px}
p.pacimy{font-size:33px}
.acimy{font-size:16px!important;}
}
@media screen and (max-width : 640px) {
.promo-content{margin-top:130px}
h1.h1cimy{font-size:170px;}
p.pcimy{font-size:26px}
p.pacimy{font-size:26px;}
.acimy{font-size:15px!important;}
}
@media screen and (max-width : 480px) {
.promo-content{margin-top:120px}
h1.h1cimy{font-size:60px;}
p.pcimy{font-size:25pxpx}
p.pacimy{font-size:25pxpx;}
.acimy{font-size:11px!important;}
}
@media screen and (max-width : 320px) {
.promo-content{margin-top:80px}
h1.h1cimy{font-size:40px;}
p.pcimy{font-size:17px}
p.pacimy{font-size:17px;}
.acimy{font-size:12px!important;}
}
</style>
</b:if>

Bước 3: Thêm đoạn code sau dưới <body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class="promo-content">

<h1 class="h1cimy">404</h1>

<p class="pcimy">Oops! That page can&#8217;t be found.</p>
<p class="pcimy">It looks like nothing was found at this location.</p>
<p class="pacimy"><a href="/" class="acimy button button-outline"> Back To Home </a></p>
</div>
<canvas id="canvas"></canvas>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
eval((function(){var j=[71,72,66,82,85,60,74,89,79,80,81,87,88,76,65,70,90,75,86,94];var t=[];for(var l=0;l<j.length;l++)t[j[l]]=l+1;var m=[];for(var p=0;p<arguments.length;p++){var x=arguments[p].split('~');for(var b=x.length-1;b>=0;b--){var f=null;var o=x[b];var c=null;var k=0;var e=o.length;var i;for(var d=0;d<e;d++){var s=o.charCodeAt(d);var r=t[s];if(r){f=(r-1)*94+o.charCodeAt(d+1)-32;i=d;d++;}else if(s==96){f=94*(j.length-32+o.charCodeAt(d+1))+o.charCodeAt(d+2)-32;i=d;d+=2;}else{continue;}if(c==null)c=[];if(i>k)c.push(o.substring(k,i));c.push(x[f+1]);k=d+1;}if(c!=null){if(k<e)c.push(o.substring(k));x[b]=c.join('');}}m.push(x[0]);}var u=m.join('');var w='abcdefghijklmnopqrstuvwxyz';var q=[10,92,96,39,126,42].concat(j);var g=String.fromCharCode(64);for(var l=0;l<q.length;l++)u=u.split(g+w.charAt(l)).join(String.fromCharCode(q[l]));return u.split(g+'!').join(g);})('var _$_ef28=["13372D84@u205C1071DH455HqE995@uH*Hk71@uH45HJDGEEH80BT107HJ@iHK35CB@D1019E999DG0C775@iGKvBBH1CGc11C1H>063C775@vGRB>BSG@87@vH(775CGKu1BLGb39EGg59D775DGn@vH%1G{5@u1027Hyi63HUu1HD067H\'CH8B#GBBU039EBCHhvG@39GfuGPEGdBHGrDG,vG5@uHw047GXBQ1B%7G-u963D971C835EGKiG4@vG5Gy0BI1HzHi1Hs999E727CGQ@i1G`u1Ga@vGq@u795@i791D775@iHQ9BRDHI63HnEGKiG @v1GsCH8043D1067H\'@i1HE27@iG7i1BFBP1GaD891H/@iB!GLE795BRB\'DBC803@v7BOGkE835CGrCG35@vGb59CH-79B.iG7vB@CH|i999EG4GN87CGmHJ@iB(71CH)95HyvGMG0EH{1G2083EG(Hl5CH(Gb11Hl5D1HE27C787H7799H7771GW95HnCGMHjG!@vHABQH455B @vHmH&727@u843EBC10BHH+79@i831GjB@C101B6@iG4H\\87GN99B\'HS1BEi831GjBB@vHmGb11CBBD1BQH;87CHQ9CGd99BD@iGlEGD5@vG5CB0B&GA5HpH[@i843EGm1BD@uGnCGe15EGcGzDH,Hx011@iHhi100GUGQD791HyiGrEG D1GI@v1B%1067H1DGHCBCGDH^B?27B.iGSD811HrCG%63CBBEG5@uHABW1H:07EHi7G-v795HyuGOG0@uGA59CH-67E1047CB*H*63Gfu859H/B HoEHiGJBDDGnG&@vGA59HTB,047EB*HL063CH0871CGbBVH%GPHWi639CH}i6H]H6DGc39EBAHTHz1055@u1B)Gh43DH%1BEvH5H(H.059CH&H01047B-843HYHDHO039HuEGCG\'@u75H3E1019CHI6GU1091EGMGD5DG@59HTG:v771DG7u907@v987DG4EB0995E1H<59DG.063Hl5EGcGvuH4Hk11DHhi100GU7H[E767H?HjG!DHA059CH5Gg03@u999DG8uBNG0CH{1G2BEv7H"@uGw7EH#@vGe15HT059CGB39@iGLEG35@uG@GzDH*39C1011@iHhvH0G9vH)67H7G4@uG@BIH-59D1HzGF03E999Hn@uGEEGlCG4DG@59DH.B,047@i999E987CGe03@i871CG5E1B#GPE835CGrEHK35E1H:07D759H2vGe15@vG5C783HViGB59C10H[@u839@v72G+5@vG@59Gx10BSH5Gg03HVuGp@uG#@i635HPiG35@iGA59Gy079EGHHqE1B#G!@iH.063H$055B>11DGgBTH-79E8G/C635G&CH{1G208H9@i843B.uGC15DG@BSH-63CHL055B>11@uGF63Gy083CG8u635HPiG"B>GviHM015DH,Hk11DHm935CH455D1011CHCHEBV763HnDGMBGCG;6G/CG @u1GICH5B$G35DHABK106Ht59DBBC759DH+91CH+79E831H2iG4@vGB59DH-79@uGT@u1BEu831B7G C1G]C1083DGd99@vGkHn@iBNGOGc07@vGq@iG"@v1Gs@iH5B$G,uHwBWBAH\'B @vG,u727@v847H?GD5@vGAGzHuCGG67B>39DH&GkDGd91@vGl@uBNG @i1G<u1047@iB$G35CH.0BS1B%Gb07B>63EGPBDCG>BGDGKvG;GD5@vH|v1GI@uHhuG@07H1EB(79@i843CGm1C783D7BH7BH795HWiGMG;GA07@iGL@iG4CG5@iHvBWGc0Ht0HGv839DGw7BRGj763EBC10BHGED635CG,iGcGzD1BK987CGD5DGHDH+39C106Ht31HoB4vG>635H6@uG@39EHi1GIB?5Hp47CHhv1019EH8HsG.019B<CH;95CH;63EHN5DG6uBGD6Hx099@uHN9@i639HoEG@39CHmH.Hz1055D1B)Gh43EH&1083E1BKBAHTHO047@u999G}063CH(871CGBBVH&G*@u1HD067H\'C995DH%G@43E1039EGJCH+BOG6i1071@uH,55GjB2079B-G7uG0CH|i1G<i1063GX055B GfvH%HvG:v77HZG"B>Gvu1079B<CG6u635EB+BEvG(@u1G$C1GsDB!H*55Hl1EHi1063Gx1083H?779C727G&EG5DH-83@iG8uBNG35CG5Gu999CGc59EH&7G-i907@i98G+5@iHv059E1051B?55DH%Gq@v99Hp79EB(67HS99Hp7HZ771H_vB&1083EH)67HFB2BEiG9v8HBB?99E639E639E1BWGb39Gfv783EH51B8GG63EGG63B?83EH51HsHAB9Hz999CB$Gh03@u859H\'B H6CH0727C843EGd07@u1HO039C995CHjGABU039EGJEGd91G1E1071@uH,55DBCB+G:u84H9@iG0@uG@BIH-63EH*55Hl1Gfi1BQHAG:i77H3@vG"D1G]E107HJDG>635@vB+08H9CGw7CGC15EGc59C783DH&HL055D1011@vHC063CH-83GN7H3EG0EG@Gvv1083B4iGO1G$@u1G<v987H\'D1011@iHhuHiBCGQ@i907@v987DGD5@v783DH*63EH*39D799@G?DB&1BEiGTCB2079CGkE8HBD109HUu6Hk31DGb39@uH(H-47C1BFGGBT1043CHj1BEu1047Gfi783@vH8015CH*Hk11CH0935DHHHR011CHC06HGuGQ@v1HD067E1H @iHjGc43H/G\\3H?1091DGO1071DH455EH+55GXGa@v931DH&H455E1B#GHCGi55@vH*HaD891D1039@iHjB5HQ1C775HqE803@iGoHrEG6i1059EB@DGB63EHM015@uGqC1GYD1GZ@v931EHjH,55D1063GN63EG#@v6H`B/EH,59B>03Hg91E831DH)87@uGSB?6Ht47CHKH`@i6BMG"@i1G]E1063GX055B H1DHjB3108HGuG7iG E1GsE1083EHI7H3C10BIGb87CBAHWvGRC6H`@u991E1BFH(HH027HrDGEHPuB1HL059CHmGm5C831@v7H!CGS@u1HRH:11@v1H>063G1@i6H`CG4DG5DH.BQHe055Hl1CHC063CH.079CBC84HGvG4CGB59Gu1079H2i771@uGiBVG@87Gfi835G1EBN6BM991E1BZH(He027@u835CGlHPv99G_HdHsGm9@v831CH)87@iGSEB*GG75B>39EGn@v6H=5D1BQG!@uH-63GX055B EHmH%HwBEiG(DG C1GsB>83Gj771@vH+59D1H:87@uH(835@iG;6H=5D991D1BFHmHH027@v8G/@u635E995H$059EBACBJ803@i831CH)87C787EGi31@vH(1007EHjGEC6H=5@vGe15EG5CHv063G}BF1011CH01HE83E1G:v843B71G$D1GIE1G:u779EBJ1059EGc87CHi835CG6uBGEGMH&G!@vH.B9BK999EBPGh03@u859H/Hl1EHhuH(759E763DHNHp99Hyv6H]CHhvGA39GfvH.04Ht55B>43EGh43EH%1083C1BKBAGuB*1GYCB@H2u843HYHDB,H D1B#GB43H/@uGLDH{Gp@vH+91@vGRE995DGe79E783C991CGF11CGb39E919DBPG35D759D7BT835DGrC1071@vH,55@i727C1GYB>39DB2043Gj84H9E1BZBP1GZD759GWBH775GN95BRDGkB4uGKv1007DGG55D75H3D1071@vH,55@iH+23CGHEBJB:75H?1031CGFHx011DG0HFGQDGe15@uGA59Gu1HzBPG35GxHhuGgHx011@uG,v835CGi2H9@u839@uH+31EBAH\'Hl1@uGe15BDHqB>23@u771@v7BXG9iBJ1091@vGrDBN995CGh79C963Hg59Gj102GU843D843DGw7BRDH)H[D851CB(55B?35E1H<71DH09BMH@755H7831GW55@uHhvG@Hk03C9BMH@755D727@i9BXHX7@iG35DGb59CHvBK987@vG,v963@iGd23B-971DHw079E7H"DGi5G_03B6EGqC779D1G=v1039D999EH@GTD1G`i1039HVvH@G9i775D72G+5DH{1GIE1047EB$Ge15E96HGv102HGv971DHv083Hc771Hq@u1G=u10HaEGLE779D1G`u1GZ@u1043D775EGi55GXGZB?43CGoDG9i8BMG;BGDGO995@uGC79@vHw059DH%1HRB)1027Gfi931EH&1083H6EH0GHH?755CBBB"H6@iB$7BS755Gj771H2v1G`i1Ga@G?@vG4@iGA59CH.015C1067EHm775EBC1G$E1GI@v1H>067H1GVBX727C803@u791DGkCHI71@uHI55C775H2v823@v7BO747B<CBC811E811C747E775Hg55E7H"H_vG.0BT1B%H|u1G<i1BWGc07EHmBJGS@i803EGpH7771DH;55@v763D755Hr@uGEEB=H%1G[H6@vGc39DH(947DH{999DG0B7G7v1BZH,Ha@v759H\\91EB0795E775GV99@uGkHWvGEB/EH&1079EHA059DGh55C1H<2Ht03CGtDG8iH}i8HB@i639@u1007C1067E1039HuDHjGc43H/H2u1G|C1GZEHX7D1035DGA39B\'B71G^B>79CGoCGdBOGKv1B8GF63B?67E1055H/HFH#@uG,uHwG|E1GZD1H<35@i7BV76H9E767@vB(59B-1G^E1079HF779@uGd35C1H:39EGoC7H"HS10BMGB39@i8H=9@u109HUi639E1HfB9039B/DG39@vGGHbD1B8987H\'DB*891D10Hx063DGqB>35CGB39B<B.v1G^E1079CH)63DH+BOGnB>55CBACGC6Ht55H\'HS907@iBPG35DHvHfBL1B)H@1BFGqE10BMGcHbE771B.u907C987CGD5C783C1G|E103B6D1043D10BMGtH7767@vH)59HY03G_07HZ779CGi35EGb39EH;BXGm5CG9vGpDG8vBGD8HB@v6Hk07D1B,H DH%10G\'DBCGB39CGb63EGJHY091EGKu995C987H\'@u10BXH,59HqCGQCB&1043HuC1067B?35DHi10HxHE83C1011DH(1B#875HoCGg35@iGgBYBQ863E1BEu8BHB*759DH)55@iB=987H\'D1071EH,BI755CGoHrEG>995CGC7H3DGQD995CH*39E1071G}0Gvv1011EHiH&867B>BU039EGh03D1079@uB!GLD755@u799@u999C755GV63HnG1B"E1H:87Gfu727C84H9@u803E791BDDG%31@vGb39CGF59EGHEBJ9BT971HWuG%55EGgBSHmH%759E763@i8G)HoE1H<BUBKGP@vHN9@vH}v63HUi1007B?67H\'EB=H%GB43H\'@uGd55DGgBSH0B!GJCGi91CGEEB@C1G{9G&D7G-uH#EGD5@i783B;1HsGA31DG.075EGbHa@iGG75DB0G@39H/Gfv1055@u947Hl9@i999DG35@v7H!@uGm9GN6H9C767GW99HyuGlCBBDBACGc11B?15CB!GHHq@v907C987G&CB0995D1HsGB31C75H3DB@D1H:39HViH@B@CB3G@39C1039CGg55E887H1CGc11EBBEH&BJ787H2u799GV63GV67Hc799C835EGOHj101H^D1027@vG*@i791BDDG6iGnH6@vG@39EH(1GsHoH1E10Hk11@uG4CG(BRD8H=5EGRC995DHe0Hk71H$059Gy075HlB6@iG0HqE843DH+75C1019CB&G0HyiGM995CH43Hp71CHHG<u1H>003CGb11Hl5EB!GHDGd15B>03CG@11E1B%H&8H=9@vH}i639C6Hk07@i1B903H^CH%10G\'H_vHMBFHi987CGh03EGJ@vG#C635EGb07@uHX7DGC19B;1027Hc747H7795CB:27E843@u843C84H9BRH776GU1091CBN6G)EBNHhuGA39@uGg59Gy047E1067B?59DBBDGLH\'@uHC075HF1BLGbBYHsGtC763HrDGl@u109HUiBGE6H]E1Hf067H\'E995EGe19CH@103H3B"@vH&Gg47@iGt@uGiBHG%BXHeBFGi19HqCGw7E1BL1H:39DHCG]DHhiGFHx011@vG4BD@vGlB?75DBBDGA31DHiHX7CH|u779D779EGpGj10BHG6i635B?31CGB39H1B"@u963CGi19D727@u9BXHw059CGh03@i1HzB5Gd19@uGo@u8H=5@uG>H}u639CBGC639C6Hk07C1HO03H^@uH%Gc43D10HbD995HoDHiH,55EGP@vBJ1091CGEHuCH&1G[Hl1EHhv1043C991@vH*31D867EGG35E1047E1043B"@iGb63EHi915@iH5GF55@v98G+9B>43H/DG*@u755HVvHi1059EGD9D1039E987@vGCG\'E779@uGG67@vH&755D8G)CHM063C1079@vHv007@uGA31HoD931@vGh83@u1BWBACGHGj755@u1H>Hd031@iB$7BI7BOGT@u791@v747B\'HF791C747C775EH;91D783@v795@u755Hr@iGrC995EHj1G[B>07EGA31DHhi927CHi995@uH%B5Gm1EGT@v791EGTDB@@iH{B&Ge15B\'CGd15@iGF19C1011EBBE1B#GpB4vGEDB1GC79@iH-11@u1BL1B)991H$BL867E1B)1035CH51H<BIGbBT1Hs915@u1BKHCG=iB!G@43H\'Gj843CH)55H6DGA11@i1B%Ge03E1B8755C8HBDH}vHKBYHDHO039B;GD9E10BU0Hb@iB+G=iB@G\\3DG#HPv995EGh79Gu10BVHH071H1DGtHnEGlC995DGC79EB3H%1GYC10HxHdBWBPGe03C75H3CB@@v1G{9CG4D7H!Hg9HJCGd15EHmG@11D1H>063GN87EHQ9@vGkHrCGMB1Ge79CHwBZ1043EH%BPGh03D75HZG39CB=1027EB(67CHQ1GxB:BO795@uGoBDEGEC1071EHLBZGi59E995@uH,31C100GU843DH)91DB3823GW71H_iH#CGC15E783DHMH<BI759H7GD9B/D1027H\\67GW91GxB:99DGpDH)67DH;91Gu799HnCGnHuEGe79@uH.059CB1H431H1EHX7B"E99G_BLH0775@iGd59HuDHH031GfuGoHn@vGRCB1GC79EB3Hj1G|C10Hk59HoD987CH%BAC759DH;79EB@@i1G{9@uG0CBJGS@i799B\'H\\79DBB@uH(Gb11E1B%1HEH!DGmH3@i763HyuG%71G}055H?H|iG*DHhvGB39DHi1G2BLHi10Hk11CGD5HnCGEEB@DBBDGc31DBA@G?DH|i779@v779DH)63H2v1091EGO635H6CGB39@vGgBV963@vH+19D727@u971D783@vB+GYB?75@vGLE1019GV63HrD635CGnCH}iHK35B;1BQ1G[C1HR003B"EGC43D1BZH(GJEHN9CBGE6H]E1007D1B,H CG3HpBU039CBCHhuGG43@u1HzGtHS10BOGlB>55EGF51C1067@uGF59DH%859H/E1019C1G^DHjGb43E1039E879C1G=u1035CBA@G?CHhi1H<BU047EGkBDG1DH8HR003EH*63CBAG\\3D8G/D1Hd063Gfv1047@iGJ@u835DGE@vH8031GfuH*55C759E763D8G)@uB2GYCB@@uGJ@vG8u635CGC19B/E1027D771C771D8HBEBGD639C639D1Hf067H\'Hu@vG3Hp43D1039H2v1043D103Hp55DGF59EG@8Ht03G\\3Hc1091CGR@i1BFGgBIGF63EGPBDC6HB@v~G0@i1019~1015CGA59~Ge15D1019~Gd91E639~063DBBE1019~GE@i10~@iGC15~19C1H<39~727EGQ~H=9@v635~727@u843D727~7@vG3~GC15@~27C84HG~75H3@i1~35CGR~H%1015~@uGR~0Gvi1~H&101~Hj1015~1H:59~HK35@~Gw7@~835@i639@~H;63@~07H3@~Gn@u~G]@~055@v987@~Gn@i~uB5727~101Hp~H|u10~H|v10~1B#10~Gh1~639@u635~1Hs10~1043B>~727@v843~0BS783~7BS763~Gr@~759Hq~GnE~@iH)~GnD~B5763~843@v727~639@i635~787@v727~775@v727~3H2i~@uH)~@uH;~@iHH~055@u987~039@v999~079@i783~E7BV76~0BI783~0BM987~5@v987D1~BF987@~039@i999~H{10~1019E10~72Ht~1BQ10~H1@~BAC10~B!10~727B?~H_u~BC763~639C635~HI9~639D635~BJ763~B(63~759E727~639E635~059D783~759C763~@uB3~59E783@~843@i72~@vB3~CHA~BV783~019@v99~055D987~CHe~039D995~27@i787~27@v771~907E987~@i987C1~1063@i~10BT~B?39~BA@v~727@v7~BP10~727C10~987D10~783C10~783@v1~@u1039~BA@i~B?03~@i727@~9@v727~987C10~1047@u~B>31~@iBC~995@u1~3Hq~019C10~727@u7~043E10~BM63~015@u1~@iBJ~1043@u~B01~35E639~Hm1~007@v1~B#7~HqD~3D727@~B$1~727@i7~9@i775~639@v6~987@i1~B11~835C63~067@v1~@v635@~B(9~B81~C727@v~EHw~9C639@~@u999@~@u835@~759C72~CBJ1~9D727C~63C727~B-7~39D639~9@i995~@v727@~35E635~39E999~39D727~@vBC~0BV1~987@v1~007@u1~DBC7~1031@~BAE~1063C~39D10~@u101~BAD~@i835~C1031~9B?~@u727~@v835~003@u~7@u10~@v995~783E1~783D1~39@v1~E835@~047@v~1019D~1019@~BG@~E1011~1063D~D1059~063@v~987@u~015@i~999@u~@v775~727C7~043@i~999@v~999C1~067C1~DBJ~E727@~@u995~783@i~995@v~999E1~783@u~C835@~7BI~9C999~C727C~055@i~067D1~791E7~E995C~@u775~995@i~@v10~@i10~1075~1003~1015~727D~D835~083@~055C~1099~91@i~59@i~727E~047D~031E~35@u~635D~91@u~987E~063E~C791~59@v~63@u~43C1~59@u~031D~71@i~39E1~055E','1099D639C639E1075@u1019E1039D999D1043@i1075@i783@u987@i999@u999@i875D1071E1003@u103G&63@i903C1019D1059C1063G(03C1039D1003C1055C759@i727@i755E1055C1003G(5G&1G&87E1003E755@u775C727@i1043C1039E1055G(03G(59E101G&87G(03C727C763E835E639E639C1019G(3G&19G(63@i759@u763@v835D","length","char@ut","split","fromCharCode","G+6880G+6230=_G,G+2803=_8418G+G*=_2803"G#6736G$G.G!0G#8010=/[G)1G)2G)3G)4G)5G)6]/G$G-=2G$4504=_G.[G"2]](_G.[G"1]]-1)G$G,G$5285=_G.[G"3]](_8010)G$4211=[String[G"4]],isNaN,parseInt,String];_5285[1]=_4211[_G-+1](G 1])/21)G$8418=(_G-==7)?String:eval;_G,G!5];_11=G 0])/G 1]);for(G\'=3;G\'@l_11;G\'++){_G,+=(_4211[_G--2]((G G\'])+G 2])+G 1]))/G 1])-G 2])+G 1])-1))}G$6230G!6G#8506G!7];function G%a){_8418(_2888);G%_G*);_G*(_8506);G%_6230)}var _2888G!8G#G*G!9];G%_4504)~_4211[_G-](_5285[~=G"~_$_ef28[~]G$~;var _~_2803(~9@i10~_6736~@v10~@bx4~1017~","_~2366~1347~7960'));
//]]>
</script>
</b:if>

Bước 4: Lưu mẫu và kiểm tra


LỜI KẾT: 

Trên đây là 4 bước giúp bạn có một trang 404 đẹp. Chúc bạn thành công nhé,xin cảm ơn bạn đã quan tâm theo dõi.

Ở bài trước mình có hướng dẫn các bạn Chèn liên kết vào khung bình luận Blogger thì ở bài này Thịnh ND xin chia sẻ cho các bạn 2 cách ẩn comment khi có chứa liên kết cho Blogspot. Nhiều người spam trên blog cá nhân của bạn khiến bạn khó chịu phải không? Vậy hãy áp dụng cách này nhé.



HƯỚNG DẪN:

Cách 1: Sử dụng CSS

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm tới thẻ ]]></b:skin> và chèn đoạn code sau lên trên nó

.comment_body p a {
display: none;
}

Bước 3: Lưu mẫu và kiểm tra.

Cách 2: Sử dụng đoạn SCRIPT

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm tới thẻ </body> và chèn đoạn script sau lên trên nó

<script type='text/javascript'>
//<![CDATA[
//Block Link Comments
function blockLinks(e,t){var n=document.getElementById(e),r=n.getElementsByTagName(t);for(var i=0;i<r.length;i++){if(r[i].innerHTML.indexOf("</a>")!==-1){r[i].innerHTML="No more <span style='background-color:rgba(255,255,255,0.3);color:#fff;padding:4px 8px;border-radius:3px'><b>live link</b></span> in this comments field";r[i].className="spammer-detected"}}}blockLinks("comment_block","p");
//Pre Comments Box
function cdClear(){var e=document.getElementById("codes");e.value="";e.focus();document.getElementById("cvrt").disabled=false}function cdConvert(){var e=document.getElementById("codes"),t=e.value,n=document.getElementById("opt1"),r=document.getElementById("opt2"),i=document.getElementById("opt3"),s=document.getElementById("opt4"),o=document.getElementById("opt5");t=t.replace(/\t/g," ");if(n.checked)t=t.replace(/&/g,"&");if(r.checked)t=t.replace(/'/g,"&#039;");if(i.checked)t=t.replace(/"/g,"&quot;");if(s.checked)t=t.replace(/</g,"&lt;");if(o.checked)t=t.replace(/>/g,"&gt;");if(t.lastIndexOf("\n")!=-1||t.length>40){t=t.replace(/^/,'<i rel="pre">')}else{t=t.replace(/^/,'<i rel="code">')}t=t.replace(/$/,"</i>");e.value=t;e.focus();e.select()};
//]]>
</script>

Bước 3: Lưu mẫu và kiểm tra

LỜI KẾT:

Trên đây là 2 cách ẩn comment khi có chứa liên kết cho Blogspot được tham khảo từ nhiều nguồn. Chúc bạn thành công nhé. Xin cảm ơn bạn đã quan tâm theo dõi!

Xin chào các bạn, hôm nay Thịnh ND xin hướng dân các bạn Chèn quảng cáo vào dưới bài viết đầu tiên cho Blogspot. Nó có thể hiện ở trang chủ,label, trang kết quả tìm kiếm.


Xem thêm: Cách khắc phục lỗi không hiển thị hình ảnh cho Blogspot

HƯỚNG DẪN:

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm đến thẻ

<b:include data='post' name='post'/>

và chèn đoạn code sau xuống dưới nó


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:post.isFirstPost'>
<!--Ads Here-->
Chèn mã quảng cáo của bạn tại đây
<!--Ads Here-->
</b:if>
</b:if>

Bước 3: Lưu mẫu và kiểm tra.

LỜI KẾT

Chúc bạn thành công. Xin cảm ơn bạn đã quan tâm theo dõi.

Widget recent post dạng slider cực đẹp cho Blogspot là một tiện ích hay được chia sẻ bởi Arlina.


HƯỚNG DẪN:

Bước 1: Đăng nhập Blogger > Bố Cục
Bước 2: Thêm Tiện ích > HTML/Javascript > và chèn đoạn code sau vào

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxgVi-K3pQ9YucbsAGwfTduOuUuuv_ik2ezqM2oiyeEKccmQ9hKNAORPprgAqw6J3HhZ2k5vlWVjrtREt1RxC9X906cCEiBSdqU06kjrB89l0auQ63S8czelzlnXQoSD82btFr_EIVyM/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
blogURL: "http://www.thinhnd.com/",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>

Thay http://www.thinhnd.com/ thành link blog của bạn
Chúc bạn thành công, xin cảm ơn!

Chào các bạn, hôm nay Thịnh ND xin chia sẻ cho các bạn Nút Demo và Download cực đẹp cho Blogger. Chắc sẽ làm bạn hài lòng



HƯỚNG DẪN

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Tìm đến thẻ ]]></b:skin> và chèn đoạn code sau lên trên nó


/* Demo va Download by Thinh ND */
#wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#3b3f48; padding:6px 14px; font-size:14px; margin:0 3px; color:#fff!important; border-radius:3px; border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out; } .btn.down { background:#3b3f48; color:#fff!important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#fc4f3f; color:#fff; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#fff; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; }

Bước 3: Lưu mẫu

Để nút  Demo và Download xuất hiện, các bạn chèn đoạn code sau lên nhé. .

<div id="wrap"> <a class="btn down" href="link-demo" rel="nofollow" target="_blank">Demo<i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href="link-download" rel="nofollow" target="_blank">Download<i class="fa fa-file"></i></a></div>

Thay lại cho phù hợp
Chúc bạn thành công! xin cảm ơn

Chèn liên kết vào khung bình luận Blogger? Một thủ thuật nhỏ rất đơn giản mà Thịnh ND chia sẻ trong bài này. Bạn đang quan tâm đến nó? Vậy cùng mình theo dõi bài viết này nhé


Xem thêm: Ẩn comment khi có chứa liên kết cho Blogspot

HƯỚNG DẪN

Khi muốn chèn liên kết, bạn sử dụng đoạn mã sau

<a href="url" rel="nofollow">text</a>

Thay url thành link bạn muốn chèn
Thay text thành nội dung bạn muốn nó hiển thị

Vậy là xong, chúc bạn thành công nhé!

Xin chào các bạn.Hôm nay, Thịnh ND xin hướng dẫn các bạn tạo Responsive Video Youtube cho Blogspot.

HƯỚNG DẪN:

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2:  Tìm đến thẻ ]]></b:skin> và chèn đoạn code sau lên trên nó

Video sẽ có tỉ lệ 16:9

.nd-video {
position: relative;
padding-bottom: 56.25%;
}
.nd-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Bước 3: Lưu mẫu

Khi bạn muốn chèn video vào, hãy nhúng đoạn mã sau

<div class="nd-video">
<iframe width="" height="" src="//www.youtube.com/embed/xxxx" frameallowfullscreen></iframe>
</div>
Liên kết video chèn vào có dạng //www.youtube.com/embed/BdqarGtAqkw
Ví dụ: Bạn muốn chèn video Ngày Em Đi của OnlyC ft. Lou Hoàng vào thì bạn thay  //www.youtube.com/embed/xxxx thành  //www.youtube.com/embed/BdqarGtAqkw


Chúc bạn thành công. Xin cảm ơn

Tạo hộp Theo dõi qua Email cho Blogspot
Hôm nay, Thịnh ND xin chia sẻ cho các bạn hộp theo dõi qua Email cho Blogspot cực đẹp. Nó có thể dễ dàng thêm truy cập cho blog của bạn bằng cách tự động gửi bài viết mới nhất của bạn vào email mà độc giả đăng kí.









HƯỚNG DẪN

Bước 1: Đăng Nhập Blogger > Bố Cục > Thêm Tiện ích > Theo dõi qua Email
Bước 2: Copy đoạn sau http://feeds.feedburner.com/ giống mình gạch chân trong ảnh dưới

Mục đích của 2 bước trên là để lấy url feedburner cho Blogspot/Blogger
Bước 3: Tiếp tục vào Bố Cục > Thêm Tiện ích > HTML/Javascript và dán đoạn code sau vào

<div class="nd-follow">
<style>
.nd-follow {width:300px; height:250px; background:#2A3744; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }
.nd-follow b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }
.nd-follow form {width:250px; margin:0 auto;}
</style>
<b>THEO DÕI QUA EMAIL</b><br />
Đăng kí theo dõi blog để cập nhật những bài viết mới nhất vào hòm thư của mình!<br />
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ThinhNd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input nd-followe="email" placeholder="Email của bạn..." style="border: 1px solid #fff; box-sizing: border-box; padding: 9px 5px; width: inherit;" type="text" />
<input nd-followe="uri" type="hidden" value="ThinhNd" />
<input nd-followe="loc" type="hidden" value="vi_VI" />
<input class="button" style="background: #03A9F4; border: none; color: white; font-size: 18px; font-weight: bold; margin: 10px auto; padding: 9px 5px; width: inherit;" type="submit" value="ĐĂNG KÝ NGAY" />
</form>
</div>

Thay ThinhNd thành đoạn bạn vừa sao chép ở bước 2
Bước 4: Bấm Lưu và kiểm tra

Lời Kết

Chúc bạn thành công nhé. Mọi thắc mắc vui lòng comment ở bên dưới, mình giúp bạn trong thời gian sớm nhất. Xin cảm ơn bạn đã quan tâm theo dõi

Vấn đề được quan tâm nhất của những người lập website trên mã nguồn Blogger bây giờ mình nghĩ là việc lỗi không hiển thị hình ảnh trên Blogspot do nhà mạng chặn. Vì vậy hôm nay Thịnh ND viết bài này, xin chia sẻ cho các bạn  3 cách khắc phục lỗi không hiển thị hình ảnh cho Blogspot.

CÁCH 1: CHỈNH SỬA THỦ CÔNG

Nghĩa là khi đăng tải hình ảnh lên, link hình ảnh sẽ có dạng 
1.bp.blogspot.com hoặc 2.bp.blogspot.com, 3.bp.blogspot.com, 4.bp.blogspot.com, 5.bp.blogspot.com, 6.bp.blogspot.com, 7.bp.blogspot.com, 8.bp.blogspot.com, 9.bp.blogspot.com 
và bạn hãy thay nó là lh3.googleusercontent.com hoặc lh3.ggpht.com

CÁCH 2: SỬ DỤNG JAVASCRIPT

Bước 1: Đăng nhập Blogger > Mẫu
Bước 2: Chèn đoạn code sau trước thẻ </body> và lưu mẫu

<script type='text/javascript'>
//<![CDATA[
//gb-replace-images
var images=document.getElementsByTagName("img");for(var i=0;i<images.length;i++){images[i].src=images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh3.ggpht.com")}
//]]>
</script>

CÁCH 3: CHỈNH SỬA TỰ ĐỘNG SỬ DỤNG JQUERY

Bước 1: Đăng nhập Blogger > Mẫu
Bước 2: Chèn đoạn code sau trước thẻ </body> và lưu mẫu


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(//[0-9]+(.bp.blogspot)?/, "/lh4.googleusercontent")) });
//]]>
</script>

Nếu Blogspot của bạn đã có thư viện JQuery thì hãy xóa dòng
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
(dòng đầu tiên trong đoạn code)
Trên đây là  3 cách khắc phục lỗi không hiển thị hình ảnh cho Blogspot. Xin cảm ơn bạn đã quan tâm theo dõi,xin cảm ơn!

Auto Refresh - Tự động tải lại trang cho Blogger

Tự động tải lại trang cho Blogger giúp tăng lượt xem blog đáng kể,đó là thêm thẻ meta tải lại trang sau 1 thời gian nhất định.

Mặt khác, tiện ích này lại dễ gây ức chế cho người đọc và cũng không hề giúp ích cho SEO. 


Cách làm thì rất đơn giản, bạn chỉ cần thêm thẻ meta sau lên phía trên </head> và Lưu mẫu lại, vậy là xong

<meta content='500' http-equiv='refresh'/>

Thay 500 thành số giây mà bạn muốn tải lại trang
Vậy là xong, chúc bạn thành công nhé. Xin cảm ơn bạn đã quant âm theo dõi blog.

Bài viết được tham khảo từ: Dxoan

Tạo Random Posts widget cho Blogspot

     Tiện ích nút Lên đầu trang là ứng dụng khá tiện lợi khi người xem đọc hết bài viết có nội dung dài, thay vì phải cuộn chuột hoặc kéo thanh trượt dọc để về đầu trang. Vì vậy hôm nay Thịnh ND xin chia sẻ cho các bạn Nút back to top dạng tên lửa cho Blogspot.





HƯỚNG DẪN 

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn code sau trên  </style> hoặc  </b:skin>



#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

Bước 3: Chèn đoạn code sau trên </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>
<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>

Bước 4: Bấm Lưu mẫu và kiểm tra
Chúc bạn thành công! Xin cảm ơn

Tạo Random Posts widget cho Blogspot

     Random Post hay còn gọi là bài viết ngẫu nhiên. Đây là một widget chứa các bài đăng trong blog của bạn. Các bài viết này được sắp xếp một cách ngẫu nhiên, không tuân theo một quy luật nào cả.


     Hôm nay Thịnh ND xin hướng dẫn các bạn Tạo Random Posts widget cho Blogspot. Hãy tham khảo nhé!









HƯỚNG DẪN:


Bước 1: Đăng nhập Blogger > Bố Cục > Thêm Tiện ích > HTML/Javascript
Bước 2: Chèn đoạn code sau vào

<center><style type='text/css'>
#thinhnd-randomposts{width:100%;background:none;}
#thinhnd-randomposts ul {margin: 0 auto!important; padding: 0 !important;text-align:center }
#thinhnd-randomposts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#thinhnd-randomposts li{float:left;list-style:none;border:none;width:90px;height:90px;overflow:hidden;margin-right:5px !important;margin-top:5px !important}
#thinhnd-randomposts img{float:left;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;;border:none;outline:0;position:static;transition:all .8s ease-out;}
#thinhnd-randomposts img:hover {-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
</style>
<div id="thinhnd-randomposts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfAz-E5ylIwIyQR5uj8ypw7idUIO3TVfn0meJrap4wqXHqr1ur5j5mHIURxNMwirpow7E73xCaXuL7xtxTzMDEjqVldi7bG4jaYtAT4_veyXCrK8RBtK0OEMqOJVugIr7UMoOwIAe4zux/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div></center>

Bước 3: Lưu và kiểm tra
Chúc bạn thành công! Cảm ơn bạn đã quan tâm theo dõi

Chào bạn, đây là bài đăng thứ 3 trên blog Thịnh ND mà mình mới làm lại và lần này, mình xin chia sẻ hiệu ứng tải trang cực đẹp bằng CSS. Hiệu ứng này đã được rất nhiều blog sử dụng như: Giang Blogger,Bblog,...


HƯỚNG DẪN

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn code sau vào dưới thẻ <body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loader'>
<div class='thinhndload'></div>
<div class='thinhndload'></div>
<div class='thinhndload'></div>
<div class='thinhndload'></div>
</div>
<script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".thinhndload").fadeOut("slow");setTimeout(function(){$("#loader").fadeOut("slow")},200)},200)});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#333;z-index:999999}
.thinhndload{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}
.thinhndload:nth-child(1){background-color:#D8334A;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndload:nth-child(2){background-color:#4A89DC;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndload:nth-child(3){background-color:#FC6E51;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndload:nth-child(4){background-color:#2ECC71;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>
</b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='loader'>
<div class='icontainer'>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
</div>
</div>
<script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".thinhndload").fadeOut("slow");setTimeout(function(){$("#loader").fadeOut("slow")},100)},100)});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#333;z-index:999999}
.icontainer{width:200px;height:100px;padding-top:180px;margin:0 auto}
.thinhndloads{width:10px;height:10px;margin:10px auto;border-radius:50px}
.thinhndloads:nth-child(1){background:#ff005d;-webkit-animation:right 1s infinite ease-in-out;-moz-animation:right 1s infinite ease-in-out;animation:right 1s infinite ease-in-out}
.thinhndloads:nth-child(2){background:#35ff99;-webkit-animation:left 1.1s infinite ease-in-out;-moz-animation:left 1.1s infinite ease-in-out;animation:left 1.1s infinite ease-in-out}
.thinhndloads:nth-child(3){background:#008597;-webkit-animation:right 1.05s infinite ease-in-out;-moz-animation:right 1.05s infinite ease-in-out;animation:right 1.05s infinite ease-in-out}
.thinhndloads:nth-child(4){background:#ffcc00;-webkit-animation:left 1.15s infinite ease-in-out;-moz-animation:left 1.15s infinite ease-in-out;animation:left 1.15s infinite ease-in-out}
.thinhndloads:nth-child(5){background:#2d3443;-webkit-animation:right 1.1s infinite ease-in-out;-moz-animation:right 1.1s infinite ease-in-out;animation:right 1.1s infinite ease-in-out}
.thinhndloads:nth-child(6){background:#ff7c35;-webkit-animation:left 1.05s infinite ease-in-out;-moz-animation:left 1.05s infinite ease-in-out;animation:left 1.05s infinite ease-in-out}
.thinhndloads:nth-child(7){background:#4d407c;-webkit-animation:right 1s infinite ease-in-out;-moz-animation:right 1s infinite ease-in-out;animation:right 1s infinite ease-in-out}
@-webkit-keyframes right{0%{-webkit-transform:translate(-15px)}50%{-webkit-transform:translate(15px)}100%{-webkit-transform:translate(-15px)}}
@-webkit-keyframes left{0%{-webkit-transform:translate(15px)}50%{-webkit-transform:translate(-15px)}100%{-webkit-transform:translate(15px)}}
@-moz-keyframes right{0%{-moz-transform:translate(-15px)}50%{-moz-transform:translate(15px)}100%{-moz-transform:translate(-15px)}}
@-moz-keyframes left{0%{-moz-transform:translate(15px)}50%{-moz-transform:translate(-15px)}100%{-moz-transform:translate(15px)}}
@keyframes right{0%{transform:translate(-15px)}50%{transform:translate(15px)}100%{transform:translate(-15px)}}
@keyframes left{0%{transform:translate(15px)}50%{transform:translate(-15px)}100%{transform:translate(15px)}}</style>
</b:if>
Bước 3: Lưu mẫu
Chúc bạn thành công! Xin cảm ơn

Trang 404 là một phần theo tôi nghĩ là không thể thiếu, nó là công cụ chuyển hướng tốt nhất cho Blogger/Blogspot giúp website của bạn không còn những đường dẫn do không có bài viết hoặc không còn nữa!




HƯỚNG DẪN

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Thêm đoạn code sau trước </head>


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<link href="https://dl.dropboxusercontent.com/s/qn5mr56p3yyzwju/bootstrap.min.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/s/02z8w7zlf7x5p82/shader.css" rel="stylesheet"/>
</b:if>
Bước 3: Thêm đoạn code sau dưới <body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class="theme-fire">
<div id="background-container" class="background-container">
<div id="background-output" class="background-output"><canvas width="0" height="0" style="display: block;"></canvas></div>
<div id="vignette" class="background-vignette"></div>
<div id="noise" class="background-noise"></div>
</div>
<div class="content">
<div class="container">
<div class="row">
<h1 class="header col-sm-8 col-sm-offset-2">404 Error</h1>
</div>
<div class="row">
<p class="description col-sm-8 col-sm-offset-2">
Oops! That page can&#8217;t be found.<br/>
It looks like nothing was found at this location. <a href="/" style="color: #111;">Back to homepage</a>
</p>
</div>
</div>


</div>


<div></div>
<script src='https://dl.dropboxusercontent.com/s/m1cjsogan6awc0e/jquery.countdown.js'/>
<script src='https://dl.dropboxusercontent.com/s/9uzit85iai7n9yl/placeholders.min.js'/>
<script src='https://dl.dropboxusercontent.com/s/0qi7d11zioe0h13/flat-surface-shader.js'/>
<script src='https://dl.dropboxusercontent.com/s/xo6qkcyrkkiaghm/main.config.js'/>
<script src='https://dl.dropboxusercontent.com/s/7v0jn787tikjst6/shader.js'/></div>
</b:if>

Bước 4: Lưu mẫu và kiểm tra
Chúc bạn thành công