blogger, blogger

Hiển thị các bài đăng có nhãn blogger. Hiển thị tất cả bài đăng

Thứ Ba, 20 tháng 9, 2016

Share full code blogger template của Blog Windows 10 version 3

Trong lần chia sẻ miễn phí blogger template ở version 3 này và cũng là cuối cùng, tôi đã thiết kế lại một vài chỗ như đưa thanh tìm kiếm lên đầu cùng với menu, thêm từ khóa tự động vào cuối bài viết, thêm bài viết mới nhất theo nhãn... giúp temlpate có giao diện trông gọn gàng và chuyên nghiệp hơn. Bạn có thể xem demo trực tiếp trong blog.

Các bạn xem thêm các version cũ ở bên dưới:

Dưới đây là những thay đổi so với 2 version trước

1. Thanh tìm kiếm Blog được đưa lên cùng với menu

2. Thay thế các nút chia sẻ bằng Chia sẻ lên Facebook và thêm nút đăng ký Youtube bên phải. Thêm bộ từ khóa tự động bên dưới bài viết

Tìm đoạn như hình dưới và thay bằng kênh của bạn

Thay từ khóa theo ý bạn trong các dấu ""

Nhớ phải thay địa chỉ blog của bạn nhé

3. Thêm bài viết mới nhất theo nhãn bên dưới bình luận Facebook

Tìm đoạn như hình dưới và thay bằng nhãn trong blog của bạn

4. Style widget cũng được thiết kế lại cho phù hợp

Các bạn lưu ý khi thay template không up trực tiếp mà vào mẫu xóa hết rồi copy paste nhé, nhớ tắt dao diện di đông đi và đọc bài viết chia sẻ template Blog Windows 10 version 2 để thay id Facebook và vài chỗ khác, chứ nhiều bạn sử dụng mà chẳng chịu đọc và thay gì cả làm thông báo cứ đến tôi hoài rất phiền phức. Liên hệ với tôi trên facebook để lấy tempalte. Trang cá nhân của tôi: https://www.facebook.com/kequaduongvodanh
hoặc để lại địa chỉ email bên dưới tôi sẽ gửi qua mail cho.

Share full code blogger template của Blog Windows 10 version 2

Lần trước tôi có share cho các bạn template của Blog Windows 10 tạm gọi là version 1, tuy nhiên tôi vẫn thấy giao diện chưa được đẹp lắm vẫn còn một số chi tiết thừa làm giảm tốc độ tải trang do vậy tôi đã thiết kế lại giao diện và loại bỏ những chi tiết thừa để tạo nên một template chuẩn SEO đẹp về thiết kế và tăng tốc độ tải trang.

XEM DEMO

Dưới đây là những điểm mới khi thiết kế lại.

Thêm breadcrumbs và tiêu đề ngày (không phải tiêu đề thời gian), bộ đếm bình luận Facebook trong phần bài viết. Loại bỏ biểu tượng search trên thanh menu và thiết kế thêm khung search vào sidebar

Thêm bộ Plugin like, share,gửi, đăng nhập, lưu vào facebook. Loại bỏ khung nhận xét truyền thống của Google và thay băng khung bình luận của Facebook, xem bài viết này để thay App id và User id. Style bài viết liên quan cũng được thiết kế lại.

Bài đăng ngoài trang chủ được thiết kế thêm các nút share bài trực tiếp và hình đại diện bài viết cũng được thu gọn kích thước cho phù hợp.

Loại bỏ đánh số phân trang thay bằng 'nextprev' truyền thống và đổi tên thành Trang kế » và « Trang trước. Điều này giúp tăng tốc đô tải trang.

Phần footer cũng được thiết kế lại cho phù hợp.

Lưu ý: Các bạn nào đang dùng template Blog Windows 10 version 1 nếu muốn đổi lại giao diện của version 2 chỉ cần thay nội dung trong dấu ... trong phần <b:skin>...</b:skin> thôi.

Comment trực tiếp bên dưới để nhận template và được trợ giúp cài đặt miễn phí. Xem bài viết này để biết cách cài đặt. Trong file đính kèm có code tiện ích Tin mới đăng và Tin khác bên sidebar các bạn nhớ thêm vào widgets.

Nguyễn Anh Tuấn

