Kết hợp tab và rss[✔]

[Eagle8x]

Nguyên tắc hoạt động khá đơn giản, đó là sự kết hợp của code tab và code hiện rss từ trang feedburner.
Ứng dụng hữu hiệu cho phpbb3 khi mà ko thể can thiệp tùy chỉnh template.
Do là sự kết hợp nên sẽ có 2 phần để thực hiện:
PHẦN 1: Tạo feed cho forum
Link feed của forum sẽ có dạng http://linkforum/feed/?f=xx , với xx là số của forum tương ứng, ví dụ http://diendan.chinhphuc.info/feed/?f=6. Copy link đó.
Vào feedburner.com , có thể log in bằng account google, dán link feed đó, tạo mới. Mấy bước này rất đơn giản nên thiết nghĩ ko cần hình ảnh minh họa làm gì hé. Đặt tên cho feed mới nên ngắn gọn dễ hiểu.
Sau đó vào Publicize Buzzboost Tùy chỉnh rồi click active.
Theo như cp thì tùy chỉnh bỏ tiêu đề, thêm tên tác giả, số bài là 5 - 7, có hiện ngày và bỏ chọn phần hiện nội dung bài viết.
Xong rồi thì copy đoạn code có được. Đoạn code giống giống như sau:

Code:

<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>

Nâng cao:
Nếu chỉ đơn thuần chép đoạn code đó vào thì nó sẽ hiện dạng:
Tên tiêu đề
Tác giả
Ngày có bài viết sau cùng
Để được như cp thì cần thêm thắt về css 1 chút. Và thật may mắn chúng ta có 1 admin rất giỏi trong việc này - kalenv. Các bạn thêm đoạn code như sau:

Code:

