Cách ẩn bài viết mới nhất ngoài trang chủ blogspot

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot. Cách ẩn hết các bài viết mới nhất mặc định của blogspot ngoài trang chủ. Ẩn bài viết ngoài trang chủ .

Việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh để ẩn nó.
Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot !

Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1".Với một số blog có thể khác. Các bạn xác định theo các bước bên dưới:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed): => Tìm đoạn code sau :

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>

Sau đó ta vào: Mẫu -> chỉnh sửa HTML và dán code ngay bên dưới sau thẻ </b:skin>

Read More

Hiện Next & Previous kèm tiêu dề bài viết cho blogspot dưới chân trang

Tuyệt vời khi bạn tùy biến được tất cả. Đối với Template của một Blogger, Google chỉ cung cấp cho chúng ta những thiết kế chuẩn, thật là chán mỗi khi chỉ nhìn thấy ở cuối chân trang những hàng chữ: nhỏ xíu, không có nét, không có hồn, không có tên, không có tuổi luôn...
Mình tình cờ tìm thấy được những Source code nầy mà thôi, và...còn thấy chúng nhiều ở vô số nơi trên mạng. Chỉ việc chép về ...và ngâm cứu mãi cho đến hôm nay mới thực hành và chia sẽ lại cùng bạn bè.
Tiến trình rất đơn giản, gồm các bước:

Bước 1: Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.