Một vài lưu ý cho anh em đang sử dụng template của Blog Windows 10

Cách đây vài ngày Blog Windows 10 đã chia sẻ template của Blog được anh em bạn bè đón nhận một vài người đã áp dụng template cho blog của mình. Tuy nhiên có một vài vấn đề ở đây anh em cần lưu ý khi sử dụng.
Xem các template được chia sẻ bởi Blog Windows 10

1. Tại sao blog của mình (em) không load nhanh bằng Blog Windows 10?

Xin trả lời vấn đề này với anh em rằng vấn đề lại là chính cách viết bài và trình bày bài viết của anh em chưa chuẩn, chưa thể hiện nội dung bài viết bằng tiêu đề ví dụ như mình đọc một vài tiêu đề mà không hiểu nội dung tác giả muốn viết cái gì? Seo tiêu đề là rất quan trọng nó giúp bài viết của anh em luôn xuất hiện tuy không phải là top nhưng cũng chẳng phải mãi ở trang 10 trở lên của Google, chý ít thì nó cũng xuất hiện ở trang thứ 2 đôi khi còn ở top khi nó đúng từ khóa mà người tìm kiếm gõ.

Vấn đề thứ 2 là anh em lúc trình bày bài viết không sử dụng thẻ ngắt làm cho số bài viết ngoài trang chủ bị thiếu và load rất lâu. Thử tưởng tượng khi load trang chủ thay vì chỉ load tiêu đề bài viết bây giờ còn phải load cả nội dung và hình ảnh của bài viết nữa thì đươcng nhiên việc tải trang sẽ chậm rồi.

Vấn đề thứ 3 cái này lưu ý với anh em muốn thêm quảng cáo google adsense vào blog nếu trang web có chứa chủ yếu là hình ảnh, video hoặc hoạt ảnh Flash sẽ không được chấp thuận. do vậy bài viết nên chỉ có 1 đến 2 ảnh thôi và chủ yếu là văn bản bằng chữ.

2. Xóa vệt bóng màu đen

Vào chỉnh sửa mẫu tìm và xóa đoạn dưới trước thẻ </bskin>

3. Thu hẹp khoảng cách Bài đăng trên blog và Footer

nó nằm ở đoạn mã ngay sau đoạn mã mà bạn đã vừa xóa

các bạn có thể sửa thành như dưới

4. Thêm lại breadcrumbs

Tìm đoạn mã <b:includable id='breadcrumb' var='posts'> và thay thế nó bằng đoạn mã bên dưới

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='breadcrumbs'>
<ul>
<b:loop values='data:posts' var='post'><b:if cond='data:post.labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title' style='padding-left:8px;'>Trang chủ</span></a></span> 
<b:loop values='data:post.labels' var='label'><li itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=6&quot;' itemprop='url'><span itemprop='title'> <data:label.name/></span></a></li><b:if cond='data:label.isLast != &quot;true&quot;'/></b:loop>
</b:if></b:loop>
</ul>
</div>
</b:if>
</b:includable>

5. Nhúng khung bình luận Facebook và các plugin khác

Xem bài viết Cách thêm bộ plugins Facebook vào từng bài viết trong Blogspot mới nhất lúc thêm code vào bài viết tìm đoạn addthis và thay thế nó.

Hi vọng bài viết này sẽ giúp ích cho anh em đang sử dụng template của blog làm trang viết bài chính của mình.

Code bài viết gần đây recent posts và bài viết ngẫu nhiên random posts cho blog với style đẹp load nhanh

Chia sẻ các bạn bộ code bài viết gần đây recent posts và bài viết ngẫu nhiên random posts cho blog mà mình đã sưu tầm được. Đặc điểm của style này là có hình ảnh, ngày đăng bài và số bình luận trong mỗi bài đăng. Để thêm code trước tiên ta cần thêm style ảnh vào trước thẻ ]></b:skin>

#random-posts img, #recent-posts img{border-radius:6%; margin:0 10px 0 0; width:70px; height:70px; overflow:hidden; float:left; transition:all .3s ease-out; }