<style>
.headline {font-size: 0.8em;}
.feedItemAuthor:before {content: url(http://i24.servimg.com/u/f24/12/24/45/65/user110.gif);}
.date:before  {content: url(http://2img.net/i/fa/admin/icones/small_ico/html.png);}
#creditfooter {display:none;}
p.feedItemAuthor, p.date {display:inline!important; font-size:10px!important}
.headline {float:left; display:block; width:60%; text-alight:left}
p.feedItemAuthor{float:right}
.feedburnerFeedBlock li {display: block; width:100%; height:33px}
</style>

> Giải thích: cập nhật sau

Vậy là xong, mình đã có phần nội dung cần thiết.

PHẦN 2: Code tab
Cái này thì tùy à vì có rất nhiều công cụ để làm, ví dụ lên dynamicdrive, gõ tìm tab là ra 1 đống. Ở đây chinhphuc.info dùng jQuery vì thấy nó sẵn có và hiệu ứng cũng đẹp nữa.
Bước 1:
Tạo 1 file .txt hay .js có nội dung sau:

Code:

$(document).ready(function() {

   //When page loads...
   $(".tab_content").hide(); /<BÀI VIẾT NÀY KHÔNG BỊ ẨN> all content
   $("ul.tabs li:first").addClass("active").show(); //Activate first tab
   $(".tab_content:first").show(); //Show first tab content

   //On Click Event
   $("ul.tabs li").click(function() {

      $("ul.tabs li").removeClass("active"); //Remove any "active" class
      $(this).addClass("active"); //Add "active" class to selected tab
      $(".tab_content").hide(); /<BÀI VIẾT NÀY KHÔNG BỊ ẨN> all tab content

      var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
      $(activeTab).fadeIn(); //Fade in the active ID content
      return false;
   });

});

Bước 2: Upload lên host cho lấy direct link, dùng googlecode hoặc fileave hoặc fileden (riêng fileden thì phải là dạng txt)

Bước 3: Dán nguyên đoạn code sau vào vị trí cần hiển thị, cụ thể là homepage message cho phpBB3

Code:


<style>
ul.tabs {
   margin: 0;
   padding: 0;
   float: left;
   list-style: none;
   height: 32px; /*--Set height of tabs--*/
   border-bottom: 1px solid #999;
   border-left: 1px solid #999;
   width: 100%;
}
ul.tabs li {
   float: left;
   margin: 0;
   padding: 0;
   height: 31px; /*--Subtract 1px from the height of the unordered list--*/
   line-height: 31px; /*--Vertically aligns the text within the tab--*/
   border: 1px solid #999;
   border-left: none;
   margin-bottom: -1px; /*--Pull the list item down 1px--*/
   overflow: hidden;
   position: relative;
   background: #e0e0e0;
}
ul.tabs li a {
   text-decoration: none;
   color: #000;
   display: block;
   font-size: 1.2em;
   padding: 0 20px;
   border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
   outline: none;
}
ul.tabs li a:hover {
   background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
   background: #fff;
   border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
   border: 1px solid #999;
   border-top: none;
   overflow: hidden;
   clear: both;
   float: left; width: 100%;
   background: #fff;
}
.tab_content {
   padding: 20px;
   font-size: 1.2em;
}
</style>
<script src="Link js hay txt mới upload"></script>
<ul class="tabs">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
<li><a href="#tab4">tab4</a></li>
<li><a href="#tab5">tab5</a></li>
</ul><div class="tab_container">
    <div id="tab1" class="tab_content">
Nội dung 1
    </div>
    <div id="tab2" class="tab_content">
Nội dung 2
    </div>
    <div id="tab3" class="tab_content">
Nội dung 3
    </div>
 <div id="tab4" class="tab_content">
Nội dung 4
    </div>
 <div id="tab5" class="tab_content">
Nội dung 5
    </div>
</div>

Nếu muốn thêm tab thì cứ thêm y vậy thay bằng tab6 tab7 tab8 gì đó
Thay nội dung bằng các đoạn script ở Phần 1.

Viết bởi Eagle8x

[bluehnvn]

Tem tem gấp,... thanks EX

[baivong]

Bổ sung feed bài viết mới http://cfviet.co.cc/feed/?type=atom

[Bo Lùn™]

Tem tem gấp,... thanks EX

EA chứ hum phải EX nha. Cote cho Anh ea nè

[bluehnvn]

EA ok..
Cái đoạn này dán vào đâu ở code cuối cùng EA ơi?

Code:

<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>

[bluehnvn]

không được, vẫn bị tách rời mà nó không gộp lại được, lỗi do đâu mấy bạn ơi??
thí dụ code như sau:

Code:

<style>
ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px; /*--Set height of tabs--*/
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  width: 100%;
}
ul.tabs li {
  float: left;
  margin: 0;
  padding: 0;
  height: 31px; /*--Subtract 1px from the height of the unordered list--*/
  line-height: 31px; /*--Vertically aligns the text within the tab--*/
  border: 1px solid #999;
  border-left: none;
  margin-bottom: -1px; /*--Pull the list item down 1px--*/
  overflow: hidden;
  position: relative;
  background: #e0e0e0;
}
ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 1.2em;
  padding: 0 20px;
  border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
  outline: none;
}
ul.tabs li a:hover {
  background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
  background: #fff;
  border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
  border: 1px solid #999;
  border-top: none;
  overflow: hidden;
  clear: both;
  float: left; width: 100%;
  background: #fff;
}
.tab_content {
  padding: 20px;
  font-size: 1.2em;
}
</style>
<script src="http://bluehnvn.googlecode.com/files/jsTABrss.js"></script>
<ul class="tabs">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
<li><a href="#tab4">tab4</a></li>
<li><a href="#tab5">tab5</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>
    </div>
    <div id="tab2" class="tab_content">
<script src="http://feeds.feedburner.com/QuanGame?format=sigpro" type="text/javascript" ></script>
    </div>
    <div id="tab3" class="tab_content">
<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>
    </div>
 <div id="tab4" class="tab_content">
<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>
    </div>
 <div id="tab5" class="tab_content">
<script src="http://feeds.feedburner.com/QuanGame?format=sigpro" type="text/javascript" ></script>
    </div>
</div>

[vietnam_tnd]

cái tab này dùng cho phpbb2 được không vậy Ae hay chỉ dành cho phpbb3??? sao mình làm cho phpbb2 taonf bị lỗi không gôm được mà nó hiện ra hết ý không gộp vào tab

[ligerv]

không được, vẫn bị tách rời mà nó không gộp lại được, lỗi do đâu mấy bạn ơi??
thí dụ code như sau:

Code:

<style>
ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px; /*--Set height of tabs--*/
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  width: 100%;
}
ul.tabs li {
  float: left;
  margin: 0;
  padding: 0;
  height: 31px; /*--Subtract 1px from the height of the unordered list--*/
  line-height: 31px; /*--Vertically aligns the text within the tab--*/
  border: 1px solid #999;
  border-left: none;
  margin-bottom: -1px; /*--Pull the list item down 1px--*/
  overflow: hidden;
  position: relative;
  background: #e0e0e0;
}
ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 1.2em;
  padding: 0 20px;
  border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
  outline: none;
}
ul.tabs li a:hover {
  background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
  background: #fff;
  border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
  border: 1px solid #999;
  border-top: none;
  overflow: hidden;
  clear: both;
  float: left; width: 100%;
  background: #fff;
}
.tab_content {
  padding: 20px;
  font-size: 1.2em;
}
</style>
<script src="http://bluehnvn.googlecode.com/files/jsTABrss.js"></script>
<ul class="tabs">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
<li><a href="#tab4">tab4</a></li>
<li><a href="#tab5">tab5</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>
    </div>
    <div id="tab2" class="tab_content">
