Thứ Hai, 11 tháng 5, 2015

Cách hiển thị danh sách các bài viết liên quan

Bài viết liên quan hiện bài mới nhất dạng đơn giản nhất

Cách thực hiện

Bước 1- Đăng nhập vào Blog ==> Vào Mẫu ==> Chọn Chỉnh sử HTML (Edit HTML)

Khuyên các bạn nên down trực tiếp tất cả code blogspot về rồi chỉnh sửa bằng notepad ++ cho dễ nhé (chú ý sao lưu giữ lấy 1 bản để làm bản gốc để tránh trường hợp bị sai code ko phôi phục lại dc)

Rồi dán đoạn code bên dưới vào trước(trên) thẻ </head>
(Các bạn có thể down toàn bộ code về rồi dùng Notepad ++ để chỉnh sửa cho dễ nhớ sao lưu 1 bản để phòng bị lỗi code)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>

Bước 2 - Tìm một trong 4 đoạn code như bên dưới:

Đoạn 1: <div class='post-footer'> thường là chèn vào đoạn này nếu ko được các bạn thử chèn thử lần lượt vào các đoạn dưới xem sao
Đoạn 2: <div class='post-footer-line post-footer-line-1'>
Đoạn 3: <div class='post-footer-line post-footer-line-2'>
Đoạn 4: <div class='post-footer-line post-footer-line-3'>

- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha). Vì vậy bạn cứ thêm lần lượt vào từng đoạn rồi up lên thử xem có hiển thị được không,nếu ko dc thì xóa đi rồi thêm vào đoạn code tiếp theo đên khi nào thấy hiển thi thì dừng

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b>Bài viết liên quan:</b>
        <b:loop values='data:post.labels' var='label'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
        </b:loop>
        <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
    </div>
</b:if>

Chú ý:
  • var max_post = 5; Số bài viết hiển thị của tiện ích

Chủ Nhật, 10 tháng 5, 2015

Phân trang cho Blogspot

Theo mặc định khi tạo blogspotvà đa số các template miễn phí thì không có chức năng tự động phân trang cho blog. Có nghĩa là nó sẽ hiện "Older posts" hay "Newer post" chứ không có phân ra các đánh dấu trang có đánh số cho người đọc dễ theo dõi và thao tác. Sau đây mình sẽ hướng dẫn các bạn cách thêm phân trang.
Phân trang cho Blogspot - Phần II


Bước 1: Vào Mẫu ~> Chỉnh sửa HTML
Bước 2: Ctrl + F và tìm thẻ ]]></b:skin>
Bước 3: Chọn Style tương ứng với các đoạn mã sau:
Mã : 
#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}
.blog-pager{background:none}
.displaypageNum a,.showpage a,.pagecurrent{padding:3px 7px;margin-right:5px;background:#E9E9E9;color:#888;border:1px solid #E9E9E9}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color:#000}
.showpageOf{display:none!important}
#blog-pager .showpage,#blog-pager .pagecurrent{font-weight:bold;color:#888}
#blog-pager .pages{border:none}

Mã:
#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}
.blog-pager{background:none}
.displaypageNum a,.showpage a,.pagecurrent{padding:5px 10px;margin-right:5px;color:#F4F4F4;background-color:#404042;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#EC8D04;text-decoration:none;color:#fff}
#blog-pager .showpage,#blog-pager,.pagecurrent{font-weight:bold;color:#000}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}

Mã: 
#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px}
.blog-pager{background:none}
.displaypageNum a,.showpage a,.pagecurrent{font-size:12px;padding:5px 12px;margin-right:5px;color:#222;background-color:#eee;border:1px solid #EEEEEE}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#E5E5E5;text-decoration:none;color:#222}
#blog-pager .pagecurrent{font-weight:bold;color:#fff;background:#DB4920}
.showpageOf{display:none!important}
#blog-pager .pages{border:none}

Các bạn có thể xem  thêm các mã khác tại đây hoặc sưu tâm ở các blog khác !
Nếu bạn muốn ẩn đi "First" and "Last" thì thêm đoạn code sau vào ngay SAU code CSS của style mà bạn chọn ở trên: .firstpage, .lastpage {display: none;}

Bước 4: Tìm đến thẻ </body> và dán đoạn code sau vào trước nó:
<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<script type="text/javascript">
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"></script>
</b:if>
</b:if>

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

Lưu ý: Bạn sẽ gặp lỗi nếu hiển thị theo dạng label (nhãn bài đăng) bởi vì mặc định blogger thiết lập 20 bài viết trong mỗi trang khi bạn tìm theo label. Chúng ta sẽ thiết lập con số này nhỏ lại sao cho phù hợp với con số mà bạn đã thiết lập ở perPage.
- Tìm TẤT CẢ dòng code sau (nó ở nhiều vị trí): expr:href='data:label.url'
- Thay thế nó bằng dòng code: expr:href='data:label.url + "?&amp;max-results=7"'
- Ở đây bạn thay số 7 trong max-results=7 bằng con số mà bạn đã gán cho perPage ở trên.
- Lưu Mẫu lại và kiểm tra !

Thứ Ba, 5 tháng 5, 2015

Bài 13: Upload và cấu hình Joomla


Cài đặt phần mềm Filezilla
Upload joomla lên host
Cấu hình database
Mời các bạn vào đây tải bài giảng Bài 13: Upload và cấu hình Joomla


Các bạn có thể chép đoạn code này để nhúng File vào Blog:
<iframe src="https://docs.google.com/presentation/d/1XbCMrm7fNGxyXe9WSYU7LVdpZwWQip1JlKHrc2pBvRQ/edit?usp=sharing" width="600" height="780" style="border: none;"></iframe>
 

Bài 12: Đăng ký host free


Tìm kiếm host free
Tiến hành đăng ký
Activate và đăng nhập host
Mời các bạn vào đây tải bài giảng Bài 12: Đăng ký host free

Bài 11: User Manager


Quản lý user
Tạo ghi chú cho user
Gửi mail giữa các user
Mời các bạn vào đây tải bài giảng Bài 11: User Manager

Bài 10: Extension & Plug-in


Quản lý các thành phần mở rộng
Phiên bản Joomla
Database
Ngôn ngữ
Cài đặt
Update
Mời các bạn vào đây tải bài giảng Bài 10: Extension & Plug-in