/*################ Show Next & Previous Post Titles in Blogger with jQuery Navigation  ##########################*/
    .bogger-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
    .bogger-pager li.next { float: right; padding:0px; background:none; margin:0px;}
    .bogger-pager li.next a { padding-left: 24px; }
    .bogger-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
    }
    .bogger-pager li.previous a { padding-right: 24px;  }
    .bogger-pager li.next:hover, .bogger-pager li.previous:hover  {background:#333333; }
    .bogger-pager li { width: 50%; display: inline; float: left; text-align: center; }
    .bogger-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
    .bogger-pager li i { color: #ccc; font-size: 18px; }
    .bogger-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
    .bogger-pager li a span {<span style="box-sizing: border-box; color: red;">font-size: 18px</span><b style="box-sizing: border-box;">;</b> <span style="box-sizing: border-box; color: purple;"><b style="box-sizing: border-box;">color: #666</b></span>;<span style="box-sizing: border-box; color: orange;"><b style="box-sizing: border-box;">font-family:Arial, Tahoma, sans-serif</b></span>; margin:0px}
    .bogger-pager li a:hover span,
    .bogger-pager li a:hover i { color: #ffffff; }
    .bogger-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
    .bogger-pager li.next i { float: right; margin-top: 15%; margin-right: 5%; }
    .bogger-pager li.next i, .bogger-pager li.previous i ,
    .bogger-pager li.next,  .bogger-pager li.previous{
    -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
    -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
    -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
    transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
    .fa-chevron-right {padding-right:0px;}

Tùy biến CSS:

• font-size: 18px là font chữ tiêu đề bài viết
• color: #666 là màu chữ tiêu đề bài viết
• font-family:Arial, Tahoma, sans-serif là loại font chữ của tiêu đề bài viết

Bước 2: Tiếp tục thêm Jquery và một số font chức năng mới mà Google ưa thích gọi là Oswald. Bằng cách dán đoạn code bên dưới sau thẻ <head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Chú ý:

• Nếu blog của bạn đã có file Jquery rồi thì hãy bỏ đoạn code màu xanh đi.
• Đoạn font màu vàng chỉ dành cho blog chuyên viết tiếng anh. 
• Nếu bạn viết blog bằng tiếng việt thì  xóa nó đi hoặc vào đây để chọn font chữ tiếng việt mà bạn muốn trong Google Fonts.

Như trong hình trên, sau khi bạn Click vào link trên bạn sẽ mở ra ứng dụng Google Fonts. Bạn chỉ việc kéo thanh cuộn bên phải để chọn lựa Fonts như ý. Để chọn lựa, trên góc phải trên của từng khuôn Fonts có một dấu + (cộng), bạn chỉ việc Click chuột vào chọn để Add và chép lấy Source Code bên trong nhé.

Bước 3:  Chúng ta sẽ tìm vị trí cố định để thêm tiện ích này. Như đã nói ở trên chúng ta thêm nó vào ngay sau nội dung của bài đăng nên các bạn tìm đoạn code bên dưới: 

<data:post.body/>

- Dán vào sau nó đoạn code sau: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <ul class='bogger-pager'>
            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
    <b:else/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>Bạn đang xem bài đăng mới nhất trên blog này</span></a>
    </b:if>
    </li>
        <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
    <b:else/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>Bạn đang xem bài đăng cũ nhất trên blog này</span></a>
    </b:if>
    </li>
        </ul>
    <script type='text/javascript'>
    //<![CDATA[
    (function($){   
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   
        },"html");
    })(jQuery);
    //]]>
    </script>
          </b:if></b:if>

Tùy biến XML:

• Bạn có thể thay đổi phần màu đỏ theo ý của bạn.
• Phần màu tím là thông báo khi bạn đang xem bài đăng mới nhất và bài đăng cũ nhất trên blog đó.

 Bước 4:   Thực hiện thao tác ẩn đi các liên kết bài đăng cũ hơn và mới hơn mặc định của blogger. Trong trình chỉnh sữa Html của Template, nhấn Ctrl+ F tìm đoạn code có dạng:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

Sau khi tìm được (chỉ cần tìm được 1 hàng màu vàng thôi)  bạn hãy làm tiếp 2 bước bên dưới:

1- Thêm vào sau đoạn màu vàng  phía đầu source code 2 đoạn mã bên dưới

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

2- Thêm vào trước đoạn màu xanh ở cuối source code đoạn mã bên dưới: 

</b:if></b:if>

Tuy nhiên, đế cho biến mất hẳn những nút Next Home Preview cuối mỗi bài đăng, là một mặc 
định của trình thiết kế Blogger, bạn cần tìm các đoạn mã sau trong Template nhé:

#blog-pager-newer-link{float:left;display: none;} #blog-pager-older-link{float:right;display: none;} #blog-pager{text-align:center;display: none;}

Trong từng hàng Code trên, chỉ cần tìm cho đúng các mã màu xanh bên trái và thêm vào đó phía sau các thuộc tính mã Code display: none;Xong chưa? Giờ thì bạn  lưu mẫu  lại và  kiểm tra thử hoạt động của Blogspot nhé. Chúc các bạn thành công.thành công.

• DEMO

Người viết: Nguyễn Đạt Khánh

Read More

Tạo nút Button thu gọn và xem nội dung bài viết

Hình trên có đoạn nội dung khá dài và chứa cả hình, để làm gọn lại mình chỉ cần dùng đoạn code nhỏ dưới đây thôi. Nhớ rằng đoạn nào cần ẩn, bạn đặt cho đúng như cú pháp trên Source Code nhé.

<center><div> <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Thu Gọn Lại';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Mở Rộng';  }" style="font-size:16px;background:#23AD1F;color:white; padding: 5px; border-radius:7px;" type="button" value="Mở Rộng" /></div><div><div style="display: none;border:1px solid black;width:580px;max-height:400px;overflow:auto;background:#E8EAE8;text-align:left;padding:10px;">

Nội Dung Cần Ẩn Hiện Để Ở khúc này !!!

</div></div></center>

Dưới đây là ý nghĩa một số vị trí có tô màu để các bạn dễ theo dõi và dễ chĩnh sửa theo ý thích:
     Là dòng chữ hiển thị trên nút (mở rộng/thu gọn)
     Là màu của dòng chữ hiển thị trên nút
     Là màu nền của nút
     Là màu nền của phần nội dung


Muốn nâng cao hơn các bạn dùng mã màu thập lục, di chuyển con trỏ đến khi lấy được màu vừa ý, thì copy mã ở ô HEX và dùng là xong.
Để lấy mã màu Hex, bạn vào Blogger Dashboard, vào mục Chủ đề, chọn Tùy chỉnh. (Những chổ có mũi tên trỏ trong hình) và chọn tiếp phần Nâng cao để lấy mã màu chính xác.

Nội dung như sau, bạn cứ thử Click vào nút Button màu xanh:

Gần đây, đã có rất nhiều người dùng phản ảnh về việc xuất hiện của một phân vùng ẩn Recovery với dung lượng khoảng 450MB trong Disk Management khi cài đặt Windows 10 hay cập nhật lên Windows 10 Anniversary. Vậy có nên lấy lại dung lượng này để cải thiện không gian lưu trữ cho ổ cứng?

Được biết, phân vùng Recovery ẩn này dành cho chức năng Windows Recovery Environment (WinRE) giúp người dùng nhanh chóng khôi phục lại hệ thống về tình trạng lúc mới cài đặt. Tuy nhiên, thường chức năng này rất ít người sử dụng và khá vô dụng, vì thế Techrum sẽ hướng dẫn bạn lấy lại khoảng 450MB dung lượng "vô bổ" ấy để làm tăng thêm không gian lưu trữ.

Đối với những người dùng có dung lượng lưu trữ lên đến hàng TB thì việc này không cần thiết để làm, vì con số 450MB là không nhiều, nhưng đối với những người dùng có dung lượng ít, hoặc những người dùng xài những loại máy hiện đại chỉ có mỗi ổ SSD 128GB hoặc 256GB thì việc lưu trữ là không đủ.

Bài này viết này mình sử dụng Windows 10 Anniversary, mời bạn đọc tham khảo cách tăng 450MB sao khi update Windows 10 hoặc Windows 10 Anniversary theo các bước sau:

1. Khởi chạy Command Promt (CMD) với chế độ Admin: nhấn chuột phải vào nút Start > Command Prompt (Admin).
2. Nhập lệnh Diskpart vào CMD và nhấn phím Enter.
   
3. Chờ vài giây để lệnh Diskpart thực thi. Sau đó, nhập tiếp lệnh List volume để hiển thị danh sách các phân vùng hiện tại trên ổ cứng. Khi đó bạn sẽ thấy được danh sách các phân vùng, bao gồm cả phân vùng Recovery 450MB (hoặc tương đương) với Info là Hidden.
4. Vậy là bạn sẽ biết được phân vùng nào là phân vùng cần xóa (Ở hình, mình có phân vùng 3 và 5). Tiếp theo, download và cài đặt chương trình AOMEI Partition Assistant Standard Edition.
5. Mở chương trình lên, nhấn chuột phải vào phân vùng nào có dung lượng tương đương 450MB. Rồi chọn lệnh Delete Partition (xóa phân vùng).
6. Sau khi xóa, sẽ hiện ra một phân vùng Unallocated. Chuột phải vào phân vùng đó, và chọn Merge Partitions (gộp phân vùng).
7. Chọn phân vùng C: và Unallocated, sau đó nhấp OK.
8. Tiếp theo bấm nút Apply ở phía góc trên bên trái rồi chọn Proceed.
9. Lúc này chương trình sẽ yêu cầu người dùng Restart lại máy tính. Bạn cứ việc chọn Yes và để chương trình thực thi trong vòng 10~15'.
10. Vậy là xong! Theo kết quả (ở đây do mình tìm được 2 phân vùng ẩn nên gộp hết vào) sau khi làm, mình có tổng cộng 119GB. Thật tuyệt vời đúng không?

Chúc các bạn thành công!

Chúc các bạn thành công với những kiến thức chia sẽ đầy thú vị.
   Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

• Hộp thử Test Html/JavaScript

Người viết: Nguyễn Đạt Khánh

Read More

Chèn bài viết liên quan ngay dưới tiêu đề bài cho blogger/ Blogspot

Việc chèn bài viết có liên quan vào trong Web/Blog thì cái nào mà không có. Đó là điều hữu ích cho cả Admin và độc giả. Tuy nhiên, cách cho xuất hiện thường là ở cuối bài viết, hoặc chân trang. Mình tìm được mà Code nầy và có cải tiến lại vài chổ nhầm chia sẽ lại cùng các bạn sử dụng. 

DEMO:

http://tinhockhanhdat14.blogspot.com/2017/07/cac-van-e-thuong-gap-khi-dung-may.html

Các bước thực hiện đơn giản như sau:

Bước 1: Chèn mã code Css sau lên trước thẻ  ]]></b:skin>