Tiếp theo bạn có thể thêm code bài viết gần đây recent posts và bài viết ngẫu nhiên random posts vào bất cứ chỗ nào như chèn vào cuối bài viết, vào sidebar hay footer đều được ví dụ như để thêm vào sidebar vào phần bố cục>sidebar> thêm tiện ích HTML/Javascript

1. Code bài viết gần đây

<div id='recent-posts'> <script type='text/javaScript'> var rcp_numposts=5; var rcp_snippet_length=150; var rcp_info='yes'; var rcp_comment='Bình luận'; var rcp_disable='Tắt Bình luận'; 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_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){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)+"&#133;";};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 rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9TiGKJTHKqWXrcKnz4h0n_jv9k-LYKqEwNULtmyCZMKzt74QjJzKZ05I4yeM89Ne48qUQy_SV6tnFgj26_zrF4jm1y7Q5dLBKmw3t1lpXcgn68nPMA5O66wazDb3TclHGqJDlLuSxYAb/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>'); </script> </div>

2. Code bài viết ngẫu nhiên

<ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=5; var rdp_snippet_length=150; var rdp_info='yes'; var rdp_comment='Bình luận'; var rdp_disable='Tắt Bình luận'; 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/AVvXsEjx9TiGKJTHKqWXrcKnz4h0n_jv9k-LYKqEwNULtmyCZMKzt74QjJzKZ05I4yeM89Ne48qUQy_SV6tnFgj26_zrF4jm1y7Q5dLBKmw3t1lpXcgn68nPMA5O66wazDb3TclHGqJDlLuSxYAb/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');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>

Để ẩn ảnh ta thêm giá trị display:none vào style ảnh mà ta đã thêm trước thẻ ]></b:skin> lúc đầu như ví dụ:

#random-posts img, #recent-posts img{border-radius:6%; margin:0 10px 0 0; width:70px; height:70px; overflow:hidden; float:left; transition:all .3s ease-out; display:none;}

Số 5 trong code là số bài viết hiển thị

Cách thêm bộ plugins Facebook vào từng bài viết trong Blogspot mới nhất

Vấn đề này không mới đã có từ lâu và có rất nhiều bài viết trên các website và diễn đàn chỉ cần gõ từ khóa thêm nút like. share Facebook hay bình luận Facebook vào blog là có rất nhiều bài viết hướng dẫn. Tuy nhiên khi chúng ta thêm vào lại thấy không được như ý và thêm bình luận Facebook lại không thể kiển duyệt được có khi nào chúng ta tự hỏi mình đã làm sai chỗ nào. Chuyên mục hôm nay sẽ hướng dẫn bạn một cách nhanh tróng và quan trọng là có thể kiểm duyệt được bình luận.

Bước 1. Tạo ứng dụng Facebook bắt buộc tại địa chỉ https://developers.facebook.com

Cái này chắc ai cũng biết cả không phải hướng dẫn nữa, nếu bạn đã tạo rồi thì bỏ qua bước này.

Bước 2. Truy cập vào bảng điều khiển của ứng dụng ở đây có 3 vấn đề bạn phải quan tâm

1. Xác định ID của ứng dụng

2. Thêm địa chỉ Blog của bạn vào.

Chọn cài đặt>Thông tin cơ bản>Thêm nền tảng và thêm url blog

3. Xét duyệt ứng dụng của bạn ở chế độ công khai.

Bước 3: Thêm code vào Blog

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

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.7&amp;appId=ID Ứng dụng";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Thay ID Ứng dụng bằng ID của bạn ví dụ như 583598571819746

2. Thêm thẻ meta sau vào trước thẻ </head>

<meta property="fb:app_id" content="ID Ứng dụng" />
<meta property="fb:admins" content="Facebook User ID"/>

Để xác định Facebook User ID truy cập trang web http://findmyfbid.com dán link trang cá nhân của bạn và bấm Find number ID

3. Thêm đoạn css vào phía trên thẻ ]]></b:skin> của blog để phần fb cmt có thể co dãn theo reponsive của blog.

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style], .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]
{ width: 100% !important; }

4. Xác định vị trí muốn thêm vào bài viết bắt buộc là trong thẻ <b:include data='post' name='post'/> thông thường là sau thẻ <div class='post-footer'>

