Quảng Cáo/ Thông Báo của lớp báo k32

Tổng số Khách

Thứ Tư, 21 tháng 8, 2013

Bài viết mới và comment mới nhất cho blogspot

Hôm nay mình Viettin365 sẽ hướng dẫn cách để các bạn tao tiện ích các bài đăng mới nhất (Recent Posts) hay các bài nhận xét mới nhất (Recent Posts). Với thủ thuật này các bài đăng hay những nhận xét mới nhất trên blog của bạn sẽ được tóm tắt ngắn gọn lại để giúp cho đọc giả dễ dàng xem bài hơn.

» Các bước để thực hiện để thêm bài viết mới nhất cho blogger!

Hình ảnh minh họa
1. Đăng nhập vào blog
2. Vào bố cục (Lay out).
3.  Tạo một HTML/Javascript và dán code bên dưới vào:
<script>
//<![CDATA[
// ----------------------------------------
// SHOW RECENT POSTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 2.0
// Date: 2006-12-01
// Author: Hans Oosting
// URL: beautifulbeta.blogspot.com
// Share: http://viettin365.com/
// ----------------------------------------
//Modified by http://www.bloggerplugins.org
function showrecentposts(json) {

for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");

document.write("<li>"+posttitle+"</li>");
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {

if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
document.write('</i>');}
}}}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5; // số bài bạn muốn hiển thị
var showpostdate = true; // nếu không muốn hiển thị ngày đăng bạn thay TRUE thành FALSE
var showpostsummary = true;
var numchars = 100; // số từ tóm tắt nội dung bài viết
</script>
<script src='http://viettin365.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
4. Lưu tiện ích lại và Oke.

» Các bước để thực hiện để thêm nhận xét mới nhất cho blogger!

Hình ảnh minh họa
Comment mới nhất cho blogspot
1. Đăng nhập vào blog
2. Vào bố cục (Lay out).
3.  Tạo một HTML/Javascript và dán code bên dưới vào:
<script>
//<![CDATA[
//Recent Comments Widget originally by Blogger Templates and updated by Blogger Widgets
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}}
//]]>
</script>
<script style='text/javascript'>
var a_rc=5; // số bài nhận xét bạn muốn hiển thị
var m_rc=true; // nếu không muốn hiển thị ngày đăng bạn thay TRUE thành FALSE
var n_rc=false;
var o_rc=100; // số từ tóm tắt nội dung comment
</script>
<script src='http://viettin365.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>
4. Lưu tiện ích lại và Oke.

» Tùy chỉnh code!

Bạn hãy thay code màu đỏ http://viettin365.com/ thành địa chỉ blog của bạn.
Chúc bạn thành công

Thứ Ba, 6 tháng 8, 2013

Slider bài viết mới nhất trượt ngang cho blogger








Bài viết mới nhất dạng thanh trượt ngang là một cách tốt để hiển thị bài viết gần đây của bạn dưới dạng một slide show. Bạn có thể nhìn thấy thanh trượt như vậy trong nhiều blog wordpress, nhưng với blogger nó không có nhiều người biết để áp dụng. Thủ thuật này được chia sẻ bởi Abu-Farhan và thêm một số code củahelperblogger Và được mình chỉnh cho phù hợp với vlogger. Nếu bạn nghĩ rằng tùy biến rất khó thì bạn đã sai, tiện ích này rất dễ dàng tùy biến và thêm vào blog. Bạn không cần phải thêm hình ảnh, văn bản hoặc bất kỳ liên kết nào như các slider khác, tất cả là tự động.

Làm thế nào để Thêm Recnet post slider này vào Blogger?

Bước 1: Thêm CSS và Thêm JavaScript

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán đoạn code sau đây vào trước thẻ ]]></b:skin>
#slide-container {
height: 360px;
position: relative;
width: 480px;
}

#slider {
height: 360px;
left: 25px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 480px;
font-family: calibri;
}

.slide-desc {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitRwqvrlGmIALgVlZcEVrfKcScqZHUiToSK88d2pvOqOpfXnRMmAvyImVtmOgbykCSiDn6XgXHfZ1ykuk9yksLewUVXtLysUt2csLEH6v8olm7at8birct7dbyq1BE1CaLDbi2ima_mWk/s1600/darkbg-namkna.png) repeat scroll 0 0;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0px;
text-align: left;
top: 0;
width: 200px;
z-index: 99999;
}

.slide-desc h2 {
display: block;
}

.crosscol .widget-content {
position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
margin: 0;
padding: 0;
list-style: none;
}

#slider2 {
margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
width: 480px;
height: 360px;
overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
display: block;
width: 30px;
height: 77px;
position: absolute;
left: -30px;
text-indent: -9999px;
top: 71px;
z-index: 1000;
}

#nextBtn, #slider1next {
left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
display: block;
height: 77px;
left: 0;
position: absolute;
top: 132px;
width: 30px;
z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVqiueSiombVC5nNVqZMJxoo-ghjgt8SIYbqSv8-LFl9l1FLgigkrkkg-voRXKGav9EDW6V8SWsicT51FcVoQr0CRY6IIOoB7k9u83lnRAWZbaEvusj6jDbtcHidg8WMtgEAYiVBAAyCk/s1600/prev-namkna-blogspot.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-d6W9Fm4Nv_kj4eswHd2Ls2NgrUiFI3TWl3oaBAzufUY137EvND0_ZkaZlhQYuU7WC5cDQZDoJAXleVgndEGt-ZxOsHa_YQbbMv3gn0fRyW8o5KJRxfSl6QDnadf-L-edBZd5YxF640/s1600/next-namkna.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
margin: 1em 0;
padding: 0;
height: 28px;
}

ol#controls li {
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
line-height: 28px;
}

ol#controls li a {
float: left;
height: 28px;
line-height: 28px;
border: 1px solid #ccc;
background: #DAF3F8;
color: #555;
padding: 0 10px;
text-decoration: none;
}

ol#controls li.current a {
background: #5DC9E1;
color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
outline: none;
}
- Bạn có thể chỉnh sửa các giá trị CSS ở trên  như ý bạn. Bạn có thể sử dụng HTML Editor để xem trước trực tiếp và thay đổi theo ý của bạn (Lưu ý - Nếu bạn đang chỉnh sửa tiện ích này trong HTML Editor  đó có thêm đồng thời cả ba mã trong trình soạn thảo).
5 - Thêm vào mã dưới đây ngay sau thẻ </ body>. 
<!-- Start easy content slider by helperblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- End easy content slider by helperblogger.com -->
- Nếu blog của bạn đã có file JQuery rồi thì xóa đoạn màu xanh đi.
6. Lưu mẫu lại.

Bước 2: Thêm tiện ích slider.

1- Vào Bố cục (Layout)
2- Chọn thêm tiện ích (Add gadget) => Tạo một HTML/Javarscipt và dán code bên dưới vào.
<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://viettin365.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Trong đó:
Thay http://viettin365.com/ thành URL blog của bạn.
var numposts_gal = 6; thành số lượng bài sẽ xuất hiện trong tiện ích.
var numchars_gal = 150; là số lượng ký tự mô tả.
Nếu muốn hiển thị ngẫu nhiên thì thay  var random_posts = false; thành true.
3- Lưu tiện ích lại.

Widget#2

Widget#5

Widget#4

primaryBottomSidebar

Footerpages

Trang

Bottom Navi

Được tạo bởi Blogger.

Người theo dõi

TIÊU ĐIỂM