.post-ads{padding-top:0}
.post-ads{float:left;margin:0 10px 10px 0;position:relative}
@media(max-width:600px){.post-ads{width:100%}.post-right{margin-left:0!important;width:100%;float:left}}
.post-body img{transition:all.3s;max-width:650px}
.post-right{margin:0 0 0 310px;padding:0 0 10px} p.post-excerpt{overflow:hidden;margin:10px 0 10px 0;padding:10px;background-color:#f5f5f5;border:0 solid #eee;box-shadow:0 0 0 0 #B5B5B5;font-size:17px;line-height:1.5em}
#related-posts1{margin:10px 0}
#related-posts1 ul li{list-style-type:none;color:#0053f9;font-size:16px;line-height:22px;max-height:22px;overflow:hidden}
#related-posts1 ul li a{color:#0053f9}
#related-posts1 ul li a:hover{color:#ff0000}
#related-posts1 ul li a:before{content:"\f046";font-family:'FontAwesome';padding-right:5px}
#related-posts1 h4{color:#E74C3C;border-bottom:1px dashed#E74C3C;font-size:18px;margin-bottom:5px}
#related-posts1 ul{margin-left:0}
#related-posts1.fa{margin-right:5px}
#random-posts img{border-radius:1000px;border:5px solid;color:#dddddd;float:left;margin-right:5px;width:75px;height:75px;background-color:#F5F5F5;padding:3px;transition:all 0.2s linear 0s}

Bước 2: Thêm JavaScript lên trên thẻ </head> 

<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ước 3: Tìm đến hàng lệnh <div class='post-header-line-1'/> bằng cách nhấn tổ hợp phím Ctrl+F và dán code sau xuống phía dưới nó:  

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='qc-header-post'> <div class='post-ads'> Dán quảng cáo của bạn ở đây </div> <div class='post-right'> <p class='post-excerpt'> <data:post.snippet/> </p> <b:if cond='data:blog.pageType == &quot;item&quot;'> &lt;blockquote class=&quot;tr_bq&quot; style=&quot;background-color: #d0e0e3; border-left-style: solid; border-left-width: 6px; border-radius: 3px; box-shadow: rgb(171, 171, 171) 0pt 0pt 14px; font-family: cuprum; font-size: 15.4px; line-height: 21.56px; padding: 8px 9px;&quot;&gt; <div id='related-posts1'> <h4> <i class='fa fa-bullhorn'/> Bài viết liên quan:</h4> <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(&quot;<data:post.url/>&quot;);</script> </div> &lt;/blockquote&gt; </b:if> </div> </div> </b:if>

Cuối cùng các bạn Lưu mẫu lại và xem kết quả Blogspot. 
Lưu ý với các bạn: Khanhnguyen dùng thẻ Blokquote để thể hiện một bảng đóng khung cho việc xuất dữ liệu của các hàng lệnh. Thẻ Blokquote nầy được mả hóa và in hàng chữ đỏ trên khung Code mà bạn thấy. Nếu muốn thay đổi khung về màu sắc, size chữ, hay kiểu chữ hiển thị...đều được cả.
Chúc các bạn thành công !

Khanhnguyen' s Blog tổng hợp

Read More

6 Stylish recent post widgets thiết kế blogger - Blogspot

1- Mỡ Blogger, vào Layout, nhấn mỡ tiện ích Widget, chọn HTML/JavaScript

2- Chép Source Code của một trong các kiểu dưới đây dán vào phía trong khung HTML/JavaScript vừa tìm được
3- Save lại Widget mà bạn mới làm.

4- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

5- Save lại Widget mà bạn mới làm.

1. Recent posts with page navigation

Source Code:

<script type='text/javascript'>
var numfeed = 4;
var startfeed = 0;
var urlblog = "http://www.thebloggerguide.com/";
var charac = 50;
var urlprevious, urlnext;

function cyberghost(ghost, banget) {
  var showfeed = ghost.split("<");
  for (var i = 0; i < showfeed.length; i++) {
    if (showfeed[i].indexOf(">") != -1) {
      showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
    }
  }
  showfeed = showfeed.join("");
  showfeed = showfeed.substring(0, banget - 1);
  return showfeed;
}

function showterbaru(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var showblogfeed = "";
  urlprevious = "";
  urlnext = "";
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      urlnext = json.feed.link[k].href;
    }
  }
  for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) {
      break;
    }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = "http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";
    }
    showblogfeed += "<div class='cg-elemen'>";
    showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + cyberghost(postcontent, charac) + "...</p>";
    showblogfeed += "</div>";
  }
  document.getElementById("terbaru").innerHTML = showblogfeed;
  showblogfeed = "";
  if (urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
  } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
  }
  if (urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
  } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
  }
  showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
  document.getElementById("cg-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url) {
  var p, parameter;
  if (url == -1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
  } else if (url == 1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
  } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
  }
  parameter += "&callback=showterbaru";
  incluirscript(parameter);
}