<div class='fb-like' data-action='like' data-href='' data-layout='button_count' data-share='true' data-show-faces='false' data-width='520'/>
<div class="fb-follow"  data-layout="button_count" data-size="small" data-show-faces="false"></div>
<div class="fb-send" ></div>
<div class="fb-save" data-size="small"></div>
<div class='fb-comments' data-numposts='5' data-width='750'/>

Thay 5 bằng số lượng bình luận muốn hiển thị và 750 là kích thước của khung bình luận Facebook.

OK như vậy bạn đã vửa thêm bộ plugins Facebook vào từng bài viết trong Blogspot rồi, bạn cũng lưu ý cho là phải sau 24 tiếng từ khi bạn thêm vào Blog thì bình luận mới có tác dụng. Để kiểm duyệt bình luận bạn truy cập link https://developers.facebook.com/tools/comments.

Tại đây bạn có thể Cấu hình lại bình luận như hình dưới

Các bước cũng chỉ đơn giản vậy thôi và bạn cũng lưu ý khi người nào đó bật công cụ lọc quảng cáo trên trình duyệt như Ablock, Adguad thì cá plugin như like , Share,... sẻ bị chặn và không hiển thị chỉ còn mỗi bình luận thôi.

Fix lỗi không vào được blogspot trên trình duyệt Internet Explorer

Người dùng thường xuyên sử dụng trình duyệt mặc định internet explorer trên windows khi truy cập một số website ví dụ như các địa chỉ có tên miền .blogspot của google sẽ không thể truy cập được và nhìn thấy một màn hình thông báo màu đỏ với nội dung This wesite has been reported as unsafe và cho dù đã cố gằng load lại trang nhưng vẫn bị chăn.

Nguyên nhân chính của tình trạng bị chắn này là tính năng bô lọc thông minh của Microsoft được gọi là Microsoft Smartscreen được bật mặc định trên trình duyệt có tác dụng lọc những trang web bị nghi ngờ và để khắc phục ta tắt tính năng này trên trình duyệt internet explorer bằng các bước sau:

Fix lỗi không vào được blogspot trên trình duyệt Microsoft Edge

1. Bấm vài biểu tượng Settings trên góc phải của trình duyệt chọn internet options để bật hộp thoại internet options.
2. Trong hộp thoại internet options chuyển qua tab advanced tìm đến dòng Enable SmartScreen Filter bỏ dấu tích trong ô vuông sau đó bấm Apply để áp dụng.

3. Load lại trang là có thể truy cập blogspot bình thường.

Share full code template Blog Windows 10 đơn giản nhưng tinh tế

Blogger template gốc có tên iBeats các bạn có thể xem demo theme gốc tại đây. Mình đã chỉnh sửa lại để phù hợp với mục đích sử dụng của mình. Nếu bạn thấy phù hợp thì để lại đại chỉ email bên dưới bài đăng mình sẽ gửi template qua mail cho ban.

XEM DEMO

Đặc điểm chính của template

Responsive
Giao diện SEO thân thiện
Phần chân gồm 4 cột
Công cụ Validator thử nghiệm của Google
Giao diện mobile thân thiện
Tùy chỉnh lỗi trang 404
Load nhanh
Nút mạng xã hội
Hình bài viết ngoài trang chủ được thu gọn chứ không phải bị cắt như các template khác
Bài viết liên quan chuẩn HTML5
Hỗ trợ chèn quảng cáo
Drop Down Menu
Giao diện sạch
Thiết kế đơn giản
Tương thích với tất cả trình duyệt

Hướng dẫn cài đặt

1/ Thay template

Mở file BlogWindows10.txt copy tất cả nội dung trong file sau đó truy cập vào blog chọn Mẫu >chỉnh sửa HTML thay thế cho nội dung vừa copy trong file BlogWindows10.txt > Lưu lại.

2/ Thay dòng chữ 'Windows 10 - Tin tức, thủ thuật, ứng dụng mới' phía trên địa chỉ trình duyệt

3/ Thay tiêu đề blog (nên để tiêu đề ngắn thôi)

4/ Thay biểu tượng Logo trước tiêu đề trên thanh menu

Nhấn Ctrl+F gõ từ khóa "\f17a" sau đó truy cập trang https://astronautweb.co/snippet/font-awesome/ thay thế biểu tượng, hoặc nếu không thích thì xóa cũng được