Hybrid News Dành Cho Blogger

Hybrid Theme là một trong wordpress framework đang được yêu thích trên internet bởi đó là theme cho phép các blogger thoải mái thiết kế các child theme theo phong cách của riêng mình. Hơn nữa, Hybrid là themes được thiết kế theo chuẩn CSS và XHTML và được tối ưu SEO. Có rất nhiều child theme đã ra đời dành cho Hybrid và một trong số đó phải kể đến Hybrid News.

Hybrid News là dạng Premium Themes dành cho các blog magazine mà blogviet khá thích. Tuy nhiên, do nhiều lý do mà blogviet chưa thể chuyển sang theme này được. Hơn thế nữa, nó được chia sẻ miễn phí cho tất cả blogger.

Nếu như WordPress có Hybrid News thì blogger cũng đã có bản clone khá hoàn hảo được chia sẻ miễn phí trên btemplates bởi freebloggertemplate.info. Điều ấn tượng của templates này là khả năng tích hợp slide feature cho các bài ấn tượng mà nhiều templates không có.

Cài đặt template này cũng không khác gì các templates khác, chỉ có điều phần Slide Feature thì cần mất mọt chút thời gian thì nó mới chạy như trang DEMO được. Tính năng thumbnail đã được tích hợp sẵn và tự hiển thị hình ảnh thumbnail khi trong bài viết có hình ảnh đính kèm.

Hướng dẫn hiệu chỉnh Hybrid News Templates:

Để hiệu chỉnh template, bạn đăng nhập vào blogger, tìm đến Edit HTML và chọn expand full templates:

1. Top Navigations (giống như Pages trong WordPress):

Tìm đến đoạn code sau rồi chỉnh sửa theo ý muốn các khu vực có màu sắc:

<ul class="menu sf-menu">
<li class="current_page_item"><a href="/">Home</a></li>
<li class="page_item"><a title="About" href="#">About</a></li>
<li class="page_item"><a title="Archives" href="#">Archives</a></li>
<li class="page_item"><a title="Blog" href="#">Blog</a></li>
<li class="page_item"><a title="Elements" href="#">Elements</a></li>
<li class="page_item"><a title="New menu" href="#">New Menu</a></li>
</ul>

2. Second Navigations (giống như Category trong WordPress):

Tìm đến đoạn code sau và hiệu chỉnh các mục có màu sắc khác nhau:

<ul class="menu sf-menu">
<li class="cat-item"><a title="Edit Title" href="#">Edit</a></li>
<li class="cat-item"><a title="Edit Title" href="#">Edit</a></li>
<li class="cat-item"><a title="Edit Title" href="#">Edit</a></li>
<li class="cat-item"><a title="Edit Title" href="#">Edit</a></li>
</ul>

3. Slide Feature [Tự động cập nhật hình ảnh và nội dụng như trong WordPress]

Lưu ý: Để cho tính năng này hoạt động tốt, blog của bạn phải có ít trên trên 2 bài viết đã đăng nhé. Nếu có ít hơn 2 bài thì nó sẽ không hoạt động đâu.

Tìm đến đoạn code có chứa địa chỉ feed của blog như sau:

http://iloveblogviet.blogspot.com/feeds/posts/default

Thay chữ iloveblogviet thành domain của bạn. Nếu bạn muốn hiển thị theo các label khác nhau thì dùng đường link có cấu trúc như sau:

http://iloveblogviet.blogspot.com/feeds/posts/default/-/yourbloglabel

Hiện nay chỉ có 2 script trong Slide Feature:

Script 1:

startposts = 0;
numposts = 1;
home_page = "http://iloveblogviet.blogspot.com/feeds/posts/default";

Script 2:

startposts = 1;
numposts = 2;
home_page = "http://iloveblogviet.blogspot.com/feeds/posts/default";

Đồng nghĩa chỉ có 2 bài thay nhau luân phiên. Nếu bạn muốn thêm nhiều hơn VD: 5 bài thì bạn chỉ cần thêm đoạn code sau:

<div class='feature'>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdY0vw7bM61-z2Zm_0zIqS5qZi5A8x8A2Ioq7UQ4jxepRQZ3DCLEM0Y6txP7L7ph6MKRxK3yi2IsDK1tQX2I7FvFoIkNuarcDRs1pajh_yjJtXoVC75QbcnX3lAO0LsqjiUfr6czzPyJLL/s1600/Have_Images_TEXT.png&quot;;
showRandomImg = true;
tablewidth = 560;
tableheight = 230;
cellspacing = 0;
borderColor = &quot;#0A3754&quot;;
bgTD = &quot; &quot;;
imgwidth = 230;
imgheight = 190;
fntsize = 18;
acolor = &quot;#fff&quot;;
aBold = true;
icon = &quot; &quot;;
text = &quot;Comments&quot;;
showPostDate = true;
summaryPost = 300;
summaryFontsize = 12;
summaryColor = &quot;#fff&quot;;
icon2 = &quot; &quot;;
startposts = 0;
numposts = 1;
home_page = &quot;http://iloveblogviet.blogspot.com/feeds/posts/default/-/Ki%E1%BA%BFm%20Ti%E1%BB%81n&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}

function showrecentposts(json) {
document.write('<table width="'+tablewidth+'" border=0 bordercolor="#FF0000" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'" align="center">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = startposts; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
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;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

cmtext = (text != 'no') ? '<i><font color="'+acolor+'">'+pcm+' '+text+'</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - '+day+ ' ' + m + ' ' + y + '</font></i>' : "";

posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;

var trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '<div style="color:'+summaryColor+'; margin-top:2px; border-top:1px '+borderColor+' solid; font-size:'+summaryFontsize+'px;">'+icon2+removeHtmlTag(postcontent,summaryPost)+'... <br /><br /><a href="'+posturl+'" class="more-link">More Link</a></div></td></tr>';

if(summaryPost == 0) { trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '</td></tr>'; }

document.write(trtd);

j++;
}

document.write('</table>');
}
document.write("<script src=\""+home_page+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

//]]>
</script>

</div>

Copy nó và chèn thêm 3 đoạn ngay dưới rồi thay các chỉ số sau theo thứ tự tăng dần:

startposts = 0;
numposts = 1;

Nếu là slide 3 thì các số sau sẽ tương ứng:

startposts = 2;
numposts = 3;

Các slide tiếp theo cứ tăng dẫn như ở trên. Sau khi đã thêm và hiệu chỉnh, các bạn nên Preview trước xem nó hoạt động ra sao trước khi Save Changes nhé.

Nếu đã ok thì coi như mọi thứ đã hoàn thành. Các bạn có thể xem DEMO thì vào blog dự phòng của mình tại đây và download tại đây. Bạn nào ngại hiệu chỉnh và muốn dùng luôn cái của mình thì cứ cho mình biết nhé.

Chúc thành công nhé.

Theo Blogviet.info