function incluirscript(parameter) {
  if (startfeed == 1) {
    removerscript();
  }
  document.getElementById("terbaru").innerHTML = "<div id='cg-loading'></div>";
  document.getElementById("cg-navigasifeed").innerHTML = "";
  var archievefeed = urlblog + "/feeds/posts/default" + parameter;
  var terbaru = document.createElement('script');
  terbaru.setAttribute('type', 'text/javascript');
  terbaru.setAttribute('src', archievefeed);
  terbaru.setAttribute('id', 'MASLABEL');
  document.getElementsByTagName('head')[0].appendChild(terbaru);
  startfeed = 1;
}

function removerscript() {
  var elemen = document.getElementById("MASLABEL");
  var parent = elemen.parentNode;
  parent.removeChild(elemen);
}
onload = function() {
  navigasifeed(0);
}
</script>
<style>
/*Recent Post Navigation*/
a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.terbaru-container {
  background: #fff;
  width: 320px;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
}

#cg-terbaru {
  border: 1px solid #585858;
  width: 100%;
  margin: 0 auto;
}

#terbaru {
  margin: 0px;
}

.cg-elemen {
  margin: 5px 0;
  padding: 5px;
  height: 79px;
  background: #FFF url("http://smruthycollege.com/images/shadow2.png") no-repeat scroll center bottom;
overflow: hidden;
  padding-bottom: 20px;
}