<script src="http://feeds.feedburner.com/QuanGame?format=sigpro" type="text/javascript" ></script>
    </div>
    <div id="tab3" class="tab_content">
<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>
    </div>
 <div id="tab4" class="tab_content">
<script src="http://feeds.feedburner.com/memshare?format=sigpro" type="text/javascript" ></script>
    </div>
 <div id="tab5" class="tab_content">
<script src="http://feeds.feedburner.com/QuanGame?format=sigpro" type="text/javascript" ></script>
    </div>
</div>

em chom cái file Js của Cp về xài luôn Bt mà anh

cái tab này dùng cho phpbb2 được không vậy Ae hay chỉ dành cho phpbb3??? sao mình làm cho phpbb2 taonf bị lỗi không gôm được mà nó hiện ra hết ý không gộp vào tab

bạn nói ro4xem lỗi j mõi ng moi biết chứ .của mình cũng là phpbb2 vẫn dung BT ma

[bluehnvn]

người gửi nó cứ dạng bậc thang mà không theo 1 cột

[vietnam_tnd]

mấy huy cho em hỏi em làm nó ra thế này là thế nào mấy huynh sửa cho em với
anh minh họa đây:

[Eagle8x]

cái tab này dùng cho phpbb2 được không vậy Ae hay chỉ dành cho phpbb3??? sao mình làm cho phpbb2 taonf bị lỗi không gôm được mà nó hiện ra hết ý không gộp vào tab

Được, nhưng phpbb2 thì chỉnh được latest topic ngang rồi thì cần dùng chi nữa em?

người gửi nó cứ dạng bậc thang mà không theo 1 cột

Anh xem lại khúc nói về css do kalenv giúp ấy, chép nguyên khúc đó vô nữa.

[bluehnvn]

người gửi nó cứ dạng bậc thang mà không theo 1 cột

Anh xem lại khúc nói về css do kalenv giúp ấy, chép nguyên khúc đó vô nữa.

Code:


<style>
.headline {font-size: 0.8em;}
.feedItemAuthor:before {content: url(http://i24.servimg.com/u/f24/12/24/45/65/user110.gif);}
.date:before  {content: url(http://2img.net/i/fa/admin/icones/small_ico/html.png);}
#creditfooter {display:none;}
p.feedItemAuthor, p.date {display:inline!important; font-size:10px!important}
.headline {float:left; display:block; width:60%; text-alight:left}
p.feedItemAuthor{float:right}
.feedburnerFeedBlock li {display: block; width:100%; height:33px}
</style>

em xem lại xem, anh chèn CSS này vào không thấy hiệu ứng gì thay đổi luôn . phiên bản anh cũng là phpbb2
- Chèn vào CSS cũng không được
- Chèn vào chỗ mình chèn cũng không được (vào indexbody chẳng hạn)

[bluehnvn]

bác admin giúp cái css cho phpbb2 của bài này với

[Eagle8x]

Css này dùng cho mọi phiên bản mà ta, bởi vì nó làm việc độc lập về phần hiển thị đối với FM?

[bluehnvn]

Css này dùng cho mọi phiên bản mà ta, bởi vì nó làm việc độc lập về phần hiển thị đối với FM?

Không làm được mà em, anh test trên cái forum demo thì phpbb3 ok, nhưng mà phpbb2 thì CSS để làm tác giả bài gửi theo cột ở bên phải nó không nhận. Em check lại mà xem

[Eagle8x]

Giờ anh thử thêm !important vào mỗi id và class xem sao. Nếu gây hỏng giao diện forum thì anh chịu khó tìm id và class từng cái trong template để...đổi tên bởi vì feedburners em ko biết cách thay các id và class trong css.

[bluehnvn]

Giờ anh thử thêm !important vào mỗi id và class xem sao. Nếu gây hỏng giao diện forum thì anh chịu khó tìm id và class từng cái trong template để...đổi tên bởi vì feedburners em ko biết cách thay các id và class trong css.

thanks em, nguyên nhân chính là tại cái ảnh trước author https://i.servimg.com/u/f24/12/24/45/65/user110.gif thôi mấy hnua rảnh chèn vào top bài viết mới là good nhất.

Có khi rảnh cũng phải gia cố thêm ít kiến thức css

[bluehnvn]

Spoiler:

Cuối cùng sau một đêm rảnh rỗi, mình đã hoàn thiện bản Rss/ Tuy không được như nhưng vs mình thế cũng good lắm rồi, cảm ơn chủ topic lần nữa nhé

Nhân tiện vào đây báo cáo cho ae nào muốn làm thì cứ làm như bài trên là ra hết. ae yên tâm chạy lúc đầu hơi lâu chút (chắc vì feed load nguồn từ forum gốc của chúng ta, sau khoảng vài tiếng thì nó lại trơn tru, và...) \\\\m/

[Eagle8x]

Hiện tại thì có rất nhiều code tab rất hữu dụng cho trường hợp này. cp đang dùng 1 loại tab khác chạy rất ổn định.

[bluehnvn]

Đúng là của pro hơn, xem nó load mà thích cả mắt, hnao rảnh chia sẻ cho ae luôn đi (giờ mà chia sẻ thì mấy bác tab kia tắt điện hết)

[mango]

làm sao để xóa cái logo rss ở góc trái bên dưới của khung vậy bạn. Mình làm xong chèn code nó cứ hiện lên 1 cái logo của rss

[baivong]

Đúng là của pro hơn, xem nó load mà thích cả mắt, hnao rảnh chia sẻ cho ae luôn đi (giờ mà chia sẻ thì mấy bác tab kia tắt điện hết)

Tùy thẫm mỹ từng người, bác khéo nói "n" wa đấy!

[bluehnvn]

làm sao để xóa cái logo rss ở góc trái bên dưới của khung vậy bạn. Mình làm xong chèn code nó cứ hiện lên 1 cái logo của rss

Đúng là của pro hơn, xem nó load mà thích cả mắt, hnao rảnh chia sẻ cho ae luôn đi (giờ mà chia sẻ thì mấy bác tab kia tắt điện hết)

Tùy thẫm mỹ từng người, bác khéo nói "n" wa đấy!

ko hiểu ý cậu, mình nói có 3 ý:
1: đã là list dạng như lasttopic thì ko có nội dung, chỉ có tiêu đề, cái này ok
2: Có ngày và có cả tên tác giả, cập nhật theo ngày comment
3. cp hay vì nó load từ trái sang phải, cảm giác thix mắt. nhanh nữa
bạn đưa lý do bảo vệ cái rss khác của bạn xem?

[hunghsmn]

Lẽ ra thì đây là bài trả lời chứ không phải chia sẻ. Mình thấy có bài hỏi về chuyện này, muốn đợi xem có ai có câu trả lời hay hơn thì mình học luôn. Nhưng xem ra ... chê thì có, nhưng hay hơn thì chưa thấy. Vậy thì trong khi chờ cái nào hay hơn, các bạn tham khảo cách mình làm nhé.

Các bạn!
Chuyện tạo các tap trên last topic để mỗi tap tự động cập nhật list bài viết mới nhất trong một box thì có thể làm được bằng

Code:

http://feedburner.google.com hoặc http://www.rsspump.com

.
Mình đang dùng rsspump.com nhưng bây giờ mình nói về feedburner.google.com vì nó có nhiều ưu điểm trội hơn hẳn rsspump.com

Chúng ta bắt đầu, mình cũng chưa áp dụng. Hôm nay mình vừa làm vừa nói tại chỗ luôn, mình biết đến đâu thì nói đến đó.

Đầu tiên mình phải nói trước là việc tạo ra các tap mới trên last topic mình coi như các bạn đã biết rồi nhé.

Bây giờ chúng ta dùng feedburner.google.com
Các bạn chạy chương trình này. Trong hộp thoại đầu tiên , tại Burn a feed right this instant. gõ vào :

Code:

http://link forum/?f=n ( trong đó n = số TT của box mà bạn định lập list bài viết mới)

. Các bạn chọn I am a podcaster! rồi cứ bấm next miết (hay chọn gì là tùy), ... cho đến hộp thoại giống như thế này:

Thì bấm vào tap Publicize (Các tap khac là gì thì từ từ mò sau, mình không biết tiếng Anh nên ngại mò lắm). Sau đó bấm BuzzBoost . Trong hộp thoại BuzzBoost thì các bạn chắc sẽ biết cách chọn hơn mình. Xong bấm active. Đến đây bạn cứ mò thảo mái. Mò, rồi save, xem thử. Không được thì mò tiếp ... Nhưng có một mục các bạn phải bỏ là Display item content.

Thấy thõa mãn rồi thì mang cái code đó cho cuối code này:

Code:

<style>
.headline {font-size: 1.2em;}
.feedItemAuthor:before {content: url(http://i24.servimg.com/u/f24/12/24/45/65/user110.gif);}
.date:before  {content: url(http://illiweb.com/fa/http://i24.servimg.com/u/f24/15/64/85/86/pito-i10.png/icones/small_ico/html.png);}
#creditfooter {display:none;}
p.feedItemAuthor, p.date {display:inline!important; font-size:12px!important}
</style>
Copy và paste code thu được vào đây

Vậy là xong rồi. Bây giờ chỉ còn việc mang code trên đây cho vào tap trong mod recent topic là được.
Từ nãy giờ vừa làm vừa nói, minh đã thu được kết quả này:



Hình như là chưa ổn phải không các bạn, còn thiếu số thứ tự ở đầu dòng. Cái này để mình đi làm chút đã, hơi mất công chỉnh cái ảnh STT với viết thêm một code nữa ... Chỉ cái này mệt lắm, đi làm dùm các bạn dễ hơn...

Rồi. Bây giờ các bạn mang toàn bộ code kết quả bên trên cho vô đây:

Code:

<Table  border ="0"  Width = "100%">
    <TR>
          <TD Width = "2%"  Align = "left" Valign = "top" background="http://i66.servimg.com/u/f66/14/26/60/46/stt0410.gif"></TD>
          <TD Width = "98%"  Align = "left" Valign = "top" bgcolor = "#FFFFFF">
CHO VÔ ĐÂY
          </TD>
      </TR>
</Table>

Mình vưa làm ra kết quả nè:


Hình như cũng chưa được, đã có STT thì bỏ dấu chấm đầu dòng đi. Chuyện này dễ ợt , các bạn tự sửa lai nhé.

[Sponsored content]