.cg-elemen img {
  padding: 0;
  float: left;
  height: 70px;
  margin-right: 15px;
  width: 70px;
}

.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 14px!important;
  font-weight: 500;
  margin: 0;
  color: #222;
  font-family:'Oswald';
  line-height: 18px;
  text-transform: uppercase;
  text-aligaln:'center';
}

.cg-elemen p {
  font-size: 12px;
  font-family: 'Oswald';
  text-align: left;
  color: #555;
  line-height: normal;
  margin: 5px 0;
}

#cg-loading {
  color: #888;
  font-family: inherit;
  font-size: 100px;
  letter-spacing: -10px;
  text-align: center;
  text-shadow: -5px 0 1px #444;
  background: #fff url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;
  height: 470px;
}

#cg-navigasifeed {
  color: #bbb;
  font-family: Oswald;
  font-size: 12px;
  text-align: center;
  margin: 0px;
}

#cg-navigasifeed a {
  color: #141414!important;
  font-family: inherit!important;
  font-size: 12px!important;
  font-weight: 400!important;
  display: block;
  padding: 5px 10px;
}

#cg-navigasifeed span {
  padding: 5px 10px;
}

#cg-navigasifeed .next {
  float: right;
}

#cg-navigasifeed .previous {
  float: left;
}

#cg-navigasifeed .home {
  text-align: center;
}

#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived {
  color: transparant!important;
}
@media screen and (max-width:700px) {
    .terbaru-container, #terbaru, #cg-navigasifeed {
        width:auto;
    }
}


@media screen and (max-width:300px) {
    .cg-elemen img {
        display:none;
    }
}


Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
Cari 

</style>
<div class="terbaru-container">
    <div id="terbaru"></div>
    <div id="cg-navigasifeed"></div>
  </div>

2. Slider Recent Post

Source Code:

<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.thebloggerguide.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>


<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="wrapper">
<div id="featuredpost"></div>
</div>

3. Gallery Recent Post

Source Code:

<style>
/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

4. Recent posts without thumbnails

Source Code:

<style type='text/css'>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style><script style='text/javascript' src='https://googledrive.com/host/0BzPgmXeCwsMRSGw0WUl4blJ3NmM'></script><script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var displaymore = true;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

5. Recent posts widget by label

Source Code:

<style>
/*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTkVkzQTlhyphenhyphenEHIjQIWot7u1uMpBehm-6WbnkV3rKSj02sBLfig4utwGTBqgwo1tyYc0Dh-pdtWUdA_QfDjrSVfWCl0qR0wPfUZXVk-FcIUSq_tcQxQ-eBizo089XV7Mt0X1qqC3b2V6iGM/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

<script>
document.write("<script src=\"http://www.thebloggerguide.com/feeds/posts/default/-/Widget?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

6. Colorful latest posts widget

Source Code:

<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:#333;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5EbzJo_5bEJKpH4odmd-b6ho1rUoWt97-EnxBeqmeVzCxjEpMDeZUaT6tiYmYa6C0SE13cI4IjvYIRhghFdkTesXvhVLH-naygeuEW30GKMFHMcb0iTd0bwxuwbt1yhW5B9XhclH0TLM/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:0;
padding:8px;
background-color:white;
border-bottom:1px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 10px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:normal normal 12px/normal Oswald;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#ffffff;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://www.thebloggerguide.com/",
    rp_numPosts = 5,
    rp_thumbWidth = 50,
    rp_numChars = 80,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAwwQp-5L93lwjRYjcqM9u22VrDuhe6GVDOr9g-DcWTCzzl3a_sj7efktNabWjaCfZCaGiRjWELaxlZrLICrq9IiMlEl6IUWEUhFTr8we6XfzcaSQmJvTn0dWr5qG0583th-whl6fPl8/s1600/minismallest-img.png",
    rp_newTabLink = false,
    rp_loadTimer = "onload";
//]]>
</script>
<script src='https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js' type='text/JavaScript'></script>

Chúc các bạn thành công với những gì mà Khanhnguyen's Blog chia sẽ lại từ thebloggerguide.com

Tổng hợp và chia sẽ: Khánh Nguyễn

Read More